fix(toolbar): use helper to adjust z-index for popups (#544)

Co-authored-by: Полеводин Дмитрий Игоревич (4094029) <[email protected]>
Co-authored-by: Sergey Makhnatkin <[email protected]>

Author: 3 people

src/bundle/ToolbarView.tsx

@@ -3,6 +3,8 @@ import {useLayoutEffect, useRef} from 'react';
 import type {QAProps} from '@gravity-ui/uikit';
 import {useUpdate} from 'react-use';
 
+import {LAYOUT} from 'src/common/layout';
+
 import type {ClassNameProps} from '../classname';
 import {i18n} from '../i18n/menubar';
 import {useSticky} from '../react-utils/useSticky';
@@ -65,6 +67,7 @@ export function ToolbarView<T>({
                 },
                 [className],
             )}
+            data-layout={LAYOUT.STICKY_TOOLBAR}
         >
             <FlexToolbar
                 data={toolbarConfig}

src/bundle/settings/index.tsx

@@ -15,6 +15,9 @@ import {
     type QAProps,
 } from '@gravity-ui/uikit';
 
+import {LAYOUT} from 'src/common/layout';
+import {getTargetZIndex} from 'src/utils/get-target-z-index';
+
 import {type ClassNameProps, cn} from '../../classname';
 import {i18n} from '../../i18n/bundle';
 import WysiwygModeIcon from '../../icons/WysiwygMode';
@@ -90,6 +93,7 @@ export const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(
                         anchorElement={chevronElement}
                         placement={placement}
                         onOpenChange={hidePopup}
+                        zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}
                     >
                         <SettingsContent
                             {...props}
@@ -174,6 +178,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                                 popoverProps={{
                                     placement: mdHelpPlacement,
                                     modal: false,
+                                    zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR),
                                 }}
                                 className={bContent('mode-help')}
                             >

src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx

@@ -11,6 +11,9 @@ import {
     type PopupProps,
 } from '@gravity-ui/uikit';
 
+import {LAYOUT} from 'src/common/layout';
+import {getTargetZIndex} from 'src/utils/get-target-z-index';
+
 import {cn} from '../../classname';
 import type {Action} from '../../core';
 import {groupBy, isFunction} from '../../lodash';
@@ -127,6 +130,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                 onOpenChange={(open) => {
                     if (!open) hide();
                 }}
+                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}
             >
                 <Menu size="l" qa={qaMenu} data-toolbar-menu-for={textTitle}>
                     {Object.entries(groups).map(([label, items], key) => {

src/common/layout.ts

@@ -0,0 +1,3 @@
+export const LAYOUT = {
+    STICKY_TOOLBAR: 'sticky-toolbar',
+};

src/toolbar/ToolbarListButton.tsx

@@ -3,6 +3,9 @@ import {Fragment, useEffect, useState} from 'react';
 import {ChevronDown} from '@gravity-ui/icons';
 import {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';
 
+import {LAYOUT} from 'src/common/layout';
+import {getTargetZIndex} from 'src/utils/get-target-z-index';
+
 import {cn} from '../classname';
 import {i18n} from '../i18n/common';
 import {isFunction} from '../lodash';
@@ -94,7 +97,12 @@ export function ToolbarListButton<E>({
             >
                 {buttonContent}
             </ToolbarButtonView>
-            <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
+            <Popup
+                anchorElement={anchorElement}
+                open={popupOpen}
+                onOpenChange={hide}
+                zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}
+            >
                 <Menu size="l" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>
                     {data
                         .map((data) => {

src/utils/get-target-z-index.ts

@@ -0,0 +1,12 @@
+export function getTargetZIndex(dataLayoutSelector: string, offset = 10) {
+    const targetLayerElement = document.querySelector(`[data-layout="${dataLayoutSelector}"]`);
+
+    if (!targetLayerElement) {
+        return offset;
+    }
+
+    const computedStyle = window.getComputedStyle(targetLayerElement);
+    const targetZIndex = parseInt(computedStyle.zIndex, 10);
+
+    return Number.isFinite(targetZIndex) ? targetZIndex + offset : offset;
+}