ref(utils): simplify useDimensions runtime and types

Author: JoshuaKGoldberg

static/app/components/charts/chartLegend.tsx

@@ -72,7 +72,7 @@ export function ChartLegend({items, selected, onSelectionChange}: ChartLegendPro
 
   // ResizeObserver (via useDimensions) updates wrapperWidth on resize,
   // which triggers the useLayoutEffect below to recompute overflow.
-  const {width: wrapperWidth} = useDimensions({elementRef: wrapperRef});
+  const {width: wrapperWidth} = useDimensions(wrapperRef);
   const [firstOverflowIndex, setFirstOverflowIndex] = useState<number | null>(null);
 
   useLayoutEffect(() => {

static/app/components/checkInTimeline/checkInTimeline.stories.tsx

@@ -82,7 +82,7 @@ function generateMockTickData(
 export default Storybook.story('CheckInTimeline', story => {
   story('Simple', () => {
     const elementRef = useRef<HTMLDivElement>(null);
-    const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});
+    const {width: timelineWidth} = useDimensions(elementRef);
     const timeWindowConfig = useTimeWindowConfig({timelineWidth});
 
     const [secondsGap, setSecondsGap] = useState(60);

static/app/components/contentSliderDiff/index.tsx

@@ -31,7 +31,7 @@ interface Props {
  */
 function Body({onDragHandleMouseDown, after, before, minHeight = '0px'}: Props) {
   const positionedRef = useRef<HTMLDivElement>(null);
-  const viewDimensions = useDimensions({elementRef: positionedRef});
+  const viewDimensions = useDimensions(positionedRef);
 
   return (
     <OverflowVisibleContainer>

static/app/components/feedback/feedbackItem/feedbackItemHeader.tsx

@@ -35,7 +35,7 @@ function dimensionsToSize({width}: Dimensions) {
 
 export function FeedbackItemHeader({eventData, feedbackItem, onBackToList}: Props) {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const dimensions = useDimensions({elementRef: wrapperRef});
+  const dimensions = useDimensions(wrapperRef);
 
   return (
     <VerticalSpacing ref={wrapperRef}>

static/app/components/replays/breadcrumbs/replayTimeline.tsx

@@ -23,7 +23,7 @@ export function ReplayTimeline() {
   const [timelineScale] = useTimelineScale();
 
   const stackedRef = useRef<HTMLDivElement>(null);
-  const {width} = useDimensions<HTMLDivElement>({elementRef: stackedRef});
+  const {width} = useDimensions(stackedRef);
 
   if (!replay) {
     return <Placeholder height="20px" />;

static/app/components/replays/player/replayPlayerMeasurer.tsx

@@ -48,7 +48,7 @@ const MAX_ZOOM = 1.5;
 
 export function ReplayPlayerMeasurer({children, measure = 'both'}: Props) {
   const elementRef = useRef<HTMLDivElement>(null);
-  const measuredDimensions = useDimensions({elementRef});
+  const measuredDimensions = useDimensions(elementRef);
   const playerState = useReplayPlayerState();
   const [, setViewSize] = useReplayPlayerSize();
 

static/app/components/searchQueryBuilder/context.tsx

@@ -241,7 +241,7 @@ export function SearchQueryBuilderProvider({
     searchSource,
     onSearch,
   });
-  const {width: searchBarWidth} = useDimensions({elementRef: wrapperRef});
+  const {width: searchBarWidth} = useDimensions(wrapperRef);
   const size =
     searchBarWidth && searchBarWidth < 600 ? ('small' as const) : ('normal' as const);
 

static/app/components/searchQueryBuilder/index.tsx

@@ -280,7 +280,7 @@ function SearchQueryBuilderUI({
     dispatch({type: 'UPDATE_QUERY', query: initialQuery});
   }, [dispatch, initialQuery]);
 
-  const {width: actionBarWidth} = useDimensions({elementRef: actionBarRef});
+  const {width: actionBarWidth} = useDimensions(actionBarRef);
 
   return (
     <Wrapper

static/app/utils/useDimensions.tsx

@@ -2,14 +2,10 @@ import type {RefObject} from 'react';
 import {useCallback, useLayoutEffect, useState} from 'react';
 import {useResizeObserver} from '@react-aria/utils';
 
-interface Props<Element extends HTMLElement> {
-  elementRef: RefObject<Element | null>;
-}
-
 /**
  * Returns a ref to be added to an element and returns the dimensions of that element
  */
-export function useDimensions<Element extends HTMLElement>({elementRef}: Props<Element>) {
+export function useDimensions(elementRef: RefObject<HTMLElement | null>) {
   const [dimensions, setDimensions] = useState({height: 0, width: 0});
 
   const element = elementRef.current;

static/app/views/alerts/rules/uptime/detailsTimeline.tsx

@@ -26,7 +26,7 @@ interface Props {
 export function DetailsTimeline({uptimeDetector, onStatsLoaded}: Props) {
   const {id} = uptimeDetector;
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: containerWidth} = useDimensions(elementRef);
   const timelineWidth = useDebouncedValue(containerWidth, 500);
 
   const timeWindowConfig = useTimeWindowConfig({