@king-design/intact 2.0.6 → 2.0.8

package/components/datepicker/time.ts

@@ -30,7 +30,7 @@ const defaultValue: Value = {
 export class DatepickerTime extends Component<DatepickerTimeProps> {
     static template = template;
 
-    public value = useState<Value | null>(null);
+    public value = useState<Value>(defaultValue);
     public disabled = useDisable(this);
 
     init() {

package/components/drawer/styles.ts

@@ -46,6 +46,7 @@ export function makeStyles(overlay: boolean) {
             box-shadow: ${drawer.boxShadow};
             .k-dialog-body {
                 flex-grow: 1;
+                overflow: auto;
             }
         }
         

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/menu/index.spec.ts

@@ -1,7 +1,8 @@
+import {Component} from 'intact';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
-import {Menu} from './';
+import {Menu, MenuItem} from './';
 
 describe('Menu', () => {
     afterEach(() => unmount());
@@ -120,4 +121,44 @@ describe('Menu', () => {
         expect(element.innerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
     });
+
+    it('expand when set selectedKey', async () => {
+        class Demo extends Component<{list: Array<string>}> {
+            static template = `
+                var Menu = this.Menu;
+                var MenuItem = this.MenuItem;
+                <Menu
+                    v-model:expandedKeys="expandedKeys"
+                    v-model:selectedKey="selectedKey"
+                >
+                    <MenuItem key="1">
+                        <Menu>
+                            <MenuItem v-for={this.get('list')} key={$value}>{$value}</MenuItem>
+                        </Menu>
+                    </MenuItem>
+                </Menu>
+            `;
+
+            private Menu = Menu;
+
+            private MenuItem = MenuItem;
+
+            static defaults() {
+                return {
+                    expandedKeys: [],
+                    selectedKey: '1-3',
+                    list: ['1-1', '1-2']
+                };
+            }
+        }
+        const [instance] = mount(Demo);
+
+        await wait();
+        instance.set('list', ['1-1', '1-2', '1-3']);
+        
+        await wait();
+        const expandedKeys = instance.get('expandedKeys') as Array<string>;
+        expect(expandedKeys.includes('1')).to.be.true;
+
+    })
 });

package/components/menu/item.ts

@@ -8,7 +8,7 @@ import {useExpanded} from './useExpanded';
 import {useDropdown} from './useDropdown';
 import {useRouter, navigate} from '../../hooks/useRouter';
 import {useRecordItem} from '../../hooks/useRecordComponent';
-import {MENU_RECORD_KEY} from './useHighlight';
+import {MENU_RECORD_KEY, useHighlightItem} from './useHighlight';
 
 export interface MenuItemProps {
     key: Key 
@@ -49,6 +49,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     init() {
         provide(MENU_ITEM, this);
         useRecordItem(MENU_RECORD_KEY);
+        useHighlightItem();
     }
 
     @bind

package/components/menu/useHighlight.ts

@@ -1,4 +1,4 @@
-import {useInstance, Key} from 'intact';
+import { useInstance, Key, onMounted } from 'intact';
 import type {Menu, MenuItem} from './';
 import {useRecordParent} from '../../hooks/useRecordComponent';
 import {inArray} from '../table/useChecked';
@@ -53,5 +53,15 @@ export function useHighlight() {
         return instance.get('selectedKey') === key;
     }
 
-    return {isHighlighted, select, isSelected};
+    return {isHighlighted, select, isSelected, updateStatus};
 }
+
+export function useHighlightItem() {
+    const instance = useInstance() as MenuItem;
+
+    onMounted(() => {
+        if(instance.rootMenu.get('selectedKey') == instance.get('key')) {
+            instance.rootMenu.highlight?.updateStatus(instance.get('key'));
+        }
+    });
+}

package/components/portal.ts

@@ -29,8 +29,6 @@ const typeDefs: Required<TypeDefs<PortalProps>> = {
     container: [String, Function],
 };
 
-const PORTAL = 'Portal';
-
 export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     static template(this: Portal) {
         if (process.env.NODE_ENV === 'production') {
@@ -42,17 +40,9 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
 
     private container: Element | null = null;
     private dialog: Dialog | null = inject(DIALOG, null);
-    private portal: Portal | null = inject(PORTAL, null);
-    private rootPortal = inject<Portal | null>(PORTAL, null);
     public mountedQueue?: Function[];
     public mountedDone?: boolean;
 
-    init() {
-        if (!this.rootPortal) {
-            provide(PORTAL, this);
-        }
-    }
-
     $render(
         lastVNode: VNodeComponentClass<this> | null,
         nextVNode: VNodeComponentClass<this>,
@@ -60,59 +50,45 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         anchor: IntactDom | null,
         mountedQueue: Function[]
     ) {
-        const nextProps = nextVNode.props!;
-        const $cid = (Component as any).$cid;
-        const isVue = $cid === 'IntactVueNext' || $cid === 'IntactVue';
-
-        // add mount method to queue to let sub-component be appended after parent-component
-        if (!isVue) {
+        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);
 
-            let rootPortal: Portal;
-            let shouldTrigger = false;
-            if (!this.rootPortal) {
-                rootPortal = this;
-                rootPortal.mountedQueue = [];
-                shouldTrigger = true;
-            } else {
-                rootPortal = this.rootPortal!;
-                if (rootPortal.mountedDone) {
-                    shouldTrigger = true;
-                    rootPortal.mountedQueue = [];
-                }
+            /**
+             * Because we render real elements following parent has rendered.
+             * In React, the $promises have done. Then we cannot add any promise to it.
+             * We should find the parent component who holds the $promises object, and
+             * reset it to let remaining element children add promise to it.
+             */
+            const parent = getParent(this) as any;
+            if (parent) {
+                parent.$promises.reset();
             }
 
-            const selfMountedQueue = rootPortal.mountedQueue!;
-            selfMountedQueue.push(() => {
-                mount(
-                    nextProps.children as VNode,
-                    this.container!,
-                    this,
-                    this.$SVG,
-                    null,
-                    mountedQueue,
-                );
-            });
-
-            if (shouldTrigger) {
-                callAll(selfMountedQueue);
-                rootPortal.mountedDone = true;
+            mount(
+                nextProps.children as VNode,
+                this.container!,
+                this,
+                this.$SVG,
+                null,
+                mountedQueue,
+            );
+
+            // in react, we should wait for all promises to resolve
+            if (parent) {
+                (Component as any).FakePromise.all(parent.$promises).then(() => {
+                    callAll(mountedQueue);
+                });
+            } else {
+                callAll(mountedQueue);
             }
-        } else {
-            mountedQueue.push(() => {
-                const parentDom = this.$lastInput!.dom!.parentElement!;
-                this.initContainer(nextProps.container, parentDom, anchor);
-
-                mount(
-                    nextProps.children as VNode,
-                    this.container!,
-                    this,
-                    this.$SVG,
-                    null,
-                    mountedQueue,
-                );
-            });
-        }
+        });
 
         super.$render(lastVNode, nextVNode, parentDom, anchor, mountedQueue);
     }
@@ -185,3 +161,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         }
     }
 }
+
+function getParent($senior: Component): Component | null {
+    while ($senior = $senior.$senior as Component) {
+        if (($senior as any)._reactInternals) {
+            return $senior;
+        }
+    }
+    return null;
+}
+

package/components/select/styles.ts

@@ -144,6 +144,7 @@ export default function makeStyles() {
         border-radius: ${select.borderRadius};
         .k-select-main {
             flex: 1;
+            min-width: 0;
         }
         .k-select-prefix,
         .k-select-suffix {

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/components/tooltip/content.vdt

@@ -28,13 +28,14 @@ const classNameObj = {
     <b:children>
         {children}
         <i v-if={showArrow}
+            key="tooltip-arrow"
             class={{
                 "k-tooltip-arrow": true,
                 [`k-${arrowType.value}`]: arrowType.value,
             }}
             ref={arrowRef}
         ></i>
-        <div class="k-tooltip-buttons" v-if={confirm}>
+        <div class="k-tooltip-buttons" v-if={confirm} key="tooltip-buttons">
             <b:buttons>
                 <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
                 <Button ev-click={this.cancel} size="small">{cancelText}</Button>

package/es/components/datepicker/time.d.ts

@@ -14,7 +14,7 @@ declare type Value = {
 };
 export declare class DatepickerTime extends Component<DatepickerTimeProps> {
     static template: string | import("intact").Template<any>;
-    value: import("../../hooks/useState").State<Value | null>;
+    value: import("../../hooks/useState").State<Value>;
     disabled: {
         disableSeconds: import("../../hooks/useState").State<boolean>;
         disableMinutes: import("../../hooks/useState").State<boolean>;

package/es/components/datepicker/time.js

@@ -25,7 +25,7 @@ export var DatepickerTime = /*#__PURE__*/function (_Component) {
     }
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.value = useState(null);
+    _this.value = useState(defaultValue);
     _this.disabled = useDisable(_assertThisInitialized(_this));
     return _this;
   }

package/es/components/drawer/styles.js

@@ -21,7 +21,7 @@ setDefault(function () {
   }).drawer;
 });
 export function makeStyles(overlay) {
-  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
+  return /*#__PURE__*/css("box-shadow:none;border-radius:0;position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
     var positionValue = '';
     var transformValue = '';
     placements.forEach(function (p) {

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/menu/index.spec.js

@@ -1,8 +1,13 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { Component } from 'intact';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
+import { Menu, MenuItem } from './';
 describe('Menu', function () {
   afterEach(function () {
     return unmount();
@@ -220,4 +225,61 @@ describe('Menu', function () {
       }
     }, _callee5);
   })));
+  it('expand when set selectedKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, instance, expandedKeys;
+
+    return _regeneratorRuntime.wrap(function _callee6$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context6;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
+                _this.Menu = Menu;
+                _this.MenuItem = MenuItem;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  expandedKeys: [],
+                  selectedKey: '1-3',
+                  list: ['1-1', '1-2']
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Menu = this.Menu;\n                var MenuItem = this.MenuItem;\n                <Menu\n                    v-model:expandedKeys=\"expandedKeys\"\n                    v-model:selectedKey=\"selectedKey\"\n                >\n                    <MenuItem key=\"1\">\n                        <Menu>\n                            <MenuItem v-for={this.get('list')} key={$value}>{$value}</MenuItem>\n                        </Menu>\n                    </MenuItem>\n                </Menu>\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0];
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('list', ['1-1', '1-2', '1-3']);
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expandedKeys = instance.get('expandedKeys');
+            expect(_includesInstanceProperty(expandedKeys).call(expandedKeys, '1')).to.be.true;
+
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee6);
+  })));
 });

package/es/components/menu/item.js

@@ -9,7 +9,7 @@ import { useExpanded } from './useExpanded';
 import { useDropdown } from './useDropdown';
 import { useRouter, navigate } from '../../hooks/useRouter';
 import { useRecordItem } from '../../hooks/useRecordComponent';
-import { MENU_RECORD_KEY } from './useHighlight';
+import { MENU_RECORD_KEY, useHighlightItem } from './useHighlight';
 var typeDefs = {
   key: {
     type: [String, Number],
@@ -47,6 +47,7 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
   _proto.init = function init() {
     provide(MENU_ITEM, this);
     useRecordItem(MENU_RECORD_KEY);
+    useHighlightItem();
   };
 
   _proto.onClick = function onClick(hasSubMenu, e) {

package/es/components/menu/useHighlight.d.ts

@@ -4,4 +4,6 @@ export declare function useHighlight(): {
     isHighlighted: (key: Key) => boolean;
     select: (key: Key) => void;
     isSelected: (key: Key) => boolean;
+    updateStatus: (newValue: Key | undefined) => void;
 };
+export declare function useHighlightItem(): void;

package/es/components/menu/useHighlight.js

@@ -1,7 +1,7 @@
 import _Set from "@babel/runtime-corejs3/core-js/set";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
-import { useInstance } from 'intact';
+import { useInstance, onMounted } from 'intact';
 import { useRecordParent } from '../../hooks/useRecordComponent';
 import { inArray } from '../table/useChecked';
 import { useState } from '../../hooks/useState';
@@ -64,6 +64,17 @@ export function useHighlight() {
   return {
     isHighlighted: isHighlighted,
     select: select,
-    isSelected: isSelected
+    isSelected: isSelected,
+    updateStatus: updateStatus
   };
+}
+export function useHighlightItem() {
+  var instance = useInstance();
+  onMounted(function () {
+    if (instance.rootMenu.get('selectedKey') == instance.get('key')) {
+      var _instance$rootMenu$hi;
+
+      (_instance$rootMenu$hi = instance.rootMenu.highlight) == null ? void 0 : _instance$rootMenu$hi.updateStatus(instance.get('key'));
+    }
+  });
 }

package/es/components/portal.d.ts

@@ -8,11 +8,8 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     static typeDefs: Required<TypeDefs<PortalProps>>;
     private container;
     private dialog;
-    private portal;
-    private rootPortal;
     mountedQueue?: Function[];
     mountedDone?: boolean;
-    init(): void;
     $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,12 +1,11 @@
 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, provide, inject, callAll } from 'intact';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, callAll } from 'intact';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 var typeDefs = {
   container: [String, Function]
 };
-var PORTAL = 'Portal';
 export var Portal = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Portal, _Component);
 
@@ -22,8 +21,6 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.container = null;
     _this.dialog = inject(DIALOG, null);
-    _this.portal = inject(PORTAL, null);
-    _this.rootPortal = inject(PORTAL, null);
     _this.mountedQueue = void 0;
     _this.mountedDone = void 0;
     return _this;
@@ -39,55 +36,44 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
   var _proto = Portal.prototype;
 
-  _proto.init = function init() {
-    if (!this.rootPortal) {
-      provide(PORTAL, this);
-    }
-  };
-
   _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
     var _this2 = this;
 
-    var nextProps = nextVNode.props;
-    var $cid = Component.$cid;
-    var isVue = $cid === 'IntactVueNext' || $cid === 'IntactVue'; // add mount method to queue to let sub-component be appended after parent-component
+    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
+       */
 
-    if (!isVue) {
-      this.initContainer(nextProps.container, parentDom, anchor);
-      var rootPortal;
-      var shouldTrigger = false;
+      var mountedQueue = [];
 
-      if (!this.rootPortal) {
-        rootPortal = this;
-        rootPortal.mountedQueue = [];
-        shouldTrigger = true;
-      } else {
-        rootPortal = this.rootPortal;
+      _this2.initContainer(nextProps.container, parentDom, anchor);
+      /**
+       * Because we render real elements following parent has rendered.
+       * In React, the $promises have done. Then we cannot add any promise to it.
+       * We should find the parent component who holds the $promises object, and
+       * reset it to let remaining element children add promise to it.
+       */
 
-        if (rootPortal.mountedDone) {
-          shouldTrigger = true;
-          rootPortal.mountedQueue = [];
-        }
-      }
 
-      var selfMountedQueue = rootPortal.mountedQueue;
-      selfMountedQueue.push(function () {
-        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
-      });
+      var parent = getParent(_this2);
 
-      if (shouldTrigger) {
-        callAll(selfMountedQueue);
-        rootPortal.mountedDone = true;
+      if (parent) {
+        parent.$promises.reset();
       }
-    } else {
-      mountedQueue.push(function () {
-        var parentDom = _this2.$lastInput.dom.parentElement;
 
-        _this2.initContainer(nextProps.container, parentDom, anchor);
+      mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue); // in react, we should wait for all promises to resolve
 
-        mount(nextProps.children, _this2.container, _this2, _this2.$SVG, null, mountedQueue);
-      });
-    }
+      if (parent) {
+        Component.FakePromise.all(parent.$promises).then(function () {
+          callAll(mountedQueue);
+        });
+      } else {
+        callAll(mountedQueue);
+      }
+    });
 
     _Component.prototype.$render.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue);
   };
@@ -143,4 +129,14 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
   return Portal;
 }(Component);
-Portal.typeDefs = typeDefs;
+Portal.typeDefs = typeDefs;
+
+function getParent($senior) {
+  while ($senior = $senior.$senior) {
+    if ($senior._reactInternals) {
+      return $senior;
+    }
+  }
+
+  return null;
+}

package/es/components/select/styles.js

@@ -188,7 +188,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

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/components/tooltip/content.vdt.js

@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
 
       return [children, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
         "k-tooltip-arrow": true
-      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, null, arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
+      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
         return [_$cc(Button, {
           'type': 'primary',
           'ev-click': this.ok,
@@ -69,7 +69,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons') : undefined];
+      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons', null, 'tooltip-buttons') : undefined];
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];
 

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.6
+ * @king-design v2.0.8
  *
  * 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.6";
+export declare const version = "2.0.8";

package/es/index.js

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

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

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

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

@@ -0,0 +1,46 @@
+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';
+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);
+  })));
+});

package/es/packages/kpc-react/__tests__/index.js

@@ -18,7 +18,7 @@ var testsContext = require.context('./components/', true, /.*\.spec\.tsx?/);
 _keysInstanceProperty(testsContext).call(testsContext).forEach(testsContext); // const reactReq = require.context('~/components/', true, /^((?!(affix|code|layout)).)*\/demos\/.*react\.tsx$/);
 
 
-var reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*react\.tsx$/); // const reactReq = require.context('~/components/', true, /button\/demos\/.*react\.tsx$/);
+var reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*react\.tsx$/); // const reactReq = require.context('~/components/', true, /layout\/demos\/.*react\.tsx$/);
 
 
 describe('React Demos', function () {

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/es/site/src/pages/font/index.d.ts

@@ -9,4 +9,5 @@ export default class Index extends Layout {
         curLang?: string | undefined;
         videoLevel?: number | undefined;
     };
+    handleDownLoad(): void;
 }

package/es/site/src/pages/font/index.js

@@ -10,6 +10,12 @@ var Index = /*#__PURE__*/function (_Layout) {
     return _Layout.apply(this, arguments) || this;
   }
 
+  var _proto = Index.prototype;
+
+  _proto.handleDownLoad = function handleDownLoad() {
+    location.href = 'https://damife.ks3-cn-beijing.ksyuncs.com/kpc/Kingsoft_Cloud_Font.ttf';
+  };
+
   return Index;
 }(Layout);
 

package/es/site/src/pages/font/styles.js

@@ -1,9 +1,7 @@
 import { css } from '@emotion/css';
-import source_nav_web from '../../imgs/font/banner-web.jpg';
-import source_nav_h5 from '../../imgs/font/banner-h5.jpg';
-import title_web from "../../imgs/font/title-web.png";
+import source_nav_web from '../../imgs/font/banner-font.jpg';
 import text_web from "../../imgs/font/text-web.png";
 import text_h5 from "../../imgs/font/text-h5.png";
 export function makeStyles() {
-  return /*#__PURE__*/css(".source-nav{display:flex;justify-content:center;position:relative;height:800px;width:100%;overflow:hidden;background-image:url(", source_nav_web, ");background-repeat:no-repeat;background-position:left;background-size:cover;@media (max-width: 768px){overflow:hidden;background-image:url(", source_nav_h5, ");width:100%;background-position:center;}@media (min-width: 1920px){width:100%;}.content-img{height:151px;width:440px;margin-top:26px;display:flex;justify-content:center;background-image:url(", title_web, ");background-repeat:no-repeat;background-position:right bottom;background-size:100%;position:absolute;left:21%;bottom:356px;@media (max-width: 768px){left:50%;transform:translate(-50%,0);bottom:75%;width:57%;}}.dowload{width:440px;height:80px;position:absolute;left:21%;bottom:254px;border:none;background:#006FFF;border-radius:14px;font-family:PingFangSC-Regular;font-size:30px;color:#FFFFFF;font-weight:400;cursor:pointer;&:hover{background-color:#3D91FF;}&:active{background-color:#3D91FF;}@media (max-width: 768px){left:50%;transform:translate(-50%,0);bottom:58%;width:57%;height:60px;}}}.source-intro{margin:100px auto;background-image:url(", text_web, ");width:800px;height:590px;background-repeat:no-repeat;background-position:right bottom;background-size:cover;@media (max-width:768px){margin:13% auto;width:64%;background-image:url(", text_h5, ");background-size:contain;background-position:center;}}.source-designer{background-color:#FAFAFA;padding-top:30px;padding-bottom:100px;position:relative;@media (max-width:768px){padding-top:4%;padding-bottom:13.4%;}.designer-title{position:relative;width:800px;height:120px;margin:30px auto 40px;img{width:100%;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}@media (max-width:768px){width:72%;height:40px;margin:3.8% auto 4.8%;}}.designer-content{margin:0 15%;@media (max-width:768px){margin:0 5.8%;}.designer-show{display:grid;grid-template-columns:repeat(auto-fill, 200px);grid-template-rows:repeat(auto-fill, 290px);grid-gap:40px 50px;justify-content:center;@media (max-width:768px){grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(6, 1fr);grid-gap:5.3% 6.7%;}.designer-item{img{width:100%;}&>div{margin-top:20px;font-family:PingFangSC-Regular;font-size:20px;color:#000000;letter-spacing:0;text-align:center;line-height:30px;font-weight:400;}}}}}");
+  return /*#__PURE__*/css(".font-nav{height:600px;margin-top:-64px;background-image:url(", source_nav_web, ");background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;justify-content:center;.bg-img{display:none;}.font-nav-content{height:536px;margin-top:64px;width:1200px;display:flex;align-items:center;.nav-content-img{img{width:380px;}.nav-btn-download{margin-top:30px;width:380px;height:60px;border:none;background:#006FFF;border-radius:14px;font-family:PingFangSC-Regular;font-size:18px;color:#FFFFFF;font-weight:400;cursor:pointer;transition:all .25s ease-in;outline:none;&:hover{background-color:#3D91FF;}&:active{background-color:#3D91FF;}}}}@media (max-width: 768px){background-image:none;height:900px;position:relative;height:auto;.bg-img{display:block;width:100%;}.font-nav-content{position:absolute;left:0;top:10px;width:100%;height:40%;justify-content:center;.nav-content-img{width:100%;text-align:center;img{width:65%;}.nav-btn-download{height:50px;width:65%;}}}}}.source-intro{margin:100px auto;background-image:url(", text_web, ");width:800px;height:590px;background-repeat:no-repeat;background-position:right bottom;background-size:cover;@media (max-width:768px){margin:13% auto;width:64%;background-image:url(", text_h5, ");background-size:contain;background-position:center;}}.font-info{background:#F7F8F9;margin-bottom:60px;padding:80px 0;text-align:center;img{width:400px;}@media (max-width:768px){margin-bottom:40px;padding:60px 0;img{width:80%;height:auto;}}}.designer-box{background:#F7F8F9;padding-top:40px;}.designer-part{width:1200px;margin:0 auto;.designer-title{display:flex;margin-bottom:60px;img{width:90px;}&>div:last-child{flex-grow:1;margin-left:24px;border-bottom:1px solid rgba(151, 151, 151, .3);}@media (max-width:768px){margin-bottom:40px;img{width:60px;height:auto;}}}.designer-list{width:100%;display:flex;flex-wrap:wrap;@media (max-width: 768px){justify-content:space-between;}.designer-item{img{width:200px;border-radius:16px;}&>div:last-child{text-align:center;font-size:18px;color:#000000;padding:20px 0 40px 0;font-family:PingFangSC-Regular;}@media (max-width: 768px){img{border-radius:8px;}&>div:last-child{font-size:12px;padding:10px 0 25px 0;}}}.designer-item:not(:nth-child(5n)){margin-right:50px;}}@media (max-width: 768px){width:90%;.designer-list{.designer-item{width:22%;img{width:100%!important;}}.designer-item:not(:nth-child(5n)){margin-right:0;}}}}.icon-list-box{/* padding-top: 60px;\n            @media (max-width: 768px) {\n                padding-top: 30px;\n            } */}.icon-list{width:1200px;margin:0 auto;@media (max-width: 768px){width:98%;}.icon-box{margin-top:20px;.icon-box-title{margin-bottom:60px;display:flex;&>div{border-bottom:1px solid rgba(151, 151, 151, .3);}&>div:first-child{display:none;}img{height:30px;}&>div:last-child{width:100%;margin-left:24px;}@media (max-width: 768px){margin-bottom:40px;&>div:first-child{display:block;width:45%;margin-right:24px;}&>div:last-child{width:45%;margin-left:24px;}img{height:20px;}}}.icon-wrapper{display:flex;flex-wrap:wrap;img{width:60px;height:60px;}.icon-item{width:240px;display:flex;align-items:center;margin-bottom:60px;display:flex;&>div:last-child{margin-left:20px;font-family:PingFangSC-Regular;font-size:16px;color:#000000;}@media (max-width: 768px){text-align:center;display:block;margin-bottom:30px;width:33.33%;&>div:last-child{font-size:14px!important;margin-left:0px;margin-top:5px;}img{width:45%;height:auto;}}}}}}");
 }

package/es/site/src/pages/index/styles.js

@@ -3,5 +3,5 @@ import global from '../../styles/default';
 import banner from '../../imgs/banner.jpg';
 import h5banner from '../../imgs/h5banner.jpg';
 export function makeStyles() {
-  return /*#__PURE__*/css("font-family:", global.fontFamily, ";.nav{height:460px;position:relative;margin-top:-64px;.nav-bg,.nav-content-box{width:100%;height:100%;position:absolute;left:0;top:0;}.nav-bg{z-index:1;background-image:url(", banner, ");background-repeat:no-repeat;background-size:cover;}.nav-video-box{width:100%;height:100%;overflow:hidden;position:absolute;left:0;top:0;.nav-video-bg{width:1920px;height:460px;}}.nav-content-box{z-index:10;background:linear-gradient(270deg, rgba(248,252,255,0) 32%, rgba(244,249,255,0.96) 73%);display:flex;align-items:center;justify-content:center;padding:0 20px;}.nav-content{width:", global.contentWidth, "px;color:#000000;height:100%;position:relative;.main-title.h5-title{font-size:40px;}.h5-title{display:none;}.web-title{display:block;}.h5-title{width:100%;text-align:center;}&>div{position:absolute;}.main-title{font-size:45px;font-weight:500;top:164px;}.sub-title{font-size:22px;top:237px;}&>div:last-child{top:340px;.k-btn{margin-right:16px;}}}}@media (min-width: 1920px){.nav{.nav-video-box{.nav-video-bg{width:100%;height:auto;}}}}@media (max-width: 768px){.nav{.nav-content{width:100%;.h5-title{display:block;}.web-title{display:none;}.sub-title{margin-top:10px;}&>div:last-child{width:100%;text-align:center;}}.nav-bg{background-image:url(", h5banner, ");background-size:cover;background-position:center;}.nav-video-box{&,& video{display:none;}}}}");
+  return /*#__PURE__*/css("font-family:", global.fontFamily, ";.nav{height:460px;position:relative;margin-top:-64px;.nav-bg,.nav-content-box{width:100%;height:100%;position:absolute;left:0;top:0;}.nav-bg{z-index:1;background-image:url(", banner, ");background-repeat:no-repeat;background-size:cover;}.nav-video-box{width:100%;height:100%;overflow:hidden;position:absolute;left:0;top:0;.nav-video-bg{width:1920px;height:460px;}}.nav-content-box{z-index:10;background:linear-gradient(270deg, rgba(248,252,255,0) 32%, rgba(244,249,255,0.96) 73%);display:flex;align-items:center;justify-content:center;padding:0 20px;}.nav-content{width:", global.contentWidth, "px;color:#000000;height:100%;position:relative;.main-title.h5-title{font-size:36px;}.h5-title{display:none;}.web-title{display:block;}.h5-title{width:100%;text-align:center;}&>div{position:absolute;}.main-title{font-size:45px;font-weight:500;top:164px;}.sub-title{font-size:22px;top:237px;}&>div:last-child{top:340px;.k-btn{margin-right:16px;}}}}@media (min-width: 1920px){.nav{.nav-video-box{.nav-video-bg{width:100%;height:auto;}}}}@media (max-width: 768px){.nav{.nav-content{width:100%;.h5-title{display:block;}.web-title{display:none;}.sub-title{margin-top:10px;}&>div:last-child{width:100%;text-align:center;}}.nav-bg{background-image:url(", h5banner, ");background-size:cover;background-position:center;}.nav-video-box{&,& video{display:none;}}}}");
 }

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "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.6",
+    "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.6",
+    "intact": "^3.0.9",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",