@king-design/intact 2.0.16 → 2.0.17-beta.0

package/components/cascader/styles.ts

@@ -33,7 +33,8 @@ setDefault(() => {
 export function makeMenuStyles() {
     return css`
         min-width: ${cascader.width} !important;
-        min-height: ${cascader.height};
+        height: ${cascader.height};
+        overflow: auto;
         .k-cascader-arrow {
             float: right;
             height: 100%;

package/components/dropdown/dropdown.ts

@@ -126,10 +126,7 @@ export class Dropdown<
 
         return [
             clonedTrigger,
-            // wrap the root dropdown menu to Portal to render into body
-            this.alwaysPortal || !this.rootDropdown ?
-                h(Portal, {children: menu, container: this.get('container')}) :
-                menu
+            h(Portal, {children: menu, container: this.get('container')})
         ];
     };
 
@@ -139,8 +136,6 @@ export class Dropdown<
     public showedDropdown: Dropdown | null = null;
     public positionHook = usePosition();
 
-    protected alwaysPortal = false;
-
     private timer: number | undefined = undefined;
     private triggerProps: any = null;
 
@@ -294,9 +289,10 @@ export class Dropdown<
 function useDocumentClickForDropdown(dropdown: Dropdown) {
     const elementRef = () => findDomFromVNode(dropdown.menuVNode!, true) as Element;
     const [addDocumentClick, removeDocumentClick] = useDocumentClick(elementRef, (e) => {
-        // case 1: if click an trigger and the trigger type is hover, ignore it
-        // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-        // case 3: if click on trigger and the trigger type is focus, do nothing 
+        // case 1: if click a trigger and its trigger type is hover, ignore it
+        // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+        // case 3: if click on a trigger and its trigger type is focus, do nothing 
+        // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
         const trigger = dropdown.get('trigger');
         if (trigger === 'focus') return;
 
@@ -310,6 +306,8 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
             }
         }
 
+        if (isSubDropdownElement(e.target as Element, dropdown)) return;
+
         dropdown.hide(true);
     }, true);
 
@@ -317,6 +315,17 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem: Element, dropdown: Dropdown): boolean {
+    const showedDropdown = dropdown.showedDropdown;
+    if (!showedDropdown) return false;
+
+    const subMenuElement = findDomFromVNode(showedDropdown.menuVNode!, true) as Element;
+    if (containsOrEqual(subMenuElement, elem)) {
+        return true;
+    }
+    return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown: Dropdown) {
     const parentDropdown = dropdown.dropdown;
     dropdown.on('show', () => {

package/components/dropdown/menu.ts

@@ -63,7 +63,7 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     const focus = () => focusByIndex(0);
 
     // In Cascader the menu may have been replaced by another menu, in this case,
-    // if the dropdown has showed on mount the menu, add keydown listener
+    // if the dropdown has showed while we mounted the menu, add keydown listener
     if (dropdown.get('value')) {
         onShow();
     }

package/components/tooltip/tooltip.ts

@@ -72,8 +72,6 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
-    protected alwaysPortal = true;
-
     hide(immediately: boolean) {
         if (this.get('always')) return;
 

package/es/components/cascader/styles.js

@@ -43,7 +43,7 @@ setDefault(function () {
   }).cascader;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;min-height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
 }
 export function makeFilterMenuStyles() {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");

package/es/components/dropdown/dropdown.d.ts

@@ -41,7 +41,6 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    protected alwaysPortal: boolean;
     private timer;
     private triggerProps;
     init(): void;

package/es/components/dropdown/dropdown.js

@@ -57,7 +57,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.rootDropdown = null;
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
-    _this.alwaysPortal = false;
     _this.timer = undefined;
     _this.triggerProps = null;
     return _this;
@@ -267,11 +266,10 @@ Dropdown.template = function () {
   });
   clonedTrigger.className = className;
   this.menuVNode = menu;
-  return [clonedTrigger, // wrap the root dropdown menu to Portal to render into body
-  this.alwaysPortal || !this.rootDropdown ? h(Portal, {
+  return [clonedTrigger, h(Portal, {
     children: menu,
     container: this.get('container')
-  }) : menu];
+  })];
 };
 
 __decorate([bind], Dropdown.prototype, "position", null);
@@ -288,9 +286,10 @@ function useDocumentClickForDropdown(dropdown) {
   };
 
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
-    // case 1: if click an trigger and the trigger type is hover, ignore it
-    // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-    // case 3: if click on trigger and the trigger type is focus, do nothing 
+    // case 1: if click a trigger and its trigger type is hover, ignore it
+    // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+    // case 3: if click on a trigger and its trigger type is focus, do nothing 
+    // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
     var trigger = dropdown.get('trigger');
     if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
@@ -305,6 +304,7 @@ function useDocumentClickForDropdown(dropdown) {
       }
     }
 
+    if (isSubDropdownElement(e.target, dropdown)) return;
     dropdown.hide(true);
   }, true),
       addDocumentClick = _useDocumentClick[0],
@@ -314,6 +314,18 @@ function useDocumentClickForDropdown(dropdown) {
   dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem, dropdown) {
+  var showedDropdown = dropdown.showedDropdown;
+  if (!showedDropdown) return false;
+  var subMenuElement = findDomFromVNode(showedDropdown.menuVNode, true);
+
+  if (containsOrEqual(subMenuElement, elem)) {
+    return true;
+  }
+
+  return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown) {
   var parentDropdown = dropdown.dropdown;
   dropdown.on('show', function () {

package/es/components/dropdown/menu.js

@@ -85,7 +85,7 @@ function useKeyboardForDropdownMenu(dropdown) {
   var focus = function focus() {
     return focusByIndex(0);
   }; // In Cascader the menu may have been replaced by another menu, in this case,
-  // if the dropdown has showed on mount the menu, add keydown listener
+  // if the dropdown has showed while we mounted the menu, add keydown listener
 
 
   if (dropdown.get('value')) {

package/es/components/tooltip/tooltip.d.ts

@@ -23,6 +23,5 @@ export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends To
     static typeDefs: Required<TypeDefs<TooltipProps>>;
     static defaults: () => Partial<TooltipProps>;
     static events: Events<TooltipEvents>;
-    protected alwaysPortal: boolean;
     hide(immediately: boolean): void;
 }

package/es/components/tooltip/tooltip.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Dropdown } from '../dropdown/dropdown';
 import { _$ } from '../../i18n';
 import { themes } from './styles';
@@ -44,17 +43,7 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
   _inheritsLoose(Tooltip, _Dropdown);
 
   function Tooltip() {
-    var _context;
-
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Dropdown.call.apply(_Dropdown, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.alwaysPortal = true;
-    return _this;
+    return _Dropdown.apply(this, arguments) || this;
   }
 
   var _proto = Tooltip.prototype;

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.16
+ * @king-design v2.0.17-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,4 +57,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.16";
+export declare const version = "2.0.17-beta.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.16
+ * @king-design v2.0.17-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,5 +59,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.16';
+export var version = '2.0.17-beta.0';
 /* generate end */

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.16
+ * @king-design v2.0.17-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,6 +62,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.16';
+export const version = '2.0.17-beta.0';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.16",
+  "version": "2.0.17-beta.0",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {