feat(Popper): add prop getFloatingElementHiddenStyles

packages/vkui/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -132,11 +132,11 @@ export const OnboardingTooltip = ({
 
   let tooltip: React.ReactPortal | null = null;
   if (shown) {
-    const floatingStyle = convertFloatingDataToReactCSSProperties(
-      positionStrategy,
-      floatingDataX,
-      floatingDataY,
-    );
+    const floatingStyle = convertFloatingDataToReactCSSProperties({
+      strategy: positionStrategy,
+      x: floatingDataX,
+      y: floatingDataY,
+    });
 
     tooltip = createPortal(
       <>

packages/vkui/src/components/Popover/Popover.tsx

@@ -53,6 +53,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'usePortal'
   | 'sameWidth'
   | 'hideWhenReferenceHidden'
+  | 'getFloatingElementHiddenStyles'
   | 'disabled'
   | 'disableInteractive'
   | 'disableCloseOnClickOutside'

packages/vkui/src/components/Popover/usePopover.tsx

@@ -47,6 +47,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
   offsetByCrossAxis = 0,
   sameWidth,
   hideWhenReferenceHidden,
+  getFloatingElementHiddenStyles,
   disabled,
   disableInteractive,
   disableCloseOnClickOutside,
@@ -108,6 +109,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
     trigger,
     strategy,
     hoverDelay,
+    getFloatingElementHiddenStyles,
     closeAfterClick,
     disabled,
     disableInteractive,

packages/vkui/src/components/Popper/Popper.tsx

@@ -46,6 +46,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'onShownChange'
   | 'defaultShown'
   | 'hideWhenReferenceHidden'
+  | 'getFloatingElementHiddenStyles'
   | 'sameWidth'
   | 'zIndex'
   | 'usePortal'
@@ -100,6 +101,7 @@ export const Popper = ({
   arrowPadding = DEFAULT_ARROW_PADDING,
   customMiddlewares,
   disableFlipMiddleware = false,
+  getFloatingElementHiddenStyles,
 
   // UseFloatingProps
   autoUpdateOnTargetResize = false,
@@ -175,13 +177,14 @@ export const Popper = ({
       style={mergeStyle(dropdownStyle, style)}
       baseClassName={styles.host}
       getRootRef={handleRootRef}
-      baseStyle={convertFloatingDataToReactCSSProperties(
-        floatingPositionStrategy,
-        floatingDataX,
-        floatingDataY,
-        sameWidth ? null : undefined,
+      baseStyle={convertFloatingDataToReactCSSProperties({
+        strategy: floatingPositionStrategy,
+        x: floatingDataX,
+        y: floatingDataY,
+        initialWidth: sameWidth ? null : undefined,
         middlewareData,
-      )}
+        getFloatingElementHiddenStyles,
+      })}
     >
       {arrow && (
         <FloatingArrow

packages/vkui/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -118,11 +118,11 @@ export const SliderThumb = ({
         <TooltipBase
           appearance="neutral"
           getRootRef={refs.setFloating}
-          style={convertFloatingDataToReactCSSProperties(
-            floatingPositionStrategy,
-            floatingDataX,
-            floatingDataY,
-          )}
+          style={convertFloatingDataToReactCSSProperties({
+            strategy: floatingPositionStrategy,
+            x: floatingDataX,
+            y: floatingDataY,
+          })}
           arrowProps={{
             coords: arrowCoords,
             placement: resolvedPlacement,

packages/vkui/src/components/Tooltip/Tooltip.tsx

@@ -29,6 +29,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'defaultShown'
   | 'onShownChange'
   | 'hideWhenReferenceHidden'
+  | 'getFloatingElementHiddenStyles'
   | 'children'
   | 'zIndex'
   | 'usePortal'
@@ -99,6 +100,7 @@ export const Tooltip = ({
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
   disableTriggerOnFocus = false,
+  getFloatingElementHiddenStyles,
 
   // useFloatingWithInteractions
   defaultShown,
@@ -168,6 +170,7 @@ export const Tooltip = ({
     disableInteractive: !enableInteractive,
     middlewares,
     strategy,
+    getFloatingElementHiddenStyles,
   });
   const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);
 

packages/vkui/src/lib/floating/functions.test.ts

@@ -1,5 +1,6 @@
 import {
   checkIsNotAutoPlacement,
+  type ConvertFloatingDataArgs,
   convertFloatingDataToReactCSSProperties,
   getAutoPlacementAlign,
 } from './functions';
@@ -42,11 +43,13 @@ describe('floating/functions', () => {
         left: 10,
         width: 'max-content',
       };
-      expect(convertFloatingDataToReactCSSProperties('absolute', 10, 10)).toEqual({
+      expect(
+        convertFloatingDataToReactCSSProperties({ strategy: 'absolute', x: 10, y: 10 }),
+      ).toEqual({
         position: 'absolute',
         ...expectedCSSProperties,
       });
-      expect(convertFloatingDataToReactCSSProperties('fixed', 10, 10)).toEqual({
+      expect(convertFloatingDataToReactCSSProperties({ strategy: 'fixed', x: 10, y: 10 })).toEqual({
         position: 'fixed',
         ...expectedCSSProperties,
       });
@@ -61,19 +64,79 @@ describe('floating/functions', () => {
         left: 0,
         width: 'max-content',
       };
-      expect(convertFloatingDataToReactCSSProperties('absolute', 0, 0)).toEqual(
+      expect(convertFloatingDataToReactCSSProperties({ strategy: 'absolute', x: 0, y: 0 })).toEqual(
         expectedCSSProperties,
       );
     });
 
     it('should ignore `width` property if `initialWidth` prop is null', () => {
-      expect(convertFloatingDataToReactCSSProperties('absolute', 0, 0, null)).toEqual({
+      expect(
+        convertFloatingDataToReactCSSProperties({
+          strategy: 'absolute',
+          x: 0,
+          y: 0,
+          initialWidth: null,
+        }),
+      ).toEqual({
         position: 'absolute',
         top: 0,
         right: 'auto',
         bottom: 'auto',
         left: 0,
       });
     });
+
+    it('should use custom css properties with getFloatingElementHiddenStyles', () => {
+      const getFloatingElementHiddenStyles = (hidden: boolean) => {
+        if (hidden) {
+          return {
+            display: 'none',
+          };
+        }
+        return {
+          display: 'flex',
+        };
+      };
+      const args: ConvertFloatingDataArgs = {
+        strategy: 'absolute',
+        x: 0,
+        y: 0,
+        initialWidth: null,
+        getFloatingElementHiddenStyles,
+      };
+      const expectedStyles = {
+        position: 'absolute',
+        top: 0,
+        right: 'auto',
+        bottom: 'auto',
+        left: 0,
+      };
+      expect(
+        convertFloatingDataToReactCSSProperties({
+          ...args,
+          middlewareData: {
+            hide: {
+              referenceHidden: true,
+            },
+          },
+        }),
+      ).toEqual({
+        ...expectedStyles,
+        display: 'none',
+      });
+      expect(
+        convertFloatingDataToReactCSSProperties({
+          ...args,
+          middlewareData: {
+            hide: {
+              referenceHidden: false,
+            },
+          },
+        }),
+      ).toEqual({
+        ...expectedStyles,
+        display: 'flex',
+      });
+    });
   });
 });

packages/vkui/src/lib/floating/functions.ts

@@ -6,6 +6,7 @@
   PlacementWithAuto,
   UseFloatingData,
 } from './types/common';
+import { type FloatingComponentProps } from './types/component';
 
 export function checkIsNotAutoPlacement(placement: PlacementWithAuto): placement is Placement {
   return !placement.startsWith('auto');
@@ -16,18 +17,39 @@
   return align === 'start' || align === 'end' ? align : null;
 }
 
+const defaultGetFloatingElementHiddenStyles: Exclude<
+  FloatingComponentProps['getFloatingElementHiddenStyles'],
+  undefined
+> = (hidden: boolean) => {
+  return hidden
+    ? {
+        visibility: 'hidden',
+      }
+    : {};
+};
+
+export type ConvertFloatingDataArgs = {
+  strategy: FloatingPositionStrategy;
+  x: UseFloatingData['x'];
+  y: UseFloatingData['y'];
+  initialWidth?: React.CSSProperties['width'] | null;
+  middlewareData?: UseFloatingData['middlewareData'];
+  getFloatingElementHiddenStyles?: FloatingComponentProps['getFloatingElementHiddenStyles'];
+};
+
 /**
  * Note: не используем `translate3d`, чтобы в лишний раз не выносить в отдельный слой и не занимать память в GPU.
  *
  * см. https://floating-ui.com/docs/react#positioning
  */
-export function convertFloatingDataToReactCSSProperties(
-  strategy: FloatingPositionStrategy,
-  x: UseFloatingData['x'],
-  y: UseFloatingData['y'],
-  initialWidth: React.CSSProperties['width'] | null = 'max-content',
-  middlewareData?: UseFloatingData['middlewareData'],
-): React.CSSProperties {
+export function convertFloatingDataToReactCSSProperties({
+  strategy,
+  x,
+  y,
+  initialWidth = 'max-content',
+  middlewareData,
+  getFloatingElementHiddenStyles = defaultGetFloatingElementHiddenStyles,
+}: ConvertFloatingDataArgs): React.CSSProperties {
   const styles: React.CSSProperties = {
     position: strategy,
     top: y,
@@ -40,8 +62,9 @@
   }
   if (middlewareData) {
     const hide = middlewareData.hide;
-    if (hide && hide.referenceHidden) {
-      styles['visibility'] = 'hidden';
+    if (hide) {
+      const hiddenStyles = getFloatingElementHiddenStyles(hide.referenceHidden || false);
+      hiddenStyles && Object.assign(styles, hiddenStyles);
     }
   }
   return styles;

packages/vkui/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -1,3 +1,4 @@
+import { type CSSProperties } from 'react';
 import {
   type FloatingPositionStrategy,
   type Placement,
@@ -96,6 +97,11 @@ export interface UseFloatingWithInteractionsProps {
    * Вызывается при каждом изменении видимости всплывающего элемента, но после завершении анимации.
    */
   onShownChanged?: OnShownChange;
+  /**
+   * Колбэк для установки стилей при скрытии всплывающего элемента.
+   * Работает только совместно со свойством `hideWhenReferenceHidden`
+   */
+  getFloatingElementHiddenStyles?: (hidden: boolean) => CSSProperties | undefined;
 }
 
 export type ReferenceProps<T = HTMLElement> = Omit<

packages/vkui/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts

@@ -37,6 +37,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   middlewares,
   hoverDelay = 0,
   closeAfterClick = false,
+  getFloatingElementHiddenStyles,
 
   // disables
   disabled = false,
@@ -329,13 +330,13 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   }, [triggerOnHover, triggerOnFocus, triggerOnClick]);
 
   if (shownFinalState) {
-    floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(
+    floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties({
       strategy,
       x,
       y,
-      undefined,
       middlewareData,
-    );
+      getFloatingElementHiddenStyles,
+    });
 
     if (disableInteractive) {
       floatingPropsRef.current.style.pointerEvents = 'none';