@hi-ui/menu 5.0.0-experimental.0 → 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 (19) hide show
  1. package/CHANGELOG.md +41 -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/cjs/styles/index.scss.js +1 -1
  8. package/lib/esm/GroupMenu.js +36 -8
  9. package/lib/esm/Menu.js +40 -9
  10. package/lib/esm/MenuItem.js +53 -24
  11. package/lib/esm/MenuSearch.js +73 -29
  12. package/lib/esm/SideMenu.js +37 -8
  13. package/lib/esm/styles/index.scss.js +1 -1
  14. package/lib/types/GroupMenu.d.ts +6 -1
  15. package/lib/types/Menu.d.ts +6 -1
  16. package/lib/types/MenuSearch.d.ts +8 -1
  17. package/lib/types/SideMenu.d.ts +6 -1
  18. package/lib/types/context.d.ts +6 -1
  19. package/package.json +16 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,46 @@
1
1
  # @hi-ui/menu
2
2
 
3
+ ## 5.0.0-experimental.2
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [66bc9c3e2]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [eb17c4697]
16
+ - Updated dependencies [c407744fe]
17
+ - Updated dependencies [59cef699f]
18
+ - @hi-ui/icons@5.0.0-experimental.1
19
+ - @hi-ui/ellipsis-tooltip@5.0.0-experimental.1
20
+ - @hi-ui/core@5.0.0-experimental.1
21
+ - @hi-ui/button@5.0.0-experimental.1
22
+ - @hi-ui/highlighter@5.0.0-experimental.1
23
+ - @hi-ui/icon-button@5.0.0-experimental.1
24
+ - @hi-ui/input@5.0.0-experimental.2
25
+ - @hi-ui/picker@5.0.0-experimental.2
26
+ - @hi-ui/popper@5.0.0-experimental.1
27
+ - @hi-ui/scrollbar@5.0.0-experimental.1
28
+ - @hi-ui/tooltip@5.0.0-experimental.1
29
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
30
+
31
+ ## 5.0.0-experimental.1
32
+
33
+ ### Patch Changes
34
+
35
+ - ec6005193: style(layout,menu): 样式和示例调整 (5.0)
36
+ - 发布 hiui experimental 版本
37
+ - Updated dependencies [8f23e9322]
38
+ - Updated dependencies [b27483796]
39
+ - Updated dependencies [900c6c2f0]
40
+ - Updated dependencies
41
+ - @hi-ui/input@5.0.0-experimental.1
42
+ - @hi-ui/picker@5.0.0-experimental.1
43
+
3
44
  ## 5.0.0-experimental.0
4
45
 
5
46
  ### Major Changes
package/lib/cjs/GroupMenu.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 typeAssertion = require('@hi-ui/type-assertion');
21
23
  var useLatest = require('@hi-ui/use-latest');
22
24
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
@@ -39,6 +41,9 @@ var GroupMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
39
41
  _a$role = _a.role,
40
42
  role = _a$role === void 0 ? _role : _a$role,
41
43
  className = _a.className,
44
+ style = _a.style,
45
+ classNamesProp = _a.classNames,
46
+ stylesProp = _a.styles,
42
47
  _a$data = _a.data,
43
48
  data = _a$data === void 0 ? [] : _a$data,
44
49
  onClick = _a.onClick,
@@ -46,7 +51,23 @@ var GroupMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
46
51
  defaultActiveId = _a$defaultActiveId === void 0 ? '' : _a$defaultActiveId,
47
52
  activeIdProp = _a.activeId,
48
53
  titleRender = _a.titleRender,
49
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
54
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "data", "onClick", "defaultActiveId", "activeId", "titleRender"]);
55
+ var _useGlobalContext = core.useGlobalContext(),
56
+ groupMenuConfig = _useGlobalContext.groupMenu;
57
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
58
+ classNamesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.classNames, classNamesProp],
59
+ stylesList: [groupMenuConfig === null || groupMenuConfig === void 0 ? void 0 : groupMenuConfig.styles, stylesProp],
60
+ info: {
61
+ props: Object.assign(Object.assign({}, rest), {
62
+ data: data,
63
+ defaultActiveId: defaultActiveId,
64
+ activeId: activeIdProp,
65
+ titleRender: titleRender
66
+ })
67
+ }
68
+ }),
69
+ classNames = _useMergeSemantic.classNames,
70
+ styles = _useMergeSemantic.styles;
50
71
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp),
51
72
  activeId = _useUncontrolledState[0],
52
73
  tryChangeActiveId = _useUncontrolledState[1];
@@ -66,28 +87,35 @@ var GroupMenu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
66
87
  var isParent = typeAssertion.isArrayNonEmpty(children);
67
88
  return /*#__PURE__*/React__default["default"].createElement("div", {
68
89
  key: id,
69
- className: 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)),
90
+ className: 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),
91
+ style: styles === null || styles === void 0 ? void 0 : styles.item,
70
92
  onClick: function onClick(evt) {
71
93
  if (disabled || isParent) return;
72
94
  evt.stopPropagation();
73
95
  handleClick(evt, id, item);
74
96
  }
75
97
  }, /*#__PURE__*/React__default["default"].createElement("div", {
76
- className: classname.cx(prefixCls + "-item__content")
98
+ className: classname.cx(prefixCls + "-item__content", classNames === null || classNames === void 0 ? void 0 : classNames.itemContent),
99
+ style: styles === null || styles === void 0 ? void 0 : styles.itemContent
77
100
  }, /*#__PURE__*/React__default["default"].createElement("div", {
78
- className: classname.cx(prefixCls + "-item__icon")
101
+ className: classname.cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
102
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
79
103
  }, icon), /*#__PURE__*/React__default["default"].createElement("div", {
80
- className: classname.cx(prefixCls + "-item__title")
104
+ className: classname.cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
105
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
81
106
  }, typeof titleRender === 'function' ? titleRender(item) : title)), isParent && renderItem(children));
82
107
  });
83
- }, [activeId, handleClick, prefixCls, titleRender]);
108
+ }, [activeId, handleClick, prefixCls, titleRender, classNames, styles]);
84
109
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
85
- className: classname.cx("" + prefixCls, className),
110
+ className: classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
111
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root),
86
112
  ref: ref,
87
113
  role: role
88
114
  }, rest), /*#__PURE__*/React__default["default"].createElement(Scrollbar__default["default"], {
89
115
  onlyScrollVisible: true,
90
- axes: "y"
116
+ axes: "y",
117
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
118
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
91
119
  }, renderItem(data)));
92
120
  });
93
121
  if (env.__DEV__) {
package/lib/cjs/Menu.js CHANGED
@@ -20,6 +20,7 @@ var icons = require('@hi-ui/icons');
20
20
  var env = require('@hi-ui/env');
21
21
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
22
22
  var core = require('@hi-ui/core');
23
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
23
24
  var Tooltip = require('@hi-ui/tooltip');
24
25
  var useToggle = require('@hi-ui/use-toggle');
25
26
  var treeUtils = require('@hi-ui/tree-utils');
@@ -46,12 +47,15 @@ var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
46
47
  * 菜单
47
48
  */
48
49
  var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
49
- var _b;
50
+ var _b, _c;
50
51
  var _a$prefixCls = _a.prefixCls,
51
52
  prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
52
53
  _a$role = _a.role,
53
54
  role = _a$role === void 0 ? 'menu' : _a$role,
54
55
  className = _a.className,
56
+ style = _a.style,
57
+ classNamesProp = _a.classNames,
58
+ stylesProp = _a.styles,
55
59
  _a$data = _a.data,
56
60
  data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
57
61
  fieldNames = _a.fieldNames,
@@ -85,17 +89,38 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
85
89
  sizeProp = _a.size,
86
90
  _a$showTitleOnMini = _a.showTitleOnMini,
87
91
  showTitleOnMini = _a$showTitleOnMini === void 0 ? false : _a$showTitleOnMini,
88
- rest = tslib.__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"]);
92
+ rest = tslib.__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"]);
89
93
  var i18n = core.useLocaleContext();
90
94
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
91
95
  activeId = _useUncontrolledState[0],
92
96
  updateActiveId = _useUncontrolledState[1];
93
97
  var _useGlobalContext = core.useGlobalContext(),
94
- globalSize = _useGlobalContext.size;
98
+ globalSize = _useGlobalContext.size,
99
+ menuConfig = _useGlobalContext.menu;
95
100
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'lg';
96
101
  if (size === 'xs') {
97
102
  size = 'sm';
98
103
  }
104
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
105
+ classNamesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.classNames, classNamesProp],
106
+ stylesList: [menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.styles, stylesProp],
107
+ info: {
108
+ props: Object.assign(Object.assign({}, rest), {
109
+ data: data,
110
+ placement: placement,
111
+ size: (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _c !== void 0 ? _c : 'lg',
112
+ showCollapse: showCollapse,
113
+ expandedType: expandedType,
114
+ showAllSubMenus: showAllSubMenus,
115
+ defaultExpandAll: defaultExpandAll,
116
+ defaultCollapsed: defaultCollapsed,
117
+ collapsed: collapsed,
118
+ showTitleOnMini: showTitleOnMini
119
+ })
120
+ }
121
+ }),
122
+ classNames = _useMergeSemantic.classNames,
123
+ styles = _useMergeSemantic.styles;
99
124
  var _useState = React.useState(function () {
100
125
  return util.getAncestorIds(activeId, data);
101
126
  }),
@@ -221,7 +246,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
221
246
  }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
222
247
  var renderFooter = function renderFooter() {
223
248
  var collapseNode = canToggle ? ( /*#__PURE__*/React__default["default"].createElement("div", {
224
- className: classname.cx(prefixCls + "__toggle"),
249
+ className: classname.cx(prefixCls + "__toggle", classNames === null || classNames === void 0 ? void 0 : classNames.toggle),
250
+ style: styles === null || styles === void 0 ? void 0 : styles.toggle,
225
251
  onClick: function onClick() {
226
252
  return miniToggleAction.not();
227
253
  }
@@ -238,11 +264,12 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
238
264
  }
239
265
  return typeAssertion.isFunction(render) ? render(menuItem, level) : menuItem.title;
240
266
  }, [render, showMini, showTitleOnMini]);
241
- var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, prefixCls + "--size-" + size, mini && prefixCls + "--mini", showTitleOnMini && prefixCls + "--show-title-on-mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
267
+ var cls = classname.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");
242
268
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
243
269
  ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
244
270
  role: role,
245
- className: cls
271
+ className: cls,
272
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
246
273
  }, rest), extraHeader, /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
247
274
  value: {
248
275
  placement: placement,
@@ -257,10 +284,13 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
257
284
  activeParents: activeParents,
258
285
  activeId: activeId,
259
286
  expandedIds: expandedIds,
260
- overlayClassName: overlayClassName
287
+ overlayClassName: overlayClassName,
288
+ semanticClassNames: classNames,
289
+ semanticStyles: styles
261
290
  }
262
291
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
263
- className: classname.cx(prefixCls + "__wrapper")
292
+ className: classname.cx(prefixCls + "__wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
293
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
264
294
  }, mergedTagList.map(function (item, index) {
265
295
  return showMini ? ( /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
266
296
  title: item.title,
@@ -286,7 +316,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
286
316
  title: i18n.tabs.more,
287
317
  children: restTagList
288
318
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
289
- className: prefixCls + "__footer"
319
+ className: classname.cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
320
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
290
321
  }, renderFooter())));
291
322
  });
292
323
  if (env.__DEV__) {
package/lib/cjs/MenuItem.js CHANGED
@@ -70,16 +70,19 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
70
70
  closeAllPopper = _useContext.closeAllPopper,
71
71
  activeParents = _useContext.activeParents,
72
72
  overlayClassName = _useContext.overlayClassName,
73
- showTitleOnMini = _useContext.showTitleOnMini;
73
+ showTitleOnMini = _useContext.showTitleOnMini,
74
+ semanticClassNames = _useContext.semanticClassNames,
75
+ semanticStyles = _useContext.semanticStyles;
74
76
  var _parentIds = (parentIds || []).concat(id);
75
77
  var hasChildren = typeAssertion.isArrayNonEmpty(children);
76
78
  var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
77
79
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", {
78
80
  ref: mergedRef,
79
- className: 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),
80
- style: hidden ? hiddenStyle : undefined
81
+ className: 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),
82
+ style: Object.assign(Object.assign({}, hidden ? hiddenStyle : undefined), semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.item)
81
83
  }, /*#__PURE__*/React__default["default"].createElement("div", {
82
- className: 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)),
84
+ className: 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),
85
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemInner,
83
86
  onClick: function onClick() {
84
87
  if (typeAssertion.isArrayNonEmpty(children)) {
85
88
  !disabled && (clickSubMenu === null || clickSubMenu === void 0 ? void 0 : clickSubMenu(id));
@@ -93,36 +96,53 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
93
96
  }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
94
97
  prefixCls: prefixCls + "-item",
95
98
  depth: level - 1
96
- }) : null, icon ? /*#__PURE__*/React__default["default"].createElement("span", {
97
- className: prefixCls + "-item__icon"
98
- }, icon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
99
- className: prefixCls + "-item__content"
99
+ }) : null, icon ? ( /*#__PURE__*/React__default["default"].createElement("span", {
100
+ className: classname.cx(prefixCls + "-item__icon", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemIcon),
101
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemIcon
102
+ }, icon)) : null, /*#__PURE__*/React__default["default"].createElement("span", {
103
+ className: classname.cx(prefixCls + "-item__content", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemContent),
104
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemContent
100
105
  }, typeAssertion.isFunction(render) ? render(Object.assign(Object.assign({}, raw), {
101
106
  id: id,
102
107
  icon: icon,
103
108
  title: title
104
109
  }), level) : title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
105
110
  prefixCls: prefixCls + "-item",
106
- direction: "up"
111
+ direction: "up",
112
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
113
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
107
114
  })) : ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
108
115
  prefixCls: prefixCls + "-item",
109
- direction: "down"
116
+ direction: "down",
117
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
118
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
110
119
  }))), hasChildren && mini && level > 1 && placement === 'vertical' ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
111
- prefixCls: prefixCls + "-item"
120
+ prefixCls: prefixCls + "-item",
121
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
122
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
112
123
  })) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
113
- prefixCls: prefixCls + "-item"
124
+ prefixCls: prefixCls + "-item",
125
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
126
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
114
127
  })) : null, hasChildren && placement === 'horizontal' && level > 1 ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
115
- prefixCls: prefixCls + "-item"
128
+ prefixCls: prefixCls + "-item",
129
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
130
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
116
131
  })) : null, hasChildren && placement === 'horizontal' && level === 1 && (!disabled && (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
117
132
  prefixCls: prefixCls + "-item",
118
- direction: "up"
133
+ direction: "up",
134
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
135
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
119
136
  })) : ( /*#__PURE__*/React__default["default"].createElement(Arrow, {
120
137
  prefixCls: prefixCls + "-item",
121
- direction: "down"
138
+ direction: "down",
139
+ className: semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.itemArrow,
140
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.itemArrow
122
141
  })))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? ( /*#__PURE__*/React__default["default"].createElement(Expander.Expander, {
123
142
  visible: !disabled && !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
124
143
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
125
- className: prefixCls + "-submenu"
144
+ className: classname.cx(prefixCls + "-submenu", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.submenu),
145
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.submenu
126
146
  }, children.map(function (child) {
127
147
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
128
148
  key: child.id,
@@ -142,7 +162,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
142
162
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
143
163
  }
144
164
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
145
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
165
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
166
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
146
167
  }, children.map(function (child) {
147
168
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
148
169
  key: child.id,
@@ -163,7 +184,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
163
184
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
164
185
  }
165
186
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
166
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
187
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
188
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
167
189
  }, children.map(function (child) {
168
190
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
169
191
  key: child.id,
@@ -183,7 +205,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
183
205
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
184
206
  }
185
207
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
186
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
208
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
209
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
187
210
  }, children.map(function (child) {
188
211
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
189
212
  key: child.id,
@@ -204,7 +227,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
204
227
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
205
228
  }
206
229
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
207
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
230
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
231
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
208
232
  }, children.map(function (child) {
209
233
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
210
234
  key: child.id,
@@ -254,7 +278,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
254
278
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
255
279
  }
256
280
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
257
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
281
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
282
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
258
283
  }, children.map(function (child) {
259
284
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
260
285
  key: child.id,
@@ -275,7 +300,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
275
300
  closePopper === null || closePopper === void 0 ? void 0 : closePopper(id);
276
301
  }
277
302
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
278
- className: prefixCls + "-popmenu " + prefixCls + "--size-" + size
303
+ className: classname.cx(prefixCls + "-popmenu", prefixCls + "--size-" + size, semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.popmenu),
304
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.popmenu
279
305
  }, children.map(function (child) {
280
306
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
281
307
  key: child.id,
@@ -322,7 +348,9 @@ if (env.__DEV__) {
322
348
  }
323
349
  var Arrow = function Arrow(_ref2) {
324
350
  var prefixCls = _ref2.prefixCls,
325
- direction = _ref2.direction;
351
+ direction = _ref2.direction,
352
+ className = _ref2.className,
353
+ style = _ref2.style;
326
354
  var icon;
327
355
  switch (direction) {
328
356
  case 'up':
@@ -335,7 +363,8 @@ var Arrow = function Arrow(_ref2) {
335
363
  icon = /*#__PURE__*/React__default["default"].createElement(icons.RightOutlined, null);
336
364
  }
337
365
  return /*#__PURE__*/React__default["default"].createElement("span", {
338
- className: prefixCls + "__arrow"
366
+ className: classname.cx(prefixCls + "__arrow", className),
367
+ style: style
339
368
  }, icon);
340
369
  };
341
370
  /**
package/lib/cjs/MenuSearch.js CHANGED
@@ -16,6 +16,7 @@ Object.defineProperty(exports, '__esModule', {
16
16
  var tslib = require('tslib');
17
17
  var React = require('react');
18
18
  var core = require('@hi-ui/core');
19
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
19
20
  var env = require('@hi-ui/env');
20
21
  var classname = require('@hi-ui/classname');
21
22
  var icons = require('@hi-ui/icons');
@@ -48,6 +49,8 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
48
49
  _a$prefixCls = _a.prefixCls,
49
50
  prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
50
51
  className = _a.className,
52
+ classNamesProp = _a.classNames,
53
+ stylesProp = _a.styles,
51
54
  placeholder = _a.placeholder,
52
55
  width = _a.width,
53
56
  style = _a.style,
@@ -60,9 +63,27 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
60
63
  onSelect = _a.onSelect,
61
64
  onClear = _a.onClear,
62
65
  onClose = _a.onClose,
63
- onEsc = _a.onEsc;
64
- tslib.__rest(_a, ["innerRef", "prefixCls", "className", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
66
+ onEsc = _a.onEsc,
67
+ rest = tslib.__rest(_a, ["innerRef", "prefixCls", "className", "classNames", "styles", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
65
68
  var i18n = core.useLocaleContext();
69
+ var _useGlobalContext = core.useGlobalContext(),
70
+ menuSearchConfig = _useGlobalContext.menuSearch;
71
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
72
+ classNamesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.classNames, classNamesProp],
73
+ stylesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.styles, stylesProp],
74
+ info: {
75
+ props: Object.assign(Object.assign({}, rest), {
76
+ data: data,
77
+ placeholder: placeholder,
78
+ width: width,
79
+ visible: visibleProp,
80
+ defaultValue: defaultValue,
81
+ value: valueProp
82
+ })
83
+ }
84
+ }),
85
+ classNames = _useMergeSemantic.classNames,
86
+ styles = _useMergeSemantic.styles;
66
87
  var _useUncontrolledToggl = useToggle.useUncontrolledToggle({
67
88
  visible: visibleProp
68
89
  }),
@@ -194,10 +215,10 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
194
215
  }
195
216
  };
196
217
  });
197
- var cls = classname.cx(prefixCls, className, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
218
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
198
219
  return /*#__PURE__*/React__default["default"].createElement("div", {
199
220
  className: cls,
200
- style: style
221
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
201
222
  }, /*#__PURE__*/React__default["default"].createElement(MenuSearchInput, {
202
223
  width: width,
203
224
  prefixCls: prefixCls,
@@ -207,18 +228,23 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
207
228
  onClear: handleClear,
208
229
  onClose: handleClose,
209
230
  onKeyDown: handleKeyDown,
210
- inputRef: setInputRef
231
+ inputRef: setInputRef,
232
+ semanticClassNames: classNames,
233
+ semanticStyles: styles
211
234
  }), /*#__PURE__*/React__default["default"].createElement("div", {
212
- className: classname.cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2))
235
+ className: classname.cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.content),
236
+ style: styles === null || styles === void 0 ? void 0 : styles.content
213
237
  }, (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 ? ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
214
- className: prefixCls + "__header"
238
+ className: classname.cx(prefixCls + "__header", classNames === null || classNames === void 0 ? void 0 : classNames.header),
239
+ style: styles === null || styles === void 0 ? void 0 : styles.header
215
240
  }, /*#__PURE__*/React__default["default"].createElement(Highlighter__default["default"], {
216
241
  keyword: String((_b = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _b !== void 0 ? _b : 0)
217
242
  }, i18n.get('menuSearch.searchResult', {
218
243
  count: (_c = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _c !== void 0 ? _c : 0,
219
244
  keyword: value
220
245
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
221
- className: prefixCls + "__list",
246
+ className: classname.cx(prefixCls + "__list", classNames === null || classNames === void 0 ? void 0 : classNames.list),
247
+ style: styles === null || styles === void 0 ? void 0 : styles.list,
222
248
  ref: listRef,
223
249
  tabIndex: -1,
224
250
  onKeyDown: handleKeyDown
@@ -226,12 +252,14 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
226
252
  var _cx3;
227
253
  return /*#__PURE__*/React__default["default"].createElement("div", {
228
254
  key: item.id,
229
- className: classname.cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3)),
255
+ className: classname.cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3), classNames === null || classNames === void 0 ? void 0 : classNames.listItem),
256
+ style: styles === null || styles === void 0 ? void 0 : styles.listItem,
230
257
  onClick: function onClick() {
231
258
  return handleSelect(item.id, item, index);
232
259
  }
233
260
  }, /*#__PURE__*/React__default["default"].createElement("div", {
234
- className: prefixCls + "__list-item__title"
261
+ className: classname.cx(prefixCls + "__list-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.listItemTitle),
262
+ style: styles === null || styles === void 0 ? void 0 : styles.listItemTitle
235
263
  }, /*#__PURE__*/React__default["default"].createElement(EllipsisTooltip__default["default"], {
236
264
  tooltipProps: {
237
265
  style: {
@@ -242,27 +270,38 @@ var MenuSearch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
242
270
  keyword: value
243
271
  }, item.pathTitles.join('/')))));
244
272
  })))) : ( /*#__PURE__*/React__default["default"].createElement("div", {
245
- className: prefixCls + "__empty"
273
+ className: classname.cx(prefixCls + "__empty", classNames === null || classNames === void 0 ? void 0 : classNames.empty),
274
+ style: styles === null || styles === void 0 ? void 0 : styles.empty
246
275
  }, /*#__PURE__*/React__default["default"].createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React__default["default"].createElement("div", {
247
- className: prefixCls + "__footer"
276
+ className: classname.cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
277
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
248
278
  }, /*#__PURE__*/React__default["default"].createElement("div", {
249
- className: prefixCls + "__footer-item"
279
+ className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
280
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
250
281
  }, /*#__PURE__*/React__default["default"].createElement("div", {
251
- className: prefixCls + "__footer-item__icon"
282
+ className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
283
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
252
284
  }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowUpOutlined, null), /*#__PURE__*/React__default["default"].createElement(icons.ArrowDownOutlined, null)), /*#__PURE__*/React__default["default"].createElement("span", {
253
- className: prefixCls + "__footer-item__text"
285
+ className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
286
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
254
287
  }, i18n.menuSearch.moveCursor)), /*#__PURE__*/React__default["default"].createElement("div", {
255
- className: prefixCls + "__footer-item"
288
+ className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
289
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
256
290
  }, /*#__PURE__*/React__default["default"].createElement("div", {
257
- className: prefixCls + "__footer-item__icon"
291
+ className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
292
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
258
293
  }, /*#__PURE__*/React__default["default"].createElement(EnterIcon.EnterIcon, null)), /*#__PURE__*/React__default["default"].createElement("span", {
259
- className: prefixCls + "__footer-item__text"
294
+ className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
295
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
260
296
  }, i18n.menuSearch.confirmSelect)), /*#__PURE__*/React__default["default"].createElement("div", {
261
- className: prefixCls + "__footer-item"
297
+ className: classname.cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
298
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
262
299
  }, /*#__PURE__*/React__default["default"].createElement("div", {
263
- className: prefixCls + "__footer-item__icon"
300
+ className: classname.cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
301
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
264
302
  }, "esc"), /*#__PURE__*/React__default["default"].createElement("span", {
265
- className: prefixCls + "__footer-item__text"
303
+ className: classname.cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
304
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
266
305
  }, i18n.menuSearch.hideWindow)))));
267
306
  });
268
307
  if (env.__DEV__) {
@@ -278,17 +317,20 @@ var MenuSearchInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
278
317
  onClose = _a.onClose,
279
318
  onKeyDown = _a.onKeyDown,
280
319
  inputRef = _a.inputRef,
281
- rest = tslib.__rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef"]);
320
+ semanticClassNames = _a.semanticClassNames,
321
+ semanticStyles = _a.semanticStyles,
322
+ rest = tslib.__rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef", "semanticClassNames", "semanticStyles"]);
282
323
  var i18n = core.useLocaleContext();
283
324
  return /*#__PURE__*/React__default["default"].createElement("div", {
284
325
  ref: ref,
285
- className: prefixCls + "__input-wrapper",
286
- style: {
326
+ className: classname.cx(prefixCls + "__input-wrapper", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputWrapper),
327
+ style: Object.assign({
287
328
  width: width
288
- }
329
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputWrapper)
289
330
  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], Object.assign({
290
331
  ref: inputRef,
291
- className: prefixCls + "__input",
332
+ className: classname.cx(prefixCls + "__input", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input),
333
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.input,
292
334
  classNames: {
293
335
  prefix: prefixCls + "__input-prefix"
294
336
  },
@@ -296,7 +338,8 @@ var MenuSearchInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
296
338
  placeholder: placeholder,
297
339
  prefix: /*#__PURE__*/React__default["default"].createElement(icons.SearchOutlined, null),
298
340
  suffix: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
299
- className: prefixCls + "__input-clear",
341
+ className: classname.cx(prefixCls + "__input-clear", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputClear),
342
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputClear,
300
343
  appearance: "link",
301
344
  size: "xs",
302
345
  onClick: onClear
@@ -307,7 +350,8 @@ var MenuSearchInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
307
350
  },
308
351
  onKeyDown: onKeyDown
309
352
  }, rest)), /*#__PURE__*/React__default["default"].createElement("span", {
310
- className: prefixCls + "__close"
353
+ className: classname.cx(prefixCls + "__close", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.close),
354
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.close
311
355
  }, /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], {
312
356
  icon: /*#__PURE__*/React__default["default"].createElement(icons.CloseOutlined, null),
313
357
  effect: true,