ydb-embedded-ui 22.3.0 → 22.5.0

package/src/components/DiskStatus/DiskStatus.tsx

@@ -0,0 +1,149 @@
+import type {IconData, LabelProps} from '@gravity-ui/uikit';
+import {Icon, Label, Tooltip} from '@gravity-ui/uikit';
+import {capitalize} from 'lodash';
+
+import {EFlag, isCapacityAlert} from '../../types/api/enums';
+import {normalizeCapacityAlert} from '../../utils/capacityAlerts';
+import {cn} from '../../utils/cn';
+import {formatPDiskType} from '../../utils/disks/getPDiskType';
+import {getDisplaySeverityColor} from '../../utils/disks/helpers';
+import {getFlagIconWithColor} from '../../utils/disks/iconCalculators';
+import {normalizeMediaType} from '../../utils/disks/normalizeMediaType';
+import {calculateSpaceSeverity} from '../../utils/disks/severityCalculators';
+import {EFlagToLabelTheme} from '../EntityStatus/EntityStatus';
+import {getFlagStatusText} from '../VDisk/getFlagStatusText';
+
+import i18n from './i18n';
+
+import './DiskStatus.scss';
+
+const b = cn('ydb-disk-status');
+
+export interface DiskStatusLabelData {
+    value: string;
+    title?: string;
+    theme?: LabelProps['theme'];
+    icon?: IconData;
+    tooltip?: string;
+    dangerHeavy?: boolean;
+}
+
+export type TitledDiskStatusLabelData = Omit<DiskStatusLabelData, 'title' | 'value'> & {
+    title: string;
+    value?: string;
+};
+
+export function DiskStatusLabel({
+    value,
+    theme = 'normal',
+    icon,
+    title,
+    tooltip,
+    dangerHeavy,
+    size = 's',
+    iconSize = 12,
+    className,
+}: (DiskStatusLabelData | TitledDiskStatusLabelData) &
+    Pick<LabelProps, 'size' | 'className'> & {iconSize?: number}) {
+    const label = (
+        <Label
+            size={size}
+            theme={theme}
+            className={b('label', {'danger-heavy': dangerHeavy}, className)}
+            icon={icon ? <Icon data={icon} size={iconSize} /> : undefined}
+            value={title ? value : undefined}
+        >
+            {title ?? value}
+        </Label>
+    );
+    return tooltip ? (
+        <Tooltip content={tooltip} placement="top">
+            <span tabIndex={0} className={b('tooltip')}>
+                {label}
+            </span>
+        </Tooltip>
+    ) : (
+        label
+    );
+}
+
+export function DiskTypeLabel({type, size}: {type?: string} & Pick<LabelProps, 'size'>) {
+    if (!type?.trim()) {
+        return null;
+    }
+    const mediaType = normalizeMediaType(type);
+    const value = formatPDiskType(mediaType) ?? mediaType;
+    let tooltip: string | undefined;
+    switch (mediaType) {
+        case 'HDD':
+            tooltip = i18n('context_hdd');
+            break;
+        case 'SSD':
+            tooltip = i18n('context_ssd');
+            break;
+        case 'NVME':
+            tooltip = i18n('context_nvme');
+            break;
+    }
+    return (
+        <DiskStatusLabel
+            value={value}
+            tooltip={tooltip}
+            size={size}
+            className={b('type', {
+                hdd: mediaType === 'HDD',
+                ssd: mediaType === 'SSD',
+                nvme: mediaType === 'NVME',
+            })}
+        />
+    );
+}
+
+export function DiskCapacityAlertLabel({
+    value,
+    emptyText = i18n('value_no-data'),
+}: {
+    value?: string;
+    emptyText?: string;
+}) {
+    const capacityAlert = normalizeCapacityAlert(value);
+    if (!capacityAlert) {
+        return <DiskStatusLabel size="xs" value={emptyText} theme="unknown" />;
+    }
+    const color = isCapacityAlert(capacityAlert)
+        ? getDisplaySeverityColor(
+              calculateSpaceSeverity({CapacityAlert: capacityAlert}),
+          ).toLowerCase()
+        : undefined;
+    return (
+        <DiskStatusLabel
+            size="xs"
+            value={capitalize(capacityAlert.replaceAll('_', ' '))}
+            className={b('capacity-alert', {color})}
+        />
+    );
+}
+
+export function DiskFlagLabel({
+    flag,
+    title,
+    icon,
+    emptyText = i18n('value_no-data'),
+}: {
+    flag?: EFlag;
+    title?: string;
+    icon?: IconData;
+    emptyText?: string;
+}) {
+    const resolvedFlag = flag || EFlag.Grey;
+    return (
+        <DiskStatusLabel
+            value={resolvedFlag === EFlag.Grey ? emptyText : getFlagStatusText(resolvedFlag)}
+            title={title}
+            theme={EFlagToLabelTheme[resolvedFlag] ?? 'normal'}
+            icon={icon ?? getFlagIconWithColor(resolvedFlag)?.icon}
+            dangerHeavy={resolvedFlag === EFlag.Red}
+            size="xs"
+        />
+    );
+}

package/src/components/DiskStatus/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "value_no-data": "Not available",
+  "context_hdd": "Hard disk drive",
+  "context_ssd": "Solid-state drive connected over SATA or SAS interface",
+  "context_nvme": "Solid-state drive connected over NVMe interface"
+}

package/src/components/DiskStatus/i18n/index.ts

@@ -0,0 +1,5 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+export default registerKeysets('ydb-disk-status', {en});

package/src/components/EntityStatus/EntityStatus.scss

@@ -1,6 +1,11 @@
 @use '../../styles/mixins.scss';
 
 .ydb-entity-status {
+    &__compact {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
     &__note {
         color: inherit;
     }

package/src/components/EntityStatus/EntityStatus.tsx

@@ -14,7 +14,7 @@ import './EntityStatus.scss';
 
 const b = cn('ydb-entity-status');
 
-const EFlagToLabelTheme: Record<EFlag, LabelProps['theme']> = {
+export const EFlagToLabelTheme: Record<EFlag, LabelProps['theme']> = {
     [EFlag.Red]: 'danger',
     [EFlag.Blue]: 'success',
     [EFlag.Green]: 'success',
@@ -44,31 +44,64 @@ const EFlagToStatusName: Record<EFlag, string> = {
     },
 };
 
-interface EntityStatusLabelProps {
+interface EntityStatusLabelBaseProps {
     status: EFlag;
+    className?: string;
+    size?: LabelProps['size'];
+    iconSize?: number;
+    qa?: string;
+}
+
+interface DefaultEntityStatusLabelProps {
+    view?: 'default';
     note?: React.ReactNode;
     children?: React.ReactNode;
-    className?: string;
     endContent?: React.ReactNode;
     withStatusName?: boolean;
-    size?: LabelProps['size'];
-    iconSize?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    qa?: string;
 }
 
+interface CompactEntityStatusLabelProps {
+    view: 'compact';
+    note?: never;
+    children?: never;
+    endContent?: never;
+    withStatusName?: never;
+    onClick?: never;
+}
+
+type EntityStatusLabelProps = EntityStatusLabelBaseProps &
+    (DefaultEntityStatusLabelProps | CompactEntityStatusLabelProps);
+
 function EntityStatusLabel({
     children,
     className,
     endContent,
     status,
     withStatusName = true,
+    view = 'default',
     note,
     size = 'm',
     iconSize = 14,
     onClick,
     qa,
 }: EntityStatusLabelProps) {
+    if (view === 'compact') {
+        const statusName = EFlagToStatusName[status];
+        return (
+            <ActionTooltip title={statusName}>
+                <span className={b('compact')} role="img" aria-label={statusName}>
+                    <Label
+                        theme={status === EFlag.Blue ? 'info' : EFlagToLabelTheme[status]}
+                        icon={<StatusIcon size={iconSize} status={status} />}
+                        size={size}
+                        className={b(null, className)}
+                        qa={qa}
+                    />
+                </span>
+            </ActionTooltip>
+        );
+    }
     const theme = EFlagToLabelTheme[status];
     const isClickable = Boolean(onClick);
     return (

package/src/components/EvictVDiskButton/EvictVDiskButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {ArrowsOppositeToDots} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
+import type {ButtonProps} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
 import {
@@ -10,6 +11,7 @@ import {
 } from '../../store/reducers/capabilities/hooks';
 import type {ModifyDiskResponse} from '../../types/api/modifyDisk';
 import type {TVDiskID} from '../../types/api/vdisk';
+import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 import {ButtonWithConfirmDialog} from '../ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 
@@ -19,7 +21,9 @@ interface EvictVDiskButtonProps {
     vDiskId: Required<TVDiskID>;
     donorMode?: boolean;
     fullWidth?: boolean;
-    onSuccess?: () => void;
+    view?: ButtonProps['view'];
+    onSuccess?: (isDialogOpen: boolean) => void;
+    onDialogOpen?: () => VoidFunction;
 }
 
 export function isAllVdiskParamsDefined(vDiskId?: TVDiskID): vDiskId is Required<TVDiskID> {
@@ -36,7 +40,9 @@ export const EvictVDiskButton = ({
     vDiskId,
     donorMode,
     fullWidth,
+    view = 'normal',
     onSuccess,
+    onDialogOpen,
 }: EvictVDiskButtonProps) => {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
@@ -79,8 +85,10 @@ export const EvictVDiskButton = ({
         <ButtonWithConfirmDialog
             onConfirmAction={handleEvictVDisk}
             onConfirmActionSuccess={onSuccess}
+            onDialogOpen={onDialogOpen}
             buttonDisabled={!isUserAllowedToMakeChanges || donorMode}
-            buttonView="normal"
+            buttonView={view}
+            buttonClassName={view === 'action' ? BRAND_BUTTON_CLASS : undefined}
             buttonWidth={fullWidth ? 'max' : undefined}
             dialogHeader={evictVDiskButtonKeyset('title_evict-dialog')}
             dialogText={evictVDiskButtonKeyset('confirm_evict')}

package/src/components/EvictVDiskButton/i18n/en.json

@@ -3,8 +3,8 @@
   "action_evict-short": "Evict",
   "action_force-evict": "Evict anyway",
   "title_evict-dialog": "Evict VDisk?",
-  "confirm_evict": "The VDisk will be evicted from the PDisk. All data will be moved to another PDisk.",
-  "alert_evict": "This operation cannot be cancelled.",
+  "confirm_evict": "The VDisk will be evicted from the PDisk.",
+  "alert_evict": "This VDisk will be replaced by a new one in the group. Data will be replicated to the new disk. The old VDisk will serve as\u00a0a\u00a0donor until replication is complete, and then it will be\u00a0removed.",
   "alert_not-allowed": "You don't have enough rights to evict VDisk",
   "alert_donor-mode-impossible": "Evicting a donor VDisk is not possible"
 }

package/src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -5,7 +5,7 @@ import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatStorageValues} from '../../utils/dataFormatters/dataFormatters';
 import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
-import {isNumeric} from '../../utils/utils';
+import {getNodeMemory} from '../../utils/memory';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
@@ -90,18 +90,13 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
         return <div className="error">{i18n('no-data')}</div>;
     }
 
-    const memoryUsed = isNumeric(node.MemoryUsed) ? Number(node.MemoryUsed) : undefined;
-    const memoryLimit = isNumeric(node.MemoryLimit) ? Number(node.MemoryLimit) : undefined;
-    const hasMemoryUsed =
-        memoryUsed !== undefined && Number.isFinite(memoryUsed) && memoryUsed >= 0;
-    const hasMemoryLimit =
-        memoryLimit !== undefined && Number.isFinite(memoryLimit) && memoryLimit > 0;
+    const {memoryUsed, memoryLimit} = getNodeMemory(node);
 
     const renderMemory = () => {
-        if (!hasMemoryUsed) {
+        if (memoryUsed === undefined) {
             return EMPTY_DATA_PLACEHOLDER;
         }
-        if (!hasMemoryLimit) {
+        if (memoryLimit === undefined) {
             return formatMemoryValues(memoryUsed)[0];
         }
 

package/src/components/HoverPopup/HoverPopup.tsx

@@ -8,35 +8,51 @@ import {YDB_POPOVER_CLASS_NAME} from '../../utils/constants';
 import {useEventHandler} from '../../utils/hooks/useEventHandler';
 
 import {getPopupScrollContainer} from './getPopupScrollContainer';
+import {usePopupPriority} from './usePopupPriority';
 
 const DEBOUNCE_TIMEOUT = 100;
 
-function useVisibleAnchor(anchorElement: HTMLElement | null, open: boolean) {
+function useVisibleAnchor(
+    anchorElement: HTMLElement | null,
+    open: boolean,
+    onHidden: VoidFunction,
+) {
     const [visibleAnchor, setVisibleAnchor] = React.useState<HTMLElement | null>(null);
+    // Mouse events can arrive before React renders the observer's next visibility state.
+    const visibleAnchorRef = React.useRef<HTMLElement | null>(null);
 
     React.useLayoutEffect(() => {
         setVisibleAnchor(null);
+        visibleAnchorRef.current = null;
         if (!open || !anchorElement) {
             return undefined;
         }
 
         const observer = new IntersectionObserver(([entry]) => {
-            setVisibleAnchor(entry.isIntersecting ? anchorElement : null);
+            visibleAnchorRef.current = entry.isIntersecting ? anchorElement : null;
+            setVisibleAnchor(visibleAnchorRef.current);
+            if (!entry.isIntersecting) {
+                onHidden();
+            }
         });
         observer.observe(anchorElement);
         return () => observer.disconnect();
-    }, [anchorElement, open]);
+    }, [anchorElement, open, onHidden]);
 
-    return anchorElement !== null && visibleAnchor === anchorElement;
+    return [anchorElement !== null && visibleAnchor === anchorElement, visibleAnchorRef] as const;
 }
 
 type HoverPopupProps = {
     children: React.ReactNode;
-    renderPopupContent: (controls: {onClose: VoidFunction}) => React.ReactNode;
+    renderPopupContent: (controls: {
+        onClose: VoidFunction;
+        holdOpen: () => VoidFunction;
+    }) => React.ReactNode;
     showPopup?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
+    onClosePopup?: VoidFunction;
     delayOpen?: number;
     delayClose?: number;
     contentClassName?: string;
@@ -50,6 +66,7 @@ export const HoverPopup = ({
     anchorRef,
     onShowPopup,
     onHidePopup,
+    onClosePopup,
     placement = ['top', 'bottom', 'left', 'right'],
     contentClassName,
     delayClose = DEBOUNCE_TIMEOUT,
@@ -58,8 +75,13 @@ export const HoverPopup = ({
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
     const [isFocused, setIsFocused] = React.useState(false);
+    const [hoverClosing, setHoverClosing] = React.useState(false);
+    const dialogHoldRef = React.useRef<object | null>(null);
 
     const anchor = React.useRef<HTMLSpanElement>(null);
+    const popupContent = React.useRef<HTMLDivElement>(null);
+    const {activate, zIndex} = usePopupPriority();
+    const bringToFront = useEventHandler(() => activate(anchorRef?.current || anchor.current));
 
     const reportedOpenRef = React.useRef(false);
 
@@ -86,36 +108,113 @@ export const HoverPopup = ({
         [delayOpen, reportOpen],
     );
 
-    const hidePopup = React.useCallback(() => {
+    const hidePopup = useEventHandler(() => {
+        if (dialogHoldRef.current || isFocused) {
+            return;
+        }
+        setHoverClosing(open && visibleAnchorRef.current === anchorElement);
         setIsPopupVisible(false);
-    }, []);
+        reportOpen(false);
+    });
 
     const debouncedHandleHidePopup = React.useMemo(
-        () =>
-            debounce(() => {
-                hidePopup();
-                reportOpen(false);
-            }, delayClose),
-        [delayClose, reportOpen, hidePopup],
+        () => debounce(hidePopup, delayClose),
+        [delayClose, hidePopup],
     );
 
     React.useEffect(() => {
         return () => {
             debouncedHandleShowPopup.cancel();
             debouncedHandleHidePopup.cancel();
+            dialogHoldRef.current = null;
         };
     }, [debouncedHandleShowPopup, debouncedHandleHidePopup]);
 
     const closePopup = React.useCallback(() => {
         debouncedHandleShowPopup.cancel();
         debouncedHandleHidePopup.cancel();
+        dialogHoldRef.current = null;
         setIsPopupVisible(false);
         setIsPopupContentHovered(false);
         setIsFocused(false);
+        setHoverClosing(false);
         reportOpen(false, true);
-    }, [debouncedHandleHidePopup, debouncedHandleShowPopup, reportOpen]);
+        onClosePopup?.();
+    }, [debouncedHandleHidePopup, debouncedHandleShowPopup, onClosePopup, reportOpen]);
+
+    const hideClippedPopup = useEventHandler(() => {
+        debouncedHandleShowPopup.cancel();
+        setIsPopupContentHovered(false);
+        setIsFocused(false);
+        setHoverClosing(false);
+        debouncedHandleHidePopup();
+    });
+
+    const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
+    const open = Boolean(internalOpen || showPopup);
+
+    const anchorElement = anchorRef?.current || anchor.current;
+    // Release only this popup's hover source; a hovered peer can keep the pair open.
+    const [isAnchorVisible, visibleAnchorRef] = useVisibleAnchor(
+        anchorElement,
+        open || hoverClosing,
+        hideClippedPopup,
+    );
+    const container = getPopupScrollContainer(anchorElement);
+
+    React.useEffect(() => {
+        if (!hoverClosing || !anchorElement) {
+            return undefined;
+        }
+        // Escape may close this popup through its paired sibling's handler.
+        const preventHoverReturn = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                setHoverClosing(false);
+            }
+        };
+        const doc = anchorElement.ownerDocument;
+        doc.addEventListener('keydown', preventHoverReturn, true);
+        return () => doc.removeEventListener('keydown', preventHoverReturn, true);
+    }, [anchorElement, hoverClosing]);
+
+    const resumeHover = useEventHandler(() => {
+        const contentHovered = Boolean(popupContent.current?.matches(':hover'));
+        const hovered =
+            visibleAnchorRef.current === anchorElement &&
+            (anchorElement?.matches(':hover') || contentHovered);
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupContentHovered(Boolean(hovered && contentHovered));
+        if (hovered) {
+            setIsPopupVisible(true);
+            reportOpen(true);
+        } else {
+            debouncedHandleHidePopup();
+        }
+    });
+
+    const holdOpen = () => {
+        const interaction = {};
+        dialogHoldRef.current = interaction;
+        debouncedHandleShowPopup.cancel();
+        debouncedHandleHidePopup.cancel();
+        setIsFocused(false);
+        setIsPopupVisible(true);
+        reportOpen(true);
+        return () => {
+            if (dialogHoldRef.current === interaction) {
+                dialogHoldRef.current = null;
+                resumeHover();
+            }
+        };
+    };
 
-    const onMouseEnter = () => {
+    const onMouseEnter = (event: React.MouseEvent<HTMLSpanElement>) => {
+        if (event.buttons !== 0) {
+            return;
+        }
+        bringToFront();
         debouncedHandleHidePopup.cancel();
         debouncedHandleShowPopup();
     };
@@ -125,11 +224,30 @@ export const HoverPopup = ({
         debouncedHandleHidePopup();
     };
 
-    const onPopupMouseEnter = React.useCallback(() => {
-        debouncedHandleHidePopup.cancel();
-        setIsPopupContentHovered(true);
-        reportOpen(true);
-    }, [reportOpen, debouncedHandleHidePopup]);
+    const onPopupMouseEnter = React.useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            if ((!open && !hoverClosing) || visibleAnchorRef.current !== anchorElement) {
+                return;
+            }
+            if (event.buttons === 0) {
+                bringToFront();
+            }
+            debouncedHandleHidePopup.cancel();
+            setHoverClosing(false);
+            setIsPopupVisible(true);
+            setIsPopupContentHovered(true);
+            reportOpen(true);
+        },
+        [
+            bringToFront,
+            reportOpen,
+            debouncedHandleHidePopup,
+            open,
+            hoverClosing,
+            visibleAnchorRef,
+            anchorElement,
+        ],
+    );
 
     const onPopupMouseLeave = React.useCallback(() => {
         setIsPopupContentHovered(false);
@@ -137,26 +255,26 @@ export const HoverPopup = ({
     }, [debouncedHandleHidePopup]);
 
     const onPopupContextMenu = React.useCallback(() => {
+        if (dialogHoldRef.current || !open || visibleAnchorRef.current !== anchorElement) {
+            return;
+        }
+        bringToFront();
         setIsFocused(true);
         reportOpen(true);
-    }, [reportOpen]);
+    }, [bringToFront, reportOpen, open, visibleAnchorRef, anchorElement]);
 
-    const onPopupBlur = React.useCallback(() => {
-        setIsFocused(false);
-    }, []);
+    const onPopupBlur = useEventHandler(() => {
+        if (isFocused && !dialogHoldRef.current) {
+            resumeHover();
+        }
+    });
 
     const onPopupEscapeKeyDown = React.useCallback(() => {
-        closePopup();
+        if (!dialogHoldRef.current) {
+            closePopup();
+        }
     }, [closePopup]);
 
-    const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
-    const open = Boolean(internalOpen || showPopup);
-
-    const anchorElement = anchorRef?.current || anchor.current;
-    // Clipping a paired disk must not clear the shared hover state via onHidePopup.
-    const isAnchorVisible = useVisibleAnchor(anchorElement, open);
-    const container = getPopupScrollContainer(anchorElement);
-
     return (
         <React.Fragment>
             <span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
@@ -165,12 +283,15 @@ export const HoverPopup = ({
             {anchorElement ? (
                 <Popup
                     container={container}
+                    zIndex={zIndex}
                     // Keep portal typography when the page uses a different font.
                     floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {
                             onPopupEscapeKeyDown();
+                        } else if (reason === 'outside-press') {
+                            onPopupBlur();
                         }
                     }}
                     placement={placement}
@@ -179,11 +300,13 @@ export const HoverPopup = ({
                     returnFocus={false}
                     hasArrow
                     open={open && isAnchorVisible}
+                    onTransitionOutComplete={() => setHoverClosing(false)}
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
                     offset={offset || {mainAxis: 12, crossAxis: 0}}
                 >
                     <div
+                        ref={popupContent}
                         className={contentClassName}
                         onContextMenu={onPopupContextMenu}
                         onMouseEnter={onPopupMouseEnter}
@@ -191,7 +314,7 @@ export const HoverPopup = ({
                         onBlur={onPopupBlur}
                     >
                         <div className={YDB_POPOVER_CLASS_NAME}>
-                            {renderPopupContent({onClose: closePopup})}
+                            {renderPopupContent({onClose: closePopup, holdOpen})}
                         </div>
                     </div>
                 </Popup>