@king-design/intact 2.0.7 → 2.0.9

package/components/datepicker/index.spec.ts

@@ -142,32 +142,38 @@ describe('Datepicker', () => {
             const [monthValues1, monthValues2]= content.querySelectorAll<HTMLElement>('.k-month-values');
 
             nextMonth.click();
+            const monthStart = (month + 1) % 12 + 1;
+            const yearStart = year + Math.floor((month + 1) / 12);
+            const monthEnd = (month + 2) % 12 + 1;
+            const yearEnd = year + Math.floor((month + 2) / 12);
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd}年${monthEnd}月`);
 
             nextYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year + 1}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year + 1}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart + 1}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd + 1}年${monthEnd}月`);
 
             const [prevYear] = panel2.querySelectorAll<HTMLElement>('.k-prev');
             prevYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd}年${monthEnd}月`);
 
             // year panel
             dispatchEvent(monthValues1.firstElementChild!, 'click');
             dispatchEvent(monthValues2.firstElementChild!, 'click');
             await wait();
-            expect(monthValues1.textContent).to.eql(`${startYear}年 - ${startYear + 9}年`);
-            expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+            const firstDecadeStart = Math.floor(yearStart / 10) * 10;
+            const secondDecadeStart = Math.floor(yearEnd / 10) * 10; 
+            expect(monthValues1.textContent).to.eql(`${firstDecadeStart}年 - ${firstDecadeStart + 9}年`);
+            expect(monthValues1.textContent).to.eql(`${secondDecadeStart}年 - ${secondDecadeStart + 9}年`);
 
             nextYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${startYear + 10}年 - ${startYear + 19}年`);
-            expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+            expect(monthValues1.textContent).to.eql(`${firstDecadeStart + 10}年 - ${secondDecadeStart + 19}年`);
+            expect(monthValues1.textContent).to.eql(`${secondDecadeStart + 10}年 - ${secondDecadeStart + 19}年`);
         });
 
         it('range year', async () => {

package/components/dialog/useEscClosable.ts

@@ -22,13 +22,17 @@ export function useEscClosable() {
     });
 
     function onHide() {
-        const dialog = dialogs.pop();
+        // the order is uncertain in different frameworks
+        const index = dialogs.indexOf(instance);
+        // const dialog = dialogs.pop();
         // const dialog = dialogs.shift();
         if (process.env.NODE_ENV !== 'production') {
-            if (dialog !== instance) {
-                throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+            // if (dialog !== instance) {
+            if (index === -1) {
+                throw new Error('The dialog has handled hide callback. Maybe it is a bug of KPC');
             }
         }
+        dialogs.splice(0, index);
 
         if (!dialogs.length) {
             document.removeEventListener('keydown', escClose);

package/components/dropdown/useKeyboard.ts

@@ -159,7 +159,7 @@ export function useMenuKeyboard() {
         focus: (item: DropdownItem) => {
             // reset();
             const index = items.indexOf(item);
-            if (index === -1) debugger
+            // if (index === -1) debugger
             focusIndex = index;
             focusItem(item);
         }

package/components/layout/demos/asideFix.md

@@ -57,7 +57,9 @@ import {
                 <BreadcrumbItem>Home</BreadcrumbItem>
                 <BreadcrumbItem>Detail</BreadcrumbItem>
             </Breadcrumb>
-            <div v-for={this.get('data')}>content</div>
+            <div v-for={this.get('data')}>
+                content
+            </div>
         </Body>
     </Layout>
 </Layout>

package/components/layout/demos/fix.md

@@ -73,7 +73,9 @@ import {
                 <BreadcrumbItem>Home</BreadcrumbItem>
                 <BreadcrumbItem>Detail</BreadcrumbItem>
             </Breadcrumb>
-            <div v-for={this.get('data')}>content</div>
+            <div v-for={this.get('data')}>
+                content
+            </div>
         </Body>
     </Layout>
 </Layout>

package/components/portal.ts

@@ -6,14 +6,10 @@ import {
     createCommentVNode,
     createTextVNode,
     mount,
-    removeVNodeDom,
     patch,
     remove,
     TypeDefs,
-    provide,
     inject,
-    nextTick,
-    callAll,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -42,6 +38,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     private dialog: Dialog | null = inject(DIALOG, null);
     public mountedQueue?: Function[];
     public mountedDone?: boolean;
+    public $isPortal = true;
 
     $render(
         lastVNode: VNodeComponentClass<this> | null,
@@ -50,28 +47,29 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         anchor: IntactDom | null,
         mountedQueue: Function[]
     ) {
+        /**
+         * In React, we cannot render real elements in mountedQueue.
+         * Because the rendering time of react element is uncontrollable
+         */
+
+        const nextProps = nextVNode.props!;
+        const fakeContainer = document.createDocumentFragment();
+
         mountedQueue.push(() => {
-            const nextProps = nextVNode.props!;
             const parentDom = this.$lastInput!.dom!.parentElement!;
-            /**
-             * initialize a new mountedQueue to place the callbacks of sub-components to it,
-             * so that we can call them before the sibling components of the Portal
-             */
-            const mountedQueue: Function[] = [];
             this.initContainer(nextProps.container, parentDom, anchor);
-
-            mount(
-                nextProps.children as VNode,
-                this.container!,
-                this,
-                this.$SVG,
-                null,
-                mountedQueue,
-            );
-
-            callAll(mountedQueue);
+            this.container!.appendChild(fakeContainer);
         });
 
+        mount(
+            nextProps.children as VNode,
+            fakeContainer as any,
+            this,
+            this.$SVG,
+            null,
+            mountedQueue,
+        );
+
         super.$render(lastVNode, nextVNode, parentDom, anchor, mountedQueue);
     }
 
@@ -135,7 +133,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         if (!this.container) {
             // find the closest dialog if exists
             let tmp;
-            if ((tmp = this.dialog) && (tmp = tmp.dialogRef.value)) {
+            if ((tmp = this.dialog) && (tmp !== this.$senior) && (tmp = tmp.dialogRef.value)) {
                 this.container = tmp;
             } else {
                 this.container = document.body;

package/components/table/styles.ts

@@ -63,6 +63,8 @@ const defaults = {
     draggingOpacity: `.4`,
 };
 
+const aligns = ['left', 'right', 'center'];
+
 let table: typeof defaults;
 setDefault(() => {
     table = deepDefaults(theme, {table: defaults}).table;
@@ -350,6 +352,15 @@ export function makeStyles() {
         .k-table-scrollbar-inner {
             height: 1px;
         }
+
+        // align
+        ${aligns.map(type => {
+            return css`
+                .k-align-${type} {
+                    text-align: ${type};
+                }
+            `;
+        })}
     `;
 }
 

package/components/table/useFixedColumns.ts

@@ -144,7 +144,7 @@ export function useFixedColumns(
 }
 
 export function getClassAndStyleForFixed(
-    {className, fixed}: Props<TableColumnProps>,
+    {className, fixed, align}: Props<TableColumnProps>,
     offset: number,
     checkType?: TableProps['checkType'],
 ) {
@@ -153,6 +153,7 @@ export function getClassAndStyleForFixed(
         className: cx({
             [className as string]: !!className,
             [`k-fixed-${fixed}`]: !!fixed,
+            [`k-align-${align}`]: !!align,
         }),
         style: fixed ? {[fixed]: `${offset + extraOffset}px`} : null,
     };

package/es/components/datepicker/index.spec.js

@@ -234,7 +234,7 @@ describe('Datepicker', function () {
               }, _callee6);
             })));
             it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-              var _mount6, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, _panel2$querySelector, prevYear;
+              var _mount6, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, monthStart, yearStart, monthEnd, yearEnd, _panel2$querySelector, prevYear, firstDecadeStart, secondDecadeStart;
 
               return _regeneratorRuntime.wrap(function _callee7$(_context7) {
                 while (1) {
@@ -252,45 +252,51 @@ describe('Datepicker', function () {
                       _panel1$querySelector = panel1.querySelectorAll('.k-next'), nextMonth = _panel1$querySelector[0], nextYear = _panel1$querySelector[1];
                       _content$querySelecto2 = content.querySelectorAll('.k-month-values'), monthValues1 = _content$querySelecto2[0], monthValues2 = _content$querySelecto2[1];
                       nextMonth.click();
-                      _context7.next = 12;
+                      monthStart = (month + 1) % 12 + 1;
+                      yearStart = year + Math.floor((month + 1) / 12);
+                      monthEnd = (month + 2) % 12 + 1;
+                      yearEnd = year + Math.floor((month + 2) / 12);
+                      _context7.next = 16;
                       return wait();
 
-                    case 12:
-                      expect(monthValues1.textContent).to.eql(year + "\u5E74" + (month + 1 + 1) + "\u6708");
-                      expect(monthValues2.textContent).to.eql(year + "\u5E74" + (month + 1 + 2) + "\u6708");
+                    case 16:
+                      expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
+                      expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708");
                       nextYear.click();
-                      _context7.next = 17;
+                      _context7.next = 21;
                       return wait();
 
-                    case 17:
-                      expect(monthValues1.textContent).to.eql(year + 1 + "\u5E74" + (month + 1 + 1) + "\u6708");
-                      expect(monthValues2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1 + 2) + "\u6708");
+                    case 21:
+                      expect(monthValues1.textContent).to.eql(yearStart + 1 + "\u5E74" + monthStart + "\u6708");
+                      expect(monthValues2.textContent).to.eql(yearEnd + 1 + "\u5E74" + monthEnd + "\u6708");
                       _panel2$querySelector = panel2.querySelectorAll('.k-prev'), prevYear = _panel2$querySelector[0];
                       prevYear.click();
-                      _context7.next = 23;
+                      _context7.next = 27;
                       return wait();
 
-                    case 23:
-                      expect(monthValues1.textContent).to.eql(year + "\u5E74" + (month + 1 + 1) + "\u6708");
-                      expect(monthValues2.textContent).to.eql(year + "\u5E74" + (month + 1 + 2) + "\u6708"); // year panel
+                    case 27:
+                      expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
+                      expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708"); // year panel
 
                       dispatchEvent(monthValues1.firstElementChild, 'click');
                       dispatchEvent(monthValues2.firstElementChild, 'click');
-                      _context7.next = 29;
+                      _context7.next = 33;
                       return wait();
 
-                    case 29:
-                      expect(monthValues1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
-                      expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+                    case 33:
+                      firstDecadeStart = Math.floor(yearStart / 10) * 10;
+                      secondDecadeStart = Math.floor(yearEnd / 10) * 10;
+                      expect(monthValues1.textContent).to.eql(firstDecadeStart + "\u5E74 - " + (firstDecadeStart + 9) + "\u5E74");
+                      expect(monthValues1.textContent).to.eql(secondDecadeStart + "\u5E74 - " + (secondDecadeStart + 9) + "\u5E74");
                       nextYear.click();
-                      _context7.next = 34;
+                      _context7.next = 40;
                       return wait();
 
-                    case 34:
-                      expect(monthValues1.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
-                      expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+                    case 40:
+                      expect(monthValues1.textContent).to.eql(firstDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
+                      expect(monthValues1.textContent).to.eql(secondDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
 
-                    case 36:
+                    case 42:
                     case "end":
                       return _context7.stop();
                   }

package/es/components/dialog/useEscClosable.js

@@ -1,3 +1,4 @@
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, onUnmounted } from 'intact';
 import { SHOW, HIDE } from './constants'; // only close the top dialog when press ESC
 
@@ -22,14 +23,19 @@ export function useEscClosable() {
   });
 
   function onHide() {
-    var dialog = dialogs.pop(); // const dialog = dialogs.shift();
+    // the order is uncertain in different frameworks
+    var index = dialogs.indexOf(instance); // const dialog = dialogs.pop();
+    // const dialog = dialogs.shift();
 
     if (process.env.NODE_ENV !== 'production') {
-      if (dialog !== instance) {
-        throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+      // if (dialog !== instance) {
+      if (index === -1) {
+        throw new Error('The dialog has handled hide callback. Maybe it is a bug of KPC');
       }
     }
 
+    _spliceInstanceProperty(dialogs).call(dialogs, 0, index);
+
     if (!dialogs.length) {
       document.removeEventListener('keydown', escClose);
     }

package/es/components/dropdown/useKeyboard.js

@@ -123,8 +123,8 @@ export function useMenuKeyboard() {
     reset: reset,
     focus: function focus(item) {
       // reset();
-      var index = items.indexOf(item);
-      if (index === -1) debugger;
+      var index = items.indexOf(item); // if (index === -1) debugger
+
       focusIndex = index;
       focusItem(item);
     }

package/es/components/portal.d.ts

@@ -10,6 +10,7 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     private dialog;
     mountedQueue?: Function[];
     mountedDone?: boolean;
+    $isPortal: boolean;
     $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[]): void;
     $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null): void;

package/es/components/portal.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, callAll } from 'intact';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 var typeDefs = {
@@ -23,6 +23,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this.dialog = inject(DIALOG, null);
     _this.mountedQueue = void 0;
     _this.mountedDone = void 0;
+    _this.$isPortal = true;
     return _this;
   }
 
@@ -39,21 +40,20 @@ export var Portal = /*#__PURE__*/function (_Component) {
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
     var _this2 = this;
 
+    /**
+     * In React, we cannot render real elements in mountedQueue.
+     * Because the rendering time of react element is uncontrollable
+     */
+    var nextProps = nextVNode.props;
+    var fakeContainer = document.createDocumentFragment();
     mountedQueue.push(function () {
-      var nextProps = nextVNode.props;
       var parentDom = _this2.$lastInput.dom.parentElement;
-      /**
-       * initialize a new mountedQueue to place the callbacks of sub-components to it,
-       * so that we can call them before the sibling components of the Portal
-       */
-
-      var mountedQueue = [];
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
 
-      mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
-      callAll(mountedQueue);
+      _this2.container.appendChild(fakeContainer);
     });
+    mount(nextProps.children, fakeContainer, this, this.$SVG, null, mountedQueue);
 
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };
@@ -99,7 +99,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
       // find the closest dialog if exists
       var tmp;
 
-      if ((tmp = this.dialog) && (tmp = tmp.dialogRef.value)) {
+      if ((tmp = this.dialog) && tmp !== this.$senior && (tmp = tmp.dialogRef.value)) {
         this.container = tmp;
       } else {
         this.container = document.body;

package/es/components/table/styles.js

@@ -1,4 +1,5 @@
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
@@ -75,6 +76,7 @@ var defaults = {
   resizeWidth: "5px",
   draggingOpacity: ".4"
 };
+var aligns = ['left', 'right', 'center'];
 var table;
 setDefault(function () {
   table = deepDefaults(theme, {
@@ -82,7 +84,9 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}");
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+    return /*#__PURE__*/css(".k-align-", type, "{text-align:", type, ";}");
+  }), ";");
 }
 export function makeGroupMenuStyles() {
   return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");

package/es/components/table/useFixedColumns.d.ts

@@ -15,7 +15,7 @@ export declare function useFixedColumns(getColumns: () => VNodeComponentClass<Ta
     getHasFixedLeft: () => boolean;
     getOffsetMap: () => Record<Key, number>;
 };
-export declare function getClassAndStyleForFixed({ className, fixed }: Props<TableColumnProps>, offset: number, checkType?: TableProps['checkType']): {
+export declare function getClassAndStyleForFixed({ className, fixed, align }: Props<TableColumnProps>, offset: number, checkType?: TableProps['checkType']): {
     className: string;
     style: {
         [x: string]: string;

package/es/components/table/useFixedColumns.js

@@ -125,10 +125,11 @@ export function getClassAndStyleForFixed(_ref2, offset, checkType) {
   var _cx, _ref3;
 
   var className = _ref2.className,
-      fixed = _ref2.fixed;
+      fixed = _ref2.fixed,
+      align = _ref2.align;
   var extraOffset = checkType && checkType !== 'none' && fixed === 'left' ? 40 : 0;
   return {
-    className: cx((_cx = {}, _cx[className] = !!className, _cx["k-fixed-" + fixed] = !!fixed, _cx)),
+    className: cx((_cx = {}, _cx[className] = !!className, _cx["k-fixed-" + fixed] = !!fixed, _cx["k-align-" + align] = !!align, _cx)),
     style: fixed ? (_ref3 = {}, _ref3[fixed] = offset + extraOffset + "px", _ref3) : null
   };
 }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.7
+ * @king-design v2.0.9
  *
  * 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.7";
+export declare const version = "2.0.9";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.7
+ * @king-design v2.0.9
  *
  * 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.7';
+export var version = '2.0.9';
 /* generate end */

package/es/packages/kpc-react/__tests__/components/drawer.spec.js

@@ -0,0 +1,99 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Drawer, Card } from '../../';
+import { Component } from 'intact-react';
+import { wait, dispatchEvent } from '../../../../test/utils';
+describe('Drawer', function () {
+  it('should render react element correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var container, Test;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+
+            Test = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Test, _Component);
+
+              function Test() {
+                return _Component.apply(this, arguments) || this;
+              }
+
+              var _proto = Test.prototype;
+
+              _proto.mounted = function mounted() {
+                expect(document.body.contains(this.refs.a));
+              };
+
+              return Test;
+            }(Component);
+
+            Test.template = "<div ref=\"a\">test</div>";
+            ReactDOM.render( /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Drawer, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Test, null)))), container);
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should handle event correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var container, click1, click2, _document$querySelect, element1, element2;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            click1 = sinon.spy(function () {
+              return console.log(1);
+            });
+            click2 = sinon.spy(function () {
+              return console.log(2);
+            });
+            ReactDOM.render( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Drawer, {
+              value: true,
+              title: "1"
+            }, /*#__PURE__*/React.createElement("div", {
+              className: "click",
+              onClick: click1
+            }, "click")), /*#__PURE__*/React.createElement(Drawer, {
+              value: true,
+              placement: "left",
+              title: "2"
+            }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+              className: "click",
+              onClick: click2
+            }, "click")))), container);
+            _document$querySelect = document.querySelectorAll('.click'), element1 = _document$querySelect[0], element2 = _document$querySelect[1];
+            dispatchEvent(element1, 'click');
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(click1.callCount).to.eql(1);
+            dispatchEvent(element2, 'click');
+            _context2.next = 13;
+            return wait();
+
+          case 13:
+            expect(click2.callCount).to.eql(1);
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/es/packages/kpc-react/__tests__/components/dropdown.spec.js

@@ -1,9 +1,11 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import React, { createRef } from 'react';
 import * as ReactDOM from 'react-dom';
-import { Dropdown, DropdownMenu, DropdownItem } from '../../';
+import { Dropdown, DropdownMenu, DropdownItem, Dialog, Layout } from '../../';
 import { getElement, wait } from '../../../../test/utils';
+import { Component } from 'intact-react';
 describe('Dropdown', function () {
   it('should save original events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var click, container, button;
@@ -38,4 +40,108 @@ describe('Dropdown', function () {
       }
     }, _callee);
   })));
+  it('reproduce #764', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mounted, _updated, Demo, FooDialog, Foo, set, Test, container;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mounted = sinon.spy(function () {
+              return console.log('mounted');
+            });
+            _updated = sinon.spy(function () {
+              return console.log('updated');
+            });
+
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                return _Component.apply(this, arguments) || this;
+              }
+
+              var _proto = Demo.prototype;
+
+              _proto.mounted = function mounted() {
+                _mounted();
+              };
+
+              _proto.updated = function updated() {
+                _updated();
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "<div>demo {this.get('title')}</div>";
+
+            FooDialog = function FooDialog() {
+              var _React$useState = React.useState({
+                title: '0'
+              }),
+                  title = _React$useState[0],
+                  setTitle = _React$useState[1];
+
+              React.useEffect(function () {
+                setTitle({
+                  title: '1'
+                });
+              }, []);
+              return /*#__PURE__*/React.createElement(Dialog, {
+                title: title.title,
+                value: true
+              }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Demo, {
+                title: title.title
+              })));
+            };
+
+            Foo = function Foo(_ref3) {
+              var data = _ref3.data;
+              return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FooDialog, null));
+            };
+
+            Test = function Test() {
+              var _React$useState2 = React.useState(false),
+                  isFoo = _React$useState2[0],
+                  setIsFoo = _React$useState2[1];
+
+              var _React$useState3 = React.useState([{
+                label: 1,
+                key: 1
+              }]),
+                  data = _React$useState3[0],
+                  setData = _React$useState3[1];
+
+              set = setIsFoo;
+              return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return setIsFoo(!isFoo);
+                }
+              }, "toggle"), isFoo ? /*#__PURE__*/React.createElement(Foo, {
+                key: "foo",
+                data: data
+              }) : /*#__PURE__*/React.createElement("div", null, "test"));
+            };
+
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
+            set(true);
+            _context2.next = 13;
+            return wait(0);
+
+          case 13:
+            expect(getElement('.k-dialog')).to.be.exist;
+            expect(_mounted.calledBefore(_updated)).to.be.true;
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/es/packages/kpc-react/__tests__/components/menu.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/packages/kpc-react/__tests__/components/menu.spec.js

@@ -0,0 +1,76 @@
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Menu, MenuItem } from '../../';
+import { getElement, wait } from '../../../../test/utils';
+describe('Menu', function () {
+  it('when we collapse menu, all dropdown menus should be hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var container, AsideMenu, setCollapse, Test;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = document.createElement('div');
+            document.body.appendChild(container);
+
+            AsideMenu = function AsideMenu(_ref2) {
+              var collapse = _ref2.collapse;
+
+              var _useState = useState(''),
+                  selectedKey = _useState[0],
+                  setSelectedKey = _useState[1];
+
+              return /*#__PURE__*/React.createElement(Menu, {
+                collapse: collapse,
+                selectedKey: selectedKey
+              }, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "1"
+              }, "option 1", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "1-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 1-1")))), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2"
+              }, "option 2", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")))), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "3"
+              }, "option 2", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-1"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")), /*#__PURE__*/React.createElement(MenuItem, {
+                key: "2-2"
+              }, /*#__PURE__*/React.createElement("span", null, "option 2-1")))));
+            };
+
+            Test = function Test() {
+              var _useState2 = useState(false),
+                  collapse = _useState2[0],
+                  _setCollapse = _useState2[1];
+
+              setCollapse = _setCollapse;
+              return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+                onClick: function onClick() {
+                  return _setCollapse(!collapse);
+                }
+              }, "click"), /*#__PURE__*/React.createElement(AsideMenu, {
+                collapse: collapse
+              }));
+            };
+
+            ReactDOM.render( /*#__PURE__*/React.createElement(Test, null), container);
+            setCollapse(true);
+            _context.next = 8;
+            return wait();
+
+          case 8:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.not.exist;
+            ReactDOM.unmountComponentAtNode(container);
+            document.body.removeChild(container);
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/packages/kpc-react/__tests__/components/tooltip.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/packages/kpc-react/__tests__/components/{form.spec.js → tooltip.spec.js}

@@ -4,7 +4,7 @@ import React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Tooltip, Form, FormItem } from '../../';
 import { getElement, wait, dispatchEvent } from '../../../../test/utils';
-describe('Form', function () {
+describe('Tooltip', function () {
   it('should show Tooltip in append slot', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var click, container, trigger;
     return _regeneratorRuntime.wrap(function _callee$(_context) {

package/es/site/data/components/layout/demos/asideFix/react.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { __decorate } from "tslib";
 import React from 'react';
 import { Layout, Header, Aside, Body, Menu, MenuItem, Icon, Breadcrumb, BreadcrumbItem, Button } from '@king-design/react';
@@ -39,7 +40,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _this2 = this;
+    var _this2 = this,
+        _context2;
 
     return /*#__PURE__*/React.createElement(Layout, {
       className: "layout"
@@ -112,9 +114,9 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "ion-navicon",
       size: "30"
-    }))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), /*#__PURE__*/React.createElement("div", {
-      "v-for": this.state.data
-    }, "content"))));
+    }))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), _mapInstanceProperty(_context2 = this.state.data).call(_context2, function ($value, $key) {
+      return /*#__PURE__*/React.createElement("div", null, "content");
+    }))));
   };
 
   return Demo;

package/es/site/data/components/layout/demos/fix/react.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import React from 'react';
 import { Layout, Header, Aside, Body, Menu, MenuItem, Icon, Breadcrumb, BreadcrumbItem } from '@king-design/react';
 import './index.styl';
@@ -30,7 +31,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   var _proto = Demo.prototype;
 
   _proto.render = function render() {
-    var _this2 = this;
+    var _this2 = this,
+        _context2;
 
     return /*#__PURE__*/React.createElement(Layout, {
       className: "layout"
@@ -114,9 +116,9 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       key: "4"
     }, /*#__PURE__*/React.createElement(Icon, {
       className: "ion-gear-b"
-    }), "menu 4"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), /*#__PURE__*/React.createElement("div", {
-      "v-for": this.state.data
-    }, "content"))));
+    }), "menu 4"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Home"), /*#__PURE__*/React.createElement(BreadcrumbItem, null, "Detail")), _mapInstanceProperty(_context2 = this.state.data).call(_context2, function ($value, $key) {
+      return /*#__PURE__*/React.createElement("div", null, "content");
+    }))));
   };
 
   return Demo;

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.7
+ * @king-design v2.0.9
  *
  * 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.7';
+export const version = '2.0.9';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {
@@ -116,7 +116,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.8",
+    "intact-react": "^3.0.9",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -178,7 +178,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact": "^3.0.8",
+    "intact": "^3.0.10",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",