@hi-ui/menu 4.0.7 → 4.0.9

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 (11) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/lib/cjs/Menu.js +13 -8
  3. package/lib/cjs/MenuItem.js +10 -1
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/Menu.js +13 -8
  6. package/lib/esm/MenuItem.js +10 -1
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/Menu.d.ts +1 -1
  9. package/lib/types/context.d.ts +1 -0
  10. package/package.json +2 -4
  11. package/LICENSE +0 -21
package/CHANGELOG.md ADDED
@@ -0,0 +1,13 @@
1
+ # @hi-ui/menu
2
+
3
+ ## 4.0.9
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2545](https://github.com/XiaoMi/hiui/pull/2545) [`a2f9f569a`](https://github.com/XiaoMi/hiui/commit/a2f9f569aefad8d4956db021510163ed8993887c) Thanks [@zyprepare](https://github.com/zyprepare)! - fix: 体验优化
8
+
9
+ ## 4.0.8
10
+
11
+ ### Patch Changes
12
+
13
+ - [#2383](https://github.com/XiaoMi/hiui/pull/2383) [`6248e798b`](https://github.com/XiaoMi/hiui/commit/6248e798b4ad7b9256637027f6bbe79245ed68de) Thanks [@zyprepare](https://github.com/zyprepare)! - 实现 expandedType="pop" 模式下，可以自定义弹出层样式类名
package/lib/cjs/Menu.js CHANGED
@@ -63,7 +63,7 @@ var NOOP_ARRAY = [];
63
63
  var MIN_WIDTH = 56;
64
64
  var MENU_MORE_ID = "MENU_MORE_" + useId.uuid();
65
65
  /**
66
- * TODO: What is Menu
66
+ * 菜单
67
67
  */
68
68
 
69
69
  var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
@@ -95,10 +95,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
95
95
  collapsed = _a.collapsed,
96
96
  _a$defaultCollapsed = _a.defaultCollapsed,
97
97
  defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
98
+ overlayClassName = _a.overlayClassName,
98
99
  onCollapse = _a.onCollapse,
99
100
  footerRender = _a.footerRender,
100
101
  onClick = _a.onClick,
101
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
102
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "onClick"]);
102
103
 
103
104
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
104
105
  activeId = _useUncontrolledState[0],
@@ -234,7 +235,11 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
234
235
  var renderFooter = function renderFooter() {
235
236
  var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
236
237
  className: classname.cx(prefixCls + "__toggle"),
237
- onClick: miniToggleAction.not
238
+ onClick: function onClick() {
239
+ miniToggleAction.not(); // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
240
+
241
+ updateExpandedIds([]);
242
+ }
238
243
  }, mini ? /*#__PURE__*/React__default["default"].createElement(icons.MenuUnfoldOutlined, null) : /*#__PURE__*/React__default["default"].createElement(icons.MenuFoldOutlined, null)) : null;
239
244
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, typeAssertion.isFunction(footerRender) ? footerRender({
240
245
  collapsed: showMini,
@@ -259,7 +264,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
259
264
  closeAllPopper: closeAllPopper,
260
265
  activeParents: activeParents,
261
266
  activeId: activeId,
262
- expandedIds: expandedIds
267
+ expandedIds: expandedIds,
268
+ overlayClassName: overlayClassName
263
269
  }
264
270
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
265
271
  className: classname.cx(prefixCls + "__wrapper")
@@ -298,10 +304,9 @@ if (env.__DEV__) {
298
304
 
299
305
 
300
306
  var renderMenuItemMini = function renderMenuItemMini(menu) {
301
- if (typeof menu.icon !== 'undefined') {
302
- return menu.icon;
303
- }
304
-
307
+ // if (typeof menu.icon !== 'undefined') {
308
+ // return menu.icon
309
+ // }
305
310
  if (typeof menu.title === 'string') {
306
311
  return menu.title.substring(0, 1);
307
312
  }
package/lib/cjs/MenuItem.js CHANGED
@@ -87,7 +87,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
87
87
  clickMenu = _useContext.clickMenu,
88
88
  clickSubMenu = _useContext.clickSubMenu,
89
89
  closeAllPopper = _useContext.closeAllPopper,
90
- activeParents = _useContext.activeParents;
90
+ activeParents = _useContext.activeParents,
91
+ overlayClassName = _useContext.overlayClassName;
91
92
 
92
93
  var _parentIds = (parentIds || []).concat(id);
93
94
 
@@ -160,6 +161,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
160
161
  attachEl: itemRef.current,
161
162
  placement: 'right-start',
162
163
  gutterGap: 16,
164
+ className: overlayClassName,
163
165
  onClose: function onClose() {
164
166
  if (closePopper) {
165
167
  closePopper(id);
@@ -180,6 +182,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
180
182
  placement: 'right-start',
181
183
  gutterGap: 16,
182
184
  disabledPortal: true,
185
+ className: overlayClassName,
183
186
  onClose: function onClose() {
184
187
  if (closePopper) {
185
188
  closePopper(id);
@@ -199,6 +202,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
199
202
  attachEl: itemRef.current,
200
203
  placement: 'right-start',
201
204
  gutterGap: 16,
205
+ className: overlayClassName,
202
206
  onClose: function onClose() {
203
207
  if (closePopper) {
204
208
  closePopper(id);
@@ -219,6 +223,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
219
223
  disabledPortal: true,
220
224
  placement: 'right-start',
221
225
  gutterGap: 16,
226
+ className: overlayClassName,
222
227
  onClose: function onClose() {
223
228
  if (closePopper) {
224
229
  closePopper(id);
@@ -238,6 +243,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
238
243
  attachEl: itemRef.current,
239
244
  placement: 'right-start',
240
245
  gutterGap: 16,
246
+ className: overlayClassName,
241
247
  onClose: function onClose() {
242
248
  if (closePopper) {
243
249
  closePopper(id);
@@ -273,6 +279,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
273
279
  attachEl: itemRef.current,
274
280
  placement: level === 1 ? 'bottom-start' : 'right-start',
275
281
  gutterGap: level === 1 ? 8 : 16,
282
+ className: overlayClassName,
276
283
  onClose: function onClose() {
277
284
  if (closePopper) {
278
285
  closePopper(id);
@@ -293,6 +300,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
293
300
  disabledPortal: true,
294
301
  placement: level === 1 ? 'bottom-start' : 'right-start',
295
302
  gutterGap: level === 1 ? 8 : 16,
303
+ className: overlayClassName,
296
304
  onClose: function onClose() {
297
305
  if (closePopper) {
298
306
  closePopper(id);
@@ -312,6 +320,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
312
320
  attachEl: itemRef.current,
313
321
  placement: 'bottom-start',
314
322
  gutterGap: 8,
323
+ className: overlayClassName,
315
324
  onClose: function onClose() {
316
325
  if (closePopper) {
317
326
  closePopper(id);
package/lib/cjs/styles/index.scss.js CHANGED
@@ -14,7 +14,7 @@ Object.defineProperty(exports, '__esModule', {
14
14
  });
15
15
  var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow: hidden; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
16
16
 
17
- var __styleInject__ = require('inject-head-style')["default"];
17
+ var __styleInject__ = require('style-inject')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
package/lib/esm/Menu.js CHANGED
@@ -29,7 +29,7 @@ var NOOP_ARRAY = [];
29
29
  var MIN_WIDTH = 56;
30
30
  var MENU_MORE_ID = "MENU_MORE_" + uuid();
31
31
  /**
32
- * TODO: What is Menu
32
+ * 菜单
33
33
  */
34
34
 
35
35
  var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -61,10 +61,11 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
61
61
  collapsed = _a.collapsed,
62
62
  _a$defaultCollapsed = _a.defaultCollapsed,
63
63
  defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
64
+ overlayClassName = _a.overlayClassName,
64
65
  onCollapse = _a.onCollapse,
65
66
  footerRender = _a.footerRender,
66
67
  onClick = _a.onClick,
67
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "onCollapse", "footerRender", "onClick"]);
68
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "onClick"]);
68
69
 
69
70
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
70
71
  activeId = _useUncontrolledState[0],
@@ -200,7 +201,11 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
200
201
  var renderFooter = function renderFooter() {
201
202
  var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
202
203
  className: cx(prefixCls + "__toggle"),
203
- onClick: miniToggleAction.not
204
+ onClick: function onClick() {
205
+ miniToggleAction.not(); // 关闭所有展开的子菜单，防止切换到 mini 模式后，子菜单还是展开的
206
+
207
+ updateExpandedIds([]);
208
+ }
204
209
  }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null;
205
210
  return /*#__PURE__*/React.createElement(React.Fragment, null, isFunction(footerRender) ? footerRender({
206
211
  collapsed: showMini,
@@ -225,7 +230,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
225
230
  closeAllPopper: closeAllPopper,
226
231
  activeParents: activeParents,
227
232
  activeId: activeId,
228
- expandedIds: expandedIds
233
+ expandedIds: expandedIds,
234
+ overlayClassName: overlayClassName
229
235
  }
230
236
  }, /*#__PURE__*/React.createElement("ul", {
231
237
  className: cx(prefixCls + "__wrapper")
@@ -264,10 +270,9 @@ if (__DEV__) {
264
270
 
265
271
 
266
272
  var renderMenuItemMini = function renderMenuItemMini(menu) {
267
- if (typeof menu.icon !== 'undefined') {
268
- return menu.icon;
269
- }
270
-
273
+ // if (typeof menu.icon !== 'undefined') {
274
+ // return menu.icon
275
+ // }
271
276
  if (typeof menu.title === 'string') {
272
277
  return menu.title.substring(0, 1);
273
278
  }
package/lib/esm/MenuItem.js CHANGED
@@ -58,7 +58,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
58
58
  clickMenu = _useContext.clickMenu,
59
59
  clickSubMenu = _useContext.clickSubMenu,
60
60
  closeAllPopper = _useContext.closeAllPopper,
61
- activeParents = _useContext.activeParents;
61
+ activeParents = _useContext.activeParents,
62
+ overlayClassName = _useContext.overlayClassName;
62
63
 
63
64
  var _parentIds = (parentIds || []).concat(id);
64
65
 
@@ -131,6 +132,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
131
132
  attachEl: itemRef.current,
132
133
  placement: 'right-start',
133
134
  gutterGap: 16,
135
+ className: overlayClassName,
134
136
  onClose: function onClose() {
135
137
  if (closePopper) {
136
138
  closePopper(id);
@@ -151,6 +153,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
151
153
  placement: 'right-start',
152
154
  gutterGap: 16,
153
155
  disabledPortal: true,
156
+ className: overlayClassName,
154
157
  onClose: function onClose() {
155
158
  if (closePopper) {
156
159
  closePopper(id);
@@ -170,6 +173,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
170
173
  attachEl: itemRef.current,
171
174
  placement: 'right-start',
172
175
  gutterGap: 16,
176
+ className: overlayClassName,
173
177
  onClose: function onClose() {
174
178
  if (closePopper) {
175
179
  closePopper(id);
@@ -190,6 +194,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
190
194
  disabledPortal: true,
191
195
  placement: 'right-start',
192
196
  gutterGap: 16,
197
+ className: overlayClassName,
193
198
  onClose: function onClose() {
194
199
  if (closePopper) {
195
200
  closePopper(id);
@@ -209,6 +214,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
209
214
  attachEl: itemRef.current,
210
215
  placement: 'right-start',
211
216
  gutterGap: 16,
217
+ className: overlayClassName,
212
218
  onClose: function onClose() {
213
219
  if (closePopper) {
214
220
  closePopper(id);
@@ -244,6 +250,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
244
250
  attachEl: itemRef.current,
245
251
  placement: level === 1 ? 'bottom-start' : 'right-start',
246
252
  gutterGap: level === 1 ? 8 : 16,
253
+ className: overlayClassName,
247
254
  onClose: function onClose() {
248
255
  if (closePopper) {
249
256
  closePopper(id);
@@ -264,6 +271,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
264
271
  disabledPortal: true,
265
272
  placement: level === 1 ? 'bottom-start' : 'right-start',
266
273
  gutterGap: level === 1 ? 8 : 16,
274
+ className: overlayClassName,
267
275
  onClose: function onClose() {
268
276
  if (closePopper) {
269
277
  closePopper(id);
@@ -283,6 +291,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
283
291
  attachEl: itemRef.current,
284
292
  placement: 'bottom-start',
285
293
  gutterGap: 8,
294
+ className: overlayClassName,
286
295
  onClose: function onClose() {
287
296
  if (closePopper) {
288
297
  closePopper(id);
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import __styleInject__ from 'inject-head-style';
10
+ import __styleInject__ from 'style-inject';
11
11
  var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow: hidden; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {padding: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
12
12
 
13
13
  __styleInject__(css_248z);
package/lib/types/Menu.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
3
  import { MenuDataItem, MenuFooterRenderProps } from './types';
4
4
  /**
5
- * TODO: What is Menu
5
+ * 菜单
6
6
  */
7
7
  export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
8
8
  export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
package/lib/types/context.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const MenuContext: React.Context<{
8
8
  expandedIds?: React.ReactText[] | undefined;
9
9
  activeId?: React.ReactText | undefined;
10
10
  activeParents?: React.ReactText[] | undefined;
11
+ overlayClassName?: string | undefined;
11
12
  clickMenu?: ((id: React.ReactText, raw: MenuDataItem) => void) | undefined;
12
13
  clickSubMenu?: ((id: React.ReactText) => void) | undefined;
13
14
  closePopper?: ((id: React.ReactText) => void) | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.0.7",
3
+ "version": "4.0.9",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -67,9 +67,7 @@
67
67
  "devDependencies": {
68
68
  "@hi-ui/core": "^4.0.4",
69
69
  "@hi-ui/core-css": "^4.0.1",
70
- "@hi-ui/hi-build": "^4.0.1",
71
70
  "react": "^17.0.1",
72
71
  "react-dom": "^17.0.1"
73
- },
74
- "gitHead": "7fefe9dcc7d60516eb463137568e42d0a75c24d3"
72
+ }
75
73
  }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2018 Xiaomi
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.