@hi-ui/menu 5.0.0-canary.2 → 5.0.0-canary.21

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 (31) hide show
  1. package/CHANGELOG.md +250 -0
  2. package/lib/cjs/EnterIcon.js +44 -0
  3. package/lib/cjs/Expander.js +11 -3
  4. package/lib/cjs/GroupMenu.js +124 -0
  5. package/lib/cjs/Menu.js +68 -17
  6. package/lib/cjs/MenuItem.js +56 -26
  7. package/lib/cjs/MenuSearch.js +365 -0
  8. package/lib/cjs/SideMenu.js +202 -0
  9. package/lib/cjs/index.js +8 -0
  10. package/lib/cjs/styles/index.scss.js +1 -1
  11. package/lib/cjs/util.js +95 -1
  12. package/lib/esm/EnterIcon.js +32 -0
  13. package/lib/esm/Expander.js +11 -3
  14. package/lib/esm/GroupMenu.js +111 -0
  15. package/lib/esm/Menu.js +69 -18
  16. package/lib/esm/MenuItem.js +56 -26
  17. package/lib/esm/MenuSearch.js +347 -0
  18. package/lib/esm/SideMenu.js +187 -0
  19. package/lib/esm/index.js +3 -0
  20. package/lib/esm/styles/index.scss.js +1 -1
  21. package/lib/esm/util.js +95 -2
  22. package/lib/types/EnterIcon.d.ts +1 -0
  23. package/lib/types/GroupMenu.d.ts +34 -0
  24. package/lib/types/Menu.d.ts +11 -2
  25. package/lib/types/MenuItem.d.ts +1 -1
  26. package/lib/types/MenuSearch.d.ts +44 -0
  27. package/lib/types/SideMenu.d.ts +63 -0
  28. package/lib/types/context.d.ts +8 -2
  29. package/lib/types/index.d.ts +3 -0
  30. package/lib/types/util.d.ts +16 -0
  31. package/package.json +29 -20
package/lib/esm/MenuSearch.js ADDED
@@ -0,0 +1,347 @@
1
+ /** @LICENSE
2
+ * @hi-ui/menu
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { __rest } from 'tslib';
11
+ import React, { forwardRef, useState, useRef, useLayoutEffect, useCallback, useEffect, useImperativeHandle } from 'react';
12
+ import { useLocaleContext, useGlobalContext } from '@hi-ui/core';
13
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
14
+ import { __DEV__ } from '@hi-ui/env';
15
+ import { getPrefixCls, cx } from '@hi-ui/classname';
16
+ import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined, CloseOutlined } from '@hi-ui/icons';
17
+ import IconButton from '@hi-ui/icon-button';
18
+ import Button from '@hi-ui/button';
19
+ import Input from '@hi-ui/input';
20
+ import Highlighter from '@hi-ui/highlighter';
21
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
22
+ import { useUncontrolledToggle } from '@hi-ui/use-toggle';
23
+ import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
24
+ import { EnterIcon } from './EnterIcon.js';
25
+ import { searchMenuWithPath } from './util.js';
26
+ var _role = 'menu-search';
27
+ var _prefix = getPrefixCls(_role);
28
+ var MenuSearch = /*#__PURE__*/forwardRef(function (_a, ref) {
29
+ var _cx, _cx2;
30
+ var _b, _c;
31
+ var innerRef = _a.innerRef,
32
+ _a$prefixCls = _a.prefixCls,
33
+ prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
34
+ className = _a.className,
35
+ classNamesProp = _a.classNames,
36
+ stylesProp = _a.styles,
37
+ placeholder = _a.placeholder,
38
+ width = _a.width,
39
+ style = _a.style,
40
+ visibleProp = _a.visible,
41
+ data = _a.data,
42
+ _a$defaultValue = _a.defaultValue,
43
+ defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
44
+ valueProp = _a.value,
45
+ onChange = _a.onChange,
46
+ onSelect = _a.onSelect,
47
+ onClear = _a.onClear,
48
+ onClose = _a.onClose,
49
+ onEsc = _a.onEsc,
50
+ rest = __rest(_a, ["innerRef", "prefixCls", "className", "classNames", "styles", "clearText", "placeholder", "notFoundContent", "width", "style", "visible", "data", "defaultValue", "value", "onChange", "onSearch", "onSelect", "onClear", "onClose", "onEsc"]);
51
+ var i18n = useLocaleContext();
52
+ var _useGlobalContext = useGlobalContext(),
53
+ menuSearchConfig = _useGlobalContext.menuSearch;
54
+ var _useMergeSemantic = useMergeSemantic({
55
+ classNamesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.classNames, classNamesProp],
56
+ stylesList: [menuSearchConfig === null || menuSearchConfig === void 0 ? void 0 : menuSearchConfig.styles, stylesProp],
57
+ info: {
58
+ props: Object.assign(Object.assign({}, rest), {
59
+ data: data,
60
+ placeholder: placeholder,
61
+ width: width,
62
+ visible: visibleProp,
63
+ defaultValue: defaultValue,
64
+ value: valueProp
65
+ })
66
+ }
67
+ }),
68
+ classNames = _useMergeSemantic.classNames,
69
+ styles = _useMergeSemantic.styles;
70
+ var _useUncontrolledToggl = useUncontrolledToggle({
71
+ visible: visibleProp
72
+ }),
73
+ visible = _useUncontrolledToggl[0],
74
+ visibleAction = _useUncontrolledToggl[1];
75
+ var _useUncontrolledState = useUncontrolledState(defaultValue, valueProp, onChange),
76
+ value = _useUncontrolledState[0],
77
+ tryChangeValue = _useUncontrolledState[1];
78
+ var _useState = useState(-1),
79
+ currentIndex = _useState[0],
80
+ setCurrentIndex = _useState[1];
81
+ var listRef = useRef(null);
82
+ useLayoutEffect(function () {
83
+ if (currentIndex === -1 || !listRef.current) return;
84
+ var listContainer = listRef.current;
85
+ var selectedItem = listContainer.children[currentIndex];
86
+ if (!selectedItem) return;
87
+ var containerScrollTop = listContainer.scrollTop;
88
+ var containerHeight = listContainer.clientHeight;
89
+ var itemTop = selectedItem.offsetTop;
90
+ var itemHeight = selectedItem.offsetHeight;
91
+ // 计算元素的可见范围
92
+ var itemBottom = itemTop + itemHeight;
93
+ var visibleTop = containerScrollTop;
94
+ var visibleBottom = containerScrollTop + containerHeight;
95
+ // 判断是否需要滚动
96
+ var isItemAboveViewport = itemTop < visibleTop;
97
+ var isItemBelowViewport = itemBottom > visibleBottom;
98
+ if (isItemAboveViewport) {
99
+ // 如果元素在可视区域上方，滚动到元素顶部
100
+ listContainer.scrollTop = itemTop;
101
+ } else if (isItemBelowViewport) {
102
+ // 如果元素在可视区域下方，滚动到元素底部刚好可见
103
+ listContainer.scrollTop = itemBottom - containerHeight;
104
+ }
105
+ }, [currentIndex]);
106
+ var resultMemo = React.useMemo(function () {
107
+ if (!data || !value) return [];
108
+ // 使用新的搜索算法
109
+ var searchResults = searchMenuWithPath(data, value);
110
+ return searchResults.map(function (result) {
111
+ return Object.assign(Object.assign({}, result.node), {
112
+ level: result.level,
113
+ path: result.path,
114
+ // 添加路径信息用于显示
115
+ pathTitles: result.path.map(function (p) {
116
+ var _a;
117
+ return (_a = p.title) === null || _a === void 0 ? void 0 : _a.toString();
118
+ }).filter(Boolean)
119
+ });
120
+ });
121
+ }, [data, value]);
122
+ var handleChange = useCallback(function (value) {
123
+ tryChangeValue(value);
124
+ }, [tryChangeValue]);
125
+ var handleSelect = useCallback(function (id, item, index) {
126
+ var _a;
127
+ setCurrentIndex(index);
128
+ visibleAction.off();
129
+ // 让列表容器获取焦点，确保键盘导航可用
130
+ (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
131
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(id, item);
132
+ }, [onSelect, visibleAction]);
133
+ var handleMove = useCallback(function (direction) {
134
+ if (!resultMemo) return;
135
+ setCurrentIndex(function (prev) {
136
+ if (direction === 'up') {
137
+ return prev - 1 < 0 ? (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) - 1 : prev - 1;
138
+ } else {
139
+ return prev + 1 > (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) - 1 ? 0 : prev + 1;
140
+ }
141
+ });
142
+ }, [resultMemo]);
143
+ var handleEnter = useCallback(function () {
144
+ if (!resultMemo) return;
145
+ if (currentIndex === -1) {
146
+ setCurrentIndex(0);
147
+ }
148
+ visibleAction.off();
149
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(resultMemo[currentIndex].id, resultMemo[currentIndex]);
150
+ }, [resultMemo, currentIndex, onSelect, visibleAction]);
151
+ var handleClear = useCallback(function () {
152
+ tryChangeValue('');
153
+ setCurrentIndex(-1);
154
+ onClear === null || onClear === void 0 ? void 0 : onClear();
155
+ }, [onClear, tryChangeValue]);
156
+ var handleClose = useCallback(function () {
157
+ visibleAction.off();
158
+ onClose === null || onClose === void 0 ? void 0 : onClose();
159
+ }, [onClose, visibleAction]);
160
+ var handleEscape = useCallback(function () {
161
+ handleClose();
162
+ onEsc === null || onEsc === void 0 ? void 0 : onEsc();
163
+ }, [handleClose, onEsc]);
164
+ var handleKeyDown = useCallback(function (e) {
165
+ if (e.key === 'ArrowUp') {
166
+ handleMove('up');
167
+ }
168
+ if (e.key === 'ArrowDown') {
169
+ handleMove('down');
170
+ }
171
+ if (e.key === 'Enter') {
172
+ handleEnter();
173
+ }
174
+ if (e.key === 'Escape') {
175
+ handleEscape();
176
+ }
177
+ }, [handleEnter, handleMove, handleEscape]);
178
+ var _useState2 = useState(null),
179
+ inputRef = _useState2[0],
180
+ setInputRef = _useState2[1];
181
+ useEffect(function () {
182
+ if (!value || !inputRef) {
183
+ visibleAction.off();
184
+ } else {
185
+ visibleAction.on();
186
+ }
187
+ }, [inputRef, value, visibleAction]);
188
+ useImperativeHandle(innerRef, function () {
189
+ return {
190
+ show: function show() {
191
+ visibleAction.on();
192
+ },
193
+ hide: function hide() {
194
+ visibleAction.off();
195
+ },
196
+ focus: function focus() {
197
+ inputRef === null || inputRef === void 0 ? void 0 : inputRef.focus();
198
+ }
199
+ };
200
+ });
201
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--open"] = visible, _cx));
202
+ return /*#__PURE__*/React.createElement("div", {
203
+ className: cls,
204
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
205
+ }, /*#__PURE__*/React.createElement(MenuSearchInput, {
206
+ width: width,
207
+ prefixCls: prefixCls,
208
+ placeholder: placeholder,
209
+ value: value,
210
+ onChange: handleChange,
211
+ onClear: handleClear,
212
+ onClose: handleClose,
213
+ onKeyDown: handleKeyDown,
214
+ inputRef: setInputRef,
215
+ semanticClassNames: classNames,
216
+ semanticStyles: styles
217
+ }), /*#__PURE__*/React.createElement("div", {
218
+ className: cx(prefixCls + "__content", (_cx2 = {}, _cx2[prefixCls + "__content--visible"] = visible, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.content),
219
+ style: styles === null || styles === void 0 ? void 0 : styles.content
220
+ }, (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
221
+ className: cx(prefixCls + "__header", classNames === null || classNames === void 0 ? void 0 : classNames.header),
222
+ style: styles === null || styles === void 0 ? void 0 : styles.header
223
+ }, /*#__PURE__*/React.createElement(Highlighter, {
224
+ keyword: String((_b = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _b !== void 0 ? _b : 0)
225
+ }, i18n.get('menuSearch.searchResult', {
226
+ count: (_c = resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) !== null && _c !== void 0 ? _c : 0,
227
+ keyword: value
228
+ }))), /*#__PURE__*/React.createElement("div", {
229
+ className: cx(prefixCls + "__list", classNames === null || classNames === void 0 ? void 0 : classNames.list),
230
+ style: styles === null || styles === void 0 ? void 0 : styles.list,
231
+ ref: listRef,
232
+ tabIndex: -1,
233
+ onKeyDown: handleKeyDown
234
+ }, resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.map(function (item, index) {
235
+ var _cx3;
236
+ return /*#__PURE__*/React.createElement("div", {
237
+ key: item.id,
238
+ className: cx(prefixCls + "__list-item", (_cx3 = {}, _cx3[prefixCls + "__list-item--selected"] = currentIndex === index, _cx3), classNames === null || classNames === void 0 ? void 0 : classNames.listItem),
239
+ style: styles === null || styles === void 0 ? void 0 : styles.listItem,
240
+ onClick: function onClick() {
241
+ return handleSelect(item.id, item, index);
242
+ }
243
+ }, /*#__PURE__*/React.createElement("div", {
244
+ className: cx(prefixCls + "__list-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.listItemTitle),
245
+ style: styles === null || styles === void 0 ? void 0 : styles.listItemTitle
246
+ }, /*#__PURE__*/React.createElement(EllipsisTooltip, {
247
+ tooltipProps: {
248
+ style: {
249
+ maxWidth: 320
250
+ }
251
+ }
252
+ }, /*#__PURE__*/React.createElement(Highlighter, {
253
+ keyword: value
254
+ }, item.pathTitles.join('/')))));
255
+ })))) : ( /*#__PURE__*/React.createElement("div", {
256
+ className: cx(prefixCls + "__empty", classNames === null || classNames === void 0 ? void 0 : classNames.empty),
257
+ style: styles === null || styles === void 0 ? void 0 : styles.empty
258
+ }, /*#__PURE__*/React.createElement("div", null, i18n.menuSearch.searchEmptyResult)))), (resultMemo === null || resultMemo === void 0 ? void 0 : resultMemo.length) > 0 && ( /*#__PURE__*/React.createElement("div", {
259
+ className: cx(prefixCls + "__footer", classNames === null || classNames === void 0 ? void 0 : classNames.footer),
260
+ style: styles === null || styles === void 0 ? void 0 : styles.footer
261
+ }, /*#__PURE__*/React.createElement("div", {
262
+ className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
263
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
264
+ }, /*#__PURE__*/React.createElement("div", {
265
+ className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
266
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
267
+ }, /*#__PURE__*/React.createElement(ArrowUpOutlined, null), /*#__PURE__*/React.createElement(ArrowDownOutlined, null)), /*#__PURE__*/React.createElement("span", {
268
+ className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
269
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
270
+ }, i18n.menuSearch.moveCursor)), /*#__PURE__*/React.createElement("div", {
271
+ className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
272
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
273
+ }, /*#__PURE__*/React.createElement("div", {
274
+ className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
275
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
276
+ }, /*#__PURE__*/React.createElement(EnterIcon, null)), /*#__PURE__*/React.createElement("span", {
277
+ className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
278
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
279
+ }, i18n.menuSearch.confirmSelect)), /*#__PURE__*/React.createElement("div", {
280
+ className: cx(prefixCls + "__footer-item", classNames === null || classNames === void 0 ? void 0 : classNames.footerItem),
281
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItem
282
+ }, /*#__PURE__*/React.createElement("div", {
283
+ className: cx(prefixCls + "__footer-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemIcon),
284
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemIcon
285
+ }, "esc"), /*#__PURE__*/React.createElement("span", {
286
+ className: cx(prefixCls + "__footer-item__text", classNames === null || classNames === void 0 ? void 0 : classNames.footerItemText),
287
+ style: styles === null || styles === void 0 ? void 0 : styles.footerItemText
288
+ }, i18n.menuSearch.hideWindow)))));
289
+ });
290
+ if (__DEV__) {
291
+ MenuSearch.displayName = 'MenuSearch';
292
+ }
293
+ var MenuSearchInput = /*#__PURE__*/forwardRef(function (_a, ref) {
294
+ var prefixCls = _a.prefixCls,
295
+ placeholder = _a.placeholder,
296
+ width = _a.width,
297
+ value = _a.value,
298
+ _onChange = _a.onChange,
299
+ onClear = _a.onClear,
300
+ onClose = _a.onClose,
301
+ onKeyDown = _a.onKeyDown,
302
+ inputRef = _a.inputRef,
303
+ semanticClassNames = _a.semanticClassNames,
304
+ semanticStyles = _a.semanticStyles,
305
+ rest = __rest(_a, ["prefixCls", "placeholder", "width", "value", "onChange", "onClear", "onClose", "onKeyDown", "inputRef", "semanticClassNames", "semanticStyles"]);
306
+ var i18n = useLocaleContext();
307
+ return /*#__PURE__*/React.createElement("div", {
308
+ ref: ref,
309
+ className: cx(prefixCls + "__input-wrapper", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputWrapper),
310
+ style: Object.assign({
311
+ width: width
312
+ }, semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputWrapper)
313
+ }, /*#__PURE__*/React.createElement(Input, Object.assign({
314
+ ref: inputRef,
315
+ className: cx(prefixCls + "__input", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.input),
316
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.input,
317
+ classNames: {
318
+ prefix: prefixCls + "__input-prefix"
319
+ },
320
+ appearance: "unset",
321
+ placeholder: placeholder,
322
+ prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
323
+ suffix: /*#__PURE__*/React.createElement(Button, {
324
+ className: cx(prefixCls + "__input-clear", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.inputClear),
325
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.inputClear,
326
+ appearance: "link",
327
+ size: "xs",
328
+ onClick: onClear
329
+ }, i18n.menuSearch.clear),
330
+ value: value,
331
+ onChange: function onChange(e) {
332
+ return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
333
+ },
334
+ onKeyDown: onKeyDown
335
+ }, rest)), /*#__PURE__*/React.createElement("span", {
336
+ className: cx(prefixCls + "__close", semanticClassNames === null || semanticClassNames === void 0 ? void 0 : semanticClassNames.close),
337
+ style: semanticStyles === null || semanticStyles === void 0 ? void 0 : semanticStyles.close
338
+ }, /*#__PURE__*/React.createElement(IconButton, {
339
+ icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
340
+ effect: true,
341
+ onClick: onClose
342
+ })));
343
+ });
344
+ if (__DEV__) {
345
+ MenuSearchInput.displayName = 'MenuSearchInput';
346
+ }
347
+ export { MenuSearch, MenuSearchInput };
package/lib/esm/SideMenu.js ADDED
@@ -0,0 +1,187 @@
1
+ /** @LICENSE
2
+ * @hi-ui/menu
3
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/menu#readme
4
+ *
5
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
6
+ *
7
+ * This source code is licensed under the MIT license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+ import { __rest } from 'tslib';
11
+ import React, { forwardRef } from 'react';
12
+ import { getPrefixCls, cx } from '@hi-ui/classname';
13
+ import { __DEV__ } from '@hi-ui/env';
14
+ import { useGlobalContext } from '@hi-ui/core';
15
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
16
+ import Tooltip from '@hi-ui/tooltip';
17
+ import { useLatestCallback } from '@hi-ui/use-latest';
18
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
19
+ import Scrollbar from '@hi-ui/scrollbar';
20
+ import { getAncestorIds } from './util.js';
21
+ var SIDE_MENU_PREFIX = getPrefixCls('side-menu');
22
+ /**
23
+ * 侧边菜单组件
24
+ */
25
+ var SideMenu = /*#__PURE__*/forwardRef(function (_a, ref) {
26
+ var _cx;
27
+ var _a$prefixCls = _a.prefixCls,
28
+ prefixCls = _a$prefixCls === void 0 ? SIDE_MENU_PREFIX : _a$prefixCls,
29
+ _a$role = _a.role,
30
+ role = _a$role === void 0 ? 'side-menu' : _a$role,
31
+ className = _a.className,
32
+ style = _a.style,
33
+ classNamesProp = _a.classNames,
34
+ stylesProp = _a.styles,
35
+ _a$defaultActiveId = _a.defaultActiveId,
36
+ defaultActiveId = _a$defaultActiveId === void 0 ? null : _a$defaultActiveId,
37
+ activeIdProp = _a.activeId,
38
+ selectedIdProp = _a.selectedId,
39
+ _a$data = _a.data,
40
+ data = _a$data === void 0 ? [] : _a$data,
41
+ mini = _a.mini,
42
+ onClick = _a.onClick,
43
+ onMouseEnter = _a.onMouseEnter,
44
+ onMouseLeave = _a.onMouseLeave,
45
+ rest = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "defaultActiveId", "activeId", "selectedId", "data", "mini", "childrenContainerRef", "onClick", "onMouseEnter", "onMouseLeave"]);
46
+ var _useGlobalContext = useGlobalContext(),
47
+ sideMenuConfig = _useGlobalContext.sideMenu;
48
+ var _useMergeSemantic = useMergeSemantic({
49
+ classNamesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.classNames, classNamesProp],
50
+ stylesList: [sideMenuConfig === null || sideMenuConfig === void 0 ? void 0 : sideMenuConfig.styles, stylesProp],
51
+ info: {
52
+ props: Object.assign(Object.assign({}, rest), {
53
+ data: data,
54
+ mini: mini,
55
+ defaultActiveId: defaultActiveId,
56
+ activeId: activeIdProp,
57
+ selectedId: selectedIdProp
58
+ })
59
+ }
60
+ }),
61
+ classNames = _useMergeSemantic.classNames,
62
+ styles = _useMergeSemantic.styles;
63
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
64
+ var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp),
65
+ activeId = _useUncontrolledState[0],
66
+ tryChangeActiveId = _useUncontrolledState[1];
67
+ var handleClick = useLatestCallback(function (event, id, item) {
68
+ tryChangeActiveId(id);
69
+ onClick === null || onClick === void 0 ? void 0 : onClick(event, id, item);
70
+ });
71
+ var handleMouseEnter = useLatestCallback(function (event, id, item) {
72
+ event.stopPropagation();
73
+ onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(event, id, item);
74
+ });
75
+ var handleMouseLeave = useLatestCallback(function (event, id, item) {
76
+ event.stopPropagation();
77
+ onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(event, id, item);
78
+ });
79
+ return /*#__PURE__*/React.createElement("div", Object.assign({
80
+ ref: ref,
81
+ role: role,
82
+ className: cls,
83
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
84
+ }, rest), /*#__PURE__*/React.createElement(Scrollbar, {
85
+ onlyScrollVisible: true,
86
+ axes: "y",
87
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.wrapper,
88
+ style: styles === null || styles === void 0 ? void 0 : styles.wrapper
89
+ }, data.map(function (item) {
90
+ var _cx2;
91
+ var id = item.id,
92
+ title = item.title,
93
+ icon = item.icon;
94
+ return /*#__PURE__*/React.createElement("div", {
95
+ key: id,
96
+ className: cx(prefixCls + "-item-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.itemWrapper),
97
+ style: styles === null || styles === void 0 ? void 0 : styles.itemWrapper,
98
+ onClick: function onClick(evt) {
99
+ return handleClick(evt, id, item);
100
+ },
101
+ onMouseEnter: function onMouseEnter(evt) {
102
+ var currentTarget = evt.currentTarget;
103
+ var titleElement = currentTarget.querySelector("." + prefixCls + "-item__title");
104
+ if (!titleElement) {
105
+ handleMouseEnter(evt, id, item);
106
+ return;
107
+ }
108
+ var scrollWidth = titleElement.scrollWidth,
109
+ clientWidth = titleElement.clientWidth,
110
+ scrollHeight = titleElement.scrollHeight,
111
+ clientHeight = titleElement.clientHeight;
112
+ // 单行溢出：scrollWidth > clientWidth；多行（如 mini 2 行）溢出：scrollHeight > clientHeight
113
+ var isOverflow = scrollWidth > clientWidth || scrollHeight > clientHeight;
114
+ if (isOverflow) {
115
+ Tooltip.open(currentTarget, {
116
+ key: "side-menu-tooltip-" + id,
117
+ title: title,
118
+ placement: 'right',
119
+ zIndex: 2001
120
+ });
121
+ }
122
+ handleMouseEnter(evt, id, item);
123
+ },
124
+ onMouseLeave: function onMouseLeave(evt) {
125
+ Tooltip.close("side-menu-tooltip-" + id);
126
+ handleMouseLeave(evt, id, item);
127
+ }
128
+ }, /*#__PURE__*/React.createElement("div", {
129
+ className: cx(prefixCls + "-item", (_cx2 = {}, _cx2[prefixCls + "-item--active"] = activeId === id, _cx2[prefixCls + "-item--mini"] = mini, _cx2[prefixCls + "-item--selected"] = selectedIdProp === id, _cx2), classNames === null || classNames === void 0 ? void 0 : classNames.item),
130
+ style: styles === null || styles === void 0 ? void 0 : styles.item
131
+ }, /*#__PURE__*/React.createElement("div", {
132
+ className: cx(prefixCls + "-item__icon", classNames === null || classNames === void 0 ? void 0 : classNames.itemIcon),
133
+ style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
134
+ }, icon), /*#__PURE__*/React.createElement("div", {
135
+ className: cx(prefixCls + "-item__title", classNames === null || classNames === void 0 ? void 0 : classNames.itemTitle),
136
+ style: styles === null || styles === void 0 ? void 0 : styles.itemTitle,
137
+ ref: function ref(el) {
138
+ if (el) {
139
+ if (mini) {
140
+ if (el.clientHeight > 28) {
141
+ el.style.marginBlockEnd = '-28px';
142
+ } else {
143
+ el.style.marginBlockEnd = '';
144
+ }
145
+ } else {
146
+ el.style.marginBlockEnd = '';
147
+ }
148
+ }
149
+ }
150
+ }, title)));
151
+ })));
152
+ });
153
+ if (__DEV__) {
154
+ SideMenu.displayName = 'SideMenu';
155
+ }
156
+ var useSideMenuCascade = function useSideMenuCascade(_ref) {
157
+ var data = _ref.data,
158
+ selectId = _ref.selectId,
159
+ activeId = _ref.activeId;
160
+ var activeParents = React.useMemo(function () {
161
+ return getAncestorIds(activeId, data);
162
+ }, [activeId, data]);
163
+ var selectParents = React.useMemo(function () {
164
+ return getAncestorIds(selectId, data);
165
+ }, [selectId, data]);
166
+ var selectParentId = React.useMemo(function () {
167
+ var _a;
168
+ return (_a = selectParents[selectParents.length - 1]) !== null && _a !== void 0 ? _a : selectId;
169
+ }, [selectId, selectParents]);
170
+ var activeParentId = React.useMemo(function () {
171
+ var _a;
172
+ return (_a = activeParents[activeParents.length - 1]) !== null && _a !== void 0 ? _a : activeId;
173
+ }, [activeId, activeParents]);
174
+ var submenuData = React.useMemo(function () {
175
+ var _a;
176
+ var parentId = selectParentId || activeParentId;
177
+ return ((_a = data.find(function (item) {
178
+ return item.id === parentId;
179
+ })) === null || _a === void 0 ? void 0 : _a.children) || [];
180
+ }, [selectParentId, activeParentId, data]);
181
+ return {
182
+ submenuData: submenuData,
183
+ selectParentId: selectParentId,
184
+ activeParentId: activeParentId
185
+ };
186
+ };
187
+ export { SideMenu, useSideMenuCascade };
package/lib/esm/index.js CHANGED
@@ -10,4 +10,7 @@
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 { MenuSearch, MenuSearchInput } from './MenuSearch.js';
14
+ export { GroupMenu } from './GroupMenu.js';
15
+ export { SideMenu, useSideMenuCascade } from './SideMenu.js';
13
16
  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 '@hi-ui/style-inject';
11
- var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-700, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-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-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-700, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {height: 40px;margin: 0;}.hi-v5-menu-popmenu .hi-v5-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-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-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-v5-spacing-4, 8px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-700, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-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-v5-menu-item__icon {color: var(--hi-v5-color-gray-500, #91959e);-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__arrow {color: var(--hi-v5-color-gray-500, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-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-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-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-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-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-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-400, #abadb2);}.hi-v5-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-v5-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-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {margin-bottom: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {width: var(--hi-v5-height-10, 40px);height: var(--hi-v5-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-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-500, #91959e);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-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-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-menu--vertical .hi-v5-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-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-400, #abadb2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);margin-bottom: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);margin-bottom: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: var(--hi-v5-spacing-1, 2px);}.hi-v5-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-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;border-right: 1px solid var(--hi-v5-color-gray-300, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {margin-top: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-100, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: 20px;color: var(--hi-v5-color-gray-500, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;border-right: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);margin-bottom: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-700, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-600, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {margin-top: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {margin-top: 0;}.hi-v5-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-v5-color-gray-300, #dbdde0);border-left: none;cursor: pointer;color: var(--hi-v5-color-gray-600, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {margin-left: -4px;}";
11
+ var css_248z = ".hi-v5-menu-fat-menu {background-color: var(--hi-v5-color-static-white, #fff);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);-ms-flex-wrap: wrap;flex-wrap: wrap;}.hi-v5-menu-fat-menu__group:not(:last-of-type) {-webkit-margin-end: var(--hi-v5-spacing-18, 36px);margin-inline-end: var(--hi-v5-spacing-18, 36px);}.hi-v5-menu-fat-menu .hi-v5-menu-group-item {height: var(--hi-v5-height-10, 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-v5-spacing-6, 12px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-fat-menu .hi-v5-menu-item {height: var(--hi-v5-height-10, 40px);margin: 0;border-radius: var(--hi-v5-border-radius-lg, 6px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-menu-fat-menu .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-fat-menu .hi-v5-menu-item:not(.hi-v5-menu-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-fat-menu .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-fat-menu ul {padding: 0;margin: 0;}.hi-v5-menu-fat-menu ul li {list-style-type: none;}.hi-v5-menu-popmenu {background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-xl, 8px);margin: 0;font-size: var(--hi-v5-text-size-md, 0.875rem);padding: var(--hi-v5-spacing-4, 8px);color: var(--hi-v5-color-gray-800, #1a1d26);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu-popmenu .hi-v5-menu-item {margin: 0;}.hi-v5-menu-popmenu .hi-v5-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-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-popmenu .hi-v5-menu-item__inner--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu-popmenu .hi-v5-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%;-webkit-padding-end: var(--hi-v5-spacing-4, 8px);padding-inline-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu-popmenu.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);}.hi-v5-menu-popmenu.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);}.hi-v5-menu-popmenu.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);}.hi-v5-menu {background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-menu ul {margin: 0;padding: 0;}.hi-v5-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-v5-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-item__arrow {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0;}.hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu__wrapper {padding: 0;margin: 0;}.hi-v5-menu--horizontal {width: 100%;overflow: hidden;}.hi-v5-menu--horizontal .hi-v5-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-v5-menu--horizontal .hi-v5-menu-item {padding: 0 var(--hi-v5-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-v5-text-size-lg, 1rem);}.hi-v5-menu--horizontal .hi-v5-menu-item__arrow {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--horizontal .hi-v5-menu-item:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item:hover .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__inner {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-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;-webkit-border-after: 2px solid transparent;border-block-end: 2px solid transparent;}.hi-v5-menu--horizontal .hi-v5-menu-item__inner--expanded {-webkit-border-after: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px solid var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--horizontal .hi-v5-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled:hover .hi-v5-menu-item__inner {border-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu--horizontal .hi-v5-menu-item--disabled .hi-v5-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-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-v5-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-v5-menu--vertical .hi-v5-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto;}.hi-v5-menu--vertical.hi-v5-menu--mini {width: 56px;overflow-x: hidden;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {-webkit-padding-start: var(--hi-v5-spacing-2, 4px);padding-inline-start: var(--hi-v5-spacing-2, 4px);-webkit-padding-end: var(--hi-v5-spacing-2, 4px);padding-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--popup .hi-v5-menu-item__inner--expanded {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical.hi-v5-menu--popup:not(.hi-v5-menu--mini) .hi-v5-menu__wrapper > .hi-v5-menu-item:last-child .hi-v5-menu-item__inner {-webkit-margin-after: 0;margin-block-end: 0;}.hi-v5-menu--vertical .hi-v5-menu__toggle {height: var(--hi-v5-height-10, 40px);line-height: var(--hi-v5-height-10, 40px);padding: 0 var(--hi-v5-spacing-6, 12px);cursor: pointer;border-radius: var(--hi-v5-border-radius-lg, 6px);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-lg, 1rem);-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-duration: var(--hi-v5-motion-duration-normal, 200ms);transition-duration: var(--hi-v5-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color;}.hi-v5-menu--vertical .hi-v5-menu__toggle:hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-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-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu--vertical .hi-v5-menu-item__inner:not(.hi-v5-menu-item__inner--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu--vertical .hi-v5-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-v5-menu--vertical .hi-v5-menu-item--disabled {color: var(--hi-v5-color-gray-500, #babcc2);cursor: not-allowed;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini {width: 60px;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-sizing: border-box;box-sizing: border-box;width: 52px;height: 48px;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-3, 6px) 0;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__icon svg[class^=hi-v5-icon] {font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-menu--vertical.hi-v5-menu--mini.hi-v5-menu--show-title-on-mini .hi-v5-menu-item__inner .hi-v5-menu-item__content {-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;font-size: calc(var(--hi-v5-text-size-xl, 1.125rem) + 2px);text-align: center;text-indent: 0;}.hi-v5-menu--vertical.hi-v5-menu--size-lg .hi-v5-menu-item__inner {height: var(--hi-v5-height-10, 40px);-webkit-margin-after: var(--hi-v5-spacing-4, 8px);margin-block-end: var(--hi-v5-spacing-4, 8px);}.hi-v5-menu--vertical.hi-v5-menu--size-md .hi-v5-menu-item__inner {height: var(--hi-v5-height-9, 36px);-webkit-margin-after: var(--hi-v5-spacing-2, 4px);margin-block-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-menu--vertical.hi-v5-menu--size-sm .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: var(--hi-v5-spacing-1, 2px);margin-block-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-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-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper-showMenuArrow) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__arrow {display: none;}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-menu-wrapper {-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-sidebar-wrapper--showMenu .hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-sidebar-wrapper:not(.hi-v5-sidebar-wrapper--collapsible) .hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--expanded:hover {background-color: transparent;cursor: default;}.hi-v5-sidebar {-webkit-box-sizing: border-box;box-sizing: border-box;width: 64px;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;overflow: auto;-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);background-color: #fff;}.hi-v5-sidebar-list {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;}.hi-v5-sidebar-item {-webkit-box-sizing: border-box;box-sizing: border-box;margin: 0;padding: 0;list-style: none;margin: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-1, 2px);width: 52px;overflow: hidden;text-align: center;border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-sidebar-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-sidebar-item:hover {cursor: pointer;}.hi-v5-sidebar-item:not(.hi-v5-sidebar-item--active):hover {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-sidebar-item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-sidebar-item--active .hi-v5-sidebar-item__icon, .hi-v5-sidebar-item--active .hi-v5-sidebar-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-sidebar-item__icon {height: 20px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-item__icon svg[class^=hi-v5-icon] {width: 20px;height: 20px;}.hi-v5-sidebar-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-sidebar-menu-wrapper {width: 0;-webkit-border-end: none;border-inline-end: none;overflow: hidden;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner {height: var(--hi-v5-height-8, 32px);-webkit-margin-after: 0;margin-block-end: 0;padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item .hi-v5-menu-item__inner--hasIcon + div .hi-v5-menu-submenu .hi-v5-menu-item__indent {width: 20px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__indent {width: 14px;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__content {font-weight: 550;}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-item__inner--active-p .hi-v5-menu-item__icon {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu-submenu .hi-v5-menu-item__inner .hi-v5-menu-item__content {font-size: var(--hi-v5-text-size-sm, 0.75rem);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-sidebar-menu-wrapper .hi-v5-menu__wrapper > .hi-v5-menu-item:first-child {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-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;inset-inline-end: -11px;inset-block-start: 50%;-webkit-transform: translate3d(0, -50%, 0);transform: translate3d(0, -50%, 0);border-start-end-radius: 16px 8px;border-end-end-radius: 16px 8px;border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);-webkit-border-start: none;border-inline-start: none;cursor: pointer;color: var(--hi-v5-color-gray-700, #60636b);background-color: #fff;}.hi-v5-sidebar-toggle svg[class^=hi-v5-icon] {-webkit-margin-start: -4px;margin-inline-start: -4px;}.hi-v5-menu-search {min-width: 360px;border-radius: var(--hi-v5-border-radius-xl, 8px);overflow: hidden;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-menu-search__input-wrapper {-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-v5-spacing-8, 16px) 0 calc(var(--hi-v5-spacing-2, 4px) + 1px);height: var(--hi-v5-height-12, 48px);}.hi-v5-menu-search--open .hi-v5-menu-search__input-wrapper {border-end-start-radius: 0;border-end-end-radius: 0;}.hi-v5-menu-search__input .hi-v5-input__inner:hover {background-color: transparent !important;}.hi-v5-menu-search__input-prefix {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-menu-search__input-clear {font-size: var(--hi-v5-text-size-sm, 0.75rem);}.hi-v5-menu-search__close {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;height: var(--hi-v5-height-4, 16px);-webkit-padding-start: var(--hi-v5-spacing-5, 10px);padding-inline-start: var(--hi-v5-spacing-5, 10px);-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-menu-search__content {-webkit-box-sizing: border-box;box-sizing: border-box;display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v5-spacing-4, 8px);max-height: 550px;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__content--visible {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-menu-search__header {padding: 0 var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__header-count {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-menu-search__list {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow-y: auto;position: relative;outline: none;}.hi-v5-menu-search__list:focus {outline: none;}.hi-v5-menu-search__list-item {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-10, 40px);padding: calc(var(--hi-v5-spacing-4, 8px) + 1px) var(--hi-v5-spacing-4, 8px);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-menu-search__list-item__title {font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-menu-search__list-item--selected, .hi-v5-menu-search__list-item:hover {cursor: pointer;background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-menu-search__empty {padding: calc(var(--hi-v5-spacing-2, 4px) + 1px) var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-menu-search__footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: #f5f7fa;}.hi-v5-menu-search__footer-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-margin-end: var(--hi-v5-spacing-8, 16px);margin-inline-end: var(--hi-v5-spacing-8, 16px);font-size: var(--hi-v5-text-size-sm, 0.75rem);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-menu-search__footer-item__icon {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: var(--hi-v5-spacing-1, 2px);-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);padding: 0 var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-5, 20px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-radius: var(--hi-v5-border-radius-md, 4px);}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-container {min-width: 360px;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-panel {border-top: none;border-start-start-radius: 0;border-start-end-radius: 0;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-body {max-height: 544px;}.hi-v5-menu-search__picker-overlay .hi-v5-menu-search__picker-footer {-webkit-box-shadow: none;box-shadow: none;background-color: #f5f7fa;}.hi-v5-group-menu {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 100%;padding: var(--hi-v5-spacing-4, 8px) 0;}.hi-v5-group-menu-item:not(:first-child) {-webkit-margin-before: var(--hi-v5-spacing-4, 8px);margin-block-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-group-menu-item__content {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: var(--hi-v5-height-8, 32px);padding: 0 var(--hi-v5-spacing-4, 8px);margin: 0 var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, rgba(26, 29, 38, 0.8));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled) {cursor: pointer;}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled):hover .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active > .hi-v5-group-menu-item__content {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item:not(.hi-v5-group-menu-item--parent):not(.hi-v5-group-menu-item--disabled).hi-v5-group-menu-item--active:hover > .hi-v5-group-menu-item__content {background-color: var(--hi-v5-color-primary-100, var(--hi-v5-color-brandblue-100, #e5ecff));}.hi-v5-group-menu-item--disabled > .hi-v5-group-menu-item__content {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-group-menu-item--empty > .hi-v5-group-menu-item__content {display: none;}.hi-v5-group-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-group-menu-parent-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content {height: var(--hi-v5-height-7, 28px);font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-group-menu-parent-item > .hi-v5-group-menu-item__content .hi-v5-group-menu-item__title {font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-group-menu-parent-item:not(:first-child) > .hi-v5-group-menu-item__content {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-group-menu-parent-item + .hi-v5-group-menu-item {-webkit-margin-before: var(--hi-v5-spacing-12, 24px);margin-block-start: var(--hi-v5-spacing-12, 24px);}.hi-v5-side-menu {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-v5-spacing-2, 4px) 0;-webkit-transition: width 0.3s;transition: width 0.3s;}.hi-v5-side-menu-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v5-spacing-4, 8px) 0 var(--hi-v5-spacing-6, 12px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);color: var(--hi-v5-color-gray-800, #1a1d26);border-radius: var(--hi-v5-border-radius-lg, 6px);cursor: pointer;position: relative;}.hi-v5-side-menu-item:hover, .hi-v5-side-menu-item--selected {background-color: rgba(124, 135, 166, 0.15);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) {height: var(--hi-v5-height-8, 32px);}.hi-v5-side-menu-item:not(.hi-v5-side-menu-item--mini) .hi-v5-side-menu-item__title {min-width: 1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-4, 8px);}.hi-v5-side-menu-item--active {font-weight: var(--hi-v5-text-weight-medium, 500);color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active:hover {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-side-menu-item--active .hi-v5-side-menu-item__icon,.hi-v5-side-menu-item--active .hi-v5-side-menu-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-side-menu-item__icon {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-margin-end: var(--hi-v5-spacing-4, 8px);margin-inline-end: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);color: #7c87a6;}.hi-v5-side-menu-item--mini {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;padding: var(--hi-v5-spacing-3, 6px);width: 52px;max-height: 64px;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__icon {-webkit-margin-end: 0;margin-inline-end: 0;-webkit-margin-after: var(--hi-v5-spacing-3, 6px);margin-block-end: var(--hi-v5-spacing-3, 6px);font-size: var(--hi-v5-text-size-xl, 1.125rem);}.hi-v5-side-menu-item--mini .hi-v5-side-menu-item__title {font-size: 20px;line-height: 28px;text-align: center;text-indent: 0;-webkit-transform: scale(0.5);transform: scale(0.5);width: 200%;-webkit-margin-after: -14px;margin-block-end: -14px;-webkit-transform-origin: top;transform-origin: top;white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;word-break: break-word;overflow: hidden;text-overflow: ellipsis;}.hi-v5-side-menu--mini .hi-v5-side-menu-item-wrapper {padding: var(--hi-v5-spacing-2, 4px);}.hi-v5-side-menu .hi-v5-scrollbar__wrapper {width: 100%;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };