@hi-ui/menu 4.0.0-alpha.9 → 4.0.0-beta.10

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 (35) hide show
  1. package/README.md +50 -0
  2. package/lib/cjs/Expander.js +2 -3
  3. package/lib/cjs/Menu.js +45 -35
  4. package/lib/cjs/MenuItem.js +140 -70
  5. package/lib/cjs/context.js +0 -1
  6. package/lib/cjs/index.js +0 -1
  7. package/lib/cjs/styles/index.scss.js +1 -2
  8. package/lib/cjs/util.js +0 -1
  9. package/lib/esm/Expander.js +0 -1
  10. package/lib/esm/Menu.js +39 -33
  11. package/lib/esm/MenuItem.js +110 -46
  12. package/lib/esm/context.js +1 -2
  13. package/lib/esm/index.js +0 -1
  14. package/lib/esm/styles/index.scss.js +2 -3
  15. package/lib/esm/util.js +0 -1
  16. package/lib/types/Menu.d.ts +7 -34
  17. package/lib/types/MenuItem.d.ts +11 -2
  18. package/lib/types/context.d.ts +1 -1
  19. package/lib/types/index.d.ts +1 -0
  20. package/lib/types/types.d.ts +12 -0
  21. package/package.json +17 -12
  22. package/lib/cjs/Expander.js.map +0 -1
  23. package/lib/cjs/Menu.js.map +0 -1
  24. package/lib/cjs/MenuItem.js.map +0 -1
  25. package/lib/cjs/context.js.map +0 -1
  26. package/lib/cjs/index.js.map +0 -1
  27. package/lib/cjs/styles/index.scss.js.map +0 -1
  28. package/lib/cjs/util.js.map +0 -1
  29. package/lib/esm/Expander.js.map +0 -1
  30. package/lib/esm/Menu.js.map +0 -1
  31. package/lib/esm/MenuItem.js.map +0 -1
  32. package/lib/esm/context.js.map +0 -1
  33. package/lib/esm/index.js.map +0 -1
  34. package/lib/esm/styles/index.scss.js.map +0 -1
  35. package/lib/esm/util.js.map +0 -1
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,11 +12,10 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n margin: 0;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n margin-right: 36px;\n margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n height: 40px;\n margin: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n height: 40px;\n margin: 0;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n padding: 0;\n margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n list-style-type: none; }\n.hi-v4-menu-popmenu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n margin: 0;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n height: 40px;\n margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100px;\n padding-right: 8px;\n padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu ul {\n margin: 0;\n padding: 0; }\n.hi-v4-menu-item {\n list-style: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu__wrapper {\n padding: 0;\n margin: 0; }\n.hi-v4-menu--horizontal {\n width: 100%;\n overflow: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n margin: 0 20px;\n margin: 0 var(--hi-v4-spacing-10, 20px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 56px;\n border-bottom: 2px solid transparent;\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n border-bottom: 2px solid #237ffa;\n border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n border-bottom: 2px solid #237ffa;\n border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100px;\n margin-right: 8px;\n margin-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu--vertical {\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n width: 232px;\n height: 100%;\n overflow: auto;\n -webkit-transition: width 0.3s;\n transition: width 0.3s; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n width: 56px;\n overflow-x: hidden; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n width: 40px;\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--mini {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-indent: 0.5px; }\n";
15
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n background-color: var(--hi-v4-color-static-white, #fff);\n margin: 0;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: var(--hi-v4-spacing-4, 8px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n height: 40px;\n margin: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n height: 40px;\n margin: 0;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n padding: 0;\n margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n list-style-type: none; }\n.hi-v4-menu-popmenu {\n background-color: var(--hi-v4-color-static-white, #fff);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n margin: 0;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: var(--hi-v4-spacing-4, 8px);\n color: var(--hi-v4-color-gray-700, #1f2733);\n width: 216px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n height: 40px;\n margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n background-color: var(--hi-v4-color-static-white, #fff);\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu ul {\n margin: 0;\n padding: 0; }\n.hi-v4-menu-item {\n list-style: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu-item__icon {\n color: var(--hi-v4-color-gray-500, #929aa6);\n -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n margin-inline-end: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__arrow {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__indent {\n display: inline-block;\n width: 24px;\n height: 100%;\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-menu__wrapper {\n padding: 0;\n margin: 0; }\n.hi-v4-menu--horizontal {\n width: 100%;\n overflow-x: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: visible;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n margin: 0 var(--hi-v4-spacing-10, 20px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 56px;\n border: none;\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {\n -webkit-margin-start: var(--hi-v4-spacing-2, 4px);\n margin-inline-start: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-bottom: 2px solid transparent; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n white-space: nowrap;\n max-width: none; }\n.hi-v4-menu--vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: var(--hi-v4-spacing-4, 8px);\n width: 216px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 100%;\n -webkit-transition: width 0.3s;\n transition: width 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu__wrapper {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: auto; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n width: 56px;\n overflow-x: hidden; }\n.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n width: 40px;\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n color: var(--hi-v4-color-gray-500, #929aa6);\n height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-indent: 0.5px; }\n";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
19
19
  __styleInject__(css_248z);
20
20
 
21
21
  exports["default"] = css_248z;
22
- //# sourceMappingURL=index.scss.js.map
package/lib/cjs/util.js CHANGED
@@ -45,4 +45,3 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
45
45
 
46
46
  exports.getAncestorIds = getAncestorIds;
47
47
  exports.getParentId = getParentId;
48
- //# sourceMappingURL=util.js.map
package/lib/esm/Expander.js CHANGED
@@ -49,4 +49,3 @@ var Expander = function Expander(_ref) {
49
49
  };
50
50
 
51
51
  export { Expander };
52
- //# sourceMappingURL=Expander.js.map
package/lib/esm/Menu.js CHANGED
@@ -10,11 +10,13 @@
10
10
  import { __rest } from 'tslib';
11
11
  import React, { forwardRef, useState, useEffect, useCallback } from 'react';
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
- import { RightOutlined, LeftOutlined } from '@hi-ui/icons';
13
+ import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
14
14
  import { __DEV__ } from '@hi-ui/env';
15
15
  import { MenuItem } from './MenuItem.js';
16
16
  import MenuContext from './context.js';
17
17
  import { getAncestorIds } from './util.js';
18
+ import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
19
+ import Tooltip from '@hi-ui/tooltip';
18
20
  var MENU_PREFIX = getPrefixCls('menu');
19
21
  /**
20
22
  * TODO: What is Menu
@@ -33,65 +35,64 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
33
35
  placement = _a$placement === void 0 ? 'vertical' : _a$placement,
34
36
  showCollapse = _a.showCollapse,
35
37
  _a$expandedType = _a.expandedType,
36
- expandedType = _a$expandedType === void 0 ? 'default' : _a$expandedType,
38
+ expandedType = _a$expandedType === void 0 ? 'collapse' : _a$expandedType,
37
39
  _a$showAllSubMenus = _a.showAllSubMenus,
38
40
  showAllSubMenus = _a$showAllSubMenus === void 0 ? false : _a$showAllSubMenus,
39
41
  defaultExpandedIds = _a.defaultExpandedIds,
40
42
  defaultActiveId = _a.defaultActiveId,
43
+ activeId = _a.activeId,
41
44
  onClickSubMenu = _a.onClickSubMenu,
42
45
  onClick = _a.onClick,
43
- rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "onClickSubMenu", "onClick"]);
46
+ rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandedIds", "defaultActiveId", "activeId", "onClickSubMenu", "onClick"]);
44
47
 
45
- var _useState = useState(defaultActiveId || ''),
46
- _activeId = _useState[0],
47
- updateActiveId = _useState[1];
48
+ var _useUncontrolledState = useUncontrolledState(defaultActiveId || '', activeId, onClick),
49
+ _activeId = _useUncontrolledState[0],
50
+ updateActiveId = _useUncontrolledState[1];
48
51
 
49
- var _useState2 = useState(getAncestorIds(_activeId, data)),
50
- activeParents = _useState2[0],
51
- updateActiveParents = _useState2[1];
52
+ var _useState = useState(getAncestorIds(_activeId, data)),
53
+ activeParents = _useState[0],
54
+ updateActiveParents = _useState[1];
52
55
 
53
56
  useEffect(function () {
54
57
  updateActiveParents(getAncestorIds(_activeId, data));
55
58
  }, [_activeId, data]);
56
59
 
57
- var _useState3 = useState(defaultExpandedIds || []),
58
- _expandedIds = _useState3[0],
59
- updateExpanedIds = _useState3[1];
60
+ var _useState2 = useState(defaultExpandedIds || []),
61
+ _expandedIds = _useState2[0],
62
+ updateExpanedIds = _useState2[1];
60
63
 
61
64
  var clickMenu = useCallback(function (id) {
62
65
  updateActiveId(id);
63
-
64
- if (onClick) {
65
- onClick(id);
66
- }
67
- }, [onClick]);
66
+ }, [updateActiveId]);
68
67
  var clickSubMenu = useCallback(function (id) {
69
- updateExpanedIds(_expandedIds.includes(id) ? _expandedIds.filter(function (expandedid) {
70
- return expandedid !== id;
71
- }) : _expandedIds.concat(id));
68
+ var expandedIds = _expandedIds.includes(id) ? _expandedIds.filter(function (expandedId) {
69
+ return expandedId !== id;
70
+ }) : _expandedIds.concat(id);
71
+ updateExpanedIds(expandedIds);
72
72
 
73
73
  if (onClickSubMenu) {
74
- onClickSubMenu(id);
74
+ onClickSubMenu(id, expandedIds);
75
75
  }
76
76
  }, [onClickSubMenu, _expandedIds]);
77
77
  var closePopper = useCallback(function (id) {
78
- updateExpanedIds(_expandedIds.filter(function (expandedid) {
79
- return expandedid !== id;
78
+ updateExpanedIds(_expandedIds.filter(function (expandedId) {
79
+ return expandedId !== id;
80
80
  }));
81
81
  }, [_expandedIds]);
82
82
  var closeAllPopper = useCallback(function () {
83
83
  updateExpanedIds([]);
84
84
  }, []);
85
85
 
86
- var _useState4 = useState(false),
87
- mini = _useState4[0],
88
- setMini = _useState4[1];
86
+ var _useState3 = useState(false),
87
+ mini = _useState3[0],
88
+ setMini = _useState3[1];
89
89
 
90
- var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx));
90
+ var cls = cx(prefixCls, className, prefixCls + "--" + placement, (_cx = {}, _cx[prefixCls + "--mini"] = mini, _cx[prefixCls + "--popup"] = expandedType === 'pop' || showAllSubMenus || mini, _cx));
91
91
  var onToggle = useCallback(function () {
92
92
  setMini(!mini);
93
93
  closeAllPopper();
94
94
  }, [mini, closeAllPopper]);
95
+ var canToggle = placement === 'vertical' && showCollapse;
95
96
  return /*#__PURE__*/React.createElement("div", Object.assign({
96
97
  ref: ref,
97
98
  role: role,
@@ -112,15 +113,21 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
112
113
  }
113
114
  }, /*#__PURE__*/React.createElement("ul", {
114
115
  className: cx(prefixCls + "__wrapper")
115
- }, data.map(function (d) {
116
- return /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, d, {
117
- key: d.id,
116
+ }, data.map(function (item) {
117
+ return canToggle && mini ? /*#__PURE__*/React.createElement(Tooltip, {
118
+ title: item.title,
119
+ key: item.id,
120
+ placement: "right"
121
+ }, /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
122
+ level: 1
123
+ }))) : /*#__PURE__*/React.createElement(MenuItem, Object.assign({}, item, {
124
+ key: item.id,
118
125
  level: 1
119
126
  }));
120
- })), placement === 'vertical' && showCollapse && /*#__PURE__*/React.createElement("div", {
127
+ })), canToggle ? /*#__PURE__*/React.createElement("div", {
121
128
  className: cx(prefixCls + "__toggle"),
122
129
  onClick: onToggle
123
- }, mini ? /*#__PURE__*/React.createElement(RightOutlined, null) : /*#__PURE__*/React.createElement(LeftOutlined, null))));
130
+ }, mini ? /*#__PURE__*/React.createElement(MenuUnfoldOutlined, null) : /*#__PURE__*/React.createElement(MenuFoldOutlined, null)) : null));
124
131
  });
125
132
 
126
133
  if (__DEV__) {
@@ -128,4 +135,3 @@ if (__DEV__) {
128
135
  }
129
136
 
130
137
  export { Menu };
131
- //# sourceMappingURL=Menu.js.map
package/lib/esm/MenuItem.js CHANGED
@@ -7,28 +7,34 @@
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, { useRef, useContext } from 'react';
10
+ import { __rest } from 'tslib';
11
+ import React, { forwardRef, useRef, useContext } from 'react';
11
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
12
13
  import { __DEV__ } from '@hi-ui/env';
13
- import { UpOutlined, DownOutlined, RightOutlined } from '@hi-ui/icons';
14
+ import { RightOutlined, DownOutlined, UpOutlined } from '@hi-ui/icons';
14
15
  import MenuContext from './context.js';
15
- import { PopperPortal, Popper } from '@hi-ui/popper';
16
+ import Popper from '@hi-ui/popper';
16
17
  import { Expander } from './Expander.js';
18
+ import { isArrayNonEmpty } from '@hi-ui/type-assertion';
19
+ import { times } from '@hi-ui/array-utils';
20
+ import { useMergeRefs } from '@hi-ui/use-merge-refs';
17
21
  var MENU_PREFIX = getPrefixCls('menu');
18
-
19
- var MenuItem = function MenuItem(_ref) {
22
+ var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
20
23
  var _cx, _cx2;
21
24
 
22
- var _ref$prefixCls = _ref.prefixCls,
23
- prefixCls = _ref$prefixCls === void 0 ? MENU_PREFIX : _ref$prefixCls,
24
- icon = _ref.icon,
25
- content = _ref.content,
26
- disabled = _ref.disabled,
27
- id = _ref.id,
28
- _ref$level = _ref.level,
29
- level = _ref$level === void 0 ? 1 : _ref$level,
30
- children = _ref.children,
31
- parentIds = _ref.parentIds;
25
+ var _a$prefixCls = _a.prefixCls,
26
+ prefixCls = _a$prefixCls === void 0 ? MENU_PREFIX : _a$prefixCls,
27
+ className = _a.className,
28
+ icon = _a.icon,
29
+ title = _a.title,
30
+ disabled = _a.disabled,
31
+ id = _a.id,
32
+ _a$level = _a.level,
33
+ level = _a$level === void 0 ? 1 : _a$level,
34
+ children = _a.children,
35
+ parentIds = _a.parentIds,
36
+ rest = __rest(_a, ["prefixCls", "className", "icon", "title", "disabled", "id", "level", "children", "parentIds"]);
37
+
32
38
  var itemRef = useRef(null);
33
39
 
34
40
  var _useContext = useContext(MenuContext),
@@ -46,13 +52,15 @@ var MenuItem = function MenuItem(_ref) {
46
52
 
47
53
  var _parentIds = (parentIds || []).concat(id);
48
54
 
49
- return /*#__PURE__*/React.createElement("li", {
50
- ref: itemRef,
51
- className: cx(prefixCls + "-item", (_cx = {}, _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))
52
- }, /*#__PURE__*/React.createElement("div", {
53
- className: cx(prefixCls + "-item__inner", (_cx2 = {}, _cx2[prefixCls + "-item__inner--mini"] = mini, _cx2[prefixCls + "-item__inner--active"] = activeId === id, _cx2[prefixCls + "-item__inner--active-p"] = activeParents === null || activeParents === void 0 ? void 0 : activeParents.includes(id), _cx2)),
55
+ var hasChildren = isArrayNonEmpty(children);
56
+ var mergedRef = useMergeRefs(itemRef, ref);
57
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", Object.assign({
58
+ ref: mergedRef,
59
+ 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)
60
+ }, rest), /*#__PURE__*/React.createElement("div", {
61
+ 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)),
54
62
  onClick: function onClick() {
55
- if (children === null || children === void 0 ? void 0 : children.length) {
63
+ if (isArrayNonEmpty(children)) {
56
64
  if (clickSubMenu) {
57
65
  clickSubMenu(id);
58
66
  }
@@ -61,17 +69,37 @@ var MenuItem = function MenuItem(_ref) {
61
69
  clickMenu(id);
62
70
  }
63
71
 
64
- if (closeAllPopper && !(placement === 'vertical' && expandedType === 'default' && mini === false)) {
72
+ if (closeAllPopper && !(placement === 'vertical' && expandedType === 'collapse' && mini === false)) {
65
73
  closeAllPopper();
66
74
  }
67
75
  }
68
- },
69
- style: placement === 'vertical' && expandedType === 'default' && !mini ? {
70
- paddingLeft: level > 1 ? 12 + (level - 1 > 0 ? 1 : 0) * 20 + (level - 2 || 0) * 16 : 12
71
- } : {}
72
- }, icon, /*#__PURE__*/React.createElement("span", {
76
+ }
77
+ }, placement === 'vertical' && expandedType === 'collapse' && !mini ? renderIndent({
78
+ prefixCls: prefixCls + "-item",
79
+ depth: level - 1
80
+ }) : null, icon ? /*#__PURE__*/React.createElement("span", {
81
+ className: prefixCls + "-item__icon"
82
+ }, icon) : null, /*#__PURE__*/React.createElement("span", {
73
83
  className: prefixCls + "-item__content"
74
- }, content), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && expandedType === 'default' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null)), (children === null || children === void 0 ? void 0 : children.length) && mini && level > 1 && placement === 'vertical' && /*#__PURE__*/React.createElement(RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) && /*#__PURE__*/React.createElement(RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level > 1 && /*#__PURE__*/React.createElement(RightOutlined, null), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(UpOutlined, null) : /*#__PURE__*/React.createElement(DownOutlined, null))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'default' && /*#__PURE__*/React.createElement(Expander, {
84
+ }, title), hasChildren && !mini && placement === 'vertical' && expandedType === 'collapse' && !showAllSubMenus && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
85
+ prefixCls: prefixCls + "-item",
86
+ direction: "up"
87
+ }) : /*#__PURE__*/React.createElement(Arrow, {
88
+ prefixCls: prefixCls + "-item",
89
+ direction: "down"
90
+ })), hasChildren && mini && level > 1 && placement === 'vertical' ? /*#__PURE__*/React.createElement(Arrow, {
91
+ prefixCls: prefixCls + "-item"
92
+ }) : null, hasChildren && !mini && placement === 'vertical' && (expandedType === 'pop' || showAllSubMenus) ? /*#__PURE__*/React.createElement(Arrow, {
93
+ prefixCls: prefixCls + "-item"
94
+ }) : null, hasChildren && placement === 'horizontal' && level > 1 ? /*#__PURE__*/React.createElement(Arrow, {
95
+ prefixCls: prefixCls + "-item"
96
+ }) : null, hasChildren && placement === 'horizontal' && level === 1 && ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)) ? /*#__PURE__*/React.createElement(Arrow, {
97
+ prefixCls: prefixCls + "-item",
98
+ direction: "up"
99
+ }) : /*#__PURE__*/React.createElement(Arrow, {
100
+ prefixCls: prefixCls + "-item",
101
+ direction: "down"
102
+ }))), hasChildren && placement === 'vertical' && !mini && !showAllSubMenus && expandedType === 'collapse' ? /*#__PURE__*/React.createElement(Expander, {
75
103
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id))
76
104
  }, /*#__PURE__*/React.createElement("ul", {
77
105
  className: prefixCls + "-submenu"
@@ -81,7 +109,7 @@ var MenuItem = function MenuItem(_ref) {
81
109
  level: level + 1,
82
110
  parentIds: _parentIds
83
111
  }));
84
- }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'default' && (level === 1 ? /*#__PURE__*/React.createElement(PopperPortal, {
112
+ }))) : null), hasChildren && placement === 'vertical' && mini && !showAllSubMenus && expandedType === 'collapse' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
85
113
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
86
114
  attachEl: itemRef.current,
87
115
  placement: 'right-start',
@@ -104,6 +132,7 @@ var MenuItem = function MenuItem(_ref) {
104
132
  attachEl: itemRef.current,
105
133
  placement: 'right-start',
106
134
  gutterGap: 16,
135
+ disabledPortal: true,
107
136
  onClose: function onClose() {
108
137
  if (closePopper) {
109
138
  closePopper(id);
@@ -117,7 +146,7 @@ var MenuItem = function MenuItem(_ref) {
117
146
  level: level + 1,
118
147
  parentIds: _parentIds
119
148
  }));
120
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(PopperPortal, {
149
+ })))), hasChildren && placement === 'vertical' && !showAllSubMenus && expandedType === 'pop' && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
121
150
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
122
151
  attachEl: itemRef.current,
123
152
  placement: 'right-start',
@@ -138,6 +167,7 @@ var MenuItem = function MenuItem(_ref) {
138
167
  }))) : /*#__PURE__*/React.createElement(Popper, {
139
168
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
140
169
  attachEl: itemRef.current,
170
+ disabledPortal: true,
141
171
  placement: 'right-start',
142
172
  gutterGap: 16,
143
173
  onClose: function onClose() {
@@ -153,7 +183,7 @@ var MenuItem = function MenuItem(_ref) {
153
183
  level: level + 1,
154
184
  parentIds: _parentIds
155
185
  }));
156
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'vertical' && showAllSubMenus && /*#__PURE__*/React.createElement(PopperPortal, {
186
+ })))), hasChildren && placement === 'vertical' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
157
187
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
158
188
  attachEl: itemRef.current,
159
189
  placement: 'right-start',
@@ -166,14 +196,12 @@ var MenuItem = function MenuItem(_ref) {
166
196
  }, /*#__PURE__*/React.createElement("div", {
167
197
  className: prefixCls + "-fat-menu"
168
198
  }, children.map(function (child) {
169
- var _a;
170
-
171
199
  return /*#__PURE__*/React.createElement("div", {
172
200
  key: child.id,
173
201
  className: prefixCls + "-fat-menu__group"
174
202
  }, /*#__PURE__*/React.createElement("div", {
175
203
  className: prefixCls + "-group-item"
176
- }, child.content), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
204
+ }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
177
205
  var _cx3;
178
206
 
179
207
  return /*#__PURE__*/React.createElement("div", {
@@ -188,9 +216,9 @@ var MenuItem = function MenuItem(_ref) {
188
216
  },
189
217
  className: cx(prefixCls + "-item", (_cx3 = {}, _cx3[prefixCls + "-item--active"] = activeId === item.id, _cx3)),
190
218
  key: item.id
191
- }, item.content);
192
- })));
193
- }))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React.createElement(PopperPortal, {
219
+ }, item.title);
220
+ })) : null);
221
+ }))) : null, hasChildren && placement === 'horizontal' && !showAllSubMenus && (level === 1 ? /*#__PURE__*/React.createElement(Popper, {
194
222
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
195
223
  attachEl: itemRef.current,
196
224
  placement: level === 1 ? 'bottom-start' : 'right-start',
@@ -211,6 +239,7 @@ var MenuItem = function MenuItem(_ref) {
211
239
  }))) : /*#__PURE__*/React.createElement(Popper, {
212
240
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
213
241
  attachEl: itemRef.current,
242
+ disabledPortal: true,
214
243
  placement: level === 1 ? 'bottom-start' : 'right-start',
215
244
  gutterGap: level === 1 ? 8 : 16,
216
245
  onClose: function onClose() {
@@ -226,7 +255,7 @@ var MenuItem = function MenuItem(_ref) {
226
255
  level: level + 1,
227
256
  parentIds: _parentIds
228
257
  }));
229
- })))), (children === null || children === void 0 ? void 0 : children.length) && placement === 'horizontal' && showAllSubMenus && /*#__PURE__*/React.createElement(PopperPortal, {
258
+ })))), hasChildren && placement === 'horizontal' && showAllSubMenus ? /*#__PURE__*/React.createElement(Popper, {
230
259
  visible: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.includes(id)),
231
260
  attachEl: itemRef.current,
232
261
  placement: 'bottom-start',
@@ -239,14 +268,12 @@ var MenuItem = function MenuItem(_ref) {
239
268
  }, /*#__PURE__*/React.createElement("div", {
240
269
  className: prefixCls + "-fat-menu"
241
270
  }, children.map(function (child) {
242
- var _a;
243
-
244
271
  return /*#__PURE__*/React.createElement("div", {
245
272
  key: child.id,
246
273
  className: prefixCls + "-fat-menu__group"
247
274
  }, /*#__PURE__*/React.createElement("div", {
248
275
  className: prefixCls + "-group-item"
249
- }, child.content), ((_a = child === null || child === void 0 ? void 0 : child.children) === null || _a === void 0 ? void 0 : _a.length) && /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
276
+ }, child.title), child && isArrayNonEmpty(child.children) ? /*#__PURE__*/React.createElement("ul", null, child.children.map(function (item) {
250
277
  var _cx4;
251
278
 
252
279
  return /*#__PURE__*/React.createElement("div", {
@@ -261,14 +288,51 @@ var MenuItem = function MenuItem(_ref) {
261
288
  }
262
289
  },
263
290
  key: item.id
264
- }, item.content);
265
- })));
266
- }))));
267
- };
291
+ }, item.title);
292
+ })) : null);
293
+ }))) : null);
294
+ });
268
295
 
269
296
  if (__DEV__) {
270
297
  MenuItem.displayName = 'MenuItem';
271
298
  }
272
299
 
300
+ var Arrow = function Arrow(_ref) {
301
+ var prefixCls = _ref.prefixCls,
302
+ direction = _ref.direction;
303
+ var icon = null;
304
+
305
+ switch (direction) {
306
+ case 'up':
307
+ icon = /*#__PURE__*/React.createElement(UpOutlined, null);
308
+ break;
309
+
310
+ case 'down':
311
+ icon = /*#__PURE__*/React.createElement(DownOutlined, null);
312
+ break;
313
+
314
+ default:
315
+ icon = /*#__PURE__*/React.createElement(RightOutlined, null);
316
+ }
317
+
318
+ return /*#__PURE__*/React.createElement("span", {
319
+ className: prefixCls + "__arrow"
320
+ }, icon);
321
+ };
322
+ /**
323
+ * 渲染空白占位
324
+ */
325
+
326
+
327
+ var renderIndent = function renderIndent(_ref2) {
328
+ var prefixCls = _ref2.prefixCls,
329
+ depth = _ref2.depth;
330
+ return times(depth, function (index) {
331
+ return /*#__PURE__*/React.createElement("span", {
332
+ className: prefixCls + "__indent",
333
+ key: index
334
+ });
335
+ });
336
+ };
337
+
273
338
  export { MenuItem };
274
- //# sourceMappingURL=MenuItem.js.map
package/lib/esm/context.js CHANGED
@@ -9,5 +9,4 @@
9
9
  */
10
10
  import { createContext } from 'react';
11
11
  var MenuContext = /*#__PURE__*/createContext({});
12
- export default MenuContext;
13
- //# sourceMappingURL=context.js.map
12
+ export { MenuContext as default };
package/lib/esm/index.js CHANGED
@@ -9,4 +9,3 @@
9
9
  */
10
10
  import './styles/index.scss.js';
11
11
  export { Menu, Menu as default } from './Menu.js';
12
- //# sourceMappingURL=index.js.map
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,11 +7,10 @@
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
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n margin: 0;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n margin-right: 36px;\n margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n height: 40px;\n margin: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n color: #929aa6;\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n height: 40px;\n margin: 0;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n padding: 0;\n margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n list-style-type: none; }\n.hi-v4-menu-popmenu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n margin: 0;\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n height: 40px;\n margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100px;\n padding-right: 8px;\n padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n background-color: #fff;\n background-color: var(--hi-v4-color-static-white, #fff);\n color: #1f2733;\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: 0.875rem;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: 1.375rem;\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu ul {\n margin: 0;\n padding: 0; }\n.hi-v4-menu-item {\n list-style: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu__wrapper {\n padding: 0;\n margin: 0; }\n.hi-v4-menu--horizontal {\n width: 100%;\n overflow: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n margin: 0 20px;\n margin: 0 var(--hi-v4-spacing-10, 20px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 56px;\n border-bottom: 2px solid transparent;\n font-size: 1rem;\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n border-bottom: 2px solid #237ffa;\n border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n border-bottom: 2px solid #237ffa;\n border-bottom: 2px solid var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100px;\n margin-right: 8px;\n margin-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu--vertical {\n padding: 8px;\n padding: var(--hi-v4-spacing-4, 8px);\n width: 232px;\n height: 100%;\n overflow: auto;\n -webkit-transition: width 0.3s;\n transition: width 0.3s; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n width: 56px;\n overflow-x: hidden; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n width: 40px;\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 12px;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n border-radius: 4px;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--mini {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa);\n background-color: #e2f3fe;\n background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n color: #237ffa;\n color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: #f2f4f7;\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-indent: 0.5px; }\n";
10
+ var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-menu-fat-menu {\n background-color: var(--hi-v4-color-static-white, #fff);\n margin: 0;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: var(--hi-v4-spacing-4, 8px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n color: var(--hi-v4-color-gray-700, #1f2733);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -ms-flex-wrap: wrap;\n flex-wrap: wrap; }\n.hi-v4-menu-fat-menu__group:not(:last-of-type) {\n margin-right: var(--hi-v4-spacing-18, 36px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-group-item {\n height: 40px;\n margin: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 var(--hi-v4-spacing-6, 12px);\n color: var(--hi-v4-color-gray-500, #929aa6); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item {\n height: 40px;\n margin: 0;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-fat-menu ul {\n padding: 0;\n margin: 0; }\n.hi-v4-menu-fat-menu ul li {\n list-style-type: none; }\n.hi-v4-menu-popmenu {\n background-color: var(--hi-v4-color-static-white, #fff);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n margin: 0;\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n padding: var(--hi-v4-spacing-4, 8px);\n color: var(--hi-v4-color-gray-700, #1f2733);\n width: 216px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu-popmenu .hi-v4-menu-item {\n height: 40px;\n margin: 0; }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n border-radius: var(--hi-v4-border-radius-normal, 4px); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu-popmenu .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 100%;\n padding-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu {\n background-color: var(--hi-v4-color-static-white, #fff);\n color: var(--hi-v4-color-gray-700, #1f2733);\n font-size: var(--hi-v4-text-size-normal, 0.875rem);\n line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu ul {\n margin: 0;\n padding: 0; }\n.hi-v4-menu-item {\n list-style: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu-item__icon {\n color: var(--hi-v4-color-gray-500, #929aa6);\n -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n margin-inline-end: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__arrow {\n color: var(--hi-v4-color-gray-500, #929aa6);\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu-item__indent {\n display: inline-block;\n width: 24px;\n height: 100%;\n -ms-flex-negative: 0;\n flex-shrink: 0; }\n.hi-v4-menu__wrapper {\n padding: 0;\n margin: 0; }\n.hi-v4-menu--horizontal {\n width: 100%;\n overflow-x: auto; }\n.hi-v4-menu--horizontal .hi-v4-menu__wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n overflow: visible;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n -webkit-box-sizing: border-box;\n box-sizing: border-box; }\n.hi-v4-menu--horizontal .hi-v4-menu-item {\n margin: 0 var(--hi-v4-spacing-10, 20px);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n height: 56px;\n border: none;\n font-size: var(--hi-v4-text-size-lg, 1rem); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {\n -webkit-margin-start: var(--hi-v4-spacing-2, 4px);\n margin-inline-start: var(--hi-v4-spacing-2, 4px); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner {\n height: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-bottom: 2px solid transparent; }\n.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {\n border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--horizontal .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n white-space: nowrap;\n max-width: none; }\n.hi-v4-menu--vertical {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding: var(--hi-v4-spacing-4, 8px);\n width: 216px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 100%;\n -webkit-transition: width 0.3s;\n transition: width 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu__wrapper {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: auto; }\n.hi-v4-menu--vertical.hi-v4-menu--mini {\n width: 56px;\n overflow-x: hidden; }\n.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu__toggle {\n width: 40px;\n cursor: pointer;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n color: var(--hi-v4-color-gray-500, #929aa6);\n height: 40px; }\n.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 40px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: var(--hi-v4-spacing-4, 8px);\n padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);\n border-radius: var(--hi-v4-border-radius-normal, 4px);\n -webkit-transition: all 0.3s;\n transition: all 0.3s; }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));\n background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {\n color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }\n.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {\n background-color: var(--hi-v4-color-gray-100, #f2f4f7); }\n.hi-v4-menu--vertical .hi-v4-menu-item__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-indent: 0.5px; }\n";
11
11
 
12
12
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
13
13
 
14
14
  __styleInject__(css_248z);
15
15
 
16
- export default css_248z;
17
- //# sourceMappingURL=index.scss.js.map
16
+ export { css_248z as default };
package/lib/esm/util.js CHANGED
@@ -39,4 +39,3 @@ var getAncestorIds = function getAncestorIds(id, data, arr) {
39
39
  };
40
40
 
41
41
  export { getAncestorIds, getParentId };
42
- //# sourceMappingURL=util.js.map