@king-design/intact 2.0.1 → 2.0.2

package/components/cascader/index.spec.ts

@@ -5,6 +5,7 @@ import LoadDataDemo from '~/components/cascader/demos/loadData';
 import FilterDemo from '~/components/cascader/demos/filterable';
 import {mount, unmount, dispatchEvent, getElement, getElements, wait} from '../../test/utils';
 import {Cascader} from './';
+import {Component} from 'intact';
 
 describe('Cascader', () => {
     afterEach(async () => {
@@ -146,4 +147,62 @@ describe('Cascader', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(dropdown.innerText).to.eql('无数据');
     });
+
+    it('duplicated sub data', async () => {
+        class Demo extends Component {
+            static template = `const {Cascader} = this; <Cascader data={this.get('data')} v-model="value" />`;
+            static defaults() {
+                return {
+                    value: ['beijing', 'haidian'],
+                    data: [
+                        {
+                            value: 'beijing',
+                            label: '北京',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            value: 'hunan',
+                            label: '湖南',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const [dropdown1, dropdown2] = getElements('.k-cascader-menu');
+        const [item1, item2] = dropdown1.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item1.classList.contains('k-selected')).to.be.true;
+        expect(item2.classList.contains('k-selected')).to.be.false;
+        const [item21] = dropdown2.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item21.classList.contains('k-selected')).to.be.true;
+
+        dispatchEvent(item2, 'click');
+        await wait();
+
+        const dropdown3 = getElement('.k-cascader-menu')!;
+        const [item31] = dropdown3.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item31.classList.contains('k-selected')).to.be.false;
+
+        dispatchEvent(item31, 'click');
+        await wait();
+        
+        expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+        expect(element.textContent).to.eql('湖南 / 海淀区');
+    });
 });

package/components/cascader/index.vdt

@@ -11,7 +11,7 @@ const classNameObj = {
 };
 
 const {values, isShowed, isSelected, onSelect, toggleShowedValue} = this.value;
-const Options = (data, level, loaded) => {
+const Options = (data, level, loaded, parentSelected) => {
     if (!data.length) {
         if (!loaded) {
             return <Icon class="ion-load-c k-cascader-loading" rotate />
@@ -23,7 +23,7 @@ const Options = (data, level, loaded) => {
     return data.map((item, index) => {
         const value = item.value;
         const showed = isShowed(value, level);
-        const selected = isSelected(value, level);
+        const selected = parentSelected && isSelected(value, level);
         const children = item.children;
 
         const Item = () => {
@@ -58,7 +58,7 @@ const Options = (data, level, loaded) => {
                 >
                     {Item()}
                     <DropdownMenu class={classNameObj}>
-                        {showed ? Options(children, level + 1, item.loaded) : null}
+                        {showed ? Options(children, level + 1, item.loaded, selected) : null}
                     </DropdownMenu>
                 </Dropdown> :
                 Item()
@@ -74,7 +74,7 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
             class={classNameObj}
             key="common"
         >
-            {Options(data, 0, true)}
+            {Options(data, 0, true, true)}
         </DropdownMenu>
         <DropdownMenu v-else
             key="filter"

package/components/cascader/useLabel.ts

@@ -14,23 +14,23 @@ export function useLabel() {
         const {format} = instance.get();
         const labels: string[] = [];
         const length = value.length;
-        const loop = (data: CascaderStringData[]) => {
+        const loop = (data: CascaderStringData[], level: number) => {
+            if (level === length) return;
+
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
-                if (value.includes(item.value)) {
+                if (item.value === value[level]) {
                     labels.push(item.label); 
-                    if (labels.length === length) {
-                        return;
+
+                    const children = item.children;
+                    if (children) {
+                        loop(children, level + 1);
                     }
                 }
-                const children = item.children;
-                if (children) {
-                    loop(children);
-                }
             }
         };
 
-        loop(data);
+        loop(data, 0);
 
         return labels.length ? format!(labels) : null;
     }

package/components/form/index.spec.ts

@@ -21,7 +21,7 @@ RemoteDemo.prototype.validateUserName = function(value) {
 };
 
 describe('Form', () => {
-    afterEach(() => unmount());
+    // afterEach(() => unmount());
 
     it('validate', async () => {
         const [instance, element] = mount(BasicDemo, null, basicDemoData);

package/components/menu/demos/collapse.md

@@ -24,7 +24,8 @@ import {Menu, MenuItem, Switch, Icon} from 'kpc';
         falseValue="dark"
     />
     <br /><br />
-    <Menu v-model:expandedKeys="expandedKeys" 
+    <Menu v-model:expandedKeys="expandedKeys"
+        v-model:selectedKey="selectedKey"
         collapse={this.get('collapse')}
         theme={this.get('theme')}
         ref="__test"
@@ -62,6 +63,7 @@ export default class extends Component<Props> {
     static defaults() {
         return {
             expandedKeys: ['3'],
+            selectedKey: '3-2',
             collapse: false,
             theme: 'dark'
         } as MenuProps;

package/components/menu/index.spec.ts

@@ -22,23 +22,29 @@ describe('Menu', () => {
 
     it('select', async () => {
         const [instance, element] = mount(CollapseDemo);
-        const menu = instance.refs.__test as Menu;
+
+        expect(element.innerHTML).to.matchSnapshot();
 
         const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');
         title.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
         disabledTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('1');
+        expect(instance.get('selectedKey')).to.eql('1');
 
         const subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title') as HTMLElement;
         subTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
-        expect(menu.get('selectedKey')).to.eql('3-1');
+        expect(instance.get('selectedKey')).to.eql('3-1');
+
+        // clear
+        instance.set('selectedKey', '');
+        await wait();
+        expect(element.querySelector('.k-highlighted')).to.be.null;
     });
 
     it('collapse', async () => {

package/components/menu/item.ts

@@ -4,10 +4,11 @@ import {Dropdown, DropdownMenu} from '../dropdown';
 import template from './item.vdt';
 import {bind} from '../utils';
 import {useState} from '../../hooks/useState';
-import {useHighlight} from './useHighlight';
 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';
 
 export interface MenuItemProps {
     key: Key 
@@ -42,23 +43,23 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     public parentMenuItem = inject<MenuItem | null>(MENU_ITEM, null);
 
     private expanded = useExpanded(this.rootMenu, this.parentMenu);
-    private highlight = useHighlight(this.rootMenu, this.parentMenuItem);
     private dropdown = useDropdown(this.rootMenu, this.parentMenu);
     private router = useRouter();
 
     init() {
         provide(MENU_ITEM, this);
+        useRecordItem(MENU_RECORD_KEY);
     }
 
     @bind
     public onClick(hasSubMenu: Menu, e: MouseEvent) {
-        const {disabled, to} = this.get();
+        const {disabled, to, key} = this.get();
         if (disabled) return;
         
         if (hasSubMenu) {
             this.expanded.toggle();
         } else {
-            this.highlight.select();
+            this.rootMenu.highlight!.select(key);
         }
 
         this.trigger('click', e);

package/components/menu/item.vdt

@@ -10,7 +10,7 @@ import {makeItemStyles, makeTitleStyles} from './styles';
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
 const {children, key, className, disabled, dot} = this.get();
-const {isHighlighted, isSelected} = this.highlight;
+const {isHighlighted, isSelected} = rootMenu.highlight;
 const {isExpanded: isExpandedKey} = this.expanded;
 const isExpanded = isExpandedKey(key);
 const {
@@ -23,8 +23,8 @@ const classNameObj = {
     [className]: className,
     'k-expanded': isExpanded, 
     'k-disabled': disabled,
-    'k-active':  isSelected(), 
-    'k-highlighted': isHighlighted(),
+    'k-active':  isSelected(key), 
+    'k-highlighted': isHighlighted(key),
     [makeItemStyles()]: true,
 };
 

package/components/menu/menu.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs, provide, inject, Key} from 'intact';
 import template from './menu.vdt';
+import {useHighlight} from './useHighlight';
 
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[]
@@ -46,6 +47,8 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
 
     public rootMenu = inject<Menu | null>(ROOT_MENU, null);
     public parentMenu = inject<Menu | null>(MENU, null);
+    public subExpandedKeys?: Set<K>;
+    public highlight?: ReturnType<typeof useHighlight>;
 
     init() {
         provide(MENU, this);
@@ -53,6 +56,7 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
         // is root menu or not
         if (!this.rootMenu) {
             provide(ROOT_MENU, this);
+            this.highlight = useHighlight();
         }
     }
 }

package/components/menu/useExpanded.ts

@@ -3,7 +3,7 @@ import type {Menu, MenuItem} from './';
 import {inArray, addOrRemove} from '../table/useChecked';
 import {isDropdown} from './useDropdown';
 
-export function useExpanded(rootMenu: Menu, parentMenu: Menu & {subExpandedKeys?: Set<Key>}) {
+export function useExpanded(rootMenu: Menu, parentMenu: Menu) {
     const instance = useInstance() as MenuItem;
 
     onBeforeUnmount(removeSubExpandedKey);

package/components/menu/useHighlight.ts

@@ -1,52 +1,57 @@
-import {useInstance, createRef, onMounted, onUpdated, onUnmounted, Key} from 'intact';
+import {useInstance, Key} from 'intact';
 import type {Menu, MenuItem} from './';
+import {useRecordParent} from '../../hooks/useRecordComponent';
 import {inArray} from '../table/useChecked';
-// import {isEqualArray} from '../utils';
-
-export function useHighlight(
-    rootMenu: Menu & {highlightedKeys?: Key[]},
-    parentMenuItem: MenuItem | null
-) {
-    const instance = useInstance() as MenuItem;
-
-    // we can not watch selectedKey on before initializing rootMenu
-    // because rootMenu has initialized
-    // so call updateStatus here
-    updateStatus(rootMenu.get('selectedKey'));
-    rootMenu.watch('selectedKey', updateStatus);
-
-    function updateStatus(v: Key | undefined) {
-        const {key} = instance.get();
-        if (v !== key) return;
-
-        const items = [];
-        let parentItem = parentMenuItem;
-        while (parentItem) {
-            items.push(parentItem);
-            parentItem = parentItem.parentMenuItem;
+import {useState} from '../../hooks/useState';
+
+export const MENU_RECORD_KEY = 'MenuKeys';
+
+export function useHighlight() {
+    const instance = useInstance() as Menu;
+    const menuItems = useRecordParent<MenuItem>(MENU_RECORD_KEY);
+    const highlightedKeys = useState<Key[]>([]);
+
+    instance.watch('selectedKey', updateStatus, {presented: true});
+
+    function updateStatus(newValue: Key | undefined) {
+        for (let i = 0; i < menuItems.length; i++) {
+            const menuItem = menuItems[i];
+            const key = menuItem.get('key');
+
+            if (newValue !== key) continue;
+
+            const items = [];
+            let parentItem = menuItem.parentMenuItem;
+            while (parentItem) {
+                items.push(parentItem);
+                parentItem = parentItem.parentMenuItem;
+            }
+            
+            const expandedKeys = new Set(instance.get('expandedKeys'));
+            highlightedKeys.set(items.map(item => {
+                const key = item.get('key');
+                expandedKeys.add(key);
+                return key;
+            }));
+            instance.set('expandedKeys', Array.from(expandedKeys))
+
+            return;
         }
-        
-        const expandedKeys = new Set(rootMenu.get('expandedKeys'));
-        const highlightedKeys = items.map(item => {
-            const 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: Key) {
+        return inArray(highlightedKeys.value, key);
     }
 
-    function select() {
-        rootMenu.set('selectedKey', instance.get('key'));
+    function select(key: Key) {
+        instance.set('selectedKey', key);
     }
 
-    function isSelected() {
-        return rootMenu.get('selectedKey') === instance.get('key');
+    function isSelected(key: Key) {
+        return instance.get('selectedKey') === key;
     }
 
-    return {isHighlighted, updateStatus, select, isSelected};
+    return {isHighlighted, select, isSelected};
 }

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

@@ -1,4 +1,6 @@
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/cascader/demos/basic';
 import CustomDemo from '~/components/cascader/demos/custom';
@@ -6,6 +8,8 @@ import ChangeOnSelectDemo from '~/components/cascader/demos/changeOnSelect';
 import LoadDataDemo from '~/components/cascader/demos/loadData';
 import FilterDemo from '~/components/cascader/demos/filterable';
 import { mount, unmount, dispatchEvent, getElement, getElements, wait } from '../../test/utils';
+import { Cascader } from './';
+import { Component } from 'intact';
 describe('Cascader', function () {
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -278,4 +282,88 @@ describe('Cascader', function () {
       }
     }, _callee7);
   })));
+  it('duplicated sub data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount7, instance, element, _getElements2, dropdown1, dropdown2, _dropdown1$querySelec4, item1, item2, _dropdown2$querySelec3, item21, dropdown3, _dropdown3$querySelec2, item31;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context8;
+
+                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(_context8 = [this]).call(_context8, args)) || this;
+                _this.Cascader = Cascader;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: ['beijing', 'haidian'],
+                  data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }, {
+                    value: 'hunan',
+                    label: '湖南',
+                    children: [{
+                      value: 'haidian',
+                      label: '海淀区'
+                    }]
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "const {Cascader} = this; <Cascader data={this.get('data')} v-model=\"value\" />";
+            _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+            dispatchEvent(element, 'click');
+            _context9.next = 6;
+            return wait();
+
+          case 6:
+            _getElements2 = getElements('.k-cascader-menu'), dropdown1 = _getElements2[0], dropdown2 = _getElements2[1];
+            _dropdown1$querySelec4 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec4[0], item2 = _dropdown1$querySelec4[1];
+            expect(item1.classList.contains('k-selected')).to.be.true;
+            expect(item2.classList.contains('k-selected')).to.be.false;
+            _dropdown2$querySelec3 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item21 = _dropdown2$querySelec3[0];
+            expect(item21.classList.contains('k-selected')).to.be.true;
+            dispatchEvent(item2, 'click');
+            _context9.next = 15;
+            return wait();
+
+          case 15:
+            dropdown3 = getElement('.k-cascader-menu');
+            _dropdown3$querySelec2 = dropdown3.querySelectorAll(':scope > .k-dropdown-item'), item31 = _dropdown3$querySelec2[0];
+            expect(item31.classList.contains('k-selected')).to.be.false;
+            dispatchEvent(item31, 'click');
+            _context9.next = 21;
+            return wait();
+
+          case 21:
+            expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+            expect(element.textContent).to.eql('湖南 / 海淀区');
+
+          case 23:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });

package/es/components/cascader/index.vdt.js

@@ -41,7 +41,7 @@ export default function ($props, $blocks, $__proto__) {
       onSelect = _this$value.onSelect,
       toggleShowedValue = _this$value.toggleShowedValue;
 
-  var Options = function Options(data, level, loaded) {
+  var Options = function Options(data, level, loaded, parentSelected) {
     if (!data.length) {
       if (!loaded) {
         return _$cc(Icon, _$tmp0);
@@ -53,7 +53,7 @@ export default function ($props, $blocks, $__proto__) {
     return _mapInstanceProperty(data).call(data, function (item, index) {
       var value = item.value;
       var showed = isShowed(value, level);
-      var selected = isSelected(value, level);
+      var selected = parentSelected && isSelected(value, level);
       var children = item.children;
 
       var Item = function Item() {
@@ -79,7 +79,7 @@ export default function ($props, $blocks, $__proto__) {
         'ev-show': _this.load.bind(null, item),
         'children': [Item(), _$cc(DropdownMenu, {
           'className': _$cn(classNameObj),
-          'children': showed ? Options(children, level + 1, item.loaded) : null
+          'children': showed ? Options(children, level + 1, item.loaded, selected) : null
         })]
       }) : Item();
     });
@@ -100,7 +100,7 @@ export default function ($props, $blocks, $__proto__) {
       return !filterable || !keywords ? _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
         'key': 'common',
-        'children': Options(data, 0, true)
+        'children': Options(data, 0, true, true)
       }, 'common') : _$cc(DropdownMenu, {
         'key': 'filter',
         'className': _$cn((_$cn2 = {

package/es/components/cascader/useLabel.js

@@ -1,4 +1,3 @@
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import { useInstance } from 'intact';
 import { useBaseLabel } from '../select/useBaseLabel';
 export function useLabel() {
@@ -11,27 +10,24 @@ export function useLabel() {
     var labels = [];
     var length = value.length;
 
-    var loop = function loop(data) {
+    var loop = function loop(data, level) {
+      if (level === length) return;
+
       for (var i = 0; i < data.length; i++) {
         var item = data[i];
 
-        if (_includesInstanceProperty(value).call(value, item.value)) {
+        if (item.value === value[level]) {
           labels.push(item.label);
+          var children = item.children;
 
-          if (labels.length === length) {
-            return;
+          if (children) {
+            loop(children, level + 1);
           }
         }
-
-        var children = item.children;
-
-        if (children) {
-          loop(children);
-        }
       }
     };
 
-    loop(data);
+    loop(data, 0);
     return labels.length ? format(labels) : null;
   }
 

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

@@ -8,7 +8,7 @@ import BasicDemo, { data as basicDemoData } from '~/components/form/demos/basic'
 import CustomDemo from '~/components/form/demos/custom';
 import VariableDemo from '~/components/form/demos/variable';
 import RemoteDemo from '~/components/form/demos/remote';
-import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { mount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact';
 import { Form, FormItem } from './';
 import { Input } from '../input';
@@ -29,9 +29,7 @@ RemoteDemo.prototype.validateUserName = function (value) {
 };
 
 describe('Form', function () {
-  afterEach(function () {
-    return unmount();
-  });
+  // afterEach(() => unmount());
   it('validate', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, form, item, input;
 

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

@@ -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/es/components/menu/item.d.ts

@@ -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/es/components/menu/item.js

@@ -5,10 +5,11 @@ import { Component, inject, provide } from 'intact';
 import { ROOT_MENU, MENU } from './menu';
 import template from './item.vdt';
 import { bind } from '../utils';
-import { useHighlight } from './useHighlight';
 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';
 var typeDefs = {
   key: {
     type: [String, Number],
@@ -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,19 +46,21 @@ 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);

package/es/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/es/components/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { Component, TypeDefs, Key } from 'intact';
+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/es/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';
 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/es/components/menu/useExpanded.d.ts

@@ -1,8 +1,5 @@
-import { Key } from 'intact';
 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/es/components/menu/useHighlight.d.ts

@@ -1,10 +1,7 @@
 import { Key } from 'intact';
-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/es/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';
-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/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.1
+ * @king-design v2.0.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -56,4 +56,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.1";
+export declare const version = "2.0.2";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.1
+ * @king-design v2.0.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -58,5 +58,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.1';
+export var version = '2.0.2';
 /* generate end */

package/es/site/data/components/menu/demos/collapse/index.js

@@ -15,6 +15,7 @@ var default_1 = /*#__PURE__*/function (_Component) {
   default_1.defaults = function defaults() {
     return {
       expandedKeys: ['3'],
+      selectedKey: '3-2',
       collapse: false,
       theme: 'dark'
     };

package/es/site/data/components/menu/demos/collapse/react.js

@@ -20,6 +20,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.state = {
       expandedKeys: ['3'],
+      selectedKey: '3-2',
       collapse: false,
       theme: 'dark'
     };
@@ -66,6 +67,12 @@ var Demo = /*#__PURE__*/function (_React$Component) {
           expandedKeys: expandedKeys
         });
       },
+      selectedKey: this.state.selectedKey,
+      onChangeSelectedKey: function onChangeSelectedKey(selectedKey) {
+        return _this2.setState({
+          selectedKey: selectedKey
+        });
+      },
       collapse: this.state.collapse,
       theme: this.state.theme,
       ref: function ref(i) {

package/es/site/src/client.js

@@ -2,10 +2,10 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import router from './router';
 import { render, createVNode as h } from 'intact';
-import { history } from './history';
-import { localize } from 'kpc';
-import i18n from 'kpc/i18n/en-US';
-localize(i18n);
+import { history } from './history'; // import {localize} from 'kpc';
+// import i18n from 'kpc/i18n/en-US';
+// localize(i18n);
+
 var container = document.getElementById('page');
 var unlisten;
 

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.1
+ * @king-design v2.0.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -61,6 +61,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.1';
+export const version = '2.0.2';
 
 /* generate end */

package/package.json

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