@hi-ui/menu 4.0.0-beta.14 → 4.0.0-beta.17

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 (5) hide show
  1. package/lib/cjs/styles/index.scss.js +1 -1
  2. package/lib/esm/styles/index.scss.js +2 -3
  3. package/lib/types/Menu.d.ts +46 -4
  4. package/lib/types/types.d.ts +2 -2
  5. package/package.json +13 -13
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@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-md, 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-md, 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-md, 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-md, 4px);\n margin: 0;\n font-size: var(--hi-v4-text-size-md, 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-md, 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-md, 0.875rem);\n line-height: var(--hi-v4-text-lineheight-md, 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-md, 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-md, 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";
15
+ var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow-x: auto; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {margin: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
16
16
 
17
17
  var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
18
18
 
package/lib/esm/styles/index.scss.js CHANGED
@@ -7,9 +7,8 @@
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: var(--hi-v4-color-static-white, #fff);\n margin: 0;\n font-size: var(--hi-v4-text-size-md, 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-md, 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-md, 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-md, 4px);\n margin: 0;\n font-size: var(--hi-v4-text-size-md, 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-md, 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-md, 0.875rem);\n line-height: var(--hi-v4-text-lineheight-md, 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-md, 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-md, 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
-
12
- var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
10
+ import __styleInject__ from 'style-inject/dist/style-inject.es.js';
11
+ var css_248z = ".hi-v4-menu-fat-menu {background-color: var(--hi-v4-color-static-white, #fff);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);display: -webkit-box;display: -ms-flexbox;display: flex;color: var(--hi-v4-color-gray-700, #1f2733);border-radius: var(--hi-v4-border-radius-md, 4px);-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-menu-fat-menu__group:not(:last-of-type) {margin-right: var(--hi-v4-spacing-18, 36px); }.hi-v4-menu-fat-menu .hi-v4-menu-group-item {height: 40px;margin: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-6, 12px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-menu-fat-menu .hi-v4-menu-item {height: 40px;margin: 0;border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px); }.hi-v4-menu-fat-menu .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-fat-menu .hi-v4-menu-item:not(.hi-v4-menu-item--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-fat-menu ul {padding: 0;margin: 0; }.hi-v4-menu-fat-menu ul li {list-style-type: none; }.hi-v4-menu-popmenu {background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px);margin: 0;font-size: var(--hi-v4-text-size-md, 0.875rem);padding: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu-popmenu .hi-v4-menu-item {height: 40px;margin: 0; }.hi-v4-menu-popmenu .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu-popmenu .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 100%;padding-right: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu {background-color: var(--hi-v4-color-static-white, #fff);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu ul {margin: 0;padding: 0; }.hi-v4-menu-item {list-style: none;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu-item__icon {color: var(--hi-v4-color-gray-500, #929aa6);-webkit-margin-end: var(--hi-v4-spacing-4, 8px);margin-inline-end: var(--hi-v4-spacing-4, 8px); }.hi-v4-menu-item__icon svg[class^=hi-v4-icon] {font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__arrow {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu-item__indent {display: inline-block;width: 24px;height: 100%;-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-menu__wrapper {padding: 0;margin: 0; }.hi-v4-menu--horizontal {width: 100%;overflow-x: auto; }.hi-v4-menu--horizontal .hi-v4-menu__wrapper {display: -webkit-box;display: -ms-flexbox;display: flex;overflow: visible;width: -webkit-max-content;width: -moz-max-content;width: max-content;-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-menu--horizontal .hi-v4-menu-item {margin: 0 var(--hi-v4-spacing-10, 20px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;height: 56px;border: none;font-size: var(--hi-v4-text-size-lg, 1rem); }.hi-v4-menu--horizontal .hi-v4-menu-item__arrow {-webkit-margin-start: var(--hi-v4-spacing-2, 4px);margin-inline-start: var(--hi-v4-spacing-2, 4px); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item:hover .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__inner {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__inner {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 2px solid transparent; }.hi-v4-menu--horizontal .hi-v4-menu-item__inner--expanded {border-bottom: 2px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--horizontal .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;white-space: nowrap;max-width: none; }.hi-v4-menu--vertical {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;padding: var(--hi-v4-spacing-4, 8px);width: 216px;-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;-webkit-transition: width 0.3s;transition: width 0.3s; }.hi-v4-menu--vertical .hi-v4-menu__wrapper {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: auto; }.hi-v4-menu--vertical.hi-v4-menu--mini {width: 56px;overflow-x: hidden; }.hi-v4-menu--vertical.hi-v4-menu--popup .hi-v4-menu-item__inner--expanded {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu__toggle {width: 40px;cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;border-radius: var(--hi-v4-border-radius-md, 4px);color: var(--hi-v4-color-gray-500, #929aa6);height: 40px;-webkit-transition-duration: var(--hi-v4-motion-duration-normal, 200ms);transition-duration: var(--hi-v4-motion-duration-normal, 200ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));-webkit-transition-property: background-color;transition-property: background-color; }.hi-v4-menu--vertical .hi-v4-menu__toggle:hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__inner {-webkit-box-sizing: border-box;box-sizing: border-box;height: 40px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin-bottom: var(--hi-v4-spacing-4, 8px);padding: 0 var(--hi-v4-spacing-4, 8px) 0 var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner--active-p .hi-v4-menu-item__icon {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-menu--vertical .hi-v4-menu-item__inner:not(.hi-v4-menu-item__inner--active):hover {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-menu--vertical .hi-v4-menu-item__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-indent: 0.5px; }";
13
12
 
14
13
  __styleInject__(css_248z);
15
14
 
package/lib/types/Menu.d.ts CHANGED
@@ -6,18 +6,60 @@ import { MenuDataItem } from './types';
6
6
  */
7
7
  export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement | null>>;
8
8
  export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
9
+ /**
10
+ * 菜单项数据列表
11
+ */
9
12
  data: MenuDataItem[];
13
+ /**
14
+ * 默认激活的菜单项 id
15
+ */
16
+ defaultActiveId?: React.ReactText;
17
+ /**
18
+ * 激活的菜单项 id
19
+ */
10
20
  activeId?: React.ReactText;
21
+ /**
22
+ * 设置菜单水平或垂直展示
23
+ */
11
24
  placement?: 'horizontal' | 'vertical';
25
+ /**
26
+ * 是否收起子菜单，菜单垂直展示时有效
27
+ */
12
28
  collapsed?: boolean;
29
+ /**
30
+ * 是否显示收缩开关，菜单垂直展示时有效
31
+ */
13
32
  showCollapse?: boolean;
33
+ /**
34
+ * 是否以胖菜单的形式展开所有子菜单（仅在水平菜单时有效）
35
+ */
14
36
  showAllSubMenus?: boolean;
37
+ /**
38
+ * 手风琴模式，菜单水平展示时有效
39
+ */
15
40
  accordion?: boolean;
16
- onClick?: (menuId: React.ReactText) => void;
17
- onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
18
- onCollapse?: (collapsed: boolean) => void;
41
+ /**
42
+ * 下拉框根类名
43
+ */
19
44
  overlayClassName?: string;
45
+ /**
46
+ * 弹出层展开方式
47
+ */
20
48
  expandedType?: 'collapse' | 'pop';
49
+ /**
50
+ * 默认展开菜单项 ids 列表
51
+ */
21
52
  defaultExpandedIds?: React.ReactText[];
22
- defaultActiveId?: React.ReactText;
53
+ /**
54
+ * 点击菜单选项时的回调
55
+ */
56
+ onClick?: (menuId: React.ReactText) => void;
57
+ /**
58
+ * 点击父菜单项时的回调
59
+ */
60
+ onClickSubMenu?: (subMenuId: React.ReactText, expandedIds: React.ReactText[]) => void;
61
+ /**
62
+ * 点击收缩开关时的回调
63
+ */
64
+ onCollapse?: (collapsed: boolean) => void;
23
65
  }
package/lib/types/types.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  export interface MenuDataItem {
3
3
  /**
4
- * 节点唯一 id
4
+ * 菜单项唯一标识
5
5
  */
6
6
  id: React.ReactText;
7
7
  /**
8
- * 节点标题
8
+ * 菜单项标题
9
9
  */
10
10
  title: React.ReactNode;
11
11
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/menu",
3
- "version": "4.0.0-beta.14",
3
+ "version": "4.0.0-beta.17",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -43,18 +43,18 @@
43
43
  "url": "https://github.com/XiaoMi/hiui/issues"
44
44
  },
45
45
  "dependencies": {
46
- "@hi-ui/array-utils": "^4.0.0-beta.6",
46
+ "@hi-ui/array-utils": "^4.0.0-beta.7",
47
47
  "@hi-ui/classname": "^4.0.0-beta.0",
48
- "@hi-ui/core": "^4.0.0-beta.7",
49
- "@hi-ui/core-css": "^4.0.0-beta.4",
48
+ "@hi-ui/core": "^4.0.0-beta.8",
49
+ "@hi-ui/core-css": "^4.0.0-beta.5",
50
50
  "@hi-ui/env": "^4.0.0-beta.0",
51
- "@hi-ui/icons": "^4.0.0-beta.9",
52
- "@hi-ui/popper": "^4.0.0-beta.11",
53
- "@hi-ui/times": "^4.0.0-beta.4",
54
- "@hi-ui/tooltip": "^4.0.0-beta.15",
55
- "@hi-ui/type-assertion": "^4.0.0-beta.3",
56
- "@hi-ui/use-merge-refs": "^4.0.0-beta.3",
57
- "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.3",
51
+ "@hi-ui/icons": "^4.0.0-beta.10",
52
+ "@hi-ui/popper": "^4.0.0-beta.14",
53
+ "@hi-ui/times": "^4.0.0-beta.5",
54
+ "@hi-ui/tooltip": "^4.0.0-beta.18",
55
+ "@hi-ui/type-assertion": "^4.0.0-beta.4",
56
+ "@hi-ui/use-merge-refs": "^4.0.0-beta.4",
57
+ "@hi-ui/use-uncontrolled-state": "^4.0.0-beta.4",
58
58
  "react-transition-group": "^4.4.2"
59
59
  },
60
60
  "peerDependencies": {
@@ -62,9 +62,9 @@
62
62
  "react-dom": ">=16.8.6"
63
63
  },
64
64
  "devDependencies": {
65
- "@hi-ui/hi-build": "^4.0.0-beta.3",
65
+ "@hi-ui/hi-build": "^4.0.0-beta.4",
66
66
  "react": "^17.0.1",
67
67
  "react-dom": "^17.0.1"
68
68
  },
69
- "gitHead": "bf73b2bc978d6fe45a6199a30f847e8de4332cf5"
69
+ "gitHead": "64cc3305632f0d88f852f4a95cba7c27ff388a2d"
70
70
  }