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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/lib/cjs/GroupMenu.js +36 -8
  3. package/lib/cjs/Menu.js +40 -9
  4. package/lib/cjs/MenuItem.js +53 -24
  5. package/lib/cjs/MenuSearch.js +72 -28
  6. package/lib/cjs/SideMenu.js +37 -8
  7. package/lib/esm/GroupMenu.js +36 -8
  8. package/lib/esm/Menu.js +40 -9
  9. package/lib/esm/MenuItem.js +53 -24
  10. package/lib/esm/MenuSearch.js +73 -29
  11. package/lib/esm/SideMenu.js +37 -8
  12. package/lib/types/GroupMenu.d.ts +6 -1
  13. package/lib/types/Menu.d.ts +6 -1
  14. package/lib/types/MenuSearch.d.ts +8 -1
  15. package/lib/types/SideMenu.d.ts +6 -1
  16. package/lib/types/context.d.ts +6 -1
  17. package/package.json +16 -15
package/lib/cjs/SideMenu.js CHANGED
@@ -17,6 +17,8 @@ var tslib = require('tslib');
17
17
  var React = require('react');
18
18
  var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
+ var core = require('@hi-ui/core');
21
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
20
22
  var Tooltip = require('@hi-ui/tooltip');
21
23
  var useLatest = require('@hi-ui/use-latest');
22
24
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
@@ -41,6 +43,9 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
41
43
  _a$role = _a.role,
42
44
  role = _a$role === void 0 ? 'side-menu' : _a$role,
43
45
  className = _a.className,
46
+ style = _a.style,
47
+ classNamesProp = _a.classNames,
48
+ stylesProp = _a.styles,
44
49
  _a$defaultActiveId = _a.defaultActiveId,
45
50
  defaultActiveId = _a$defaultActiveId === void 0 ? null : _a$defaultActiveId,
46
51
  activeIdProp = _a.activeId,
@@ -51,8 +56,25 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
51
56
  onClick = _a.onClick,
52
57
  onMouseEnter = _a.onMouseEnter,
53
58
  onMouseLeave = _a.onMouseLeave,
54
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
55
- var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
59
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
60
+ var _useGlobalContext = core.useGlobalContext(),
61
+ sideMenuConfig = _useGlobalContext.sideMenu;
62
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
63
+ classNamesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.classNames, classNamesProp],
64
+ stylesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.styles, stylesProp],
65
+ info: {
66
+ props: Object.assign(Object.assign({}, rest), {
67
+ data: data,
68
+ mini: mini,
69
+ defaultActiveId: defaultActiveId,
70
+ activeId: activeIdProp,
71
+ selectedId: selectedIdProp
72
+ })
73
+ }
74
+ }),
75
+ classNames = _useMergeSemantic.classNames,
76
+ styles = _useMergeSemantic.styles;
77
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
56
78
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
57
79
  activeId = _useUncontrolledState[0],
58
80
  tryChangeActiveId = _useUncontrolledState[1];
@@ -71,10 +93,13 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
71
93
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
72
94
  ref: ref,
73
95
  role: role,
74
- className: cls
96
+ className: cls,
97
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
75
98
  }, rest), /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], {
76
99
  onlyScrollVisible: true,
77
- axes: "y"
100
+ axes: "y",
101
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
102
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
78
103
  }, data.map(function (item) {
79
104
  var _cx2;
80
105
  var id = item.id,
@@ -82,7 +107,8 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
82
107
  icon = item.icon;
83
108
  return /*#__PURE__*/React__default["default"].createElement("div", {
84
109
  key: id,
85
- className: classname.cx(prefixCls + "-item-wrapper"),
110
+ className: classname.cx(prefixCls + "-item-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.itemWrapper),
111
+ style: styles === null || styles === void 0 ? void 0 : styles.itemWrapper,
86
112
  onClick: function onClick(evt) {
87
113
  return handleClick(evt, id, item);
88
114
  },
@@ -106,11 +132,14 @@ var SideMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
106
132
  handleMouseLeave(evt, id, item);
107
133
  }
108
134
  }, /*#__PURE__*/React__default["default"].createElement("div", {
109
- className: classname.cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2))
135
+ className: 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),
136
+ style: styles === null || styles === void 0 ? void 0 : styles.item
110
137
  }, /*#__PURE__*/React__default["default"].createElement("div", {
111
- className: classname.cx(prefixCls + "-item__icon")
138
+ className: classname.cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
139
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
112
140
  }, icon), /*#__PURE__*/React__default["default"].createElement("div", {
113
- className: classname.cx(prefixCls + "-item__title")
141
+ className: classname.cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
142
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
114
143
  }, title)));
115
144
  })));
116
145
  });
package/lib/esm/GroupMenu.js CHANGED
@@ -11,6 +11,8 @@ import { __rest } from 'tslib';
11
11
  import React, { forwardRef, useCallback } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
+ import { useGlobalContext } from '@hi-ui/core';
15
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
14
16
  import { isArrayNonEmpty } from '@hi-ui/type-assertion';
15
17
  import { useLatestCallback } from '@hi-ui/use-latest';
16
18
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
@@ -26,6 +28,9 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
26
28
  _a$role = _a.role,
27
29
  role = _a$role === void 0 ? _role : _a$role,
28
30
  className = _a.className,
31
+ style = _a.style,
32
+ classNamesProp = _a.classNames,
33
+ stylesProp = _a.styles,
29
34
  _a$data = _a.data,
30
35
  data = _a$data === void 0 ? [] : _a$data,
31
36
  onClick = _a.onClick,
@@ -33,7 +38,23 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
33
38
  defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
34
39
  activeIdProp = _a.activeId,
35
40
  titleRender = _a.titleRender,
36
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
41
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
42
+ var _useGlobalContext = useGlobalContext(),
43
+ groupMenuConfig = _useGlobalContext.groupMenu;
44
+ var _useMergeSemantic = useMergeSemantic({
45
+ classNamesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.classNames, classNamesProp],
46
+ stylesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.styles, stylesProp],
47
+ info: {
48
+ props: Object.assign(Object.assign({}, rest), {
49
+ data: data,
50
+ defaultActiveId: defaultActiveId,
51
+ activeId: activeIdProp,
52
+ titleRender: titleRender
53
+ })
54
+ }
55
+ }),
56
+ classNames = _useMergeSemantic.classNames,
57
+ styles = _useMergeSemantic.styles;
37
58
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
38
59
  activeId = _useUncontrolledState[0],
39
60
  tryChangeActiveId = _useUncontrolledState[1];
@@ -53,28 +74,35 @@ var GroupMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
53
74
  var isParent = isArrayNonEmpty(children);
54
75
  return /*#__PURE__*/React.createElement("div", {
55
76
  key: id,
56
- className: cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx)),
77
+ className: cx(isParent ? prefixCls + "-parent-item" : prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item--active"] = activeId === id, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--empty"] = !title && !icon, _cx), classNames === null || classNames === void 0 ? void 0 : classNames.item),
78
+ style: styles === null || styles === void 0 ? void 0 : styles.item,
57
79
  onClick: function onClick(evt) {
58
80
  if (disabled || isParent) return;
59
81
  evt.stopPropagation();
60
82
  handleClick(evt, id, item);
61
83
  }
62
84
  }, /*#__PURE__*/React.createElement("div", {
63
- className: cx(prefixCls + "-item__content")
85
+ className: cx(prefixCls + "-item__content", classNames === null || classNames === void 0 ? void 0 : classNames.itemContent),
86
+ style: styles === null || styles === void 0 ? void 0 : styles.itemContent
64
87
  }, /*#__PURE__*/React.createElement("div", {
65
- className: cx(prefixCls + "-item__icon")
88
+ className: cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
89
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
66
90
  }, icon), /*#__PURE__*/React.createElement("div", {
67
- className: cx(prefixCls + "-item__title")
91
+ className: cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
92
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
68
93
  }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
69
94
  });
70
- }, [activeId, handleClick, prefixCls, titleRender]);
95
+ }, [activeId, handleClick, prefixCls, titleRender, classNames, styles]);
71
96
  return /*#__PURE__*/React.createElement("div", Object.assign({
72
- className: cx("" + prefixCls, className),
97
+ className: cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
98
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
73
99
  ref: ref,
74
100
  role: role
75
101
  }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
76
102
  onlyScrollVisible: true,
77
- axes: "y"
103
+ axes: "y",
104
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
105
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
78
106
  }, renderItem(data)));
79
107
  });
80
108
  if (__DEV__) {
package/lib/esm/Menu.js CHANGED
@@ -14,6 +14,7 @@ import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
14
14
  import { __DEV__ } from '@hi-ui/env';
15
15
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
16
16
  import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
17
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
17
18
  import Tooltip from '@hi-ui/tooltip';
18
19
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
19
20
  import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
@@ -33,12 +34,15 @@ var MENU_MORE_ID = "MENU_MORE_" + uuid();
33
34
  * 菜单
34
35
  */
35
36
  var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
36
- var _b;
37
+ var _b, _c;
37
38
  var _a$prefixCls = _a.prefixCls,
38
39
  prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
39
40
  _a$role = _a.role,
40
41
  role = _a$role === void 0 ? 'menu' : _a$role,
41
42
  className = _a.className,
43
+ style = _a.style,
44
+ classNamesProp = _a.classNames,
45
+ stylesProp = _a.styles,
42
46
  _a$data = _a.data,
43
47
  data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
44
48
  fieldNames = _a.fieldNames,
@@ -72,17 +76,38 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
72
76
  sizeProp = _a.size,
73
77
  _a$showTitleOnMini = _a.showTitleOnMini,
74
78
  showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
75
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
79
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size", "showTitleOnMini"]);
76
80
  var i18n = useLocaleContext();
77
81
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
78
82
  activeId = _useUncontrolledState[0],
79
83
  updateActiveId = _useUncontrolledState[1];
80
84
  var _useGlobalContext = useGlobalContext(),
81
- globalSize = _useGlobalContext.size;
85
+ globalSize = _useGlobalContext.size,
86
+ menuConfig = _useGlobalContext.menu;
82
87
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'lg';
83
88
  if (size === 'xs') {
84
89
  size = 'sm';
85
90
  }
91
+ var _useMergeSemantic = useMergeSemantic({
92
+ classNamesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.classNames, classNamesProp],
93
+ stylesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.styles, stylesProp],
94
+ info: {
95
+ props: Object.assign(Object.assign({}, rest), {
96
+ data: data,
97
+ placement: placement,
98
+ size: (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _c !== void 0 ? _c : 'lg',
99
+ showCollapse: showCollapse,
100
+ expandedType: expandedType,
101
+ showAllSubMenus: showAllSubMenus,
102
+ defaultExpandAll: defaultExpandAll,
103
+ defaultCollapsed: defaultCollapsed,
104
+ collapsed: collapsed,
105
+ showTitleOnMini: showTitleOnMini
106
+ })
107
+ }
108
+ }),
109
+ classNames = _useMergeSemantic.classNames,
110
+ styles = _useMergeSemantic.styles;
86
111
  var _useState = useState(function () {
87
112
  return getAncestorIds(activeId, data);
88
113
  }),
@@ -208,7 +233,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
208
233
  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
209
234
  var renderFooter = function renderFooter() {
210
235
  var collapseNode = canToggle ? ( /*#__PURE__*/React.createElement("div", {
211
- className: cx(prefixCls + "__toggle"),
236
+ className: cx(prefixCls + "__toggle", classNames === null || classNames === void 0 ? void 0 : classNames.toggle),
237
+ style: styles === null || styles === void 0 ? void 0 : styles.toggle,
212
238
  onClick: function onClick() {
213
239
  return miniToggleAction.not();
214
240
  }
@@ -225,11 +251,12 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
225
251
  }
226
252
  return isFunction(render) ? render(menuItem, level) : menuItem.title;
227
253
  }, [render, showMini, showTitleOnMini]);
228
- var cls = cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
254
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
229
255
  return /*#__PURE__*/React.createElement("div", Object.assign({
230
256
  ref: useMergeRefs(ref, setContainerElement),
231
257
  role: role,
232
- className: cls
258
+ className: cls,
259
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
233
260
  }, rest), extraHeader, /*#__PURE__*/React.createElement(MenuContext.Provider, {
234
261
  value: {
235
262
  placement: placement,
@@ -244,10 +271,13 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
244
271
  activeParents: activeParents,
245
272
  activeId: activeId,
246
273
  expandedIds: expandedIds,
247
- overlayClassName: overlayClassName
274
+ overlayClassName: overlayClassName,
275
+ semanticClassNames: classNames,
276
+ semanticStyles: styles
248
277
  }
249
278
  }, /*#__PURE__*/React.createElement("ul", {
250
- className: cx(prefixCls + "__wrapper")
279
+ className: cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
280
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
251
281
  }, mergedTagList.map(function (item, index) {
252
282
  return showMini ? ( /*#__PURE__*/React.createElement(Tooltip, {
253
283
  title: item.title,
@@ -273,7 +303,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
273
303
  title: i18n.tabs.more,
274
304
  children: restTagList
275
305
  }))), /*#__PURE__*/React.createElement("div", {
276
- className: prefixCls + "__footer"
306
+ className: cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
307
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
277
308
  }, renderFooter())));
278
309
  });
279
310
  if (__DEV__) {
package/lib/esm/MenuItem.js CHANGED
@@ -57,16 +57,19 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
57
57
  closeAllPopper = _useContext.closeAllPopper,
58
58
  activeParents = _useContext.activeParents,
59
59
  overlayClassName = _useContext.overlayClassName,
60
- showTitleOnMini = _useContext.showTitleOnMini;
60
+ showTitleOnMini = _useContext.showTitleOnMini,
61
+ semanticClassNames = _useContext.semanticClassNames,
62
+ semanticStyles = _useContext.semanticStyles;
61
63
  var _parentIds = (parentIds || []).concat(id);
62
64
  var hasChildren = isArrayNonEmpty(children);
63
65
  var mergedRef = useMergeRefs(itemRef, ref);
64
66
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
65
67
  ref: mergedRef,
66
- className: cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className),
67
- style: hidden ? hiddenStyle : undefined
68
+ className: cx(prefixCls + "-item", (_cx = {}, _cx[prefixCls + "-item__inner--mini"] = mini, _cx[prefixCls + "-item--disabled"] = disabled, _cx[prefixCls + "-item--active"] = placement === 'horizontal' && (activeId === id || (activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id))) && level === 1, _cx), className, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.item),
69
+ style: Object.assign(Object.assign({}, hidden ? hiddenStyle : undefined), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.item)
68
70
  }, /*#__PURE__*/React.createElement("div", {
69
- className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
71
+ className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2), semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemInner),
72
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemInner,
70
73
  onClick: function onClick() {
71
74
  if (isArrayNonEmpty(children)) {
72
75
  !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
@@ -80,36 +83,53 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
80
83
  }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
81
84
  prefixCls: prefixCls + "-item",
82
85
  depth: level - 1
83
- }) : null, icon ? /*#__PURE__*/React.createElement("span", {
84
- className: prefixCls + "-item__icon"
85
- }, icon) : null, /*#__PURE__*/React.createElement("span", {
86
- className: prefixCls + "-item__content"
86
+ }) : null, icon ? ( /*#__PURE__*/React.createElement("span", {
87
+ className: cx(prefixCls + "-item__icon", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemIcon),
88
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemIcon
89
+ }, icon)) : null, /*#__PURE__*/React.createElement("span", {
90
+ className: cx(prefixCls + "-item__content", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemContent),
91
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemContent
87
92
  }, isFunction(render) ? render(Object.assign(Object.assign({}, raw), {
88
93
  id: id,
89
94
  icon: icon,
90
95
  title: title
91
96
  }), level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React.createElement(Arrow, {
92
97
  prefixCls: prefixCls + "-item",
93
- direction: "up"
98
+ direction: "up",
99
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
100
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
94
101
  })) : ( /*#__PURE__*/React.createElement(Arrow, {
95
102
  prefixCls: prefixCls + "-item",
96
- direction: "down"
103
+ direction: "down",
104
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
105
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
97
106
  }))), hasChildren && mini && level > 1 && placement === 'vertical' ? ( /*#__PURE__*/React.createElement(Arrow, {
98
- prefixCls: prefixCls + "-item"
107
+ prefixCls: prefixCls + "-item",
108
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
109
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
99
110
  })) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? ( /*#__PURE__*/React.createElement(Arrow, {
100
- prefixCls: prefixCls + "-item"
111
+ prefixCls: prefixCls + "-item",
112
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
113
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
101
114
  })) : null, hasChildren && placement === 'horizontal' && level > 1 ? ( /*#__PURE__*/React.createElement(Arrow, {
102
- prefixCls: prefixCls + "-item"
115
+ prefixCls: prefixCls + "-item",
116
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
117
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
103
118
  })) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React.createElement(Arrow, {
104
119
  prefixCls: prefixCls + "-item",
105
- direction: "up"
120
+ direction: "up",
121
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
122
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
106
123
  })) : ( /*#__PURE__*/React.createElement(Arrow, {
107
124
  prefixCls: prefixCls + "-item",
108
- direction: "down"
125
+ direction: "down",
126
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
127
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
109
128
  })))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? ( /*#__PURE__*/React.createElement(Expander, {
110
129
  visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
111
130
  }, /*#__PURE__*/React.createElement("ul", {
112
- className: prefixCls + "-submenu"
131
+ className: cx(prefixCls + "-submenu", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.submenu),
132
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.submenu
113
133
  }, children.map(function (child) {
114
134
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
115
135
  key: child.id,
@@ -129,7 +149,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
129
149
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
130
150
  }
131
151
  }, /*#__PURE__*/React.createElement("ul", {
132
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
152
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
153
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
133
154
  }, children.map(function (child) {
134
155
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
135
156
  key: child.id,
@@ -150,7 +171,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
150
171
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
151
172
  }
152
173
  }, /*#__PURE__*/React.createElement("ul", {
153
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
174
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
175
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
154
176
  }, children.map(function (child) {
155
177
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
156
178
  key: child.id,
@@ -170,7 +192,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
170
192
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
171
193
  }
172
194
  }, /*#__PURE__*/React.createElement("ul", {
173
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
195
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
196
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
174
197
  }, children.map(function (child) {
175
198
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
176
199
  key: child.id,
@@ -191,7 +214,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
191
214
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
192
215
  }
193
216
  }, /*#__PURE__*/React.createElement("ul", {
194
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
217
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
218
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
195
219
  }, children.map(function (child) {
196
220
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
197
221
  key: child.id,
@@ -241,7 +265,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
241
265
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
242
266
  }
243
267
  }, /*#__PURE__*/React.createElement("ul", {
244
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
268
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
269
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
245
270
  }, children.map(function (child) {
246
271
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
247
272
  key: child.id,
@@ -262,7 +287,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
262
287
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
263
288
  }
264
289
  }, /*#__PURE__*/React.createElement("ul", {
265
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
290
+ className: cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
291
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
266
292
  }, children.map(function (child) {
267
293
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
268
294
  key: child.id,
@@ -309,7 +335,9 @@ if (__DEV__) {
309
335
  }
310
336
  var Arrow = function Arrow(_ref2) {
311
337
  var prefixCls = _ref2.prefixCls,
312
- direction = _ref2.direction;
338
+ direction = _ref2.direction,
339
+ className = _ref2.className,
340
+ style = _ref2.style;
313
341
  var icon;
314
342
  switch (direction) {
315
343
  case 'up':
@@ -322,7 +350,8 @@ var Arrow = function Arrow(_ref2) {
322
350
  icon = /*#__PURE__*/React.createElement(RightOutlined, null);
323
351
  }
324
352
  return /*#__PURE__*/React.createElement("span", {
325
- className: prefixCls + "__arrow"
353
+ className: cx(prefixCls + "__arrow", className),
354
+ style: style
326
355
  }, icon);
327
356
  };
328
357
  /**