diff --git a/packages/core/rect/src/observeElementRect.ts b/packages/core/rect/src/observeElementRect.ts index fad83f8a8e..4af39b4da6 100644 --- 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; }; @@ -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 index 07efafad63..ee1195d715 100644 --- 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(null); const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node)); - const rectRef = React.useRef(null); + const rectRef = React.useRef(null); const prevWebkitUserSelectRef = React.useRef(''); 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 index 5bf2e7dd19..00288e74ae 100644 --- a/packages/react/slider/src/Slider.tsx +++ b/packages/react/slider/src/Slider.tsx @@ -246,7 +246,7 @@ const SliderHorizontal = React.forwardRef(null); const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node)); - const rectRef = React.useRef(); + const rectRef = React.useRef(); const direction = useDirection(dir); const isDirectionLTR = direction === 'ltr'; const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted); @@ -322,7 +322,7 @@ const SliderVertical = React.forwardRef(null); const ref = useComposedRefs(forwardedRef, sliderRef); - const rectRef = React.useRef(); + const rectRef = React.useRef(); 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 index 7bc2c6377c..4af36b35cc 100644 --- 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(); + const [rect, setRect] = React.useState(); React.useEffect(() => { if (measurable) { const unobserve = observeElementRect(measurable, setRect);