@hi-ui/menu 4.2.0-alpha.1 → 4.2.0-alpha.3

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 (14) hide show
  1. package/lib/cjs/MenuItem.js +26 -28
  2. package/lib/cjs/Sidebar.js +7 -7
  3. package/lib/cjs/index.js +2 -0
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/cjs/util.js +8 -20
  6. package/lib/esm/MenuItem.js +26 -28
  7. package/lib/esm/Sidebar.js +8 -8
  8. package/lib/esm/index.js +1 -1
  9. package/lib/esm/styles/index.scss.js +1 -1
  10. package/lib/esm/util.js +8 -20
  11. package/lib/types/Sidebar.d.ts +1 -9
  12. package/lib/types/index.d.ts +1 -1
  13. package/lib/types/util.d.ts +1 -1
  14. package/package.json +2 -2
package/lib/cjs/MenuItem.js CHANGED
@@ -13,7 +13,6 @@ var _typeof = require("@babel/runtime/helpers/typeof");
13
13
  Object.defineProperty(exports, '__esModule', {
14
14
  value: true
15
15
  });
16
- var tslib = require('tslib');
17
16
  var React = require('react');
18
17
  var classname = require('@hi-ui/classname');
19
18
  var env = require('@hi-ui/env');
@@ -38,26 +37,25 @@ var hiddenStyle = {
38
37
  order: 9999,
39
38
  visibility: 'hidden'
40
39
  };
41
- var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
40
+ var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
42
41
  var _cx, _cx2;
43
- var _a$prefixCls = _a.prefixCls,
44
- prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
45
- className = _a.className,
46
- icon = _a.icon,
47
- title = _a.title,
48
- disabled = _a.disabled,
49
- id = _a.id,
50
- _a$level = _a.level,
51
- level = _a$level === void 0 ? 1 : _a$level,
52
- children = _a.children,
53
- parentIds = _a.parentIds,
54
- _a$hidden = _a.hidden,
55
- hidden = _a$hidden === void 0 ? false : _a$hidden,
56
- render = _a.render,
57
- raw = _a.raw,
58
- _a$size = _a.size,
59
- size = _a$size === void 0 ? 'lg' : _a$size,
60
- rest = tslib.__rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
42
+ var _ref$prefixCls = _ref.prefixCls,
43
+ prefixCls = _ref$prefixCls === void 0 ? MENU_PREFIX : _ref$prefixCls,
44
+ className = _ref.className,
45
+ icon = _ref.icon,
46
+ title = _ref.title,
47
+ disabled = _ref.disabled,
48
+ id = _ref.id,
49
+ _ref$level = _ref.level,
50
+ level = _ref$level === void 0 ? 1 : _ref$level,
51
+ children = _ref.children,
52
+ parentIds = _ref.parentIds,
53
+ _ref$hidden = _ref.hidden,
54
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden,
55
+ render = _ref.render,
56
+ raw = _ref.raw,
57
+ _ref$size = _ref.size,
58
+ size = _ref$size === void 0 ? 'lg' : _ref$size;
61
59
  var itemRef = React.useRef(null);
62
60
  var _useContext = React.useContext(context["default"]),
63
61
  placement = _useContext.placement,
@@ -75,11 +73,11 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
75
73
  var _parentIds = (parentIds || []).concat(id);
76
74
  var hasChildren = typeAssertion.isArrayNonEmpty(children);
77
75
  var mergedRef = useMergeRefs.useMergeRefs(itemRef, ref);
78
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
76
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("li", {
79
77
  ref: mergedRef,
80
78
  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),
81
79
  style: hidden ? hiddenStyle : undefined
82
- }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
80
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
83
81
  className: classname.cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
84
82
  onClick: function onClick() {
85
83
  if (typeAssertion.isArrayNonEmpty(children)) {
@@ -321,9 +319,9 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
321
319
  if (env.__DEV__) {
322
320
  MenuItem.displayName = 'MenuItem';
323
321
  }
324
- var Arrow = function Arrow(_ref) {
325
- var prefixCls = _ref.prefixCls,
326
- direction = _ref.direction;
322
+ var Arrow = function Arrow(_ref2) {
323
+ var prefixCls = _ref2.prefixCls,
324
+ direction = _ref2.direction;
327
325
  var icon;
328
326
  switch (direction) {
329
327
  case 'up':
@@ -342,9 +340,9 @@ var Arrow = function Arrow(_ref) {
342
340
  /**
343
341
  * 渲染空白占位
344
342
  */
345
- var renderIndent = function renderIndent(_ref2) {
346
- var prefixCls = _ref2.prefixCls,
347
- depth = _ref2.depth;
343
+ var renderIndent = function renderIndent(_ref3) {
344
+ var prefixCls = _ref3.prefixCls,
345
+ depth = _ref3.depth;
348
346
  return arrayUtils.times(depth, function (index) {
349
347
  return /*#__PURE__*/React__default["default"].createElement("span", {
350
348
  className: prefixCls + "__indent",
package/lib/cjs/Sidebar.js CHANGED
@@ -38,6 +38,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
38
38
  prefixCls = _ref$prefixCls === void 0 ? SIDEBAR_PREFIX : _ref$prefixCls,
39
39
  _ref$role = _ref.role,
40
40
  role = _ref$role === void 0 ? 'sidebar' : _ref$role,
41
+ className = _ref.className,
41
42
  _ref$data = _ref.data,
42
43
  data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
43
44
  _ref$showCollapse = _ref.showCollapse,
@@ -64,7 +65,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
64
65
  }),
65
66
  activeParents = _useState[0],
66
67
  updateActiveParents = _useState[1];
67
- // 用于更新菜单
68
+ // 用于更新Menu组件
68
69
  var _useState2 = React.useState(0),
69
70
  menuKey = _useState2[0],
70
71
  setMenuKey = _useState2[1];
@@ -85,10 +86,6 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
85
86
  var newActiveParents = (_a = util.getAncestorIds(activeId, data)) !== null && _a !== void 0 ? _a : '';
86
87
  updateActiveParents(newActiveParents);
87
88
  }, [activeId, data, updateActiveId]);
88
- React.useLayoutEffect(function () {
89
- var _a;
90
- menuWidth !== undefined && ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--sidebar-menu-width', String(menuWidth)));
91
- }, [menuWidth]);
92
89
  var menuDataMemo = React.useMemo(function () {
93
90
  var _a, _b;
94
91
  var menuData = (_b = (_a = data.find(function (item) {
@@ -119,7 +116,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
119
116
  className: cls,
120
117
  ref: wrapperRef
121
118
  }, /*#__PURE__*/React__default["default"].createElement("div", {
122
- className: "" + prefixCls,
119
+ className: classname.cx("" + prefixCls, className),
123
120
  ref: ref,
124
121
  role: role
125
122
  }, /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -136,7 +133,10 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
136
133
  }
137
134
  }));
138
135
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
139
- className: classname.cx(prefixCls + "-menu-wrapper")
136
+ className: classname.cx(prefixCls + "-menu-wrapper"),
137
+ style: {
138
+ width: showMenu ? menuWidth : undefined
139
+ }
140
140
  }, /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
141
141
  key: menuKey,
142
142
  activeId: activeId,
package/lib/cjs/index.js CHANGED
@@ -20,3 +20,5 @@ exports.Menu = Menu.Menu;
20
20
  exports["default"] = Menu.Menu;
21
21
  exports.Sidebar = Sidebar.Sidebar;
22
22
  exports.filterTreeData = util.filterTreeData;
23
+ exports.getAncestorIds = util.getAncestorIds;
24
+ exports.getParentId = util.getParentId;
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 {--sidebar-menu-width: 180px;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 {width: var(--sidebar-menu-width);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 {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);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-top: var(--hi-v4-spacing-6, 12px);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 {display: block;}.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: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.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-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.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 {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: -12px;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;}";
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: -moz-max-content;width: -webkit-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: -moz-fit-content;width: -webkit-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 {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);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-top: var(--hi-v4-spacing-6, 12px);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 {display: block;}.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: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.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-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.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 {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: -12px;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;}";
16
16
  var __styleInject__ = require('style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/cjs/util.js CHANGED
@@ -41,33 +41,21 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
41
41
  }
42
42
  return arr;
43
43
  };
44
- var filterTreeData = function filterTreeData(treeData, searchKey, activeId, level) {
45
- if (level === void 0) {
46
- level = 1;
47
- }
48
- var _a, _b;
44
+ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
45
+ var _a, _b, _c, _d;
49
46
  if (searchKey === '') {
50
47
  return [];
51
48
  }
52
- var activeParents = getAncestorIds(activeId, treeData);
53
49
  var clonedData = treeUtils.cloneTree(treeData);
50
+ var activeParents = getAncestorIds(activeId, treeData);
54
51
  var sidebarActiveId = (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
55
52
  // 获取当前选中的树节点
56
- var currentTree = clonedData.find(function (d) {
53
+ var currentTree = (_c = (_b = clonedData === null || clonedData === void 0 ? void 0 : clonedData.find(function (d) {
57
54
  return d.id === sidebarActiveId;
58
- });
59
- if (!currentTree) {
60
- return [];
61
- }
62
- var result = treeUtils.filterTree((_b = currentTree === null || currentTree === void 0 ? void 0 : currentTree.children) !== null && _b !== void 0 ? _b : [], function (d) {
63
- return d.title.includes(searchKey);
64
- });
65
- if (level === 1) {
66
- currentTree.children = result;
67
- return clonedData;
68
- } else {
69
- return result;
70
- }
55
+ })) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : [];
56
+ return (_d = treeUtils.filterTree(currentTree, function (d) {
57
+ return d.title.includes && d.title.includes(searchKey);
58
+ })) !== null && _d !== void 0 ? _d : [];
71
59
  };
72
60
  exports.filterTreeData = filterTreeData;
73
61
  exports.getAncestorIds = getAncestorIds;
package/lib/esm/MenuItem.js CHANGED
@@ -7,7 +7,6 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import { __rest } from 'tslib';
11
10
  import React, { forwardRef, useRef, useContext } from 'react';
12
11
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
12
  import { __DEV__ } from '@hi-ui/env';
@@ -25,26 +24,25 @@ var hiddenStyle = {
25
24
  order: 9999,
26
25
  visibility: 'hidden'
27
26
  };
28
- var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
27
+ var MenuItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
28
  var _cx, _cx2;
30
- var _a$prefixCls = _a.prefixCls,
31
- prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
32
- className = _a.className,
33
- icon = _a.icon,
34
- title = _a.title,
35
- disabled = _a.disabled,
36
- id = _a.id,
37
- _a$level = _a.level,
38
- level = _a$level === void 0 ? 1 : _a$level,
39
- children = _a.children,
40
- parentIds = _a.parentIds,
41
- _a$hidden = _a.hidden,
42
- hidden = _a$hidden === void 0 ? false : _a$hidden,
43
- render = _a.render,
44
- raw = _a.raw,
45
- _a$size = _a.size,
46
- size = _a$size === void 0 ? 'lg' : _a$size,
47
- rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds", "hidden", "render", "raw", "size"]);
29
+ var _ref$prefixCls = _ref.prefixCls,
30
+ prefixCls = _ref$prefixCls === void 0 ? MENU_PREFIX : _ref$prefixCls,
31
+ className = _ref.className,
32
+ icon = _ref.icon,
33
+ title = _ref.title,
34
+ disabled = _ref.disabled,
35
+ id = _ref.id,
36
+ _ref$level = _ref.level,
37
+ level = _ref$level === void 0 ? 1 : _ref$level,
38
+ children = _ref.children,
39
+ parentIds = _ref.parentIds,
40
+ _ref$hidden = _ref.hidden,
41
+ hidden = _ref$hidden === void 0 ? false : _ref$hidden,
42
+ render = _ref.render,
43
+ raw = _ref.raw,
44
+ _ref$size = _ref.size,
45
+ size = _ref$size === void 0 ? 'lg' : _ref$size;
48
46
  var itemRef = useRef(null);
49
47
  var _useContext = useContext(MenuContext),
50
48
  placement = _useContext.placement,
@@ -62,11 +60,11 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
62
60
  var _parentIds = (parentIds || []).concat(id);
63
61
  var hasChildren = isArrayNonEmpty(children);
64
62
  var mergedRef = useMergeRefs(itemRef, ref);
65
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
63
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
66
64
  ref: mergedRef,
67
65
  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),
68
66
  style: hidden ? hiddenStyle : undefined
69
- }, rest), /*#__PURE__*/React.createElement("div", {
67
+ }, /*#__PURE__*/React.createElement("div", {
70
68
  className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2[prefixCls + "-item__inner--expanded"] = expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id), _cx2[prefixCls + "-item__inner--hasIcon"] = icon, _cx2)),
71
69
  onClick: function onClick() {
72
70
  if (isArrayNonEmpty(children)) {
@@ -308,9 +306,9 @@ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
308
306
  if (__DEV__) {
309
307
  MenuItem.displayName = 'MenuItem';
310
308
  }
311
- var Arrow = function Arrow(_ref) {
312
- var prefixCls = _ref.prefixCls,
313
- direction = _ref.direction;
309
+ var Arrow = function Arrow(_ref2) {
310
+ var prefixCls = _ref2.prefixCls,
311
+ direction = _ref2.direction;
314
312
  var icon;
315
313
  switch (direction) {
316
314
  case 'up':
@@ -329,9 +327,9 @@ var Arrow = function Arrow(_ref) {
329
327
  /**
330
328
  * 渲染空白占位
331
329
  */
332
- var renderIndent = function renderIndent(_ref2) {
333
- var prefixCls = _ref2.prefixCls,
334
- depth = _ref2.depth;
330
+ var renderIndent = function renderIndent(_ref3) {
331
+ var prefixCls = _ref3.prefixCls,
332
+ depth = _ref3.depth;
335
333
  return times(depth, function (index) {
336
334
  return /*#__PURE__*/React.createElement("span", {
337
335
  className: prefixCls + "__indent",
package/lib/esm/Sidebar.js CHANGED
@@ -7,7 +7,7 @@
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
- import React, { forwardRef, useState, useRef, useMemo, useEffect, useLayoutEffect, useCallback } from 'react';
10
+ import React, { forwardRef, useState, useRef, useMemo, useEffect, useCallback } from 'react';
11
11
  import { getPrefixCls, cx } from '@hi-ui/classname';
12
12
  import { RightOutlined } from '@hi-ui/icons';
13
13
  import { __DEV__ } from '@hi-ui/env';
@@ -26,6 +26,7 @@ var Sidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
26
  prefixCls = _ref$prefixCls === void 0 ? SIDEBAR_PREFIX : _ref$prefixCls,
27
27
  _ref$role = _ref.role,
28
28
  role = _ref$role === void 0 ? 'sidebar' : _ref$role,
29
+ className = _ref.className,
29
30
  _ref$data = _ref.data,
30
31
  data = _ref$data === void 0 ? NOOP_ARRAY : _ref$data,
31
32
  _ref$showCollapse = _ref.showCollapse,
@@ -52,7 +53,7 @@ var Sidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
52
53
  }),
53
54
  activeParents = _useState[0],
54
55
  updateActiveParents = _useState[1];
55
- // 用于更新菜单
56
+ // 用于更新Menu组件
56
57
  var _useState2 = useState(0),
57
58
  menuKey = _useState2[0],
58
59
  setMenuKey = _useState2[1];
@@ -73,10 +74,6 @@ var Sidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
73
74
  var newActiveParents = (_a = getAncestorIds(activeId, data)) !== null && _a !== void 0 ? _a : '';
74
75
  updateActiveParents(newActiveParents);
75
76
  }, [activeId, data, updateActiveId]);
76
- useLayoutEffect(function () {
77
- var _a;
78
- menuWidth !== undefined && ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--sidebar-menu-width', String(menuWidth)));
79
- }, [menuWidth]);
80
77
  var menuDataMemo = useMemo(function () {
81
78
  var _a, _b;
82
79
  var menuData = (_b = (_a = data.find(function (item) {
@@ -107,7 +104,7 @@ var Sidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
107
104
  className: cls,
108
105
  ref: wrapperRef
109
106
  }, /*#__PURE__*/React.createElement("div", {
110
- className: "" + prefixCls,
107
+ className: cx("" + prefixCls, className),
111
108
  ref: ref,
112
109
  role: role
113
110
  }, /*#__PURE__*/React.createElement("ul", {
@@ -124,7 +121,10 @@ var Sidebar = /*#__PURE__*/forwardRef(function (_ref, ref) {
124
121
  }
125
122
  }));
126
123
  }))), /*#__PURE__*/React.createElement("div", {
127
- className: cx(prefixCls + "-menu-wrapper")
124
+ className: cx(prefixCls + "-menu-wrapper"),
125
+ style: {
126
+ width: showMenu ? menuWidth : undefined
127
+ }
128
128
  }, /*#__PURE__*/React.createElement(Menu, {
129
129
  key: menuKey,
130
130
  activeId: activeId,
package/lib/esm/index.js CHANGED
@@ -10,4 +10,4 @@
10
10
  import './styles/index.scss.js';
11
11
  export { Menu, Menu as default } from './Menu.js';
12
12
  export { Sidebar } from './Sidebar.js';
13
- export { filterTreeData } from './util.js';
13
+ export { filterTreeData, getAncestorIds, getParentId } from './util.js';
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 '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 {--sidebar-menu-width: 180px;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 {width: var(--sidebar-menu-width);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 {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);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-top: var(--hi-v4-spacing-6, 12px);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 {display: block;}.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: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.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-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.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 {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: -12px;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;}";
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: -moz-max-content;width: -webkit-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: -moz-fit-content;width: -webkit-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 {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-3, 6px);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-top: var(--hi-v4-spacing-6, 12px);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 {display: block;}.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: 20px;}.hi-v4-sidebar-menu-wrapper .hi-v4-menu-item__content {font-weight: var(--hi-v4-text-weight-medium, 500);}.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-submenu .hi-v4-menu-item__inner .hi-v4-menu-item__indent {display: none;}.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 {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: -12px;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;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/esm/util.js CHANGED
@@ -36,32 +36,20 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
36
36
  }
37
37
  return arr;
38
38
  };
39
- var filterTreeData = function filterTreeData(treeData, searchKey, activeId, level) {
40
- if (level === void 0) {
41
- level = 1;
42
- }
43
- var _a, _b;
39
+ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
40
+ var _a, _b, _c, _d;
44
41
  if (searchKey === '') {
45
42
  return [];
46
43
  }
47
- var activeParents = getAncestorIds(activeId, treeData);
48
44
  var clonedData = cloneTree(treeData);
45
+ var activeParents = getAncestorIds(activeId, treeData);
49
46
  var sidebarActiveId = (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
50
47
  // 获取当前选中的树节点
51
- var currentTree = clonedData.find(function (d) {
48
+ var currentTree = (_c = (_b = clonedData === null || clonedData === void 0 ? void 0 : clonedData.find(function (d) {
52
49
  return d.id === sidebarActiveId;
53
- });
54
- if (!currentTree) {
55
- return [];
56
- }
57
- var result = filterTree((_b = currentTree === null || currentTree === void 0 ? void 0 : currentTree.children) !== null && _b !== void 0 ? _b : [], function (d) {
58
- return d.title.includes(searchKey);
59
- });
60
- if (level === 1) {
61
- currentTree.children = result;
62
- return clonedData;
63
- } else {
64
- return result;
65
- }
50
+ })) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : [];
51
+ return (_d = filterTree(currentTree, function (d) {
52
+ return d.title.includes && d.title.includes(searchKey);
53
+ })) !== null && _d !== void 0 ? _d : [];
66
54
  };
67
55
  export { filterTreeData, getAncestorIds, getParentId };
package/lib/types/Sidebar.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
- import { MenuDataItem, MenuFooterRenderProps } from './types';
3
+ import { MenuDataItem } from './types';
4
4
  /**
5
5
  * 侧边栏菜单
6
6
  */
@@ -42,18 +42,10 @@ export interface SidebarProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
42
42
  * 点击菜单选项时的回调
43
43
  */
44
44
  onClick?: (menuId: React.ReactText, menuItem: MenuDataItem) => void;
45
- /**
46
- * 点击父菜单项时的回调
47
- */
48
- onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
49
45
  /**
50
46
  * 点击收缩开关时的回调
51
47
  */
52
48
  onCollapse?: (collapsed: boolean) => void;
53
- /**
54
- * 底部渲染器
55
- */
56
- footerRender?: (props: MenuFooterRenderProps) => React.ReactNode;
57
49
  /**
58
50
  * 自定义渲染菜单项
59
51
  */
package/lib/types/index.d.ts CHANGED
@@ -2,5 +2,5 @@ import './styles/index.scss';
2
2
  export * from './Menu';
3
3
  export { Menu as default } from './Menu';
4
4
  export * from './Sidebar';
5
- export { filterTreeData } from './util';
5
+ export { filterTreeData, getParentId, getAncestorIds } from './util';
6
6
  export * from './types';
package/lib/types/util.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { MenuDataItem } from './types';
2
2
  export declare const getParentId: (id: string | number, data: Record<string, any>[]) => string | number;
3
3
  export declare const getAncestorIds: (id: string | number, data: Record<string, any>[], arr?: (string | number)[]) => (string | number)[];
4
- export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number, level?: number) => MenuDataItem[];
4
+ export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number) => MenuDataItem[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.2.0-alpha.1",
3
+ "version": "4.2.0-alpha.3",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -50,7 +50,7 @@
50
50
  "@hi-ui/popper": "^4.1.4",
51
51
  "@hi-ui/times": "^4.0.4",
52
52
  "@hi-ui/tooltip": "^4.0.10",
53
- "@hi-ui/tree-utils": "^4.1.5-alpha.0",
53
+ "@hi-ui/tree-utils": "^4.1.5-alpha.1",
54
54
  "@hi-ui/type-assertion": "^4.0.4",
55
55
  "@hi-ui/use-id": "^4.0.4",
56
56
  "@hi-ui/use-merge-refs": "^4.0.4",