ref(utils): simplify useDimensions types by removing type parameter (#112460)

Following up on #112374, I noted two things that could be simplified
with `useDimensions`:

* ~Runtime: it takes in an options object, but there's only one
property. This means every call creates a new JS object. This is a
little papercut for performance (almost certainly not impactful on its
own, but they add up).~ This is intentional and preferred; reverted.
* Types: its type parameter is unnecessary, and only bypasses
[`@typescript-eslint/no-unnecessary-type-parameters`](https://typescript-eslint.io/rules/no-unnecessary-type-parameters)
because it forwards the type parameter to `RefObject`
(https://typescript-eslint.io/rules/no-unnecessary-type-parameters/#limitations)

Author: JoshuaKGoldberg

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/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({elementRef: stackedRef});
 
   if (!replay) {
     return <Placeholder height="20px" />;

static/app/utils/useDimensions.tsx

@@ -2,14 +2,14 @@ import type {RefObject} from 'react';
 import {useCallback, useLayoutEffect, useState} from 'react';
 import {useResizeObserver} from '@react-aria/utils';
 
-interface Props<Element extends HTMLElement> {
+interface Props {
   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}: Props) {
   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({

static/app/views/detectors/components/detectorListTable/index.tsx

@@ -139,7 +139,7 @@ export function DetectorListTable({
   );
 
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: containerWidth} = useDimensions({elementRef});
   const timelineWidth = useDebouncedValue(containerWidth, 1000);
   const timeWindowConfig = useTimeWindowConfig({timelineWidth});
 

static/app/views/detectors/hooks/useMonitorsScheduleSamples.tsx

@@ -29,7 +29,7 @@ export function useMonitorsScheduleSamples({
   ...detectorFields
 }: UseMonitorsScheduleSamplesOptions) {
   const timeLineWidthTrackerRef = useRef<HTMLDivElement>(null);
-  const {width: timelineWidth} = useDimensions<HTMLDivElement>({
+  const {width: timelineWidth} = useDimensions({
     elementRef: timeLineWidthTrackerRef,
   });
 

static/app/views/detectors/list/cron.tsx

@@ -56,7 +56,7 @@ function VisualizationCell({detector}: {detector: CronDetector}) {
   const cronEnvironments = detector.dataSources[0].queryObj.environments;
 
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: containerWidth} = useDimensions({elementRef});
   const timelineWidth = useDebouncedValue(containerWidth, 1000);
   const timeWindowConfig = useTimeWindowConfig({timelineWidth});
   const {data: monitorStats, isPending} = useMonitorStats({

static/app/views/detectors/list/uptime.tsx

@@ -33,7 +33,7 @@ function VisualizationCell({detector}: {detector: UptimeDetector}) {
   const uptimeDetectorId = detector.id;
 
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: containerWidth} = useDimensions({elementRef});
   const timelineWidth = useDebouncedValue(containerWidth, 1000);
   const timeWindowConfig = useTimeWindowConfig({timelineWidth});
 

static/app/views/insights/crons/components/detailsTimeline.tsx

@@ -47,7 +47,7 @@ export function DetailsTimeline({monitor, onStatsLoaded, onEnvironmentUpdated}:
   const queryClient = useQueryClient();
 
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: containerWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: containerWidth} = useDimensions({elementRef});
   const timelineWidth = useDebouncedValue(containerWidth, 500);
 
   // Use the nextCheckIn timestamp from the earliest scheduled environment as a

static/app/views/insights/crons/components/mockTimelineVisualization.tsx

@@ -63,7 +63,7 @@ export function MockTimelineVisualization({schedule}: Props) {
   };
 
   const elementRef = useRef<HTMLDivElement>(null);
-  const {width: timelineWidth} = useDimensions<HTMLDivElement>({elementRef});
+  const {width: timelineWidth} = useDimensions({elementRef});
 
   const sampleDataQueryKey = [
     getApiUrl('/organizations/$organizationIdOrSlug/monitors-schedule-data/', {