@hi-ui/menu 4.0.0-beta.28 → 4.0.0-beta.30

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 (10) hide show
  1. package/lib/cjs/Menu.js +99 -10
  2. package/lib/cjs/MenuItem.js +18 -6
  3. package/lib/cjs/styles/index.scss.js +1 -1
  4. package/lib/esm/Menu.js +99 -12
  5. package/lib/esm/MenuItem.js +18 -6
  6. package/lib/esm/styles/index.scss.js +1 -1
  7. package/lib/types/Menu.d.ts +1 -1
  8. package/lib/types/MenuItem.d.ts +2 -1
  9. package/lib/types/context.d.ts +2 -1
  10. package/package.json +3 -2
package/lib/cjs/Menu.js CHANGED
@@ -41,6 +41,10 @@ var treeUtils = require('@hi-ui/tree-utils');
41
41
 
42
42
  var typeAssertion = require('@hi-ui/type-assertion');
43
43
 
44
+ var useResizeObserver = require('@hi-ui/use-resize-observer');
45
+
46
+ var useMergeRefs = require('@hi-ui/use-merge-refs');
47
+
44
48
  function _interopDefaultLegacy(e) {
45
49
  return e && _typeof(e) === 'object' && 'default' in e ? e : {
46
50
  'default': e
@@ -54,6 +58,7 @@ var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
54
58
  var MENU_PREFIX = classname.getPrefixCls('menu');
55
59
  var DEFAULT_EXPANDED_IDS = [];
56
60
  var NOOP_ARRAY = [];
61
+ var MIN_WIDTH = 56;
57
62
  /**
58
63
  * TODO: What is Menu
59
64
  */
@@ -114,8 +119,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
114
119
  expandedIds = _useUncontrolledState2[0],
115
120
  updateExpandedIds = _useUncontrolledState2[1];
116
121
 
117
- var clickMenu = React.useCallback(function (id) {
118
- updateActiveId(id);
122
+ var clickMenu = React.useCallback(function (id, raw) {
123
+ updateActiveId(id, raw);
119
124
  }, [updateActiveId]);
120
125
  var clickSubMenu = React.useCallback(function (id) {
121
126
  var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
@@ -144,9 +149,84 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
144
149
  mini = _useUncontrolledToggl[0],
145
150
  miniToggleAction = _useUncontrolledToggl[1];
146
151
 
147
- var isVertical = placement === 'vertical';
148
- var canToggle = isVertical && showCollapse;
149
- var showMini = isVertical && mini;
152
+ var showVertical = placement === 'vertical';
153
+ var canToggle = showVertical && showCollapse;
154
+ var showMini = showVertical && mini;
155
+
156
+ var _useState2 = React.useState(null),
157
+ containerElement = _useState2[0],
158
+ setContainerElement = _useState2[1];
159
+
160
+ var _useState3 = React.useState(),
161
+ _useState3$ = _useState3[0],
162
+ containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
163
+ setContainerWidth = _useState3[1];
164
+
165
+ useResizeObserver.useResizeObserver({
166
+ element: containerElement,
167
+ disabled: showVertical,
168
+ getSize: function getSize(element) {
169
+ var itemRect = element.getBoundingClientRect();
170
+ return itemRect.width;
171
+ },
172
+ onResize: function onResize(el, width) {
173
+ setContainerWidth(width);
174
+ }
175
+ });
176
+
177
+ var _useState4 = React.useState(0),
178
+ tagMaxCount = _useState4[0],
179
+ setTagMaxCount = _useState4[1];
180
+
181
+ var mergedTagList = React.useMemo(function () {
182
+ if (showVertical) return data;
183
+ if (containerWidth < MIN_WIDTH) return data;
184
+ return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
185
+ }, [showVertical, data, containerWidth]);
186
+ var restTagList = React.useMemo(function () {
187
+ if (tagMaxCount > 0) return data.slice(tagMaxCount);
188
+ return [];
189
+ }, [data, tagMaxCount]);
190
+ var getTagWidth = React.useCallback(function (index) {
191
+ if (!containerElement) return MIN_WIDTH;
192
+ var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
193
+ var element = elements && elements[index];
194
+ if (!element) return MIN_WIDTH;
195
+ return element.getBoundingClientRect().width;
196
+ }, [containerElement]);
197
+ React.useLayoutEffect(function () {
198
+ if (showVertical) return;
199
+ var tagMaxCount = 0;
200
+
201
+ if (typeAssertion.isArrayNonEmpty(mergedTagList)) {
202
+ var len = mergedTagList.length;
203
+ var lastIndex = len - 1;
204
+ var totalWidth = 72; // 更多
205
+
206
+ for (var i = 0; i < len; ++i) {
207
+ var currentTagWidth = getTagWidth(i);
208
+
209
+ if (currentTagWidth === undefined) {
210
+ break;
211
+ }
212
+
213
+ totalWidth += currentTagWidth;
214
+
215
+ if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
216
+ tagMaxCount = lastIndex;
217
+ break;
218
+ } else if (totalWidth > containerWidth) {
219
+ tagMaxCount = i - 1;
220
+ break;
221
+ }
222
+ }
223
+ } else {
224
+ tagMaxCount = 0;
225
+ } // 保底要展示 1 个
226
+
227
+
228
+ setTagMaxCount(typeAssertion.isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
229
+ }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
150
230
 
151
231
  var renderFooter = function renderFooter() {
152
232
  var collapseNode = canToggle ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -161,7 +241,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
161
241
 
162
242
  var cls = classname.cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
163
243
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
164
- ref: ref,
244
+ ref: useMergeRefs.useMergeRefs(ref, setContainerElement),
165
245
  role: role,
166
246
  className: cls
167
247
  }, rest), /*#__PURE__*/React__default["default"].createElement(context["default"].Provider, {
@@ -180,18 +260,27 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
180
260
  }
181
261
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
182
262
  className: classname.cx(prefixCls + "__wrapper")
183
- }, data.map(function (item) {
263
+ }, mergedTagList.map(function (item, index) {
184
264
  return showMini ? /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
185
265
  title: item.title,
186
266
  key: item.id,
187
267
  placement: "right"
188
268
  }, /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
189
269
  level: 1,
190
- render: renderMenuItemMini
191
- }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({}, item, {
270
+ render: renderMenuItemMini,
271
+ raw: item
272
+ }))) : /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, Object.assign({
273
+ hidden: !showVertical && index >= tagMaxCount
274
+ }, item, {
192
275
  key: item.id,
193
- level: 1
276
+ level: 1,
277
+ raw: item
194
278
  }));
279
+ }), /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
280
+ hidden: showVertical || restTagList.length === 0,
281
+ id: "hi-v4-menu-more",
282
+ title: "\u66F4\u591A",
283
+ children: restTagList
195
284
  })), /*#__PURE__*/React__default["default"].createElement("div", {
196
285
  className: prefixCls + "__footer"
197
286
  }, renderFooter())));
package/lib/cjs/MenuItem.js CHANGED
@@ -48,6 +48,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
48
48
  var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
49
49
 
50
50
  var MENU_PREFIX = classname.getPrefixCls('menu');
51
+ var hiddenStyle = {
52
+ position: 'absolute',
53
+ opacity: 0,
54
+ order: 9999,
55
+ visibility: 'hidden'
56
+ };
51
57
  var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
52
58
  var _cx, _cx2;
53
59
 
@@ -62,8 +68,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
62
68
  level = _a$level === void 0 ? 1 : _a$level,
63
69
  children = _a.children,
64
70
  parentIds = _a.parentIds,
71
+ _a$hidden = _a.hidden,
72
+ hidden = _a$hidden === void 0 ? false : _a$hidden,
65
73
  render = _a.render,
66
- rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "render"]);
74
+ raw = _a.raw,
75
+ rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
67
76
 
68
77
  var itemRef = React.useRef(null);
69
78
 
@@ -86,7 +95,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
86
95
  var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
87
96
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
88
97
  ref: mergedRef,
89
- 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)
98
+ 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),
99
+ style: hidden ? hiddenStyle : undefined
90
100
  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
91
101
  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)),
92
102
  onClick: function onClick() {
@@ -96,7 +106,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
96
106
  }
97
107
  } else {
98
108
  if (clickMenu) {
99
- clickMenu(id);
109
+ // @ts-ignore
110
+ clickMenu(id, raw);
100
111
  }
101
112
 
102
113
  if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
@@ -141,7 +152,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
141
152
  return /*#__PURE__*/React__default["default"].createElement(MenuItem, Object.assign({}, child, {
142
153
  key: child.id,
143
154
  level: level + 1,
144
- parentIds: _parentIds
155
+ parentIds: _parentIds,
156
+ raw: child
145
157
  }));
146
158
  }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React__default["default"].createElement(Popper__default["default"], {
147
159
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -241,7 +253,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
241
253
  return /*#__PURE__*/React__default["default"].createElement("div", {
242
254
  onClick: function onClick() {
243
255
  if (clickMenu) {
244
- clickMenu(item.id);
256
+ clickMenu(item.id, item);
245
257
  }
246
258
 
247
259
  if (closePopper) {
@@ -314,7 +326,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
314
326
  className: classname.cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
315
327
  onClick: function onClick() {
316
328
  if (clickMenu) {
317
- clickMenu(item.id);
329
+ clickMenu(item.id, item);
318
330
  }
319
331
 
320
332
  if (closePopper) {
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
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-x: auto; }.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 {margin: 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; }";
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
17
  var __styleInject__ = require('inject-head-style')["default"];
18
18
 
package/lib/esm/Menu.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import { __rest } from 'tslib';
11
- import React, { forwardRef, useState, useEffect, useCallback } from 'react';
11
+ import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
14
14
  import { __DEV__ } from '@hi-ui/env';
@@ -19,10 +19,13 @@ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
19
19
  import Tooltip from '@hi-ui/tooltip';
20
20
  import { useUncontrolledToggle } from '@hi-ui/use-toggle';
21
21
  import { getTreeNodesWithChildren } from '@hi-ui/tree-utils';
22
- import { isFunction } from '@hi-ui/type-assertion';
22
+ import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
23
+ import { useResizeObserver } from '@hi-ui/use-resize-observer';
24
+ import { useMergeRefs } from '@hi-ui/use-merge-refs';
23
25
  var MENU_PREFIX = getPrefixCls('menu');
24
26
  var DEFAULT_EXPANDED_IDS = [];
25
27
  var NOOP_ARRAY = [];
28
+ var MIN_WIDTH = 56;
26
29
  /**
27
30
  * TODO: What is Menu
28
31
  */
@@ -83,8 +86,8 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
83
86
  expandedIds = _useUncontrolledState2[0],
84
87
  updateExpandedIds = _useUncontrolledState2[1];
85
88
 
86
- var clickMenu = useCallback(function (id) {
87
- updateActiveId(id);
89
+ var clickMenu = useCallback(function (id, raw) {
90
+ updateActiveId(id, raw);
88
91
  }, [updateActiveId]);
89
92
  var clickSubMenu = useCallback(function (id) {
90
93
  var nextExpandedIds = expandedIds.includes(id) ? expandedIds.filter(function (expandedId) {
@@ -113,9 +116,84 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
113
116
  mini = _useUncontrolledToggl[0],
114
117
  miniToggleAction = _useUncontrolledToggl[1];
115
118
 
116
- var isVertical = placement === 'vertical';
117
- var canToggle = isVertical && showCollapse;
118
- var showMini = isVertical && mini;
119
+ var showVertical = placement === 'vertical';
120
+ var canToggle = showVertical && showCollapse;
121
+ var showMini = showVertical && mini;
122
+
123
+ var _useState2 = useState(null),
124
+ containerElement = _useState2[0],
125
+ setContainerElement = _useState2[1];
126
+
127
+ var _useState3 = useState(),
128
+ _useState3$ = _useState3[0],
129
+ containerWidth = _useState3$ === void 0 ? 0 : _useState3$,
130
+ setContainerWidth = _useState3[1];
131
+
132
+ useResizeObserver({
133
+ element: containerElement,
134
+ disabled: showVertical,
135
+ getSize: function getSize(element) {
136
+ var itemRect = element.getBoundingClientRect();
137
+ return itemRect.width;
138
+ },
139
+ onResize: function onResize(el, width) {
140
+ setContainerWidth(width);
141
+ }
142
+ });
143
+
144
+ var _useState4 = useState(0),
145
+ tagMaxCount = _useState4[0],
146
+ setTagMaxCount = _useState4[1];
147
+
148
+ var mergedTagList = useMemo(function () {
149
+ if (showVertical) return data;
150
+ if (containerWidth < MIN_WIDTH) return data;
151
+ return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
152
+ }, [showVertical, data, containerWidth]);
153
+ var restTagList = useMemo(function () {
154
+ if (tagMaxCount > 0) return data.slice(tagMaxCount);
155
+ return [];
156
+ }, [data, tagMaxCount]);
157
+ var getTagWidth = useCallback(function (index) {
158
+ if (!containerElement) return MIN_WIDTH;
159
+ var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
160
+ var element = elements && elements[index];
161
+ if (!element) return MIN_WIDTH;
162
+ return element.getBoundingClientRect().width;
163
+ }, [containerElement]);
164
+ useLayoutEffect(function () {
165
+ if (showVertical) return;
166
+ var tagMaxCount = 0;
167
+
168
+ if (isArrayNonEmpty(mergedTagList)) {
169
+ var len = mergedTagList.length;
170
+ var lastIndex = len - 1;
171
+ var totalWidth = 72; // 更多
172
+
173
+ for (var i = 0; i < len; ++i) {
174
+ var currentTagWidth = getTagWidth(i);
175
+
176
+ if (currentTagWidth === undefined) {
177
+ break;
178
+ }
179
+
180
+ totalWidth += currentTagWidth;
181
+
182
+ if (lastIndex === 0 && totalWidth <= containerWidth || i === lastIndex - 1 && totalWidth + getTagWidth(lastIndex) <= containerWidth) {
183
+ tagMaxCount = lastIndex;
184
+ break;
185
+ } else if (totalWidth > containerWidth) {
186
+ tagMaxCount = i - 1;
187
+ break;
188
+ }
189
+ }
190
+ } else {
191
+ tagMaxCount = 0;
192
+ } // 保底要展示 1 个
193
+
194
+
195
+ setTagMaxCount(isArrayNonEmpty(mergedTagList) && tagMaxCount < 1 ? 1 : tagMaxCount + 1);
196
+ }, [showVertical, getTagWidth, containerWidth, mergedTagList]);
119
197
 
120
198
  var renderFooter = function renderFooter() {
121
199
  var collapseNode = canToggle ? /*#__PURE__*/React.createElement("div", {
@@ -130,7 +208,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
130
208
 
131
209
  var cls = cx(prefixCls, className, prefixCls + "--" + placement, mini && prefixCls + "--mini", (expandedType === 'pop' || showAllSubMenus || mini) && prefixCls + "--popup");
132
210
  return /*#__PURE__*/React.createElement("div", Object.assign({
133
- ref: ref,
211
+ ref: useMergeRefs(ref, setContainerElement),
134
212
  role: role,
135
213
  className: cls
136
214
  }, rest), /*#__PURE__*/React.createElement(MenuContext.Provider, {
@@ -149,18 +227,27 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
149
227
  }
150
228
  }, /*#__PURE__*/React.createElement("ul", {
151
229
  className: cx(prefixCls + "__wrapper")
152
- }, data.map(function (item) {
230
+ }, mergedTagList.map(function (item, index) {
153
231
  return showMini ? /*#__PURE__*/React.createElement(Tooltip, {
154
232
  title: item.title,
155
233
  key: item.id,
156
234
  placement: "right"
157
235
  }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
158
236
  level: 1,
159
- render: renderMenuItemMini
160
- }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
237
+ render: renderMenuItemMini,
238
+ raw: item
239
+ }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({
240
+ hidden: !showVertical && index >= tagMaxCount
241
+ }, item, {
161
242
  key: item.id,
162
- level: 1
243
+ level: 1,
244
+ raw: item
163
245
  }));
246
+ }), /*#__PURE__*/React.createElement(MenuItem, {
247
+ hidden: showVertical || restTagList.length === 0,
248
+ id: "hi-v4-menu-more",
249
+ title: "\u66F4\u591A",
250
+ children: restTagList
164
251
  })), /*#__PURE__*/React.createElement("div", {
165
252
  className: prefixCls + "__footer"
166
253
  }, renderFooter())));
package/lib/esm/MenuItem.js CHANGED
@@ -19,6 +19,12 @@ import { isArrayNonEmpty, isFunction } from '@hi-ui/type-assertion';
19
19
  import { times } from '@hi-ui/array-utils';
20
20
  import { useMergeRefs } from '@hi-ui/use-merge-refs';
21
21
  var MENU_PREFIX = getPrefixCls('menu');
22
+ var hiddenStyle = {
23
+ position: 'absolute',
24
+ opacity: 0,
25
+ order: 9999,
26
+ visibility: 'hidden'
27
+ };
22
28
  var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
23
29
  var _cx, _cx2;
24
30
 
@@ -33,8 +39,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
33
39
  level = _a$level === void 0 ? 1 : _a$level,
34
40
  children = _a.children,
35
41
  parentIds = _a.parentIds,
42
+ _a$hidden = _a.hidden,
43
+ hidden = _a$hidden === void 0 ? false : _a$hidden,
36
44
  render = _a.render,
37
- rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "render"]);
45
+ raw = _a.raw,
46
+ rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw"]);
38
47
 
39
48
  var itemRef = useRef(null);
40
49
 
@@ -57,7 +66,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
57
66
  var mergedRef = useMergeRefs(itemRef, ref);
58
67
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
59
68
  ref: mergedRef,
60
- 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)
69
+ 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),
70
+ style: hidden ? hiddenStyle : undefined
61
71
  }, rest), /*#__PURE__*/React.createElement("div", {
62
72
  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)),
63
73
  onClick: function onClick() {
@@ -67,7 +77,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
67
77
  }
68
78
  } else {
69
79
  if (clickMenu) {
70
- clickMenu(id);
80
+ // @ts-ignore
81
+ clickMenu(id, raw);
71
82
  }
72
83
 
73
84
  if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
@@ -112,7 +123,8 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
112
123
  return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, child, {
113
124
  key: child.id,
114
125
  level: level + 1,
115
- parentIds: _parentIds
126
+ parentIds: _parentIds,
127
+ raw: child
116
128
  }));
117
129
  }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
118
130
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
@@ -212,7 +224,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
212
224
  return /*#__PURE__*/React.createElement("div", {
213
225
  onClick: function onClick() {
214
226
  if (clickMenu) {
215
- clickMenu(item.id);
227
+ clickMenu(item.id, item);
216
228
  }
217
229
 
218
230
  if (closePopper) {
@@ -285,7 +297,7 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
285
297
  className: cx(prefixCls + "-item", (_cx4 = {}, _cx4[prefixCls + "-item--active"] = activeId === item.id, _cx4)),
286
298
  onClick: function onClick() {
287
299
  if (clickMenu) {
288
- clickMenu(item.id);
300
+ clickMenu(item.id, item);
289
301
  }
290
302
 
291
303
  if (closePopper) {
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from 'inject-head-style';
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-x: auto; }.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 {margin: 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; }";
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);
14
14
 
package/lib/types/Menu.d.ts CHANGED
@@ -69,7 +69,7 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
69
69
  /**
70
70
  * 点击菜单选项时的回调
71
71
  */
72
- onClick?: (menuId: React.ReactText) => void;
72
+ onClick?: (menuId: React.ReactText, menuItem: MenuDataItem) => void;
73
73
  /**
74
74
  * 点击父菜单项时的回调
75
75
  */
package/lib/types/MenuItem.d.ts CHANGED
@@ -7,8 +7,9 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
7
7
  title: React.ReactNode;
8
8
  icon?: React.ReactNode;
9
9
  disabled?: boolean;
10
- children?: MenuItemProps[];
10
+ children?: MenuDataItem[];
11
11
  level?: number;
12
12
  parentIds?: React.ReactText[];
13
13
  render?: (node: MenuDataItem) => React.ReactNode;
14
+ raw?: MenuDataItem;
14
15
  }
package/lib/types/context.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { MenuDataItem } from './types';
2
3
  declare const MenuContext: React.Context<{
3
4
  placement?: "vertical" | "horizontal" | undefined;
4
5
  expandedType?: "collapse" | "pop" | undefined;
@@ -7,7 +8,7 @@ declare const MenuContext: React.Context<{
7
8
  expandedIds?: React.ReactText[] | undefined;
8
9
  activeId?: React.ReactText | undefined;
9
10
  activeParents?: React.ReactText[] | undefined;
10
- clickMenu?: ((id: React.ReactText) => void) | undefined;
11
+ clickMenu?: ((id: React.ReactText, raw: MenuDataItem) => void) | undefined;
11
12
  clickSubMenu?: ((id: React.ReactText) => void) | undefined;
12
13
  closePopper?: ((id: React.ReactText) => void) | undefined;
13
14
  closeAllPopper?: (() => void) | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.0.0-beta.28",
3
+ "version": "4.0.0-beta.30",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -55,6 +55,7 @@
55
55
  "@hi-ui/tree-utils": "^4.0.0-beta.6",
56
56
  "@hi-ui/type-assertion": "^4.0.0-beta.5",
57
57
  "@hi-ui/use-merge-refs": "^4.0.0-beta.5",
58
+ "@hi-ui/use-resize-observer": "^4.0.0-beta.1",
58
59
  "@hi-ui/use-toggle": "^4.0.0-beta.6",
59
60
  "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.5",
60
61
  "react-transition-group": "^4.4.2"
@@ -68,5 +69,5 @@
68
69
  "react": "^17.0.1",
69
70
  "react-dom": "^17.0.1"
70
71
  },
71
- "gitHead": "43cfc64831263176a31bf951a5add214df340248"
72
+ "gitHead": "8d10a3b322b9a025f3ba7e17593f602f63adc284"
72
73
  }