@hi-ui/menu 4.2.2 → 4.3.1

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/CHANGELOG.md +12 -0
  2. package/lib/cjs/Menu.js +14 -10
  3. package/lib/cjs/styles/index.scss.js +1 -1
  4. package/lib/cjs/util.js +29 -0
  5. package/lib/esm/Menu.js +16 -12
  6. package/lib/esm/styles/index.scss.js +1 -1
  7. package/lib/esm/util.js +29 -1
  8. package/lib/types/Menu.d.ts +5 -1
  9. package/lib/types/util.d.ts +4 -2
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @hi-ui/menu
2
2
 
3
+ ## 4.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2944](https://github.com/XiaoMi/hiui/pull/2944) [`629731e5b`](https://github.com/XiaoMi/hiui/commit/629731e5b3c5f98e70599ae06eb88609336d3467) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - fix: 修复最后一个菜单项的子节点没有间距的问题
8
+
9
+ ## 4.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#2880](https://github.com/XiaoMi/hiui/pull/2880) [`1b46f791f`](https://github.com/XiaoMi/hiui/commit/1b46f791f99c20a946250c2921f3362304e86371) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 新增支持配置字段别名
14
+
3
15
  ## 4.2.2
4
16
 
5
17
  ### Patch Changes
package/lib/cjs/Menu.js CHANGED
@@ -52,6 +52,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
52
52
  className = _a.className,
53
53
  _a$data = _a.data,
54
54
  data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
55
+ fieldNames = _a.fieldNames,
55
56
  _a$placement = _a.placement,
56
57
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
57
58
  _a$showCollapse = _a.showCollapse,
@@ -81,7 +82,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
81
82
  onClick = _a.onClick,
82
83
  _a$size = _a.size,
83
84
  size = _a$size === void 0 ? 'lg' : _a$size,
84
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
85
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
85
86
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
86
87
  activeId = _useUncontrolledState[0],
87
88
  updateActiveId = _useUncontrolledState[1];
@@ -90,11 +91,14 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
90
91
  }),
91
92
  activeParents = _useState[0],
92
93
  updateActiveParents = _useState[1];
94
+ var transformedData = React.useMemo(function () {
95
+ return util.transformTreeData(data, fieldNames);
96
+ }, [data, fieldNames]);
93
97
  React.useEffect(function () {
94
- updateActiveParents(util.getAncestorIds(activeId, data));
95
- }, [activeId, data]);
98
+ updateActiveParents(util.getAncestorIds(activeId, transformedData));
99
+ }, [activeId, transformedData]);
96
100
  var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
97
- return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
101
+ return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(transformedData).map(function (node) {
98
102
  return node.id;
99
103
  }) : defaultExpandedIds;
100
104
  }, expandedIdsProp, onExpand),
@@ -152,14 +156,14 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
152
156
  tagMaxCount = _useState4[0],
153
157
  setTagMaxCount = _useState4[1];
154
158
  var mergedTagList = React.useMemo(function () {
155
- if (showVertical) return data;
156
- if (containerWidth < MIN_WIDTH) return data;
157
- return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
158
- }, [showVertical, data, containerWidth]);
159
+ if (showVertical) return transformedData;
160
+ if (containerWidth < MIN_WIDTH) return transformedData;
161
+ return transformedData.slice(0, Math.min(transformedData.length, containerWidth / MIN_WIDTH));
162
+ }, [showVertical, transformedData, containerWidth]);
159
163
  var restTagList = React.useMemo(function () {
160
- if (tagMaxCount > 0) return data.slice(tagMaxCount);
164
+ if (tagMaxCount > 0) return transformedData.slice(tagMaxCount);
161
165
  return [];
162
- }, [data, tagMaxCount]);
166
+ }, [transformedData, tagMaxCount]);
163
167
  var getTagWidth = React.useCallback(function (index) {
164
168
  if (!containerElement) return MIN_WIDTH;
165
169
  var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
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 .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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;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__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.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__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.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: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);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);-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;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);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;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper--collapsible) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 14px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: 550;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;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;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}.hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {margin-left: -4px;}";
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 .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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;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__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.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--popup:not(.hi-v4-menu--mini) .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 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);-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;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);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;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper--collapsible) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 14px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: 550;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;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;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}.hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {margin-left: -4px;}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/cjs/util.js CHANGED
@@ -62,7 +62,36 @@ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
62
62
  return d.title.includes && d.title.includes(searchKey);
63
63
  })) !== null && _d !== void 0 ? _d : [];
64
64
  };
65
+ var transformTreeData = function transformTreeData(data, fieldNames) {
66
+ /**
67
+ * 转换对象
68
+ */
69
+ var getKeyFields = function getKeyFields(node, key) {
70
+ if (fieldNames) {
71
+ return node[fieldNames[key] || key];
72
+ }
73
+ return node[key];
74
+ };
75
+ /**
76
+ * 递归处理树形数组
77
+ */
78
+ var traverseTreeNode = function traverseTreeNode(node) {
79
+ var _a;
80
+ var newNode = Object.assign({}, node);
81
+ newNode.id = getKeyFields(newNode, 'id');
82
+ newNode.title = getKeyFields(newNode, 'title');
83
+ newNode.icon = getKeyFields(newNode, 'icon');
84
+ newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
85
+ newNode.children = getKeyFields(newNode, 'children');
86
+ if (newNode.children) {
87
+ newNode.children = newNode.children.map(traverseTreeNode);
88
+ }
89
+ return newNode;
90
+ };
91
+ return data.map(traverseTreeNode);
92
+ };
65
93
  exports.filterTreeData = filterTreeData;
66
94
  exports.getAncestorIds = getAncestorIds;
67
95
  exports.getIdsWithChildren = getIdsWithChildren;
68
96
  exports.getParentId = getParentId;
97
+ exports.transformTreeData = transformTreeData;
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, useMemo, useLayoutEffect } from 'react';
11
+ import React, { forwardRef, useState, useMemo, useEffect, useCallback, 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';
@@ -22,7 +22,7 @@ import { useMergeRefs } from '@hi-ui/use-merge-refs';
22
22
  import { uuid } from '@hi-ui/use-id';
23
23
  import { MenuItem } from './MenuItem.js';
24
24
  import MenuContext from './context.js';
25
- import { getAncestorIds } from './util.js';
25
+ import { getAncestorIds, transformTreeData } from './util.js';
26
26
  var MENU_PREFIX = getPrefixCls('menu');
27
27
  var DEFAULT_EXPANDED_IDS = [];
28
28
  var NOOP_ARRAY = [];
@@ -39,6 +39,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
39
39
  className = _a.className,
40
40
  _a$data = _a.data,
41
41
  data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
42
+ fieldNames = _a.fieldNames,
42
43
  _a$placement = _a.placement,
43
44
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
44
45
  _a$showCollapse = _a.showCollapse,
@@ -68,7 +69,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
68
69
  onClick = _a.onClick,
69
70
  _a$size = _a.size,
70
71
  size = _a$size === void 0 ? 'lg' : _a$size,
71
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
72
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
72
73
  var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
73
74
  activeId = _useUncontrolledState[0],
74
75
  updateActiveId = _useUncontrolledState[1];
@@ -77,11 +78,14 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
77
78
  }),
78
79
  activeParents = _useState[0],
79
80
  updateActiveParents = _useState[1];
81
+ var transformedData = useMemo(function () {
82
+ return transformTreeData(data, fieldNames);
83
+ }, [data, fieldNames]);
80
84
  useEffect(function () {
81
- updateActiveParents(getAncestorIds(activeId, data));
82
- }, [activeId, data]);
85
+ updateActiveParents(getAncestorIds(activeId, transformedData));
86
+ }, [activeId, transformedData]);
83
87
  var _useUncontrolledState2 = useUncontrolledState(function () {
84
- return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
88
+ return defaultExpandAll ? getTreeNodesWithChildren(transformedData).map(function (node) {
85
89
  return node.id;
86
90
  }) : defaultExpandedIds;
87
91
  }, expandedIdsProp, onExpand),
@@ -139,14 +143,14 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
139
143
  tagMaxCount = _useState4[0],
140
144
  setTagMaxCount = _useState4[1];
141
145
  var mergedTagList = useMemo(function () {
142
- if (showVertical) return data;
143
- if (containerWidth < MIN_WIDTH) return data;
144
- return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
145
- }, [showVertical, data, containerWidth]);
146
+ if (showVertical) return transformedData;
147
+ if (containerWidth < MIN_WIDTH) return transformedData;
148
+ return transformedData.slice(0, Math.min(transformedData.length, containerWidth / MIN_WIDTH));
149
+ }, [showVertical, transformedData, containerWidth]);
146
150
  var restTagList = useMemo(function () {
147
- if (tagMaxCount > 0) return data.slice(tagMaxCount);
151
+ if (tagMaxCount > 0) return transformedData.slice(tagMaxCount);
148
152
  return [];
149
- }, [data, tagMaxCount]);
153
+ }, [transformedData, tagMaxCount]);
150
154
  var getTagWidth = useCallback(function (index) {
151
155
  if (!containerElement) return MIN_WIDTH;
152
156
  var elements = containerElement.getElementsByClassName('hi-v4-menu-item');
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
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 .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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;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__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.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__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.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: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 40px);margin-top: var(--hi-v4-spacing-4, 8px);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);-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;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);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;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper--collapsible) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 14px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: 550;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;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;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}.hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {margin-left: -4px;}";
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 .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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;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__inner--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.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--horizontal .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled:hover .hi-v4-menu-item__inner {border-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-menu--horizontal .hi-v4-menu-item--disabled .hi-v4-menu-item__content {color: var(--hi-v4-color-gray-400, #b5bcc7);}.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--popup:not(.hi-v4-menu--mini) .hi-v4-menu__wrapper > .hi-v4-menu-item:last-child .hi-v4-menu-item__inner {margin-bottom: 0;}.hi-v4-menu--vertical .hi-v4-menu__toggle {width: var(--hi-v4-height-10, 40px);height: var(--hi-v4-height-10, 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);-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;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);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;}.hi-v4-menu--vertical .hi-v4-menu-item--disabled {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-menu--vertical.hi-v4-menu--size-lg .hi-v4-menu-item__inner {height: var(--hi-v4-height-10, 40px);margin-bottom: var(--hi-v4-spacing-4, 8px);}.hi-v4-menu--vertical.hi-v4-menu--size-md .hi-v4-menu-item__inner {height: var(--hi-v4-height-9, 36px);margin-bottom: var(--hi-v4-spacing-2, 4px);}.hi-v4-menu--vertical.hi-v4-menu--size-sm .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: var(--hi-v4-spacing-1, 2px);}.hi-v4-sidebar-wrapper {position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;height: 100%;}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper-showMenuArrow) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__arrow {display: none;}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-sidebar-wrapper--showMenu .hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v4-sidebar-wrapper:not(.hi-v4-sidebar-wrapper--collapsible) .hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v4-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);background-color: #fff;}.hi-v4-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v4-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-sidebar-item:first-child {margin-top: 0;}.hi-v4-sidebar-item:hover {cursor: pointer;}.hi-v4-sidebar-item:not(.hi-v4-sidebar-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-sidebar-item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-sidebar-item--active .hi-v4-sidebar-item__icon, .hi-v4-sidebar-item--active .hi-v4-sidebar-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-sidebar-item__icon {height: 20px;color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-item__icon svg[class^=hi-v4-icon] {width: 20px;height: 20px;}.hi-v4-sidebar-item__title {font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner {height: var(--hi-v4-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item .hi-v4-menu-item__inner--hasIcon + div .hi-v4-menu-submenu .hi-v4-menu-item__indent {width: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);-webkit-margin-end: var(--hi-v4-spacing-2, 4px);margin-inline-end: var(--hi-v4-spacing-2, 4px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__indent {width: 14px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: 550;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-600, #5f6a7a);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__content {font-size: var(--hi-v4-text-size-sm, 0.75rem);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item {margin-top: var(--hi-v4-spacing-4, 8px);}.hi-v4-sidebar-menu-wrapper .hi-v4-menu__wrapper > .hi-v4-menu-item:first-child {margin-top: 0;}.hi-v4-sidebar-toggle {-webkit-box-sizing: border-box;box-sizing: border-box;position: absolute;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;width: 12px;height: 60px;right: -11px;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-left: none;cursor: pointer;color: var(--hi-v4-color-gray-600, #5f6a7a);background-color: #fff;}.hi-v4-sidebar-toggle svg[class^=hi-v4-icon] {margin-left: -4px;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/esm/util.js CHANGED
@@ -57,4 +57,32 @@ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
57
57
  return d.title.includes && d.title.includes(searchKey);
58
58
  })) !== null && _d !== void 0 ? _d : [];
59
59
  };
60
- export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId };
60
+ var transformTreeData = function transformTreeData(data, fieldNames) {
61
+ /**
62
+ * 转换对象
63
+ */
64
+ var getKeyFields = function getKeyFields(node, key) {
65
+ if (fieldNames) {
66
+ return node[fieldNames[key] || key];
67
+ }
68
+ return node[key];
69
+ };
70
+ /**
71
+ * 递归处理树形数组
72
+ */
73
+ var traverseTreeNode = function traverseTreeNode(node) {
74
+ var _a;
75
+ var newNode = Object.assign({}, node);
76
+ newNode.id = getKeyFields(newNode, 'id');
77
+ newNode.title = getKeyFields(newNode, 'title');
78
+ newNode.icon = getKeyFields(newNode, 'icon');
79
+ newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
80
+ newNode.children = getKeyFields(newNode, 'children');
81
+ if (newNode.children) {
82
+ newNode.children = newNode.children.map(traverseTreeNode);
83
+ }
84
+ return newNode;
85
+ };
86
+ return data.map(traverseTreeNode);
87
+ };
88
+ export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, transformTreeData };
package/lib/types/Menu.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
2
+ import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
3
3
  import { MenuDataItem, MenuFooterRenderProps } from './types';
4
4
  /**
5
5
  * 菜单
@@ -10,6 +10,10 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
10
10
  * 菜单项数据列表
11
11
  */
12
12
  data: MenuDataItem[];
13
+ /**
14
+ * 设置 data 中 id, title, disabled, children 对应的 key
15
+ */
16
+ fieldNames?: HiBaseFieldNames;
13
17
  /**
14
18
  * 默认激活的菜单项 id
15
19
  */
package/lib/types/util.d.ts CHANGED
@@ -1,6 +1,8 @@
1
- /// <reference types="react" />
2
1
  import { MenuDataItem } from './types';
2
+ import { HiBaseFieldNames } from '@hi-ui/core';
3
+ import React from 'react';
3
4
  export declare const getParentId: (id: string | number, data: Record<string, any>[]) => string | number;
4
5
  export declare const getAncestorIds: (id: string | number, data: Record<string, any>[], arr?: (string | number)[]) => (string | number)[];
5
- export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => import("react").ReactText[];
6
+ export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => React.ReactText[];
6
7
  export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number) => MenuDataItem[];
8
+ export declare const transformTreeData: (data: MenuDataItem[], fieldNames?: HiBaseFieldNames | undefined) => MenuDataItem[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.2.2",
3
+ "version": "4.3.1",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",