@kdcloudjs/kdesign 1.5.3 → 1.5.6

package/es/_utils/usePopper.js

@@ -219,6 +219,11 @@ function usePopper(locatorElement, popperElement, props) {
       visible = _useState10[0],
       setVisible = _useState10[1];
 
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      active = _useState12[0],
+      setActive = _useState12[1];
+
   useEffect(function () {
     if (props.visible) {
       !exist && setExist(true);
@@ -229,20 +234,20 @@ function usePopper(locatorElement, popperElement, props) {
     }
   }, [exist, props.visible]);
 
-  var _useState11 = useState(''),
-      _useState12 = _slicedToArray(_useState11, 2),
-      evType = _useState12[0],
-      setEvType = _useState12[1];
-
-  var _useState13 = useState(),
+  var _useState13 = useState(''),
       _useState14 = _slicedToArray(_useState13, 2),
-      align = _useState14[0],
-      setAlign = _useState14[1];
+      evType = _useState14[0],
+      setEvType = _useState14[1];
 
-  var _useState15 = useState(placement),
+  var _useState15 = useState(),
       _useState16 = _slicedToArray(_useState15, 2),
-      currentPlacement = _useState16[0],
-      setCurrentPlacement = _useState16[1];
+      align = _useState16[0],
+      setAlign = _useState16[1];
+
+  var _useState17 = useState(placement),
+      _useState18 = _slicedToArray(_useState17, 2),
+      nextPlacement = _useState18[0],
+      setNextPlacement = _useState18[1];
 
   var alignPopper = useCallback(function () {
     if ((locatorRef === null || locatorRef === void 0 ? void 0 : locatorRef.current) && (popperRef === null || popperRef === void 0 ? void 0 : popperRef.current)) {
@@ -287,39 +292,47 @@ function usePopper(locatorElement, popperElement, props) {
         bottom: locatorTop + borderTop + translateTop + height - containerTop - scrollTop
       };
       var currentPos = trigger === 'contextMenu' ? mousePos : locatorPos;
-      var _currentPlacement = placement;
+      var currentPlacement = nextPlacement;
 
       if (autoPlacement) {
         if (top - gap - popperHeight <= 5 && bottom + gap + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('top', 'bottom');
+          currentPlacement = currentPlacement.replace('top', 'bottom');
         }
 
         if (bottom + gap + popperHeight >= document.body.clientHeight - 5 && top - gap - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('bottom', 'top');
+          currentPlacement = currentPlacement.replace('bottom', 'top');
         }
 
         if (left + popperWidth >= document.body.clientWidth - 5 && right - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('Left', 'Right');
+          currentPlacement = currentPlacement.replace('Left', 'Right');
         }
 
         if (right - popperWidth <= 5 && left + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('Right', 'Left');
+          currentPlacement = currentPlacement.replace('Right', 'Left');
         }
 
         if (top + popperHeight >= document.body.clientHeight - 5 && bottom - popperHeight > 5) {
-          _currentPlacement = _currentPlacement.replace('Top', 'Bottom');
+          currentPlacement = currentPlacement.replace('Top', 'Bottom');
         }
 
         if (bottom - popperHeight <= 5 && top + popperHeight < document.body.clientHeight - 5) {
-          _currentPlacement = _currentPlacement.replace('Bottom', 'Top');
+          currentPlacement = currentPlacement.replace('Bottom', 'Top');
         }
 
         if (left - gap - popperWidth <= 5 && right + gap + popperWidth < document.body.clientWidth - 5) {
-          _currentPlacement = _currentPlacement.replace('left', 'right');
+          currentPlacement = currentPlacement.replace('left', 'right');
         }
 
         if (right + gap + popperWidth >= document.body.clientWidth - 5 && left - gap - popperWidth > 5) {
-          _currentPlacement = _currentPlacement.replace('right', 'left');
+          currentPlacement = currentPlacement.replace('right', 'left');
+        }
+
+        if (right - width / 2 + popperWidth / 2 >= document.body.clientWidth - 5 && right - popperWidth > 5) {
+          currentPlacement += 'Right';
+        }
+
+        if (left - width / 2 - popperWidth / 2 <= 5 && left + popperWidth < document.body.clientWidth - 5) {
+          currentPlacement += 'Left';
         }
       }
 
@@ -381,16 +394,16 @@ function usePopper(locatorElement, popperElement, props) {
           top: topBottom
         }
       };
-      var alignPos = mapAlign[_currentPlacement];
+      var alignPos = mapAlign[currentPlacement];
       var _arrowPos = {
         top: 0,
         left: 0
       };
 
-      if (/left/.test(_currentPlacement) || /right/.test(_currentPlacement)) {
-        if (/Top/.test(_currentPlacement)) {
+      if (/left/.test(currentPlacement) || /right/.test(currentPlacement)) {
+        if (/Top/.test(currentPlacement)) {
           _arrowPos.top = arrowOffset;
-        } else if (/Bottom/.test(_currentPlacement)) {
+        } else if (/Bottom/.test(currentPlacement)) {
           _arrowPos.top = popperHeight - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.top = (popperHeight - arrowWidth) / 2 - 1;
@@ -417,29 +430,40 @@ function usePopper(locatorElement, popperElement, props) {
             _arrowPos.top += scrollBottom - document.body.clientHeight;
           }
         }
-      }
-
-      if (/top/.test(_currentPlacement) || /bottom/.test(_currentPlacement)) {
-        if (/Left/.test(_currentPlacement)) {
+      } else if (/top/.test(currentPlacement) || /bottom/.test(currentPlacement)) {
+        if (/Left/.test(currentPlacement)) {
           _arrowPos.left = arrowOffset;
-        } else if (/Right/.test(_currentPlacement)) {
+        } else if (/Right/.test(currentPlacement)) {
           _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
         } else {
           _arrowPos.left = (popperWidth - arrowWidth) / 2 - 1;
         }
+
+        if (left <= 0) {
+          alignPos.left = locatorPos.left;
+          _arrowPos.left = arrowOffset;
+        } else if (right >= document.body.clientWidth) {
+          alignPos.left = locatorPos.right - popperWidth;
+          alignPos.right = -360;
+          _arrowPos.left = popperWidth - arrowOffset - 2 * arrowSize;
+        }
       }
 
       setAlign(alignPos);
       setArrowPos(_arrowPos);
-      setCurrentPlacement(_currentPlacement);
+      setNextPlacement(currentPlacement);
     }
-  }, [locatorRef, popperRef, container, trigger, mousePos, placement, gap, arrowOffset, arrowSize, arrowWidth, autoPlacement]);
+  }, [locatorRef, popperRef, container, trigger, mousePos, autoPlacement, gap, arrowOffset, arrowSize, arrowWidth]);
   useEffect(function () {
     if (canAlign) {
       alignPopper();
       setCanAlign(false);
       props.visible === undefined && setVisible(true);
       onVisibleChange && onVisibleChange(true);
+      setActive(true);
+      setTimeout(function () {
+        return setActive(false);
+      }, 200);
     }
   }, [alignPopper, canAlign, onVisibleChange, props]);
   var arrowStyle = (_arrowStyle = {}, _defineProperty(_arrowStyle, "--arrowSize", arrowSize + 'px'), _defineProperty(_arrowStyle, "--arrowSpill", arrowWidth / -2 + 'px'), _arrowStyle);
@@ -453,10 +477,10 @@ function usePopper(locatorElement, popperElement, props) {
   var popperProps = {
     ref: popperRef,
     style: popperContainerStyle,
-    className: classNames(prefixCls, popperClassName, currentPlacement, _defineProperty({
+    className: classNames(prefixCls, popperClassName, nextPlacement, _defineProperty({
       arrow: arrow,
       hidden: !visible
-    }, "".concat(currentPlacement, "-active"), visible))
+    }, "".concat(nextPlacement, "-active"), active))
   };
   var popperNode = popperRef.current;
   var locatorNode = locatorRef.current;
@@ -486,6 +510,11 @@ function usePopper(locatorElement, popperElement, props) {
     props.visible === undefined && setVisible(false);
     onVisibleChange && onVisibleChange(false);
   }, [onVisibleChange, props.visible]);
+
+  var matchTrigger = function matchTrigger(words) {
+    return Array.isArray(trigger) ? _includesInstanceProperty(trigger).call(trigger, words) : trigger === words;
+  };
+
   useEffect(function () {
     if (exist && visible) {
       var mouseleaveTimer;
@@ -494,21 +523,21 @@ function usePopper(locatorElement, popperElement, props) {
         var triggerNode = getTriggerElement(locatorRef.current);
         var triggerRect = triggerNode.getBoundingClientRect();
         var popperRect = popperRef.current.getBoundingClientRect();
-        var left = /left/.test(currentPlacement) ? popperRect.right : triggerRect.left;
-        var right = /right/.test(currentPlacement) ? popperRect.left : triggerRect.right;
-        var top = /top/.test(currentPlacement) ? popperRect.bottom : triggerRect.top;
-        var bottom = /bottom/.test(currentPlacement) ? popperRect.top : triggerRect.bottom;
+        var left = /left/.test(nextPlacement) ? popperRect.right : triggerRect.left;
+        var right = /right/.test(nextPlacement) ? popperRect.left : triggerRect.right;
+        var top = /top/.test(nextPlacement) ? popperRect.bottom : triggerRect.top;
+        var bottom = /bottom/.test(nextPlacement) ? popperRect.top : triggerRect.bottom;
         var X = e.clientX,
             Y = e.clientY;
         var inTriggerRect = X > left - 2 && X < right + 2 && Y > top - 2 && Y < bottom + 2;
         var inPopperRect = X > popperRect.left && X < popperRect.right && Y > popperRect.top && Y < popperRect.bottom;
-        var ableArea = evType === 'contextmenu' ? inPopperRect : inTriggerRect || inPopperRect;
+        var ableArea = matchTrigger('contextMenu') ? inPopperRect : inTriggerRect || inPopperRect;
 
         if (ableArea) {
           mouseleaveTimer && clearTimeout(mouseleaveTimer);
-          evType === 'focus' && triggerNode.focus();
+          matchTrigger('focus') && triggerNode.focus();
         } else {
-          evType === 'mouseenter' ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
+          matchTrigger('hover') ? mouseleaveTimer = window.setTimeout(hidePopper, mouseLeaveDelay * 1000) : hidePopper();
         }
       };
 
@@ -516,17 +545,21 @@ function usePopper(locatorElement, popperElement, props) {
         leading: true
       });
       var mapEvent = {
-        mouseenter: 'mousemove',
-        mouseup: 'mousedown',
+        hover: 'mousemove',
+        click: 'mousedown',
         focus: 'mousedown',
-        contextmenu: 'mousedown'
+        contextMenu: 'mousedown'
       };
-      document.addEventListener(mapEvent[evType], debounceHidePopper);
+      Array.isArray(trigger) ? trigger.forEach(function (action) {
+        return document.addEventListener(mapEvent[action], debounceHidePopper);
+      }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);
       return function () {
-        document.removeEventListener(mapEvent[evType], debounceHidePopper);
+        Array.isArray(trigger) ? trigger.forEach(function (action) {
+          return document.removeEventListener(mapEvent[action], debounceHidePopper);
+        }) : document.removeEventListener(mapEvent[trigger], debounceHidePopper);
       };
     }
-  }, [currentPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
+  }, [nextPlacement, evType, exist, getTriggerElement, hidePopper, locatorRef, mouseLeaveDelay, popperRef, visible]);
   useEffect(function () {
     if (visible) {
       var scrollAlign = debounce(function (e) {

package/es/alert/alert.js

@@ -180,12 +180,12 @@ var Alert = function Alert(props) {
   };
 
   var iconNode = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(alertPrefixCls, "-icon")
+    className: classNames("".concat(alertPrefixCls, "-icon"), getAlertColorType('icon'))
   }, icon || /*#__PURE__*/React.createElement(Icon, {
     type: alertIconType
   }));
   var AlertComp = /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(alertClasses, getAlertColorType('bg'), getAlertColorType('font'))
+    className: classNames(alertClasses, getAlertColorType('bg'), getAlertColorType('border'))
   }, events, {
     ref: alertRef
   }), showIcon && iconNode, /*#__PURE__*/React.createElement("div", {

package/es/alert/style/index.css

@@ -109,12 +109,14 @@
   z-index: var(--kd-g-z-index-apex, 9999);
   display: none;
   width: 100%;
-  padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px);
+  padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transition: display 3s;
   transition: display 3s;
+  border-radius: var(--kd-c-alert-radius-border, 4px);
+  border: 1px solid;
 }
 .kd-alert-banner-container {
   display: -webkit-box;
@@ -140,23 +142,24 @@
 .kd-alert.alert-info-bg-color {
   background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
 }
-.kd-alert.alert-success-font-color {
-  color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854));
+.kd-alert.alert-success-border-color {
+  border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
 }
-.kd-alert.alert-warning-font-color {
-  color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c));
+.kd-alert.alert-warning-border-color {
+  border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
 }
-.kd-alert.alert-error-font-color {
-  color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323));
+.kd-alert.alert-error-border-color {
+  border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
 }
-.kd-alert.alert-info-font-color {
-  color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5));
+.kd-alert.alert-info-border-color {
+  border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
 }
 .kd-alert-icon {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   cursor: default;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
   font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
 }
@@ -164,9 +167,22 @@
   -ms-flex-item-align: center;
       align-self: center;
 }
+.kd-alert-icon.alert-success-icon-color {
+  color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
+}
+.kd-alert-icon.alert-warning-icon-color {
+  color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
+}
+.kd-alert-icon.alert-error-icon-color {
+  color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
+}
+.kd-alert-icon.alert-info-icon-color {
+  color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
+}
 .kd-alert-message {
+  color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
-  line-height: 18px;
+  line-height: 16px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -196,10 +212,10 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
   margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
   color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
   font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
-  justify-self: flex-end;
   cursor: pointer;
 }
 .kd-alert-close-icon:hover {

package/es/alert/style/index.less

@@ -16,11 +16,18 @@
   @info: @alert-info-bg-color;
 }
 
-.alert-font-type-set() {
-  @success: @alert-success-font-color;
-  @warning: @alert-warning-font-color;
-  @error: @alert-error-font-color;
-  @info: @alert-info-font-color;
+.alert-icon-type-set() {
+  @success: @alert-success-icon-color;
+  @warning: @alert-warning-icon-color;
+  @error: @alert-error-icon-color;
+  @info: @alert-info-icon-color;
+}
+
+.alert-border-type-set() {
+  @success: @alert-success-border-color;
+  @warning: @alert-warning-border-color;
+  @error: @alert-error-border-color;
+  @info: @alert-info-border-color;
 }
 
 @alert-transition-fn: cubic-bezier(0.32, 0.94, 0.6, 1);
@@ -36,9 +43,11 @@
     z-index: @z-index-apex;
     display: none;
     width: 100%;
-    padding: @alert-padding-top @alert-padding-horizontal @alert-padding-bottom;
+    padding: @alert-padding-vertical @alert-padding-horizontal;
     align-items: center;
     transition: display 3s;
+    border-radius: @alert-radius-border;
+    border: 1px solid;
   }
   &-banner-container {
     display: flex;
@@ -50,19 +59,24 @@
   each(.alert-bg-type-set(), {
     .alert-bg-type(@key, @value);
   });
-  each(.alert-font-type-set(), {
-    .alert-font-type(@key, @value);
+  each(.alert-border-type-set(), {
+    .alert-border-type(@key, @value);
   });
   &-icon {
     display: flex;
     cursor: default;
     .icon-center();
+    height: @alert-message-icon-font-size;
     margin-right: @alert-message-icon-margin-right;
     font-size: @alert-message-icon-font-size;
+    each(.alert-icon-type-set(), {
+      .alert-icon-type(@key, @value);
+    });
   }
   &-message {
+    color: @alert-message-color-text;
     font-size: @alert-message-font-size;
-    line-height: 18px;
+    line-height: 16px;
     display: flex;
     flex-grow: 1;
     cursor: default;
@@ -86,10 +100,10 @@
   }
   &-close-icon {
     display: flex;
+    height: @alert-message-icon-font-size;
     margin-left: @alert-close-icon-margin-left;
     color: @alert-close-icon-color;
     font-size: @alert-close-icon-font-size;
-    justify-self: flex-end;
     cursor: pointer;
     &:hover {
       color: @alert-close-icon-color-hover;

package/es/alert/style/mixin.less

@@ -4,12 +4,18 @@
   }
 }
 
-.alert-font-type(@type, @color) {
-  &.alert-@{type}-font-color {
+.alert-icon-type(@type, @color) {
+  &.alert-@{type}-icon-color {
     color: @color
   }
 }
 
+.alert-border-type(@type, @color) {
+  &.alert-@{type}-border-color {
+    border-color: @color
+  }
+}
+
 .square(@side-length) {
   width: @side-length;
   height: @side-length;

package/es/alert/style/token.less

@@ -8,10 +8,16 @@
 @alert-error-bg-color: var(~'@{alert-custom-prefix}-color-background-error', @color-background-error); // 反馈浮层错误提示的背景色
 @alert-info-bg-color: var(~'@{alert-custom-prefix}-color-background-info', @color-background-ongoing); // 反馈浮层一般提示的背景色
 
-@alert-success-font-color: var(~'@{alert-custom-prefix}-color-text-success', @color-success); // 反馈浮层成功提示的文字色
-@alert-warning-font-color: var(~'@{alert-custom-prefix}-color-text-warning', @color-warning); // 反馈浮层警告提示的文字色 
-@alert-error-font-color: var(~'@{alert-custom-prefix}-color-text-error', @color-error); // 反馈浮层错误提示的文字色
-@alert-info-font-color: var(~'@{alert-custom-prefix}-color-text-info', @color-ongoing); // 反馈浮层一般提示的文字色
+@alert-message-color-text: var(~'@{alert-custom-prefix}-color-text', @color-text-primary); // 反馈浮层提示的文字色
+@alert-success-icon-color: var(~'@{alert-custom-prefix}-color-icon-success', @color-success); // 反馈浮层成功提示的图标颜色
+@alert-warning-icon-color: var(~'@{alert-custom-prefix}-color-icon-warning', @color-warning); // 反馈浮层警告提示的图标颜色
+@alert-error-icon-color: var(~'@{alert-custom-prefix}-color-icon-error', @color-error); // 反馈浮层错误提示的图标颜色
+@alert-info-icon-color: var(~'@{alert-custom-prefix}-color-icon-info', @color-ongoing); // 反馈浮层一般提示的图标颜色
+
+@alert-success-border-color: var(~'@{alert-custom-prefix}-color-border-success', #DCFAE4); // 反馈浮层成功提示的边框色
+@alert-warning-border-color: var(~'@{alert-custom-prefix}-color-border-warning', #FFF1D4); // 反馈浮层警告提示的边框色 
+@alert-error-border-color: var(~'@{alert-custom-prefix}-color-border-error', #FFDBE0); // 反馈浮层错误提示的边框色
+@alert-info-border-color: var(~'@{alert-custom-prefix}-color-border-info', #E0EFFF); // 反馈浮层一般提示的边框色
 
 @alert-close-icon-color: var(~'@{alert-custom-prefix}-close-icon-color-text', @color-text-secondary); 
 @alert-close-icon-color-hover: var(~'@{alert-custom-prefix}-close-icon-color-text-hover', @color-theme-hover); 
@@ -22,8 +28,10 @@
 @alert-close-icon-font-size: var(~'@{alert-custom-prefix}-close-icon-font-size', @font-size-middle);
 
 // spacing
-@alert-padding-top: var(~'@{alert-custom-prefix}-sizing-padding-top', 8px);
-@alert-padding-bottom: var(~'@{alert-custom-prefix}-sizing-padding-bottom', 12px);
-@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 12px);
+@alert-padding-vertical: var(~'@{alert-custom-prefix}-sizing-padding-vertical', 12px);
+@alert-padding-horizontal: var(~'@{alert-custom-prefix}-sizing-padding-horizontal', 20px);
 @alert-message-icon-margin-right: var(~'@{alert-custom-prefix}-message-icon-sizing-margin-right', 8px);
-@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+@alert-close-icon-margin-left: var(~'@{alert-custom-prefix}-close-icon-sizing-margin-left', 8px);
+
+// radius
+@alert-radius-border: var(~'@{alert-custom-prefix}-radius-border', 4px);

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

@@ -305,6 +305,7 @@ declare const compDefaultProps: {
         virtual: boolean;
         switcherIcon: () => JSX.Element;
         estimatedItemSize: number;
+        expandOnClickNode: boolean;
     };
     TreeNode: {};
     ToolTip: {

package/es/config-provider/compDefaultProps.js

@@ -319,7 +319,8 @@ var compDefaultProps = {
         type: "arrow-right-solid"
       });
     },
-    estimatedItemSize: 32
+    estimatedItemSize: 32,
+    expandOnClickNode: true
   },
   TreeNode: {},
   ToolTip: {

package/es/drawer/drawer.js

@@ -206,6 +206,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
     width: width,
     transform: transform
   } : {
+    height: height,
     transform: transform
   });
 

package/es/dropdown/dropdown.js

@@ -7,6 +7,17 @@ import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import { Menu, Item } from './menu';
 import usePopper from '../_utils/usePopper';
+
+var findItem = function findItem(element) {
+  var isItem = element.className === 'kd-dropdown-menu-item';
+
+  if (isItem) {
+    return element;
+  } else {
+    return element.parentNode ? findItem(element.parentNode) : null;
+  }
+};
+
 var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _a, _b, _c;
 
@@ -37,7 +48,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setVisible(!!props.visible);
   }, [props.visible]);
   var child = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
-    ref: ref,
+    ref: children.ref || ref,
     className: classNames("".concat(prefixCls, "-trigger"), children.props.className, {
       disabled: disabled
     })
@@ -55,13 +66,12 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var menuSelectable = ((_b = menu.props) === null || _b === void 0 ? void 0 : _b.selectable) === undefined ? selectable : (_c = menu.props) === null || _c === void 0 ? void 0 : _c.selectable;
 
   var handleItemClick = function handleItemClick(e) {
-    var _a, _b;
+    var _a;
 
-    var currentTarget = e.target;
-    var parentTarget = currentTarget.parentNode;
-    var key = ((_a = currentTarget.dataset) === null || _a === void 0 ? void 0 : _a.key) || ((_b = currentTarget.parentNode.dataset) === null || _b === void 0 ? void 0 : _b.key);
+    var item = findItem(e.target);
+    var key = (_a = item === null || item === void 0 ? void 0 : item.dataset) === null || _a === void 0 ? void 0 : _a.key;
 
-    if (currentTarget.className.indexOf('disabled') === -1 && parentTarget.className.indexOf('disabled') === -1 && key) {
+    if ((item === null || item === void 0 ? void 0 : item.className.indexOf('disabled')) === -1 && key) {
       if (isMenu && menu.props.onClick) {
         menu.props.onClick(key);
       } else if (onItemClick) {

package/es/dropdown/style/index.css

@@ -137,10 +137,10 @@
   opacity: 1;
   visibility: visible;
   z-index: var(--kd-g-z-index-popper, 1050);
-  background-color: var(--kd-g-color-background, #fff);
+  background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
-  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
-  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
+  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
+  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
@@ -151,7 +151,7 @@
 .kd-dropdown.arrow::before {
   position: absolute;
   z-index: -2;
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -166,7 +166,7 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-dropdown.arrow.bottomLeft::before,
@@ -176,7 +176,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
+  border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -203,11 +203,11 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
+  border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown-menu {
-  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
-  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
+  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
+  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
   overflow-y: auto;
 }
 .kd-dropdown-menu-item {
@@ -234,12 +234,11 @@
 }
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
-  color: var(--kd-g-color-theme, #5582f3);
-  background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item:not(.disabled):active > a,
 .kd-dropdown-menu-item:not(.disabled).selected > a {
-  color: var(--kd-g-color-theme, #5582f3);
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item.divided::before {
   content: '';