@king-design/react 2.0.6 → 2.0.8

package/__tests__/components/drawer.spec.tsx

@@ -0,0 +1,30 @@
+import React, {createRef} from 'react';
+import * as ReactDOM from 'react-dom';
+import {Drawer, Card, Button} from '../../';
+import {Component} from 'intact-react';
+
+describe('Drawer', () => {
+    it('should render react element correctly', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        class Test extends Component {
+            static template = `<div ref="a">test</div>`;
+            mounted() {
+                expect(document.body.contains(this.refs.a));
+            }
+        }
+
+        ReactDOM.render(
+            <Card>
+                <Drawer>
+                    <div><Test /></div>
+                </Drawer>
+            </Card>,
+            container
+        );
+
+        ReactDOM.unmountComponentAtNode(container);
+        document.body.removeChild(container);
+    });
+});

package/__tests__/index.ts

@@ -15,7 +15,7 @@ testsContext.keys().forEach(testsContext);
 
 // const reactReq = require.context('~/components/', true, /^((?!(affix|code|layout)).)*\/demos\/.*react\.tsx$/);
 const reactReq = require.context('~/components/', true, /^((?!(affix|code)).)*\/demos\/.*react\.tsx$/);
-// const reactReq = require.context('~/components/', true, /button\/demos\/.*react\.tsx$/);
+// const reactReq = require.context('~/components/', true, /layout\/demos\/.*react\.tsx$/);
 
 describe('React Demos', () => {
     afterEach(() => unmount());

package/__tests__/karma.conf.js

@@ -16,7 +16,12 @@ module.exports = function (config) {
         customLaunchers: {
             'MyChromeHeadless': {
                 base: 'ChromeHeadless',
-                flags: ['--window-size=1920,1080', '--force-device-scale-factor=1'],
+                flags: [
+                    '--window-size=1920,1080',
+                    '--force-device-scale-factor=1',
+                    '--disable-gpu',
+                    '--no-sandbox',
+                ],
             }
         },
         frameworks: ['webpack', 'mocha', 'sinon-chai', 'snapshot', 'mocha-snapshot'],

package/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/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/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/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/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-react';
 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/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/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/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-react';
+import { useInstance, onMounted } from 'intact-react';
 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/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/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-react';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, callAll } from 'intact-react';
 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/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/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/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/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/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/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,7 +57,7 @@ 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";
 
 
 export {normalize} from 'intact-react';

package/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,7 +59,7 @@ 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 */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -37,7 +37,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "^3.0.6",
+    "intact-react": "3.0.9",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",