@hi-ui/menu 5.0.0-experimental.1 → 5.0.0-experimental.2

package/lib/esm/MenuSearch.js

@@ -9,7 +9,8 @@
  */
 import { __rest } from 'tslib';
 import React, { forwardRef, useState, useRef, useLayoutEffect, useCallback, useEffect, useImperativeHandle } from 'react';
-import { useLocaleContext } from '@hi-ui/core';
+import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import { __DEV__ } from '@hi-ui/env';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, CloseOutlined } from '@hi-ui/icons';
@@ -31,6 +32,8 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$prefixCls = _a.prefixCls,
     prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
     className = _a.className,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     placeholder = _a.placeholder,
     width = _a.width,
     style = _a.style,
@@ -43,9 +46,27 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     onSelect = _a.onSelect,
     onClear = _a.onClear,
     onClose = _a.onClose,
-    onEsc = _a.onEsc;
-  __rest(_a, ["innerRef", "prefixCls", "className", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
+    onEsc = _a.onEsc,
+    rest = __rest(_a, ["innerRef", "prefixCls", "className", "classNames", "styles", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
   var i18n = useLocaleContext();
+  var _useGlobalContext = useGlobalContext(),
+    menuSearchConfig = _useGlobalContext.menuSearch;
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.classNames, classNamesProp],
+      stylesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          placeholder: placeholder,
+          width: width,
+          visible: visibleProp,
+          defaultValue: defaultValue,
+          value: valueProp
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
   var _useUncontrolledToggl = useUncontrolledToggle({
       visible: visibleProp
     }),
@@ -177,10 +198,10 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
       }
     };
   });
-  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
   return /*#__PURE__*/React.createElement("div", {
     className: cls,
-    style: style
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, /*#__PURE__*/React.createElement(MenuSearchInput, {
     width: width,
     prefixCls: prefixCls,
@@ -190,18 +211,23 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClear: handleClear,
     onClose: handleClose,
     onKeyDown: handleKeyDown,
-    inputRef: setInputRef
+    inputRef: setInputRef,
+    semanticClassNames: classNames,
+    semanticStyles: styles
   }), /*#__PURE__*/React.createElement("div", {
-    className: cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2))
+    className: cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.content),
+    style: styles === null || styles === void 0 ? void 0 : styles.content
   }, (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__header"
+    className: cx(prefixCls + "__header", classNames === null || classNames === void 0 ? void 0 : classNames.header),
+    style: styles === null || styles === void 0 ? void 0 : styles.header
   }, /*#__PURE__*/React.createElement(Highlighter, {
     keyword: String((_b = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _b !== void 0 ? _b : 0)
   }, i18n.get('menuSearch.searchResult', {
     count: (_c = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _c !== void 0 ? _c : 0,
     keyword: value
   }))), /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__list",
+    className: cx(prefixCls + "__list", classNames === null || classNames === void 0 ? void 0 : classNames.list),
+    style: styles === null || styles === void 0 ? void 0 : styles.list,
     ref: listRef,
     tabIndex: -1,
     onKeyDown: handleKeyDown
@@ -209,12 +235,14 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
     var _cx3;
     return /*#__PURE__*/React.createElement("div", {
       key: item.id,
-      className: cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3)),
+      className: cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3), classNames === null || classNames === void 0 ? void 0 : classNames.listItem),
+      style: styles === null || styles === void 0 ? void 0 : styles.listItem,
       onClick: function onClick() {
         return handleSelect(item.id, item, index);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "__list-item__title"
+      className: cx(prefixCls + "__list-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.listItemTitle),
+      style: styles === null || styles === void 0 ? void 0 : styles.listItemTitle
     }, /*#__PURE__*/React.createElement(EllipsisTooltip, {
       tooltipProps: {
         style: {
@@ -225,27 +253,38 @@ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
       keyword: value
     }, item.pathTitles.join('/')))));
   })))) : ( /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__empty"
+    className: cx(prefixCls + "__empty", classNames === null || classNames === void 0 ? void 0 : classNames.empty),
+    style: styles === null || styles === void 0 ? void 0 : styles.empty
   }, /*#__PURE__*/React.createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer"
+    className: cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+    style: styles === null || styles === void 0 ? void 0 : styles.footer
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item"
+    className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
   }, /*#__PURE__*/React.createElement(ArrowUpOutlined, null), /*#__PURE__*/React.createElement(ArrowDownOutlined, null)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
   }, i18n.menuSearch.moveCursor)), /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item"
+    className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
   }, /*#__PURE__*/React.createElement(EnterIcon, null)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
   }, i18n.menuSearch.confirmSelect)), /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item"
+    className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItem
   }, /*#__PURE__*/React.createElement("div", {
-    className: prefixCls + "__footer-item__icon"
+    className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
   }, "esc"), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__footer-item__text"
+    className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
+    style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
   }, i18n.menuSearch.hideWindow)))));
 });
 if (__DEV__) {
@@ -261,17 +300,20 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClose = _a.onClose,
     onKeyDown = _a.onKeyDown,
     inputRef = _a.inputRef,
-    rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef"]);
+    semanticClassNames = _a.semanticClassNames,
+    semanticStyles = _a.semanticStyles,
+    rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef", "semanticClassNames", "semanticStyles"]);
   var i18n = useLocaleContext();
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: prefixCls + "__input-wrapper",
-    style: {
+    className: cx(prefixCls + "__input-wrapper", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputWrapper),
+    style: Object.assign({
       width: width
-    }
+    }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputWrapper)
   }, /*#__PURE__*/React.createElement(Input, Object.assign({
     ref: inputRef,
-    className: prefixCls + "__input",
+    className: cx(prefixCls + "__input", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.input,
     classNames: {
       prefix: prefixCls + "__input-prefix"
     },
@@ -279,7 +321,8 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     placeholder: placeholder,
     prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
     suffix: /*#__PURE__*/React.createElement(Button, {
-      className: prefixCls + "__input-clear",
+      className: cx(prefixCls + "__input-clear", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputClear),
+      style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputClear,
       appearance: "link",
       size: "xs",
       onClick: onClear
@@ -290,7 +333,8 @@ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     },
     onKeyDown: onKeyDown
   }, rest)), /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__close"
+    className: cx(prefixCls + "__close", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.close),
+    style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.close
   }, /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
     effect: true,

package/lib/esm/SideMenu.js

@@ -11,6 +11,8 @@ import { __rest } from 'tslib';
 import React, { forwardRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
+import { useGlobalContext } from '@hi-ui/core';
+import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
 import Tooltip from '@hi-ui/tooltip';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -27,6 +29,9 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     _a$role = _a.role,
     role = _a$role === void 0 ? 'side-menu' : _a$role,
     className = _a.className,
+    style = _a.style,
+    classNamesProp = _a.classNames,
+    stylesProp = _a.styles,
     _a$defaultActiveId = _a.defaultActiveId,
     defaultActiveId = _a$defaultActiveId === void 0 ? null : _a$defaultActiveId,
     activeIdProp = _a.activeId,
@@ -37,8 +42,25 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClick = _a.onClick,
     onMouseEnter = _a.onMouseEnter,
     onMouseLeave = _a.onMouseLeave,
-    rest = __rest(_a, ["prefixCls", "role", "className", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
-  var cls = cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
+    rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
+  var _useGlobalContext = useGlobalContext(),
+    sideMenuConfig = _useGlobalContext.sideMenu;
+  var _useMergeSemantic = useMergeSemantic({
+      classNamesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.classNames, classNamesProp],
+      stylesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.styles, stylesProp],
+      info: {
+        props: Object.assign(Object.assign({}, rest), {
+          data: data,
+          mini: mini,
+          defaultActiveId: defaultActiveId,
+          activeId: activeIdProp,
+          selectedId: selectedIdProp
+        })
+      }
+    }),
+    classNames = _useMergeSemantic.classNames,
+    styles = _useMergeSemantic.styles;
+  var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
     activeId = _useUncontrolledState[0],
     tryChangeActiveId = _useUncontrolledState[1];
@@ -57,10 +79,13 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
     role: role,
-    className: cls
+    className: cls,
+    style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
   }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
     onlyScrollVisible: true,
-    axes: "y"
+    axes: "y",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
+    style: styles === null || styles === void 0 ? void 0 : styles.wrapper
   }, data.map(function (item) {
     var _cx2;
     var id = item.id,
@@ -68,7 +93,8 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
       icon = item.icon;
     return /*#__PURE__*/React.createElement("div", {
       key: id,
-      className: cx(prefixCls + "-item-wrapper"),
+      className: cx(prefixCls + "-item-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.itemWrapper),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemWrapper,
       onClick: function onClick(evt) {
         return handleClick(evt, id, item);
       },
@@ -92,11 +118,14 @@ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
         handleMouseLeave(evt, id, item);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2))
+      className: cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.item),
+      style: styles === null || styles === void 0 ? void 0 : styles.item
     }, /*#__PURE__*/React.createElement("div", {
-      className: cx(prefixCls + "-item__icon")
+      className: cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
     }, icon), /*#__PURE__*/React.createElement("div", {
-      className: cx(prefixCls + "-item__title")
+      className: cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
     }, title)));
   })));
 });

package/lib/types/GroupMenu.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { MenuDataItem } from './types';
 /**
  * 分组菜单
  */
 export declare const GroupMenu: React.ForwardRefExoticComponent<GroupMenuProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface GroupMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
+export type GroupMenuSemanticName = 'root' | 'wrapper' | 'item' | 'itemContent' | 'itemIcon' | 'itemTitle';
+export type GroupMenuSemanticClassNames = SemanticClassNamesType<GroupMenuProps, GroupMenuSemanticName>;
+export type GroupMenuSemanticStyles = SemanticStylesType<GroupMenuProps, GroupMenuSemanticName>;
+export type GroupMenuSemantic = ComponentSemantic<GroupMenuSemanticClassNames, GroupMenuSemanticStyles>;
+export interface GroupMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, GroupMenuSemantic {
     /**
      * 菜单项数据列表
      */

package/lib/types/Menu.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { MenuDataItem, MenuFooterRenderProps } from './types';
 /**
  * 菜单
  */
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
+export type MenuSemanticName = 'root' | 'wrapper' | 'footer' | 'toggle' | 'item' | 'itemInner' | 'itemIcon' | 'itemContent' | 'itemArrow' | 'submenu' | 'popmenu';
+export type MenuSemanticClassNames = SemanticClassNamesType<MenuProps, MenuSemanticName>;
+export type MenuSemanticStyles = SemanticStylesType<MenuProps, MenuSemanticName>;
+export type MenuSemantic = ComponentSemantic<MenuSemanticClassNames, MenuSemanticStyles>;
+export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'>, MenuSemantic {
     /**
      * 菜单项数据列表
      */

package/lib/types/MenuSearch.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { MenuDataItem } from './types';
 export declare const MenuSearch: React.ForwardRefExoticComponent<MenuSearchProps & React.RefAttributes<HTMLDivElement | null>>;
 export interface MenuSearchHelper {
@@ -7,7 +8,11 @@ export interface MenuSearchHelper {
     hide: () => void;
     focus: () => void;
 }
-export interface MenuSearchProps extends HiBaseHTMLProps<'div'> {
+export type MenuSearchSemanticName = 'root' | 'inputWrapper' | 'input' | 'inputClear' | 'close' | 'content' | 'header' | 'list' | 'listItem' | 'listItemTitle' | 'empty' | 'footer' | 'footerItem' | 'footerItemIcon' | 'footerItemText';
+export type MenuSearchSemanticClassNames = SemanticClassNamesType<MenuSearchProps, MenuSearchSemanticName>;
+export type MenuSearchSemanticStyles = SemanticStylesType<MenuSearchProps, MenuSearchSemanticName>;
+export type MenuSearchSemantic = ComponentSemantic<MenuSearchSemanticClassNames, MenuSearchSemanticStyles>;
+export interface MenuSearchProps extends HiBaseHTMLProps<'div'>, MenuSearchSemantic {
     innerRef?: React.RefObject<MenuSearchHelper>;
     clearText?: React.ReactNode;
     placeholder?: string;
@@ -34,4 +39,6 @@ export declare const MenuSearchInput: React.ForwardRefExoticComponent<{
     onClear?: () => void;
     onClose?: () => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    semanticClassNames?: Record<string, string | undefined>;
+    semanticStyles?: Record<string, React.CSSProperties | undefined>;
 } & React.RefAttributes<HTMLInputElement>>;

package/lib/types/SideMenu.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
+import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
 import { MenuDataItem } from './types';
 /**
  * 侧边菜单组件
  */
 export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface SideMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
+export type SideMenuSemanticName = 'root' | 'wrapper' | 'itemWrapper' | 'item' | 'itemIcon' | 'itemTitle';
+export type SideMenuSemanticClassNames = SemanticClassNamesType<SideMenuProps, SideMenuSemanticName>;
+export type SideMenuSemanticStyles = SemanticStylesType<SideMenuProps, SideMenuSemanticName>;
+export type SideMenuSemantic = ComponentSemantic<SideMenuSemanticClassNames, SideMenuSemanticStyles>;
+export interface SideMenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'>, SideMenuSemantic {
     /**
      * 侧边菜单宽度
      */

package/lib/types/context.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import { MenuDataItem } from './types';
+/** 供 MenuItem 使用的语义化 classNames/styles，由 Menu 通过 useMergeSemantic 合并后注入 */
+export interface MenuSemanticContext {
+    semanticClassNames?: Record<string, string | undefined>;
+    semanticStyles?: Record<string, React.CSSProperties | undefined>;
+}
 declare const MenuContext: React.Context<{
     placement?: "vertical" | "horizontal";
     expandedType?: "collapse" | "pop";
@@ -14,5 +19,5 @@ declare const MenuContext: React.Context<{
     clickSubMenu?: (id: React.ReactText) => void;
     closePopper?: (id: React.ReactText) => void;
     closeAllPopper?: () => void;
-}>;
+} & MenuSemanticContext>;
 export default MenuContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "5.0.0-experimental.1",
+  "version": "5.0.0-experimental.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,19 +45,19 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^5.0.0-experimental.0",
-    "@hi-ui/button": "^5.0.0-experimental.0",
+    "@hi-ui/button": "^5.0.0-experimental.1",
     "@hi-ui/classname": "^5.0.0-experimental.0",
-    "@hi-ui/ellipsis-tooltip": "^5.0.0-experimental.0",
+    "@hi-ui/ellipsis-tooltip": "^5.0.0-experimental.1",
     "@hi-ui/env": "^5.0.0-experimental.0",
-    "@hi-ui/highlighter": "^5.0.0-experimental.0",
-    "@hi-ui/icon-button": "^5.0.0-experimental.0",
-    "@hi-ui/icons": "^5.0.0-experimental.0",
-    "@hi-ui/input": "^5.0.0-experimental.1",
-    "@hi-ui/picker": "^5.0.0-experimental.1",
-    "@hi-ui/popper": "^5.0.0-experimental.0",
-    "@hi-ui/scrollbar": "^5.0.0-experimental.0",
+    "@hi-ui/highlighter": "^5.0.0-experimental.1",
+    "@hi-ui/icon-button": "^5.0.0-experimental.1",
+    "@hi-ui/icons": "^5.0.0-experimental.1",
+    "@hi-ui/input": "^5.0.0-experimental.2",
+    "@hi-ui/picker": "^5.0.0-experimental.2",
+    "@hi-ui/popper": "^5.0.0-experimental.1",
+    "@hi-ui/scrollbar": "^5.0.0-experimental.1",
     "@hi-ui/times": "^5.0.0-experimental.0",
-    "@hi-ui/tooltip": "^5.0.0-experimental.0",
+    "@hi-ui/tooltip": "^5.0.0-experimental.1",
     "@hi-ui/tree-utils": "^5.0.0-experimental.0",
     "@hi-ui/type-assertion": "^5.0.0-experimental.0",
     "@hi-ui/use-id": "^5.0.0-experimental.0",
@@ -67,16 +67,17 @@
     "@hi-ui/use-resize-observer": "^5.0.0-experimental.0",
     "@hi-ui/use-toggle": "^5.0.0-experimental.0",
     "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-experimental.0",
+    "@hi-ui/core": ">=5.0.0-experimental.1",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-experimental.0",
-    "@hi-ui/core-css": "^5.0.0-experimental.1",
+    "@hi-ui/core": "^5.0.0-experimental.1",
+    "@hi-ui/core-css": "^5.0.0-experimental.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }