@dxos/react-ui 0.7.5-main.9cb18ac → 0.7.5-main.9d2a38b

package/src/components/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 import React, { forwardRef, type FunctionComponent } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type TooltipProviderProps = TooltipProviderPrimitiveProps;
@@ -52,19 +53,22 @@ const TooltipArrow = forwardRef<SVGSVGElement, TooltipArrowProps>(({ classNames,
 
 type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
 
-const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  return (
-    <TooltipContentPrimitive
-      sideOffset={4}
-      collisionPadding={8}
-      {...props}
-      className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  ({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    return (
+      <TooltipContentPrimitive
+        sideOffset={4}
+        {...props}
+        collisionPadding={safeCollisionPadding}
+        className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 export const Tooltip = {
   Provider: TooltipProvider,

package/src/hooks/index.ts

@@ -4,6 +4,7 @@
 
 export * from './useDensityContext';
 export * from './useElevationContext';
+export * from './useSafeArea';
 export * from './useTranslationsContext';
 export * from './useThemeContext';
 export * from './useVisualViewport';

package/src/hooks/useSafeArea.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useState } from 'react';
+
+import { useResize } from '@dxos/react-hooks';
+
+export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
+
+export const initialSafeArea = { top: NaN, right: NaN, bottom: NaN, left: NaN };
+
+export const useSafeArea = (): SafeAreaPadding => {
+  const [padding, setPadding] = useState<SafeAreaPadding>(initialSafeArea);
+  const handleResize = useCallback(() => {
+    setPadding({
+      top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')),
+      right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-right')),
+      bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom')),
+      left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
+    });
+  }, []);
+  useResize(handleResize);
+  return padding;
+};

package/src/hooks/useSafeCollisionPadding.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type TooltipContentProps } from '@radix-ui/react-tooltip';
+import { useMemo } from 'react';
+
+import { type SafeAreaPadding } from './useSafeArea';
+import { useThemeContext } from './useThemeContext';
+
+type PaddingProp = TooltipContentProps['collisionPadding'];
+type PaddingRecord = Exclude<PaddingProp, number | undefined>;
+
+const propIsNumber = (prop: PaddingProp): prop is number => Number.isFinite(prop);
+const propsIsRecord = (prop: PaddingProp): prop is PaddingRecord => !!(prop && typeof prop === 'object');
+
+const safePadding = (
+  propsPadding: TooltipContentProps['collisionPadding'],
+  safePadding: SafeAreaPadding,
+  side: keyof SafeAreaPadding,
+) => {
+  return (
+    (propIsNumber(safePadding[side]) ? safePadding[side] : 0) +
+    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0)
+  );
+};
+
+export const useSafeCollisionPadding = (collisionPadding?: PaddingProp) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(
+    () => ({
+      top: safePadding(collisionPadding, safeAreaPadding!, 'top'),
+      right: safePadding(collisionPadding, safeAreaPadding!, 'right'),
+      bottom: safePadding(collisionPadding, safeAreaPadding!, 'bottom'),
+      left: safePadding(collisionPadding, safeAreaPadding!, 'left'),
+    }),
+    [collisionPadding, safeAreaPadding],
+  );
+};

package/src/hooks/useVisualViewport.ts

@@ -2,23 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useCallback, type useEffect, useState } from 'react';
+
+import { useResize } from '@dxos/react-hooks';
 
 export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.visualViewport) {
-        setWidth(window.visualViewport.width);
-        setHeight(window.visualViewport.height);
-      }
-    };
-    window.visualViewport?.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.visualViewport?.removeEventListener('resize', handleResize);
-  }, deps ?? []);
+  const handleResize = useCallback(() => {
+    if (window.visualViewport) {
+      setWidth(window.visualViewport.width);
+      setHeight(window.visualViewport.height);
+    }
+  }, []);
+
+  useResize(handleResize);
 
   return { width, height };
 };