[NO-TICKET] Remove deprecated ref types (#3868)

* Remove deprecated types

* Update snapshots

* Update snapshot

Author: jack-ryan-nava-pbc

packages/design-system/src/components/Autocomplete/Autocomplete.tsx

@@ -87,7 +87,7 @@ export interface AutocompleteProps {
   /**
    * Access a reference to the child `TextField`'s `input` element
    */
-  inputRef?: React.Ref<any> | React.MutableRefObject<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   /**
    * Array of objects used to populate the suggestion list that appears below the input as users type.
    * Passing an empty array will show a "No results" message. If you do not yet want to show results,

packages/design-system/src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ export type ButtonSize = 'small' | 'big';
 
 export type ButtonVariation = 'solid' | 'ghost';
 
-export type ButtonRef = React.Ref<any> | React.MutableRefObject<any>;
+export type ButtonRef = React.Ref<any> | React.RefObject<any>;
 
 interface CommonButtonProps extends AnalyticsOverrideProps, AnalyticsParentDataProps {
   /**

packages/design-system/src/components/ChoiceList/Choice.tsx

@@ -56,7 +56,7 @@ export interface BaseChoiceProps {
   /**
    * Access a reference to the `input` element
    */
-  inputRef?: React.Ref<any> | React.MutableRefObject<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   /**
    * A unique ID to be used for the input field, as well as the label's
    * `for` attribute. A unique ID will be generated if one isn't provided.

packages/design-system/src/components/DateField/DateInput.tsx

@@ -1,5 +1,5 @@
 import { DateObject } from './defaultDateFormatter';
-import { MutableRefObject, PureComponent } from 'react';
+import { RefObject, PureComponent } from 'react';
 import type * as React from 'react';
 import TextField from '../TextField/TextField';
 import classNames from 'classnames';
@@ -72,7 +72,7 @@ export interface DateInputProps {
   /**
    * Access a reference to the day `input`
    */
-  dayFieldRef?: MutableRefObject<any> | ((...args: any[]) => any);
+  dayFieldRef?: RefObject<any> | ((...args: any[]) => any);
   /**
    * Apply error styling to the day `input`
    */
@@ -102,7 +102,7 @@ export interface DateInputProps {
   /**
    * Access a reference to the month `input`
    */
-  monthFieldRef?: MutableRefObject<any> | ((...args: any[]) => any);
+  monthFieldRef?: RefObject<any> | ((...args: any[]) => any);
   /**
    * Apply error styling to the month `input`
    */
@@ -120,7 +120,7 @@ export interface DateInputProps {
   /**
    * Access a reference to the year `input`
    */
-  yearFieldRef?: MutableRefObject<any> | ((...args: any[]) => any);
+  yearFieldRef?: RefObject<any> | ((...args: any[]) => any);
   /**
    * Apply error styling to the year `input`
    */

packages/design-system/src/components/Drawer/Drawer.tsx

@@ -49,7 +49,7 @@ export interface DrawerProps {
   /**
    * Ref to heading element
    */
-  headingRef?: React.MutableRefObject<any>;
+  headingRef?: React.RefObject<any>;
   /**
    * Enables "sticky" position of Drawer header element.
    */

packages/design-system/src/components/Dropdown/Dropdown.tsx

@@ -70,7 +70,7 @@ export interface BaseDropdownProps {
   /**
    * Access a reference to the `button` element
    */
-  inputRef?: React.Ref<any> | React.MutableRefObject<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   /**
    * Set to `true` to apply the "inverse" color scheme
    */

packages/design-system/src/components/NativeDialog/NativeDialog.tsx

@@ -8,7 +8,7 @@ export interface NativeDialogProps extends Omit<DialogHTMLAttributes<HTMLElement
    * Pass `true` to have the dialog close when its backdrop pseudo-element is clicked
    */
   backdropClickExits?: boolean;
-  boundingBoxRef?: React.MutableRefObject<any>;
+  boundingBoxRef?: React.RefObject<any>;
   /**
    * Controls whether the dialog is in an open state
    */

packages/design-system/src/components/TextField/TextField.tsx

@@ -45,7 +45,7 @@ interface BaseTextFieldProps {
   /**
    * Access a reference to the `input` or `textarea` element
    */
-  inputRef?: React.Ref<any> | React.MutableRefObject<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   /**
    * Set to `true` to apply the "inverse" color scheme
    */

packages/design-system/src/components/TextField/TextInput.tsx

@@ -52,7 +52,7 @@ export type TextInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, OmitP
    * applicable if this is a multiline field.
    */
   rows?: TextInputRows;
-  inputRef?: React.Ref<any> | React.MutableRefObject<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   /**
    * Set the max-width of the input either to `'small'` or `'medium'`.
    */

packages/design-system/src/components/utilities/mergeRefs.ts

@@ -4,14 +4,14 @@
  * Borrowed from https://github.com/gregberge/react-merge-refs/blob/main/src/index.tsx
  */
 export default function mergeRefs<T = any>(
-  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+  refs: Array<React.RefObject<T> | React.Ref<T>>
 ): React.RefCallback<T> {
   return (value) => {
     refs.forEach((ref) => {
       if (typeof ref === 'function') {
         ref(value);
       } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
+        (ref as React.RefObject<T | null>).current = value;
       }
     });
   };