@gravity-ui/navigation 0.21.0 → 0.22.0

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/build/cjs/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +10 -0
  2. package/build/cjs/components/AllPagesPanel/AllPagesListItem/index.d.ts +1 -0
  3. package/build/cjs/components/AllPagesPanel/AllPagesPanel.d.ts +9 -0
  4. package/build/cjs/components/AllPagesPanel/constants.d.ts +3 -0
  5. package/build/cjs/components/AllPagesPanel/i18n/index.d.ts +2 -0
  6. package/build/cjs/components/AllPagesPanel/index.d.ts +3 -0
  7. package/build/cjs/components/AllPagesPanel/useGroupedMenuItems.d.ts +4 -0
  8. package/build/cjs/components/AllPagesPanel/useVisibleMenuItems.d.ts +2 -0
  9. package/build/cjs/components/AsideHeader/AsideHeader.d.ts +2 -4
  10. package/build/cjs/components/AsideHeader/AsideHeaderContext.d.ts +2 -0
  11. package/build/cjs/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +1 -1
  12. package/build/cjs/components/AsideHeader/types.d.ts +6 -0
  13. package/build/cjs/components/AsideHeader/useAsideHeaderInnerContextValue.d.ts +5 -0
  14. package/build/cjs/components/index.d.ts +1 -1
  15. package/build/cjs/components/types.d.ts +12 -0
  16. package/build/cjs/index.js +334 -104
  17. package/build/cjs/index.js.map +1 -1
  18. package/build/esm/components/AllPagesPanel/AllPagesListItem/AllPagesListItem.d.ts +10 -0
  19. package/build/esm/components/AllPagesPanel/AllPagesListItem/index.d.ts +1 -0
  20. package/build/esm/components/AllPagesPanel/AllPagesPanel.d.ts +9 -0
  21. package/build/esm/components/AllPagesPanel/constants.d.ts +3 -0
  22. package/build/esm/components/AllPagesPanel/i18n/index.d.ts +2 -0
  23. package/build/esm/components/AllPagesPanel/index.d.ts +3 -0
  24. package/build/esm/components/AllPagesPanel/useGroupedMenuItems.d.ts +4 -0
  25. package/build/esm/components/AllPagesPanel/useVisibleMenuItems.d.ts +2 -0
  26. package/build/esm/components/AsideHeader/AsideHeader.d.ts +2 -4
  27. package/build/esm/components/AsideHeader/AsideHeaderContext.d.ts +2 -0
  28. package/build/esm/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts +1 -1
  29. package/build/esm/components/AsideHeader/types.d.ts +6 -0
  30. package/build/esm/components/AsideHeader/useAsideHeaderInnerContextValue.d.ts +5 -0
  31. package/build/esm/components/index.d.ts +1 -1
  32. package/build/esm/components/types.d.ts +12 -0
  33. package/build/esm/index.js +337 -107
  34. package/build/esm/index.js.map +1 -1
  35. package/package.json +2 -1
package/build/cjs/index.js CHANGED
@@ -32,10 +32,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
32
  var React__namespace = /*#__PURE__*/_interopNamespace(React);
33
33
  var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
34
34
 
35
- const ASIDE_HEADER_ICON_SIZE = 18;
36
- const ASIDE_HEADER_COMPACT_WIDTH = 56;
37
- const ASIDE_HEADER_EXPANDED_WIDTH = 236;
38
-
39
35
  /* Used by renderContent AsideHeader prop */
40
36
  const RenderContent = React__default["default"].memo(({ renderContent, size }) => {
41
37
  return React__default["default"].createElement(React__default["default"].Fragment, null, renderContent({ size }));
@@ -547,6 +543,10 @@ function isMenuItem(item) {
547
543
  return (item === null || item === void 0 ? void 0 : item.id) !== undefined;
548
544
  }
549
545
 
546
+ const ASIDE_HEADER_ICON_SIZE = 18;
547
+ const ASIDE_HEADER_COMPACT_WIDTH = 56;
548
+ const ASIDE_HEADER_EXPANDED_WIDTH = 236;
549
+
550
550
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
551
551
 
552
552
  /**
@@ -1115,10 +1115,10 @@ function styleInject(css, ref) {
1115
1115
  }
1116
1116
  }
1117
1117
 
1118
- var css_248z$n = ".gn-composite-bar-highlighted-item {\n position: absolute;\n z-index: 10000;\n display: flex;\n justify-content: center;\n}\n.gn-composite-bar-highlighted-item__icon {\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n border-radius: 7px;\n cursor: pointer;\n background-color: var(--g-color-base-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transform: translateY(1px);\n overflow: hidden;\n box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);\n}\n.gn-composite-bar-highlighted-item__icon::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-highlighted-item__icon:hover::before {\n background-color: var(--g-color-base-selection-hover);\n}";
1119
- styleInject(css_248z$n);
1118
+ var css_248z$p = ".gn-composite-bar-highlighted-item {\n position: absolute;\n z-index: 10000;\n display: flex;\n justify-content: center;\n}\n.gn-composite-bar-highlighted-item__icon {\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n border-radius: 7px;\n cursor: pointer;\n background-color: var(--g-color-base-background);\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n transform: translateY(1px);\n overflow: hidden;\n box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);\n}\n.gn-composite-bar-highlighted-item__icon::before {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-highlighted-item__icon:hover::before {\n background-color: var(--g-color-base-selection-hover);\n}";
1119
+ styleInject(css_248z$p);
1120
1120
 
1121
- const b$o = block('composite-bar-highlighted-item');
1121
+ const b$q = block('composite-bar-highlighted-item');
1122
1122
  const DEBOUNCE_TIME = 200;
1123
1123
  const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
1124
1124
  const { openModalSubscriber } = useAsideHeaderInnerContext();
@@ -1129,7 +1129,7 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
1129
1129
  height: 0,
1130
1130
  });
1131
1131
  const [isModalOpen, setIsModalOpen] = React.useState(false);
1132
- const handleResize = React.useCallback(debounce_1(() => {
1132
+ const handleResizeDebounced = React.useMemo(() => debounce_1(() => {
1133
1133
  var _a;
1134
1134
  const { top = 0, left = 0, width = 0, height = 0, } = ((_a = iconRef === null || iconRef === void 0 ? void 0 : iconRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
1135
1135
  setPosition({
@@ -1138,7 +1138,8 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
1138
1138
  width,
1139
1139
  height,
1140
1140
  });
1141
- }, DEBOUNCE_TIME, { leading: true }), []);
1141
+ }, DEBOUNCE_TIME, { leading: true }), [iconRef]);
1142
+ const handleResize = React.useCallback(() => handleResizeDebounced(), [handleResizeDebounced]);
1142
1143
  React.useEffect(() => {
1143
1144
  if (!isModalOpen) {
1144
1145
  return;
@@ -1154,21 +1155,21 @@ const HighlightedItem = ({ iconRef, iconNode, onClick, onClickCapture, }) => {
1154
1155
  return null;
1155
1156
  }
1156
1157
  return (React__default["default"].createElement(uikit.Portal, null,
1157
- React__default["default"].createElement("div", { className: b$o(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
1158
- React__default["default"].createElement("div", { className: b$o('icon') }, iconNode))));
1158
+ React__default["default"].createElement("div", { className: b$q(), style: { left, top, width, height }, onClick: onClick, onClickCapture: onClickCapture, "data-toast": true },
1159
+ React__default["default"].createElement("div", { className: b$q('icon') }, iconNode))));
1159
1160
  };
1160
1161
  HighlightedItem.displayName = 'HighlightedItem';
1161
1162
 
1162
- var css_248z$m = ".gn-composite-bar-item {\n --gn-composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n color: var(--g-color-text-misc);\n}\n.gn-footer-item .gn-composite-bar-item__icon, .gn-composite-bar-highlighted-item .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-footer-item-icon-color);\n}\n.gn-composite-bar_subheader .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-subheader-item-icon-color);\n}\n.gn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--gn-aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.gn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n display: flex;\n padding: 0 16px;\n align-items: center;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--g-color-line-generic);\n cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--gn-composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--g-color-base-float);\n box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n border-radius: var(--gn-composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-simple-hover);\n}";
1163
- styleInject(css_248z$m);
1163
+ var css_248z$o = ".gn-composite-bar-item {\n --gn-composite-bar-item-action-size: 36px;\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n cursor: pointer;\n}\n.gn-composite-bar-item__icon {\n color: var(--g-color-text-misc);\n}\n.gn-footer-item .gn-composite-bar-item__icon, .gn-composite-bar-highlighted-item .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-footer-item-icon-color);\n}\n.gn-composite-bar_subheader .gn-composite-bar-item__icon {\n color: var(--gn-aside-header-subheader-item-icon-color);\n}\n.gn-composite-bar-item__icon-place {\n flex-shrink: 0;\n width: var(--gn-aside-header-min-width);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n.gn-composite-bar-item__title {\n display: flex;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-text {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.gn-composite-bar-item__title-adornment {\n margin: 0 10px;\n}\n.gn-composite-bar-item__collapse-item {\n display: flex;\n padding: 0 16px;\n align-items: center;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n.gn-composite-bar-item__collapse-item .gn-composite-bar-item__title-adornment {\n margin-right: 0;\n}\n.gn-composite-bar-item__menu-divider {\n margin: 0 8px;\n width: 100%;\n border-top: 1px solid var(--g-color-line-generic);\n cursor: default;\n}\n.gn-composite-bar-item__collapse-items-popup-content {\n padding: 4px 0;\n}\n.gn-composite-bar-item__link {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n}\n.gn-composite-bar-item__link, .gn-composite-bar-item__link:hover, .gn-composite-bar-item__link:active, .gn-composite-bar-item__link:visited, .gn-composite-bar-item__link:focus {\n text-decoration: none;\n outline: none;\n color: inherit;\n}\n.gn-composite-bar-item__btn-icon {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.gn-composite-bar-item_type_action {\n justify-content: center;\n height: var(--gn-composite-bar-item-action-size);\n margin: 0 10px 8px;\n background: var(--g-color-base-float);\n box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.03), 0px 5px 6px rgba(0, 0, 0, 0.12);\n border-radius: var(--gn-composite-bar-item-action-size);\n transition: transform 0.1s ease-out, background-color 0.15s linear;\n}\n.gn-composite-bar-item_type_action:focus {\n box-shadow: 0 0 0 2px var(--g-color-line-misc);\n}\n.gn-composite-bar-item_type_action:focus:not(:focus-visible) {\n box-shadow: none;\n}\n.gn-composite-bar-item_type_action:hover {\n background-color: var(--g-color-base-float-hover);\n}\n.gn-composite-bar-item_type_action:active {\n box-shadow: 0 1px 2px var(--g-color-sfx-shadow);\n transition: none;\n transform: scale(0.96);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__icon-place {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin-right: 16px;\n}\n.gn-composite-bar-item__icon-tooltip_item-type_action {\n margin-left: 10px;\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact).gn-composite-bar-item_current.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item:not(.gn-composite-bar-item_compact):not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular {\n background-color: var(--g-color-base-simple-hover);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action {\n width: var(--gn-composite-bar-item-action-size);\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_type_action .gn-composite-bar-item__title {\n margin: 0;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact.gn-composite-bar-item_current.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-selection);\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon {\n position: relative;\n background-color: transparent;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n width: var(--gn-aside-header-item-icon-background-size);\n height: var(--gn-aside-header-item-icon-background-size);\n margin-top: -19px;\n margin-left: -19px;\n border-radius: 7px;\n}\n.gn-composite-bar-item_compact:not(.gn-composite-bar-item_current):hover.gn-composite-bar-item_type_regular .gn-composite-bar-item__btn-icon::before {\n background-color: var(--g-color-base-simple-hover);\n}";
1164
+ styleInject(css_248z$o);
1164
1165
 
1165
- const b$n = block('composite-bar-item');
1166
+ const b$p = block('composite-bar-item');
1166
1167
  function renderItemTitle(item) {
1167
- let titleNode = React__default["default"].createElement("div", { className: b$n('title-text') }, item.title);
1168
+ let titleNode = React__default["default"].createElement("div", { className: b$p('title-text') }, item.title);
1168
1169
  if (item.rightAdornment) {
1169
1170
  titleNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
1170
1171
  titleNode,
1171
- React__default["default"].createElement("div", { className: b$n('title-adornment') }, item.rightAdornment)));
1172
+ React__default["default"].createElement("div", { className: b$p('title-adornment') }, item.rightAdornment)));
1172
1173
  }
1173
1174
  return titleNode;
1174
1175
  }
@@ -1177,9 +1178,6 @@ const defaultPopupOffset = [-20, 8];
1177
1178
  const Item$1 = (props) => {
1178
1179
  const { item, className, collapseItems, onMouseLeave, onMouseEnter, enableTooltip = true, popupVisible = false, popupAnchor, popupPlacement = defaultPopupPlacement, popupOffset = defaultPopupOffset, popupKeepMounted, renderPopupContent, onClosePopup, onItemClick, onItemClickCapture, bringForward, } = props;
1179
1180
  const { compact } = useAsideHeaderContext();
1180
- if (item.type === 'divider') {
1181
- return React__default["default"].createElement("div", { className: b$n('menu-divider') });
1182
- }
1183
1181
  const [open, toggleOpen] = React__default["default"].useState(false);
1184
1182
  const ref = React__default["default"].useRef(null);
1185
1183
  const anchorRef = popupAnchor || ref;
@@ -1199,38 +1197,42 @@ const Item$1 = (props) => {
1199
1197
  }
1200
1198
  onClosePopup === null || onClosePopup === void 0 ? void 0 : onClosePopup();
1201
1199
  }, [onClosePopup]);
1200
+ if (item.type === 'divider') {
1201
+ return React__default["default"].createElement("div", { className: b$p('menu-divider') });
1202
+ }
1202
1203
  const makeIconNode = (iconEl) => {
1203
- return compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$n('icon-tooltip', { 'item-type': type }) },
1204
- React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$n('btn-icon') }, iconEl))) : (iconEl);
1204
+ return compact ? (React__default["default"].createElement(uikit.Tooltip, { content: tooltipText, disabled: !enableTooltip || (collapsedItem && open) || popupVisible, placement: "right", className: b$p('icon-tooltip', { 'item-type': type }) },
1205
+ React__default["default"].createElement("div", { onMouseEnter: () => onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(), onMouseLeave: () => onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(), className: b$p('btn-icon') }, iconEl))) : (iconEl);
1205
1206
  };
1206
1207
  const makeNode = ({ icon: iconEl, title: titleEl }) => {
1207
- const createdNode = (React__default["default"].createElement("div", { className: b$n({ type, current, compact }, className), ref: ref, onClick: (event) => {
1208
- if (collapsedItem) {
1209
- /**
1210
- * If we call onItemClick for collapsedItem then:
1211
- * - User get unexpected item in onItemClick callback
1212
- * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
1213
- */
1214
- toggleOpen(!open);
1215
- }
1216
- else {
1217
- onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
1218
- }
1219
- }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
1220
- if (!compact) {
1221
- onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
1222
- }
1223
- }, onMouseLeave: () => {
1224
- if (!compact) {
1225
- onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
1226
- }
1227
- } },
1228
- React__default["default"].createElement("div", { className: b$n('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
1229
- React__default["default"].createElement("div", { className: b$n('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl),
1230
- renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$n('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
1231
- return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$n('link') }, createdNode)) : (createdNode);
1208
+ const createdNode = (React__default["default"].createElement(React__default["default"].Fragment, null,
1209
+ React__default["default"].createElement("div", { className: b$p({ type, current, compact }, className), ref: ref, onClick: (event) => {
1210
+ if (collapsedItem) {
1211
+ /**
1212
+ * If we call onItemClick for collapsedItem then:
1213
+ * - User get unexpected item in onItemClick callback
1214
+ * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
1215
+ */
1216
+ toggleOpen(!open);
1217
+ }
1218
+ else {
1219
+ onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, false, event);
1220
+ }
1221
+ }, onClickCapture: onItemClickCapture, onMouseEnter: () => {
1222
+ if (!compact) {
1223
+ onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter();
1224
+ }
1225
+ }, onMouseLeave: () => {
1226
+ if (!compact) {
1227
+ onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave();
1228
+ }
1229
+ } },
1230
+ React__default["default"].createElement("div", { className: b$p('icon-place'), ref: highlightedRef }, makeIconNode(iconEl)),
1231
+ React__default["default"].createElement("div", { className: b$p('title'), title: typeof item.title === 'string' ? item.title : undefined }, titleEl)),
1232
+ renderPopupContent && Boolean(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) && (React__default["default"].createElement(uikit.Popup, { contentClassName: b$p('popup'), open: popupVisible, keepMounted: popupKeepMounted, placement: popupPlacement, offset: popupOffset, anchorRef: anchorRef, onClose: onClose }, renderPopupContent()))));
1233
+ return item.link ? (React__default["default"].createElement("a", { href: item.link, className: b$p('link') }, createdNode)) : (createdNode);
1232
1234
  };
1233
- const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$n('icon') }) : null;
1235
+ const iconNode = icon ? React__default["default"].createElement(uikit.Icon, { data: icon, size: iconSize, className: b$p('icon') }) : null;
1234
1236
  const titleNode = renderItemTitle(item);
1235
1237
  const params = { icon: iconNode, title: titleNode };
1236
1238
  let node;
@@ -1251,13 +1253,13 @@ Item$1.displayName = 'Item';
1251
1253
  function CollapsedPopup({ onItemClick, collapseItems, anchorRef, onClose, }) {
1252
1254
  const { compact } = useAsideHeaderContext();
1253
1255
  return (collapseItems === null || collapseItems === void 0 ? void 0 : collapseItems.length) ? (React__default["default"].createElement(uikit.Popup, { placement: POPUP_PLACEMENT, open: true, anchorRef: anchorRef, onClose: onClose },
1254
- React__default["default"].createElement("div", { className: b$n('collapse-items-popup-content') },
1255
- React__default["default"].createElement(uikit.List, { itemClassName: b$n('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, renderItem: (collapseItem) => {
1256
+ React__default["default"].createElement("div", { className: b$p('collapse-items-popup-content') },
1257
+ React__default["default"].createElement(uikit.List, { itemClassName: b$p('root-collapse-item'), items: collapseItems, selectedItemIndex: getSelectedItemIndex$1(collapseItems), itemHeight: POPUP_ITEM_HEIGHT, itemsHeight: collapseItems.length * POPUP_ITEM_HEIGHT, virtualized: false, filterable: false, sortable: false, onItemClick: onClose, renderItem: (collapseItem) => {
1256
1258
  const makeCollapseNode = ({ title: titleEl }) => {
1257
- const res = (React__default["default"].createElement("div", { className: b$n('collapse-item'), onClick: (event) => {
1259
+ const res = (React__default["default"].createElement("div", { className: b$p('collapse-item'), onClick: (event) => {
1258
1260
  onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(collapseItem, true, event);
1259
1261
  } }, titleEl));
1260
- return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$n('link') }, res)) : (res);
1262
+ return collapseItem.link ? (React__default["default"].createElement("a", { href: collapseItem.link, className: b$p('link') }, res)) : (res);
1261
1263
  };
1262
1264
  const titleNode = renderItemTitle(collapseItem);
1263
1265
  const params = { title: titleNode };
@@ -1298,10 +1300,10 @@ class MultipleTooltipProvider extends React__default["default"].PureComponent {
1298
1300
  }
1299
1301
  }
1300
1302
 
1301
- var css_248z$l = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #424147;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #313036 0%,\n rgba(49, 48, 54, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #7a7a7a;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #ffffff 0%,\n rgba(255, 255, 255, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n background-color: transparent;\n box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n content: \"\";\n box-shadow: none;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: var(--multiple-tooltip-backdrop-background);\n filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n display: flex;\n box-sizing: border-box;\n height: 30px;\n padding: 8px 12px;\n background-color: var(--multiple-tooltip-item-bg-color);\n position: relative;\n border-radius: 5px;\n align-items: center;\n color: var(--g-color-text-light-primary);\n margin-bottom: 5px;\n transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n background-color: var(--multiple-tooltip-item-active-bg-color);\n transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n height: 15px;\n visibility: hidden;\n margin: 0;\n}";
1302
- styleInject(css_248z$l);
1303
+ var css_248z$n = ".g-root_theme_dark .gn-multiple-tooltip,\n.g-root_theme_dark-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #424147;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #313036 0%,\n rgba(49, 48, 54, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(16px);\n}\n\n.g-root_theme_light .gn-multiple-tooltip,\n.g-root_theme_light-hc .gn-multiple-tooltip {\n --multiple-tooltip-item-bg-color: #7a7a7a;\n --multiple-tooltip-item-active-bg-color: var(--g-color-base-float-heavy);\n --multiple-tooltip-backdrop-background: linear-gradient(\n 90deg,\n #ffffff 0%,\n rgba(255, 255, 255, 0.3) 100%\n );\n --multiple-tooltip-backdrop-filter: blur(12px);\n}\n\n.gn-multiple-tooltip {\n background-color: transparent;\n box-shadow: none;\n}\n.gn-multiple-tooltip::before {\n content: \"\";\n box-shadow: none;\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: -1;\n background: var(--multiple-tooltip-backdrop-background);\n filter: var(--multiple-tooltip-backdrop-filter);\n}\n.gn-multiple-tooltip__items-container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 32px 40px 32px 12px;\n}\n.gn-multiple-tooltip__item {\n display: flex;\n box-sizing: border-box;\n height: 30px;\n padding: 8px 12px;\n background-color: var(--multiple-tooltip-item-bg-color);\n position: relative;\n border-radius: 5px;\n align-items: center;\n color: var(--g-color-text-light-primary);\n margin-bottom: 5px;\n transition: transform 100ms ease-in-out;\n}\n.gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider), .gn-multiple-tooltip__item:first-child {\n margin-top: 5px;\n}\n.gn-multiple-tooltip__item_divider + .gn-multiple-tooltip__item:not(.gn-multiple-tooltip__item_divider) {\n margin-top: 4px;\n}\n.gn-multiple-tooltip__item_active {\n background-color: var(--multiple-tooltip-item-active-bg-color);\n transform: translateX(-12px);\n}\n.gn-multiple-tooltip__item_divider {\n height: 15px;\n visibility: hidden;\n margin: 0;\n}";
1304
+ styleInject(css_248z$n);
1303
1305
 
1304
- const b$m = block('multiple-tooltip');
1306
+ const b$o = block('multiple-tooltip');
1305
1307
  const POPUP_OFFSET = [-32, 4];
1306
1308
  const POPUP_MODIFIERS = [
1307
1309
  {
@@ -1312,26 +1314,26 @@ const POPUP_MODIFIERS = [
1312
1314
  const MultipleTooltip = ({ items, open, anchorRef, placement, }) => {
1313
1315
  const { activeIndex, hideCollapseItemTooltip } = React__default["default"].useContext(MultipleTooltipContext);
1314
1316
  const activeItem = activeIndex === undefined ? null : items[activeIndex];
1315
- return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$m(null), modifiers: POPUP_MODIFIERS },
1316
- React__default["default"].createElement("div", { className: b$m('items-container') }, items
1317
+ return (React__default["default"].createElement(uikit.Popup, { open: open, anchorRef: anchorRef, placement: placement, offset: POPUP_OFFSET, contentClassName: b$o(null), modifiers: POPUP_MODIFIERS },
1318
+ React__default["default"].createElement("div", { className: b$o('items-container') }, items
1317
1319
  .filter(({ type = 'regular', id }) => !hideCollapseItemTooltip ||
1318
1320
  (id !== COLLAPSE_ITEM_ID && type !== 'action'))
1319
1321
  .map((item, idx) => {
1320
1322
  switch (item.type) {
1321
1323
  case 'divider':
1322
- return (React__default["default"].createElement("div", { className: b$m('item', { divider: true }), key: idx }, item.title));
1324
+ return (React__default["default"].createElement("div", { className: b$o('item', { divider: true }), key: idx }, item.title));
1323
1325
  default:
1324
- return (React__default["default"].createElement("div", { className: b$m('item', {
1326
+ return (React__default["default"].createElement("div", { className: b$o('item', {
1325
1327
  active: item === activeItem,
1326
1328
  }), key: idx }, item.title));
1327
1329
  }
1328
1330
  }))));
1329
1331
  };
1330
1332
 
1331
- var css_248z$k = ".gn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
1332
- styleInject(css_248z$k);
1333
+ var css_248z$m = ".gn-composite-bar {\n flex: 1 0 auto;\n width: 100%;\n min-height: 40px;\n}\n.gn-composite-bar .gn-composite-bar__root-menu-item[class] {\n background-color: transparent;\n}";
1334
+ styleInject(css_248z$m);
1333
1335
 
1334
- const b$l = block('composite-bar');
1336
+ const b$n = block('composite-bar');
1335
1337
  const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleTooltip = false, }) => {
1336
1338
  const ref = React.useRef(null);
1337
1339
  const tooltipRef = React.useRef(null);
@@ -1374,7 +1376,7 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
1374
1376
  lastClickedItemIndex: undefined,
1375
1377
  });
1376
1378
  }
1377
- }, [multipleTooltipActive, setMultipleTooltipContextValue]);
1379
+ }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
1378
1380
  const onMouseEnterByIndex = React.useCallback((itemIndex) => () => {
1379
1381
  if (multipleTooltip) {
1380
1382
  let multipleTooltipActiveValue = multipleTooltipActive;
@@ -1390,7 +1392,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
1390
1392
  active: multipleTooltipActiveValue,
1391
1393
  });
1392
1394
  }
1393
- }, [multipleTooltipActive, activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
1395
+ }, [
1396
+ multipleTooltip,
1397
+ multipleTooltipActive,
1398
+ lastClickedItemIndex,
1399
+ activeIndex,
1400
+ setMultipleTooltipContextValue,
1401
+ ]);
1394
1402
  const onMouseLeave = React.useCallback(() => {
1395
1403
  var _a;
1396
1404
  if (compact) {
@@ -1403,7 +1411,13 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
1403
1411
  });
1404
1412
  }
1405
1413
  }
1406
- }, [activeIndex, lastClickedItemIndex, setMultipleTooltipContextValue]);
1414
+ }, [
1415
+ activeIndex,
1416
+ compact,
1417
+ lastClickedItemIndex,
1418
+ multipleTooltip,
1419
+ setMultipleTooltipContextValue,
1420
+ ]);
1407
1421
  const onItemClickByIndex = React.useCallback((itemIndex) => (item, collapsed, event) => {
1408
1422
  if (compact &&
1409
1423
  multipleTooltip &&
@@ -1415,10 +1429,16 @@ const CompositeBarView = ({ type, items, onItemClick, collapseItems, multipleToo
1415
1429
  });
1416
1430
  }
1417
1431
  onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, collapsed, event);
1418
- }, [lastClickedItemIndex, setMultipleTooltipContextValue]);
1432
+ }, [
1433
+ compact,
1434
+ lastClickedItemIndex,
1435
+ multipleTooltip,
1436
+ onItemClick,
1437
+ setMultipleTooltipContextValue,
1438
+ ]);
1419
1439
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
1420
1440
  React__default["default"].createElement("div", { ref: tooltipRef, onMouseEnter: onTooltipMouseEnter, onMouseLeave: onTooltipMouseLeave },
1421
- React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$l('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
1441
+ React__default["default"].createElement(uikit.List, { ref: ref, items: items, selectedItemIndex: type === 'menu' ? getSelectedItemIndex$1(items) : undefined, itemHeight: getItemHeight$1, itemsHeight: getItemsHeight, itemClassName: b$n('root-menu-item'), virtualized: false, filterable: false, sortable: false, renderItem: (item, _isItemActive, itemIndex) => {
1422
1442
  const itemExtraProps = isMenuItem(item) ? { item } : item;
1423
1443
  const enableTooltip = isMenuItem(item)
1424
1444
  ? !multipleTooltip
@@ -1435,20 +1455,20 @@ const CompositeBar = ({ type, items, menuMoreTitle, onItemClick, multipleTooltip
1435
1455
  if (type === 'menu') {
1436
1456
  const minHeight = getItemsMinHeight(items);
1437
1457
  const collapseItem = getMoreButtonItem(menuMoreTitle);
1438
- node = (React__default["default"].createElement("div", { className: b$l({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
1458
+ node = (React__default["default"].createElement("div", { className: b$n({ autosizer: true }), style: { minHeight } }, items.length !== 0 && (React__default["default"].createElement(AutoSizer, null, ({ width, height }) => {
1439
1459
  const { listItems, collapseItems } = getAutosizeListItems(items, height, collapseItem);
1440
1460
  return (React__default["default"].createElement("div", { style: { width, height } },
1441
1461
  React__default["default"].createElement(CompositeBarView, { type: "menu", items: listItems, onItemClick: onItemClick, collapseItems: collapseItems, multipleTooltip: multipleTooltip })));
1442
1462
  }))));
1443
1463
  }
1444
1464
  else {
1445
- node = (React__default["default"].createElement("div", { className: b$l({ subheader: true }) },
1465
+ node = (React__default["default"].createElement("div", { className: b$n({ subheader: true }) },
1446
1466
  React__default["default"].createElement(CompositeBarView, { type: "subheader", items: items, onItemClick: onItemClick })));
1447
1467
  }
1448
1468
  return React__default["default"].createElement(MultipleTooltipProvider, null, node);
1449
1469
  };
1450
1470
 
1451
- const b$k = block('aside-header');
1471
+ const b$m = block('aside-header');
1452
1472
 
1453
1473
  const PARAM_REGEXP = /{{(.*?)}}/g;
1454
1474
  function replaceParams(keyValue, params) {
@@ -1649,17 +1669,170 @@ const subscribeConfigure = (sub) => {
1649
1669
  };
1650
1670
  const getConfig = () => config$1;
1651
1671
 
1652
- const i18n$4 = new I18N();
1653
- i18n$4.setLang(getConfig().lang);
1672
+ const i18n$5 = new I18N();
1673
+ i18n$5.setLang(getConfig().lang);
1654
1674
  subscribeConfigure((config) => {
1655
- i18n$4.setLang(config.lang);
1675
+ i18n$5.setLang(config.lang);
1656
1676
  });
1657
1677
 
1658
1678
  function registerKeyset(data, keysetName) {
1659
- Object.entries(data).forEach(([lang, keys]) => i18n$4.registerKeyset(lang, keysetName, keys));
1660
- return i18n$4.keyset(keysetName);
1679
+ Object.entries(data).forEach(([lang, keys]) => i18n$5.registerKeyset(lang, keysetName, keys));
1680
+ return i18n$5.keyset(keysetName);
1661
1681
  }
1662
1682
 
1683
+ var en$4 = {
1684
+ "menu-item.all-pages.title": "All pages",
1685
+ "all-panel.menu.category.allOther": "All other",
1686
+ "all-panel.resetToDefault": "Reset to default",
1687
+ "all-panel.title.editing": "Editing",
1688
+ "all-panel.title.main": "All pages"
1689
+ };
1690
+
1691
+ var ru$4 = {
1692
+ "menu-item.all-pages.title": "Все страницы",
1693
+ "all-panel.menu.category.allOther": "Остальное",
1694
+ "all-panel.resetToDefault": "Сбросить по умолчанию",
1695
+ "all-panel.title.editing": "Редактирование",
1696
+ "all-panel.title.main": "Все страницы"
1697
+ };
1698
+
1699
+ const COMPONENT$4 = 'AllPagesPanel';
1700
+ var i18n$4 = registerKeyset({ en: en$4, ru: ru$4 }, COMPONENT$4);
1701
+
1702
+ const ALL_PAGES_ID = 'all-pages';
1703
+ const ALL_PAGES_MENU_ITEM = {
1704
+ id: ALL_PAGES_ID,
1705
+ title: i18n$4('menu-item.all-pages.title'),
1706
+ tooltipText: i18n$4('menu-item.all-pages.title'),
1707
+ icon: icons.Ellipsis,
1708
+ };
1709
+
1710
+ const useGroupedMenuItems = (items) => {
1711
+ const allPagesMenuItems = React.useMemo(() => {
1712
+ const filteredItems = items.filter((item) => item.type !== 'divider' && item.id !== ALL_PAGES_ID);
1713
+ filteredItems.sort((a, b) => {
1714
+ if (a.type === 'action') {
1715
+ return 1;
1716
+ }
1717
+ if (b.type === 'action') {
1718
+ return -1;
1719
+ }
1720
+ return 0;
1721
+ });
1722
+ const groupedItems = filteredItems.reduce((acc, item) => {
1723
+ const category = item.category || i18n$4('all-panel.menu.category.allOther');
1724
+ if (!acc[category]) {
1725
+ acc[category] = [];
1726
+ }
1727
+ acc[category].push(item);
1728
+ return acc;
1729
+ }, {});
1730
+ return groupedItems;
1731
+ }, [items]);
1732
+ return allPagesMenuItems;
1733
+ };
1734
+
1735
+ var css_248z$l = ".gn-all-pages-list-item {\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n padding: 0 var(--g-spacing-6);\n column-gap: var(--g-spacing-4);\n}\n.gn-all-pages-list-item__text {\n flex: 1;\n}\n.gn-all-pages-list-item__icon {\n color: var(--g-color-text-misc);\n}";
1736
+ styleInject(css_248z$l);
1737
+
1738
+ const b$l = block('all-pages-list-item');
1739
+ const AllPagesListItem = (props) => {
1740
+ const { item, editMode, onToggle } = props;
1741
+ const onPinButtonClick = React.useCallback((e) => {
1742
+ e.stopPropagation();
1743
+ e.preventDefault();
1744
+ onToggle();
1745
+ }, [onToggle]);
1746
+ const onItemClick = (e) => {
1747
+ if (editMode) {
1748
+ e.stopPropagation();
1749
+ e.preventDefault();
1750
+ }
1751
+ };
1752
+ return (React__default["default"].createElement("div", { className: b$l(), onClick: onItemClick },
1753
+ item.icon ? (React__default["default"].createElement(uikit.Icon, { className: b$l('icon'), data: item.icon, size: item.iconSize })) : null,
1754
+ React__default["default"].createElement("span", { className: b$l('text') }, item.title),
1755
+ editMode && (React__default["default"].createElement(uikit.Button, { onClick: onPinButtonClick, view: item.hidden ? 'flat-secondary' : 'flat-action' },
1756
+ React__default["default"].createElement(uikit.Button.Icon, null, item.hidden ? React__default["default"].createElement(icons.Pin, null) : React__default["default"].createElement(icons.PinFill, null))))));
1757
+ };
1758
+
1759
+ var css_248z$k = ".gn-all-pages-panel {\n min-width: 300px;\n height: 100%;\n padding: var(--g-spacing-4) var(--g-spacing-6);\n box-sizing: border-box;\n}\n.gn-all-pages-panel__content {\n overflow: auto;\n flex: 1;\n margin: 0 calc(var(--g-spacing-6) * -1);\n}\n.gn-all-pages-panel__category {\n padding: 0 var(--g-spacing-6);\n}\n.gn-all-pages-panel__discoverable-feature-wrapper {\n display: flex;\n}";
1760
+ styleInject(css_248z$k);
1761
+
1762
+ const b$k = block('all-pages-panel');
1763
+ const AllPagesPanel = (props) => {
1764
+ const { startEditIcon, onEditModeChanged, className } = props;
1765
+ const { menuItems, onMenuItemsChanged } = useAsideHeaderInnerContext();
1766
+ const menuItemsRef = React.useRef(menuItems);
1767
+ menuItemsRef.current = menuItems;
1768
+ const [isEditMode, setIsEditMode] = React.useState(false);
1769
+ const toggleEditMode = React.useCallback(() => {
1770
+ setIsEditMode((prev) => !prev);
1771
+ }, []);
1772
+ const groupedItems = useGroupedMenuItems(menuItems);
1773
+ React.useEffect(() => {
1774
+ onEditModeChanged === null || onEditModeChanged === void 0 ? void 0 : onEditModeChanged(isEditMode);
1775
+ }, [isEditMode, onEditModeChanged]);
1776
+ const onItemClick = React.useCallback((item) => {
1777
+ var _a;
1778
+ //@ts-ignore TODO fix when @gravity-ui/uikit/List will provide event arg on item click
1779
+ (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, false);
1780
+ }, []);
1781
+ const togglePageVisibility = React.useCallback((item) => {
1782
+ if (!onMenuItemsChanged) {
1783
+ return;
1784
+ }
1785
+ const changedItem = Object.assign(Object.assign({}, item), { hidden: !item.hidden });
1786
+ const originItems = menuItemsRef.current.filter((menuItem) => menuItem.id !== ALL_PAGES_ID);
1787
+ onMenuItemsChanged(originItems.map((menuItem) => {
1788
+ if (menuItem.id !== changedItem.id) {
1789
+ return menuItem;
1790
+ }
1791
+ return changedItem;
1792
+ }));
1793
+ }, [onMenuItemsChanged]);
1794
+ const itemRender = React.useCallback((item, _isActive, _itemIndex) => (React__default["default"].createElement(AllPagesListItem, { item: item, editMode: isEditMode, onToggle: () => togglePageVisibility(item) })), [isEditMode, togglePageVisibility]);
1795
+ const onResetToDefaultClick = React.useCallback(() => {
1796
+ if (!onMenuItemsChanged) {
1797
+ return;
1798
+ }
1799
+ const originItems = menuItemsRef.current.filter((item) => item.id !== ALL_PAGES_ID);
1800
+ onMenuItemsChanged(originItems.map((item) => (Object.assign(Object.assign({}, item), { hidden: false }))));
1801
+ }, [onMenuItemsChanged]);
1802
+ return (React__default["default"].createElement(uikit.Flex, { className: b$k(null, className), gap: "5", direction: "column" },
1803
+ React__default["default"].createElement(uikit.Flex, { gap: "4", alignItems: "center", justifyContent: "space-between" },
1804
+ React__default["default"].createElement(uikit.Text, { variant: "subheader-2" }, isEditMode ? i18n$4('all-panel.title.editing') : i18n$4('all-panel.title.main')),
1805
+ React__default["default"].createElement(uikit.Button, { selected: isEditMode, view: "normal", onClick: toggleEditMode }, startEditIcon ? startEditIcon : React__default["default"].createElement(uikit.Icon, { data: icons.Gear }))),
1806
+ React__default["default"].createElement(uikit.Flex, { className: b$k('content'), gap: "5", direction: "column" }, Object.keys(groupedItems).map((category) => {
1807
+ return (React__default["default"].createElement(uikit.Flex, { key: category, direction: "column", gap: "3" },
1808
+ React__default["default"].createElement(uikit.Text, { className: b$k('category'), variant: "body-1", color: "secondary" }, category),
1809
+ React__default["default"].createElement(uikit.List, { virtualized: false, filterable: false, items: groupedItems[category], onItemClick: onItemClick, renderItem: itemRender })));
1810
+ })),
1811
+ isEditMode && (React__default["default"].createElement(uikit.Button, { onClick: onResetToDefaultClick }, i18n$4('all-panel.resetToDefault')))));
1812
+ };
1813
+
1814
+ const useVisibleMenuItems = () => {
1815
+ const { menuItems, allPagesIsAvailable } = useAsideHeaderInnerContext();
1816
+ return React.useMemo(() => {
1817
+ if (!allPagesIsAvailable) {
1818
+ return menuItems;
1819
+ }
1820
+ let lastVisibleIndex = 0;
1821
+ return menuItems.filter((item, index, items) => {
1822
+ if (item.hidden) {
1823
+ return false;
1824
+ }
1825
+ if (index > 0 &&
1826
+ item.type === 'divider' &&
1827
+ (items[lastVisibleIndex].type === 'divider' || items[lastVisibleIndex].hidden)) {
1828
+ return false;
1829
+ }
1830
+ lastVisibleIndex = index;
1831
+ return true;
1832
+ });
1833
+ }, [allPagesIsAvailable, menuItems]);
1834
+ };
1835
+
1663
1836
  var button_collapse$1 = "Collapse";
1664
1837
  var button_expand$1 = "Expand";
1665
1838
  var label_more$1 = "More";
@@ -1728,15 +1901,15 @@ var headerDividerCollapsedIcon = SvgDividerCollapsed;
1728
1901
  const DEFAULT_SUBHEADER_ITEMS = [];
1729
1902
  const Header = () => {
1730
1903
  const { logo, onItemClick, onClosePanel, headerDecoration, subheaderItems } = useAsideHeaderInnerContext();
1904
+ const { onClick: onLogoClickProp } = logo;
1731
1905
  const onLogoClick = React.useCallback((event) => {
1732
- var _a;
1733
1906
  onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
1734
- (_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
1735
- }, [onClosePanel, logo.onClick]);
1736
- return (React__default["default"].createElement("div", { className: b$k('header', { ['with-decoration']: headerDecoration }) },
1907
+ onLogoClickProp === null || onLogoClickProp === void 0 ? void 0 : onLogoClickProp(event);
1908
+ }, [onClosePanel, onLogoClickProp]);
1909
+ return (React__default["default"].createElement("div", { className: b$m('header', { ['with-decoration']: headerDecoration }) },
1737
1910
  React__default["default"].createElement(Logo$1, Object.assign({}, logo, { onClick: onLogoClick })),
1738
1911
  React__default["default"].createElement(CompositeBar, { type: "subheader", items: subheaderItems || DEFAULT_SUBHEADER_ITEMS, onItemClick: onItemClick }),
1739
- React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$k('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
1912
+ React__default["default"].createElement(uikit.Icon, { data: headerDividerCollapsedIcon, className: b$m('header-divider'), width: ASIDE_HEADER_COMPACT_WIDTH, height: "29" })));
1740
1913
  };
1741
1914
 
1742
1915
  function fakeDisplayName(newDisplayName, Component) {
@@ -1766,12 +1939,12 @@ const CollapseButton = () => {
1766
1939
  const { onChangeCompact, compact, expandTitle, collapseTitle } = useAsideHeaderInnerContext();
1767
1940
  const onCollapseButtonClick = React.useCallback(() => {
1768
1941
  onChangeCompact === null || onChangeCompact === void 0 ? void 0 : onChangeCompact(!compact);
1769
- }, [compact]);
1942
+ }, [compact, onChangeCompact]);
1770
1943
  const buttonTitle = compact
1771
1944
  ? expandTitle || i18n$3('button_expand')
1772
1945
  : collapseTitle || i18n$3('button_collapse');
1773
- return (React__default["default"].createElement(uikit.Button, { className: b$k('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
1774
- React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$k('collapse-icon'), width: "16", height: "10" })));
1946
+ return (React__default["default"].createElement(uikit.Button, { className: b$m('collapse-button', { compact }), view: "flat", onClick: onCollapseButtonClick, title: buttonTitle },
1947
+ React__default["default"].createElement(NotIcon, { data: controlMenuButtonIcon, className: b$m('collapse-icon'), width: "16", height: "10" })));
1775
1948
  };
1776
1949
 
1777
1950
  function _extends() {
@@ -4849,19 +5022,20 @@ const Drawer = ({ className, children, style, onVeilClick, onEscape, preventScro
4849
5022
 
4850
5023
  const Panels = () => {
4851
5024
  const { panelItems, onClosePanel, size } = useAsideHeaderInnerContext();
4852
- return panelItems ? (React__default["default"].createElement(Drawer, { className: b$k('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
5025
+ return panelItems ? (React__default["default"].createElement(Drawer, { className: b$m('panels'), onVeilClick: onClosePanel, onEscape: onClosePanel, style: { left: size } }, panelItems.map((item) => (React__default["default"].createElement(DrawerItem, Object.assign({ key: item.id }, item)))))) : null;
4853
5026
  };
4854
5027
 
4855
5028
  const FirstPanel = () => {
4856
- const { size, onItemClick, menuItems, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
5029
+ const { size, onItemClick, headerDecoration, multipleTooltip, menuMoreTitle, renderFooter, compact, } = useAsideHeaderInnerContext();
5030
+ const visibleMenuItems = useVisibleMenuItems();
4857
5031
  const asideRef = React.useRef(null);
4858
5032
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
4859
- React__default["default"].createElement("div", { className: b$k('aside'), style: { width: size } },
4860
- React__default["default"].createElement("div", { className: b$k('aside-popup-anchor'), ref: asideRef }),
4861
- React__default["default"].createElement("div", { className: b$k('aside-content', { ['with-decoration']: headerDecoration }) },
5033
+ React__default["default"].createElement("div", { className: b$m('aside'), style: { width: size } },
5034
+ React__default["default"].createElement("div", { className: b$m('aside-popup-anchor'), ref: asideRef }),
5035
+ React__default["default"].createElement("div", { className: b$m('aside-content', { ['with-decoration']: headerDecoration }) },
4862
5036
  React__default["default"].createElement(Header, null),
4863
- (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: menuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$k('menu-items') })),
4864
- React__default["default"].createElement("div", { className: b$k('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
5037
+ (visibleMenuItems === null || visibleMenuItems === void 0 ? void 0 : visibleMenuItems.length) ? (React__default["default"].createElement(CompositeBar, { type: "menu", items: visibleMenuItems, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== void 0 ? menuMoreTitle : i18n$3('label_more'), onItemClick: onItemClick, multipleTooltip: multipleTooltip })) : (React__default["default"].createElement("div", { className: b$m('menu-items') })),
5038
+ React__default["default"].createElement("div", { className: b$m('footer') }, renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter({
4865
5039
  size,
4866
5040
  compact: Boolean(compact),
4867
5041
  asideRef,
@@ -4873,21 +5047,70 @@ const FirstPanel = () => {
4873
5047
  var css_248z$h = ".g-root {\n --gn-aside-header-background-color: var(--g-color-base-warning-light);\n --gn-aside-header-collapse-button-divider-line-color: var(\n --gn-aside-header-subheader-divider-line-color\n );\n --gn-aside-header-footer-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-subheader-item-icon-color: var(--g-color-text-primary);\n --gn-aside-header-item-icon-background-size: 38px;\n}\n\n.g-root_theme_light,\n.g-root_theme_light-hc {\n --gn-aside-header-divider-line-color: transparent;\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic);\n}\n\n.g-root_theme_dark,\n.g-root_theme_dark-hc {\n --gn-aside-header-divider-line-color: var(--g-color-line-generic-solid);\n --gn-aside-header-subheader-divider-line-color: var(--g-color-line-generic-solid);\n}\n\n.gn-aside-header {\n --gn-aside-header-min-width: 56px;\n height: 100%;\n width: 100%;\n position: relative;\n background-color: var(--g-color-base-background);\n}\n.gn-aside-header__aside {\n position: sticky;\n top: 0;\n left: 0;\n height: 100vh;\n width: inherit;\n display: flex;\n flex-direction: column;\n background-color: var(--g-color-base-background);\n z-index: 100;\n box-sizing: border-box;\n}\n.gn-aside-header__aside::after {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 2;\n width: 1px;\n height: 100%;\n content: \"\";\n background-color: var(--gn-aside-header-divider-line-color);\n}\n.gn-aside-header__aside-popup-anchor {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 1;\n}\n.gn-aside-header__aside-content {\n --gradient-height: 334px;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n width: inherit;\n height: inherit;\n position: relative;\n z-index: 2;\n user-select: none;\n}\n.gn-aside-header__aside-content::after {\n position: absolute;\n top: 0;\n right: -100px;\n bottom: 0;\n width: 100px;\n content: \"\";\n box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1), 0px 0px 24px rgba(0, 0, 0, 0.08);\n}\n.gn-aside-header__aside-content > .gn-aside-header-logo {\n margin: 8px 0;\n}\n.gn-aside-header__aside-content_with-decoration {\n background: linear-gradient(180deg, var(--gn-aside-header-background-color) calc(var(--gradient-height) * 0.33), transparent calc(var(--gradient-height) * 0.88));\n}\n.gn-aside-header_compact .gn-aside-header__aside-content {\n background: transparent;\n}\n.gn-aside-header__header {\n --gn-aside-header-header-divider-height: 29px;\n position: relative;\n z-index: 1;\n flex: none;\n box-sizing: border-box;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 22px;\n}\n.gn-aside-header__header .gn-aside-header__header-divider {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: -2;\n display: none;\n color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header_with-decoration::before {\n position: absolute;\n top: 0;\n left: 0;\n z-index: -2;\n display: none;\n width: 100%;\n height: calc(100% - var(--gn-aside-header-header-divider-height));\n content: \"\";\n background-color: var(--gn-aside-header-background-color);\n}\n.gn-aside-header__header::after {\n position: absolute;\n bottom: 12px;\n left: 0;\n z-index: -2;\n width: 100%;\n height: 1px;\n content: \"\";\n background-color: var(--gn-aside-header-subheader-divider-line-color);\n}\n.gn-aside-header_compact .gn-aside-header__header::before {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider {\n display: block;\n}\n.gn-aside-header_compact .gn-aside-header__header_with-decoration::after {\n display: none;\n}\n.gn-aside-header__menu-items {\n flex-grow: 1;\n}\n.gn-aside-header__footer {\n flex-shrink: 0;\n width: 100%;\n margin: 8px 0;\n display: flex;\n flex-direction: column;\n}\n.gn-aside-header__panels {\n z-index: 98;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n overflow: auto;\n}\n.gn-aside-header__panel {\n height: 100%;\n}\n.gn-aside-header__pane-container {\n display: flex;\n outline: none;\n overflow: visible;\n user-select: text;\n flex-direction: row;\n}\n.gn-aside-header__content {\n width: calc(100% - var(--gn-aside-header-size));\n z-index: 95;\n}\n.gn-aside-header__collapse-button {\n --yc-button-background-color-hover: transparent;\n overflow: hidden;\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: 20px;\n border-top: 1px solid var(--gn-aside-header-collapse-button-divider-line-color);\n margin-top: auto;\n}\n.gn-aside-header__collapse-button > .yc-button__text {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 20px;\n}\n.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon {\n transform: rotate(180deg);\n}\n.gn-aside-header__collapse-button .gn-aside-header__collapse-icon {\n color: var(--g-color-text-secondary);\n}\n.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon {\n color: var(--g-color-text-primary);\n}";
4874
5048
  styleInject(css_248z$h);
4875
5049
 
4876
- const AsideHeader = (props) => {
4877
- const { className, compact, onClosePanel } = props;
4878
- const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
5050
+ var InnerPanels;
5051
+ (function (InnerPanels) {
5052
+ InnerPanels["AllPages"] = "all-pages";
5053
+ })(InnerPanels || (InnerPanels = {}));
5054
+
5055
+ const EMPTY_MENU_ITEMS = [];
5056
+ const useAsideHeaderInnerContextValue = (props) => {
5057
+ const { size, onClosePanel, menuItems, panelItems, onMenuItemsChanged } = props;
5058
+ const [innerVisiblePanel, setInnerVisiblePanel] = React.useState();
5059
+ const allPagesIsAvailable = Boolean(onMenuItemsChanged) && (!menuItems || (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) > 0);
5060
+ React.useEffect(() => {
5061
+ // If any user panel became visible we need to switch off all inner panels
5062
+ if (panelItems === null || panelItems === void 0 ? void 0 : panelItems.some((x) => x.visible)) {
5063
+ setInnerVisiblePanel(undefined);
5064
+ }
5065
+ }, [panelItems]);
5066
+ const innerOnClosePanel = React.useCallback(() => {
5067
+ setInnerVisiblePanel(undefined);
5068
+ onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
5069
+ }, [onClosePanel]);
4879
5070
  const onItemClick = React.useCallback((item, collapsed, event) => {
4880
5071
  var _a;
4881
- onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
5072
+ if (item.id === ALL_PAGES_MENU_ITEM.id) {
5073
+ setInnerVisiblePanel((prev) => prev === InnerPanels.AllPages ? undefined : InnerPanels.AllPages);
5074
+ }
5075
+ else {
5076
+ innerOnClosePanel();
5077
+ }
4882
5078
  (_a = item.onItemClick) === null || _a === void 0 ? void 0 : _a.call(item, item, collapsed, event);
4883
- }, [onClosePanel]);
5079
+ }, [innerOnClosePanel]);
5080
+ const innerMenuItems = React.useMemo(() => allPagesIsAvailable
5081
+ ? [
5082
+ ...(menuItems || EMPTY_MENU_ITEMS),
5083
+ Object.assign(Object.assign({}, ALL_PAGES_MENU_ITEM), { current: innerVisiblePanel === InnerPanels.AllPages }),
5084
+ ]
5085
+ : menuItems || EMPTY_MENU_ITEMS, [allPagesIsAvailable, menuItems, innerVisiblePanel]);
5086
+ const innerPanelItems = React.useMemo(() => {
5087
+ if (!allPagesIsAvailable) {
5088
+ return panelItems;
5089
+ }
5090
+ return [
5091
+ ...(panelItems || []),
5092
+ {
5093
+ id: InnerPanels.AllPages,
5094
+ content: React__default["default"].createElement(AllPagesPanel, null),
5095
+ visible: innerVisiblePanel === InnerPanels.AllPages,
5096
+ },
5097
+ ];
5098
+ }, [allPagesIsAvailable, panelItems, innerVisiblePanel]);
5099
+ return Object.assign(Object.assign({}, props), { onClosePanel: innerOnClosePanel, allPagesIsAvailable, menuItems: innerMenuItems, panelItems: innerPanelItems, size,
5100
+ onItemClick });
5101
+ };
5102
+
5103
+ const AsideHeader = (props) => {
5104
+ const { className, compact } = props;
5105
+ const size = compact ? ASIDE_HEADER_COMPACT_WIDTH : ASIDE_HEADER_EXPANDED_WIDTH;
4884
5106
  const asideHeaderContextValue = React.useMemo(() => ({ size, compact }), [compact, size]);
5107
+ const asideHeaderInnerContextValue = useAsideHeaderInnerContextValue(Object.assign(Object.assign({}, props), { size }));
4885
5108
  return (React__default["default"].createElement(AsideHeaderContextProvider, { value: asideHeaderContextValue },
4886
- React__default["default"].createElement(AsideHeaderInnerContextProvider, { value: Object.assign(Object.assign({}, props), { size, onItemClick }) },
4887
- React__default["default"].createElement("div", { className: b$k({ compact }, className) },
4888
- React__default["default"].createElement("div", { className: b$k('pane-container') },
5109
+ React__default["default"].createElement(AsideHeaderInnerContextProvider, { value: asideHeaderInnerContextValue },
5110
+ React__default["default"].createElement("div", { className: b$m({ compact }, className) },
5111
+ React__default["default"].createElement("div", { className: b$m('pane-container') },
4889
5112
  React__default["default"].createElement(FirstPanel, null),
4890
- React__default["default"].createElement(Content, { size: size, renderContent: props.renderContent, className: b$k('content') }))))));
5113
+ React__default["default"].createElement(Content, { size: size, renderContent: props.renderContent, className: b$m('content') }))))));
4891
5114
  };
4892
5115
 
4893
5116
  /******************************************************************************
@@ -5674,12 +5897,12 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
5674
5897
  onEvent === null || onEvent === void 0 ? void 0 : onEvent(name, panelOpen ? EVENT_NAMES.closeEvent : EVENT_NAMES.openEvent);
5675
5898
  return panelOpen ? null : name;
5676
5899
  });
5677
- }, [visiblePanel, onEvent]);
5900
+ }, [onEvent]);
5678
5901
  const onMobilePanelToggle = React.useCallback(({ detail }) => {
5679
5902
  if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
5680
5903
  onPanelToggle(detail === null || detail === void 0 ? void 0 : detail.panelName);
5681
5904
  }
5682
- }, [onEvent]);
5905
+ }, [onPanelToggle]);
5683
5906
  const onMobilePanelOpen = React.useCallback(({ detail }) => {
5684
5907
  if (typeof (detail === null || detail === void 0 ? void 0 : detail.panelName) === 'string') {
5685
5908
  onEvent === null || onEvent === void 0 ? void 0 : onEvent(detail === null || detail === void 0 ? void 0 : detail.panelName, EVENT_NAMES.openEvent);
@@ -5719,16 +5942,16 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
5719
5942
  size,
5720
5943
  isCompact: compact,
5721
5944
  });
5722
- }, [burgerMenu.renderFooter, size, compact]);
5945
+ }, [burgerMenu, size, compact]);
5723
5946
  const onLogoClick = React.useCallback((event) => {
5724
5947
  var _a;
5725
5948
  onClosePanel === null || onClosePanel === void 0 ? void 0 : onClosePanel();
5726
5949
  (_a = logo.onClick) === null || _a === void 0 ? void 0 : _a.call(logo, event);
5727
- }, [logo.onClick, onClosePanel]);
5950
+ }, [logo, onClosePanel]);
5728
5951
  const burgerPanelItem = React.useMemo(() => ({
5729
5952
  id: BURGER_PANEL_ITEM_ID,
5730
5953
  content: (React__default["default"].createElement(BurgerMenu, { items: burgerMenu.items, modalItem: burgerMenu.modalItem, renderFooter: renderBurgerMenuFooter, onItemClick: onBurgerMenuItemClick, className: b$1('burger-menu') })),
5731
- }), [burgerMenu]);
5954
+ }), [burgerMenu.items, burgerMenu.modalItem, onBurgerMenuItemClick, renderBurgerMenuFooter]);
5732
5955
  React.useEffect(() => {
5733
5956
  const node = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
5734
5957
  if (node) {
@@ -5747,7 +5970,14 @@ const MobileHeader = React__default["default"].forwardRef(({ logo, burgerMenu, b
5747
5970
  node.removeEventListener('MOBILE_PANEL_CLOSE', onMobilePanelClose);
5748
5971
  }
5749
5972
  };
5750
- }, [targetRef, onBurgerClose, onBurgerOpen]);
5973
+ }, [
5974
+ targetRef,
5975
+ onBurgerClose,
5976
+ onBurgerOpen,
5977
+ onMobilePanelToggle,
5978
+ onMobilePanelOpen,
5979
+ onMobilePanelClose,
5980
+ ]);
5751
5981
  return (React__default["default"].createElement("div", { className: b$1({ compact }, className), ref: targetRef },
5752
5982
  React__default["default"].createElement("header", { className: b$1('header'), style: { height: size } },
5753
5983
  React__default["default"].createElement(Burger, { opened: visiblePanel === burgerPanelItem.id, onClick: () => onPanelToggle(BURGER_PANEL_ITEM_ID), className: b$1('burger'), closeTitle: burgerCloseTitle, openTitle: burgerOpenTitle }),