@king-design/react 2.0.0-beta.1 → 2.0.2

package/components/input/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   get fontSize() {
     return theme.default.fontSize;
   },
@@ -32,8 +36,9 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
+  // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
   get hoverBorder() {
-    return "1px solid " + theme.color.darkBorder;
+    return "1px solid " + theme.color.primary;
   },
 
   get borderRadius() {
@@ -115,7 +120,7 @@ setDefault(function () {
   }).input;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", theme.transition, ",background ", theme.transition, ",box-shadow ", theme.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;}.k-input-clear{display:inline-block;vertical-align:top;cursor:pointer;opacity:0;transition:opacity ", theme.transition, ";pointer-events:none;color:", input.clearIconColor, ";&:hover{color:", theme.color.primary, ";}+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", theme.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px 0;border-radius:0;border:none;}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";.k-select{z-index:1;.k-select-wrapper{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}.k-input-append{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;.k-select{.k-select-wrapper{border-radius:0 ", theme.borderRadius, " ", theme.borderRadius, " 0;}}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;width:", input.width, ";vertical-align:middle;.k-input-wrapper{display:inline-block;width:100%;position:relative;}.k-input-inner{display:inline-block;width:100%;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";outline:none;position:relative;color:", input.color, ";&:hover{border:", input.hoverBorder, ";z-index:1;}&:focus{border:", input.focusBorder, ";z-index:1;}&::placeholder{color:", input.placeholderColor, ";}}&.k-fluid{width:100%;}.k-input-prefix,.k-input-suffix{position:absolute;top:50%;transform:translateY(-50%);z-index:2;}.k-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";+*{margin-left:", input.clearIconGap, ";}}&:hover .k-input-clear.k-input-show{opacity:1;pointer-events:all;}&.k-stack-clear{.k-input-clear{position:absolute;z-index:1;right:0;&.k-input-show+i{transition:opacity ", input.transition, ";}}&:hover{.k-input-clear.k-input-show+i{opacity:0;}}}&.k-group{display:table;.k-input-inner{border-radius:0;}.k-input-wrapper:first-child{.k-input-inner{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.k-input-wrapper:last-child{.k-input-inner{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}}.k-input-prepend,.k-input-append{display:table-cell;width:1px;vertical-align:middle;background-color:", input.groupBgColor, ";border:", input.border, ";text-align:center;white-space:nowrap;.k-btn{margin:-1px 0;border-radius:0;border:none;}.k-select{margin:-1px;text-align:left;}}.k-input-prepend{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";.k-select{z-index:1;.k-select-wrapper{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}.k-input-append{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;.k-select{.k-select-wrapper{border-radius:0 ", theme.borderRadius, " ", theme.borderRadius, " 0;}}}.k-input-padding{padding:0 ", input.groupPaddingGap, ";}.k-input-prepend{border-right:none;}.k-input-append{border-left:none;}&.k-disabled{color:", input.disabledColor, ";cursor:not-allowed;.k-input-inner{color:", input.disabledColor, ";border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = input[size];
     var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-inner{height:", styles.height, ";line-height:", styles.height, ";font-size:", styles.fontSize, ";padding:0 ", styles.paddingGap, ";}.k-input-prefix{left:", styles.paddingGap, ";}.k-input-suffix{right:", styles.paddingGap, ";}&.k-with-prefix{.k-input-inner{padding-left:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&.k-with-suffix,&.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 1rem + ", input.clearIconGap, ");}}&:not(.k-stack-clear).k-with-suffix.k-clearable{.k-input-inner{padding-right:calc(", styles.paddingGap, " + 2rem + ", input.clearIconGap, " * 2);}}");
     if (size === 'default') return sizeClassName;
@@ -123,7 +128,7 @@ export function makeStyles() {
   }), "&.k-inline{.k-input-inner{height:auto;line-height:inherit;border:none;border-radius:0;padding:0;}}.k-textarea{padding:", input.textareaPadding, ";height:auto;line-height:1.5;vertical-align:top;}.k-input-fake{position:absolute;visibility:hidden;top:0;white-space:nowrap;}&.k-auto-width{width:auto;.k-input-inner{box-sizing:content-box;}}");
 }
 export function makeSearchStyles() {
-  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", theme.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;display:inline-block;.k-input{transition:width ", input.transition, ";}.k-btn{position:absolute;top:0;right:0;z-index:1;}.k-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.k-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size == 'default') return;
     return /*#__PURE__*/css(".k-input.k-", size, "{width:", input[size].height, ";}");
   }), ";.k-input{width:", input.default.height, ";}.k-input-inner{padding:0!important;}}&.k-line{.k-input-inner{border-width:0;}&.k-open{.k-input-inner{border-bottom-width:1px;}}}");

package/components/layout/styles.d.ts

@@ -1,6 +1,6 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
-export declare function getCollapseWidth(): any;
+export declare function getCollapseWidth(): string;
 export declare function makeLayoutStyles(): string;
 export declare function makeHeaderStyles(): string;
 export declare function makeAsideStyles(): string;

package/components/layout/styles.js

@@ -7,6 +7,10 @@ import { menu } from '../menu/styles';
 var sizes = ['small', 'large'];
 export var themes = ['light', 'dark', 'white'];
 var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+
   get color() {
     return menu.item.color;
   },
@@ -61,17 +65,17 @@ export function getCollapseWidth() {
   return layout.collapsedWidth;
 }
 export function makeLayoutStyles() {
-  return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", theme.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
+  return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
 }
 export function makeHeaderStyles() {
-  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", theme.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";}");
   }), ";");
 }
 export function makeAsideStyles() {
-  return /*#__PURE__*/css("transition:width ", theme.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");

package/components/menu/index.spec.js

@@ -18,14 +18,14 @@ describe('Menu', function () {
             title = element.querySelector('.k-expanded .k-menu-title');
             title.click();
             _context.next = 5;
-            return wait(300);
+            return wait(500);
 
           case 5:
             expect(element.outerHTML).to.matchSnapshot();
             expect(instance.get('expandedKeys')).to.eql([]);
             title.click();
             _context.next = 10;
-            return wait(300);
+            return wait(500);
 
           case 10:
             expect(element.outerHTML).to.matchSnapshot();
@@ -39,14 +39,14 @@ describe('Menu', function () {
     }, _callee);
   })));
   it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mount2, instance, element, menu, _element$querySelecto, title, disabledTitle, subTitle;
+    var _mount2, instance, element, _element$querySelecto, title, disabledTitle, subTitle;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
-            menu = instance.refs.__test;
+            expect(element.innerHTML).to.matchSnapshot();
             _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
             title.click();
             _context2.next = 6;
@@ -54,14 +54,14 @@ describe('Menu', function () {
 
           case 6:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             disabledTitle.click();
             _context2.next = 11;
             return wait();
 
           case 11:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('1');
+            expect(instance.get('selectedKey')).to.eql('1');
             subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
             subTitle.click();
             _context2.next = 17;
@@ -69,9 +69,16 @@ describe('Menu', function () {
 
           case 17:
             expect(element.outerHTML).to.matchSnapshot();
-            expect(menu.get('selectedKey')).to.eql('3-1');
+            expect(instance.get('selectedKey')).to.eql('3-1'); // clear
 
-          case 19:
+            instance.set('selectedKey', '');
+            _context2.next = 22;
+            return wait();
+
+          case 22:
+            expect(element.querySelector('.k-highlighted')).to.be.null;
+
+          case 23:
           case "end":
             return _context2.stop();
         }

package/components/menu/item.d.ts

@@ -2,7 +2,7 @@ import { Component, TypeDefs, Key } from 'intact-react';
 import { Menu } from './menu';
 export interface MenuItemProps {
     key: Key;
-    to?: string;
+    to?: string | object;
     dot?: boolean;
     disabled?: boolean;
 }
@@ -18,7 +18,6 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     parentMenu: Menu<Key>;
     parentMenuItem: MenuItem | null;
     private expanded;
-    private highlight;
     private dropdown;
     private router;
     init(): void;

package/components/menu/item.js

@@ -4,17 +4,18 @@ import { __decorate } from "tslib";
 import { Component, inject, provide } from 'intact-react';
 import { ROOT_MENU, MENU } from './menu';
 import template from './item.vdt';
-import { bind, isExternalLink } from '../utils';
-import { useHighlight } from './useHighlight';
+import { bind } from '../utils';
 import { useExpanded } from './useExpanded';
 import { useDropdown } from './useDropdown';
-import { useRouter } from '../../hooks/useRouter';
+import { useRouter, navigate } from '../../hooks/useRouter';
+import { useRecordItem } from '../../hooks/useRecordComponent';
+import { MENU_RECORD_KEY } from './useHighlight';
 var typeDefs = {
   key: {
     type: [String, Number],
     required: true
   },
-  to: String,
+  to: [String, Object],
   dot: Boolean,
   disabled: Boolean
 };
@@ -36,7 +37,6 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
     _this.parentMenu = inject(MENU);
     _this.parentMenuItem = inject(MENU_ITEM, null);
     _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
-    _this.highlight = useHighlight(_this.rootMenu, _this.parentMenuItem);
     _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
     _this.router = useRouter();
     return _this;
@@ -46,35 +46,28 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
 
   _proto.init = function init() {
     provide(MENU_ITEM, this);
+    useRecordItem(MENU_RECORD_KEY);
   };
 
   _proto.onClick = function onClick(hasSubMenu, e) {
     var _this$get = this.get(),
         disabled = _this$get.disabled,
-        to = _this$get.to;
+        to = _this$get.to,
+        key = _this$get.key;
 
     if (disabled) return;
 
     if (hasSubMenu) {
       this.expanded.toggle();
     } else {
-      this.highlight.select();
+      this.rootMenu.highlight.select(key);
     }
 
     this.trigger('click', e);
 
     if (!hasSubMenu) {
       this.trigger('select', this, e);
-
-      if (to) {
-        var router = this.router.value;
-
-        if (router && !isExternalLink(to)) {
-          router.push(to);
-        } else {
-          location.href = to;
-        }
-      }
+      navigate(this.router.value, to);
     }
   };
 

package/components/menu/item.vdt.js

@@ -32,9 +32,9 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled,
       dot = _this$get.dot;
 
-  var _this$highlight = this.highlight,
-      isHighlighted = _this$highlight.isHighlighted,
-      isSelected = _this$highlight.isSelected;
+  var _rootMenu$highlight = rootMenu.highlight,
+      isHighlighted = _rootMenu$highlight.isHighlighted,
+      isSelected = _rootMenu$highlight.isSelected;
   var isExpandedKey = this.expanded.isExpanded;
   var isExpanded = isExpandedKey(key);
 
@@ -50,7 +50,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var classNameObj = (_classNameObj = {
     'k-menu-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(), _classNameObj['k-highlighted'] = isHighlighted(), _classNameObj[makeItemStyles()] = true, _classNameObj);
+  }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
   var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 
   var title = function title(children) {

package/components/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { Component, TypeDefs, Key } from 'intact-react';
+import { useHighlight } from './useHighlight';
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[];
     selectedKey?: K;
@@ -22,5 +23,7 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
     static defaults: () => Partial<MenuProps<Key>>;
     rootMenu: Menu<Key> | null;
     parentMenu: Menu<Key> | null;
+    subExpandedKeys?: Set<K>;
+    highlight?: ReturnType<typeof useHighlight>;
     init(): void;
 }

package/components/menu/menu.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component, provide, inject } from 'intact-react';
 import template from './menu.vdt';
+import { useHighlight } from './useHighlight';
 var typeDefs = {
   expandedKeys: Array,
   selectedKey: [String, Number],
@@ -39,6 +40,8 @@ export var Menu = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootMenu = inject(ROOT_MENU, null);
     _this.parentMenu = inject(MENU, null);
+    _this.subExpandedKeys = void 0;
+    _this.highlight = void 0;
     return _this;
   }
 
@@ -49,6 +52,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
 
     if (!this.rootMenu) {
       provide(ROOT_MENU, this);
+      this.highlight = useHighlight();
     }
   };
 

package/components/menu/styles.d.ts

@@ -1,5 +1,66 @@
 import '../../styles/global';
-declare let menu: any;
+declare const defaults: {
+    readonly transition: string;
+    width: string;
+    bgColor: string;
+    fontSize: string;
+    readonly borderRadius: string;
+    item: {
+        height: string;
+        padding: string;
+        color: string;
+        hoverColor: string;
+        readonly disabledColor: string;
+        readonly activeBgColor: string;
+        dotFontSize: string;
+    };
+    icon: {
+        width: string;
+        gap: string;
+    };
+    header: {
+        height: string;
+        fontSize: string;
+        borderBottom: string;
+    };
+    subBgColor: string;
+    light: {
+        bgColor: string;
+        subBgColor: string;
+        border: string;
+        item: {
+            readonly color: string;
+            readonly hoverColor: string;
+            disabledColor: string;
+        };
+    };
+    white: {
+        bgColor: string;
+        subBgColor: string;
+        border: string;
+        item: {
+            readonly color: string;
+            readonly hoverColor: string;
+            readonly disabledColor: string;
+        };
+        active: {
+            readonly color: string;
+            readonly bgColor: string;
+        };
+    };
+    dropdown: {
+        minWidth: string;
+    };
+    large: {
+        width: string;
+        readonly fontSize: string;
+    };
+    small: {
+        width: string;
+        readonly fontSize: string;
+    };
+};
+declare let menu: typeof defaults;
 export { menu };
 export declare function makeMenuStyles(): string;
 export declare function makeTitleStyles(): string;

package/components/menu/styles.js

@@ -5,6 +5,10 @@ import { deepDefaults, getLeft, palette } from '../../styles/utils';
 import '../../styles/global';
 var sizes = ['large', 'small'];
 var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+
   width: '200px',
   bgColor: '#262626',
   fontSize: '14px',
@@ -118,7 +122,7 @@ export function makeMenuStyles() {
 
   // we must increase the priority by adding &.k-menu
   // to override the css of dropdownMenu
-  return /*#__PURE__*/css("&.k-menu{width:", menu.width, ";transition:width ", theme.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu){width:auto;background:", menu.subBgColor, ";.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu){.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.k-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.k-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
+  return /*#__PURE__*/css("&.k-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu){width:auto;background:", menu.subBgColor, ";.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu){.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.k-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.k-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
     var styles = menu[theme];
     return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";.k-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.k-menu-item{.k-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.k-highlighted{>.k-menu-title{color:", styles.item.hoverColor, ";}}&.k-disabled{>.k-menu-title{color:", styles.item.disabledColor, "!important;}}}.k-menu:not(.k-dropdown-menu){background:", styles.subBgColor, ";}&.k-horizontal{.k-menu-header{border-right:", styles.border, ";}}}");
   }), " &.k-white{.k-menu-item.k-active{>.k-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -132,5 +136,5 @@ export function makeTitleStyles() {
 }
 export function makeItemStyles() {
   var item = menu.item;
-  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", theme.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", theme.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotate(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
+  return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
 }

package/components/menu/useExpanded.d.ts

@@ -1,8 +1,5 @@
-import { Key } from 'intact-react';
 import type { Menu } from './';
-export declare function useExpanded(rootMenu: Menu, parentMenu: Menu & {
-    subExpandedKeys?: Set<Key>;
-}): {
+export declare function useExpanded(rootMenu: Menu, parentMenu: Menu): {
     isExpanded: () => boolean;
     expand: () => void;
     shrink: () => void;

package/components/menu/useHighlight.d.ts

@@ -1,10 +1,7 @@
 import { Key } from 'intact-react';
-import type { Menu, MenuItem } from './';
-export declare function useHighlight(rootMenu: Menu & {
-    highlightedKeys?: Key[];
-}, parentMenuItem: MenuItem | null): {
-    isHighlighted: () => boolean;
-    updateStatus: (v: Key | undefined) => void;
-    select: () => void;
-    isSelected: () => boolean;
+export declare const MENU_RECORD_KEY = "MenuKeys";
+export declare function useHighlight(): {
+    isHighlighted: (key: Key) => boolean;
+    select: (key: Key) => void;
+    isSelected: (key: Key) => boolean;
 };

package/components/menu/useHighlight.js

@@ -2,56 +2,67 @@ 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 { inArray } from '../table/useChecked'; // import {isEqualArray} from '../utils';
+import { useRecordParent } from '../../hooks/useRecordComponent';
+import { inArray } from '../table/useChecked';
+import { useState } from '../../hooks/useState';
+export var MENU_RECORD_KEY = 'MenuKeys';
+export function useHighlight() {
+  var instance = useInstance();
+  var menuItems = useRecordParent(MENU_RECORD_KEY);
+  var highlightedKeys = useState([]);
+  instance.watch('selectedKey', updateStatus, {
+    presented: true
+  });
 
-export function useHighlight(rootMenu, parentMenuItem) {
-  var instance = useInstance(); // we can not watch selectedKey on before initializing rootMenu
-  // because rootMenu has initialized
-  // so call updateStatus here
+  function updateStatus(newValue) {
+    var _loop = function _loop(i) {
+      var menuItem = menuItems[i];
+      var key = menuItem.get('key');
+      if (newValue !== key) return "continue";
+      var items = [];
+      var parentItem = menuItem.parentMenuItem;
 
-  updateStatus(rootMenu.get('selectedKey'));
-  rootMenu.watch('selectedKey', updateStatus);
+      while (parentItem) {
+        items.push(parentItem);
+        parentItem = parentItem.parentMenuItem;
+      }
 
-  function updateStatus(v) {
-    var _instance$get = instance.get(),
-        key = _instance$get.key;
+      var expandedKeys = new _Set(instance.get('expandedKeys'));
+      highlightedKeys.set(_mapInstanceProperty(items).call(items, function (item) {
+        var key = item.get('key');
+        expandedKeys.add(key);
+        return key;
+      }));
+      instance.set('expandedKeys', _Array$from(expandedKeys));
+      return {
+        v: void 0
+      };
+    };
 
-    if (v !== key) return;
-    var items = [];
-    var parentItem = parentMenuItem;
+    for (var i = 0; i < menuItems.length; i++) {
+      var _ret = _loop(i);
 
-    while (parentItem) {
-      items.push(parentItem);
-      parentItem = parentItem.parentMenuItem;
+      if (_ret === "continue") continue;
+      if (typeof _ret === "object") return _ret.v;
     }
 
-    var expandedKeys = new _Set(rootMenu.get('expandedKeys'));
-
-    var highlightedKeys = _mapInstanceProperty(items).call(items, function (item) {
-      var key = item.get('key');
-      expandedKeys.add(key);
-      return key;
-    });
-
-    rootMenu.highlightedKeys = highlightedKeys;
-    rootMenu.set('expandedKeys', _Array$from(expandedKeys));
+    highlightedKeys.set([]);
   }
 
-  function isHighlighted() {
-    return inArray(rootMenu.highlightedKeys, instance.get('key'));
+  function isHighlighted(key) {
+    return inArray(highlightedKeys.value, key);
   }
 
-  function select() {
-    rootMenu.set('selectedKey', instance.get('key'));
+  function select(key) {
+    instance.set('selectedKey', key);
   }
 
-  function isSelected() {
-    return rootMenu.get('selectedKey') === instance.get('key');
+  function isSelected(key) {
+    return instance.get('selectedKey') === key;
   }
 
   return {
     isHighlighted: isHighlighted,
-    updateStatus: updateStatus,
     select: select,
     isSelected: isSelected
   };

package/components/message/index.spec.js

@@ -73,7 +73,7 @@ describe('Message', function () {
             expect(message1).eql(message);
             dispatchEvent(message, 'mouseleave');
             _context2.next = 14;
-            return wait(300);
+            return wait(500);
 
           case 14:
             message1 = getElement('.k-message');

package/components/message/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   top: "10px",
   transform: "translateY(-10px)",
 
@@ -53,8 +57,8 @@ export function makeMessagesStyles() {
 export function makeMessageStyles() {
   var _context;
 
-  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";background:", message.bgColor, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";border:", message.border, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;.k-icon{font-size:", message.closeFontSize, ";}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";color:", message.icon.color, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['error', 'success', 'warning']).call(_context, function (type) {
+  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";background:", message.bgColor, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";border:", message.border, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}.k-icon{font-size:", message.closeFontSize, ";}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";color:", message.icon.color, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['error', 'success', 'warning']).call(_context, function (type) {
     var color = theme.color[type === 'error' ? 'danger' : type];
     return /*#__PURE__*/css("&.k-", type, "{.k-message-container{color:", color, ";border-color:", color, ";background:", palette(color, -4), ";}.k-message-close{color:", color, ";&:hover{color:", palette(color, 1), ";}}}");
-  }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", theme.transition, ",opacity ", theme.transition, ";}&.transition-move{transition:transform ", theme.transition, ";}");
+  }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
 }

package/components/pagination/styles.js

@@ -55,7 +55,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border:none;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/components/radio/index.vdt.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "disabled", "trueValue", "style", "children", "value", "ref", "key", "title"];
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-react';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
+import { Wave } from '../wave';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -51,14 +52,18 @@ export default function ($props, $blocks, $__proto__) {
     'tabindex': disabled ? "-1" : "0",
     'ev-keypress': this.onKeypress,
     'ev-click': this.fixClick
-  }), [_$ce(2, 'span', _$cv('input', _extends({}, getRestProps(this, rest), {
-    'type': 'radio',
+  }), [_$cc(Wave, {
     'disabled': disabled,
-    'value': trueValue,
-    'tabindex': '-1',
-    'ref': this.elementRef,
-    'checked': isChecked,
-    'ev-click': this.onClick
-  })), 2, 'k-radio-wrapper'), children ? _$ce(2, 'span', children, 0, 'k-radio-text') : undefined]);
+    'inset': '-2px',
+    'children': _$ce(2, 'span', _$cv('input', _extends({}, getRestProps(this, rest), {
+      'type': 'radio',
+      'disabled': disabled,
+      'value': trueValue,
+      'tabindex': '-1',
+      'ref': this.elementRef,
+      'checked': isChecked,
+      'ev-click': this.onClick
+    })), 2, 'k-radio-wrapper')
+  }), children ? _$ce(2, 'span', children, 0, 'k-radio-text') : undefined]);
 }
 ;