refactor: Change type from ClientRect to DOMRect (#2481)

Co-authored-by: Chance Strickland <[email protected]>
radix-ui · Sep 26, 2024 · 41595ce · 41595ce
1 parent 6ac3863
commit 41595ce
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/packages/core/rect/src/observeElementRect.ts b/packages/core/rect/src/observeElementRect.ts
@@ -1,4 +1,4 @@
-type Measurable = { getBoundingClientRect(): ClientRect };
+type Measurable = { getBoundingClientRect(): DOMRect };
 
 /**
  * Observes an element's rectangle on screen (getBoundingClientRect)
@@ -16,7 +16,7 @@ function observeElementRect(
   if (observedData === undefined) {
     // add the element to the map of observed elements with its first callback
     // because this is the first time this element is observed
-    observedElements.set(elementToObserve, { rect: {} as ClientRect, callbacks: [callback] });
+    observedElements.set(elementToObserve, { rect: {} as DOMRect, callbacks: [callback] });
 
     if (observedElements.size === 1) {
       // start the internal loop once at least 1 element is observed
@@ -54,10 +54,10 @@ function observeElementRect(
 // ========================================================================
 // module internals
 
-type CallbackFn = (rect: ClientRect) => void;
+type CallbackFn = (rect: DOMRect) => void;
 
 type ObservedData = {
-  rect: ClientRect;
+  rect: DOMRect;
   callbacks: Array<CallbackFn>;
 };
 
@@ -91,7 +91,7 @@ function runLoop() {
 /**
  * Returns whether 2 rects are equal in values
  */
-function rectEquals(rect1: ClientRect, rect2: ClientRect) {
+function rectEquals(rect1: DOMRect, rect2: DOMRect) {
   return (
     rect1.width === rect2.width &&
     rect1.height === rect2.height &&

diff --git a/packages/react/scroll-area/src/ScrollArea.tsx b/packages/react/scroll-area/src/ScrollArea.tsx
@@ -678,7 +678,7 @@ const ScrollAreaScrollbarImpl = React.forwardRef<
   const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);
   const [scrollbar, setScrollbar] = React.useState<ScrollAreaScrollbarElement | null>(null);
   const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));
-  const rectRef = React.useRef<ClientRect | null>(null);
+  const rectRef = React.useRef<DOMRect | null>(null);
   const prevWebkitUserSelectRef = React.useRef<string>('');
   const viewport = context.viewport;
   const maxScrollPos = sizes.content - sizes.viewport;

diff --git a/packages/react/slider/src/Slider.tsx b/packages/react/slider/src/Slider.tsx
@@ -246,7 +246,7 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
     } = props;
     const [slider, setSlider] = React.useState<SliderImplElement | null>(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));
-    const rectRef = React.useRef<ClientRect>();
+    const rectRef = React.useRef<DOMRect>();
     const direction = useDirection(dir);
     const isDirectionLTR = direction === 'ltr';
     const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);
@@ -322,7 +322,7 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
     } = props;
     const sliderRef = React.useRef<SliderImplElement>(null);
     const ref = useComposedRefs(forwardedRef, sliderRef);
-    const rectRef = React.useRef<ClientRect>();
+    const rectRef = React.useRef<DOMRect>();
     const isSlidingFromBottom = !inverted;
 
     function getValueFromPointer(pointerPosition: number) {

diff --git a/packages/react/use-rect/src/useRect.tsx b/packages/react/use-rect/src/useRect.tsx
@@ -8,7 +8,7 @@ import type { Measurable } from '@radix-ui/rect';
  * and observe it along time.
  */
 function useRect(measurable: Measurable | null) {
-  const [rect, setRect] = React.useState<ClientRect>();
+  const [rect, setRect] = React.useState<DOMRect>();
   React.useEffect(() => {
     if (measurable) {
       const unobserve = observeElementRect(measurable, setRect);