Update React ref objects to be explicitly nullable (where appropriate) (#3132)

bruugey · web-flow · commit 3471b94e9e3b · 2025-09-17T19:20:16.000Z
diff --git a/.changeset/kind-pans-rule.md b/.changeset/kind-pans-rule.md
@@ -0,0 +1,29 @@
+---
+'@leafygreen-ui/segmented-control': patch
+'@leafygreen-ui/expandable-card': patch
+'@leafygreen-ui/context-drawer': patch
+'@leafygreen-ui/password-input': patch
+'@lg-chat/fixed-chat-window': patch
+'@lg-chat/message-feedback': patch
+'@leafygreen-ui/preview-card': patch
+'@leafygreen-ui/search-input': patch
+'@leafygreen-ui/date-picker': patch
+'@lg-chat/message-rating': patch
+'@leafygreen-ui/resizable': patch
+'@lg-chat/message-feed': patch
+'@leafygreen-ui/combobox': patch
+'@leafygreen-ui/copyable': patch
+'@leafygreen-ui/tooltip': patch
+'@leafygreen-ui/ripple': patch
+'@leafygreen-ui/select': patch
+'@lg-chat/input-bar': patch
+'@leafygreen-ui/hooks': patch
+'@leafygreen-ui/table': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/code': patch
+'@leafygreen-ui/menu': patch
+'@lg-chat/message': patch
+'@leafygreen-ui/lib': patch
+---
+
+Update React ref objects to be explicitly nullable
diff --git a/chat/fixed-chat-window/src/FixedChatWindow/FixedChatWindow.tsx b/chat/fixed-chat-window/src/FixedChatWindow/FixedChatWindow.tsx
@@ -41,7 +41,7 @@ export const FixedChatWindow = forwardRef(
     }: FixedChatWindowProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const chatWindowRef = useRef<HTMLDivElement>(null);
+    const chatWindowRef = useRef<HTMLDivElement | null>(null);
     const [localOpen, setLocalOpen] = useState<boolean>(defaultOpen);
 
     const handleTriggerClick: MouseEventHandler<HTMLButtonElement> = e => {
diff --git a/chat/input-bar/src/InputBar/InputBar.spec.tsx b/chat/input-bar/src/InputBar/InputBar.spec.tsx
@@ -155,7 +155,7 @@ describe('packages/input-bar', () => {
 
   test('provides access to textarea element via textareaRef', () => {
     const TestComponent = () => {
-      const textareaRef = useRef<HTMLTextAreaElement>(null);
+      const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
       const handleClick = () => {
         if (textareaRef.current) {
diff --git a/chat/input-bar/src/InputBar/InputBar.tsx b/chat/input-bar/src/InputBar/InputBar.tsx
@@ -106,9 +106,9 @@ export const InputBar = forwardRef<HTMLFormElement, InputBarProps>(
     }
 
     const formRef = useForwardedRef(forwardedRef, null);
-    const focusContainerRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLUListElement>(null);
-    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const focusContainerRef = useRef<HTMLDivElement | null>(null);
+    const menuRef = useRef<HTMLUListElement | null>(null);
+    const internalTextareaRef = useRef<HTMLTextAreaElement | null>(null);
     const textareaRef = useMergeRefs([
       internalTextareaRef,
       externalTextareaRef,
diff --git a/chat/message-feed/src/MessageFeed/MessageFeed.tsx b/chat/message-feed/src/MessageFeed/MessageFeed.tsx
@@ -31,7 +31,7 @@ export const MessageFeed = forwardRef(
     const { darkMode, theme } = useDarkMode(darkModeProp);
     const { variant } = useLeafyGreenChatContext();
 
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement | null>(null);
     const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const [showScrollButton, setShowScrollButton] = useState(false);
diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx
@@ -72,7 +72,7 @@ export const InlineMessageFeedback = forwardRef(
     const textareaId = useIdAllocator({ prefix: 'lg-chat-imf-input' });
     const labelId = useIdAllocator({ prefix: 'lg-chat-imf-label' });
     const textareaRef: MutableRefObject<HTMLTextAreaElement | null> =
-      useRef<HTMLTextAreaElement>(null);
+      useRef<HTMLTextAreaElement | null>(null);
 
     const handleSubmit: FormEventHandler<HTMLFormElement> = async e => {
       e.preventDefault();
diff --git a/chat/message-rating/src/MessageRating/MessageRating.tsx b/chat/message-rating/src/MessageRating/MessageRating.tsx
@@ -52,8 +52,8 @@ export const MessageRating = forwardRef(
       );
     }
 
-    const likeButtonRef = useRef<HTMLButtonElement>(null);
-    const dislikeButtonRef = useRef<HTMLButtonElement>(null);
+    const likeButtonRef = useRef<HTMLButtonElement | null>(null);
+    const dislikeButtonRef = useRef<HTMLButtonElement | null>(null);
 
     const { value, handleChange, updateValue } = useControlledValue<
       MessageRatingProps['value']
diff --git a/chat/message/src/MessageBanner/MessageBanner.tsx b/chat/message/src/MessageBanner/MessageBanner.tsx
@@ -13,7 +13,7 @@ export function MessageBanner({
   variant = 'info',
   ...divProps
 }: MessageBannerProps) {
-  const bannerRef = useRef<HTMLDivElement>(null);
+  const bannerRef = useRef<HTMLDivElement | null>(null);
   const [isMultiline, setIsMultiline] = useState(false);
   const baseFontSize = useBaseFontSize();
   useEffect(() => {
diff --git a/packages/code/src/Code/Code.tsx b/packages/code/src/Code/Code.tsx
@@ -53,7 +53,7 @@ function Code({
   baseFontSize: baseFontSizeProp,
   ...rest
 }: CodeProps) {
-  const scrollableElementRef = useRef<HTMLPreElement>(null);
+  const scrollableElementRef = useRef<HTMLPreElement | null>(null);
   const [scrollState, setScrollState] = useState<ScrollState>(ScrollState.None);
   const [expanded, setExpanded] = useState(!expandable);
   const [numOfLinesOfCode, setNumOfLinesOfCode] = useState<number>();
diff --git a/packages/code/src/CopyButton/CopyButton.tsx b/packages/code/src/CopyButton/CopyButton.tsx
@@ -32,7 +32,7 @@ function CopyButton({ onCopy, contents, className, ...rest }: CopyProps) {
    * changes, it causes the tooltip to re-render
    */
   const [tooltipOpen, setTooltipOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const { theme } = useDarkMode();
   const { portalContainer } = usePopoverPortalContainer();
diff --git a/packages/combobox/src/Combobox/Combobox.tsx b/packages/combobox/src/Combobox/Combobox.tsx
@@ -146,11 +146,11 @@ export function Combobox<M extends boolean>({
   const labelId = useIdAllocator({ prefix: 'combobox-label' });
   const menuId = useIdAllocator({ prefix: 'combobox-menu' });
 
-  const comboboxRef = useRef<HTMLDivElement>(null);
-  const clearButtonRef = useRef<HTMLButtonElement>(null);
-  const inputWrapperRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
+  const comboboxRef = useRef<HTMLDivElement | null>(null);
+  const clearButtonRef = useRef<HTMLButtonElement | null>(null);
+  const inputWrapperRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
 
   const [isOpen, setOpen] = useState(false);
   const wasOpen = usePrevious(isOpen);
diff --git a/packages/context-drawer/src/ContextDrawer/ContextDrawer.tsx b/packages/context-drawer/src/ContextDrawer/ContextDrawer.tsx
@@ -47,8 +47,8 @@ export const ContextDrawer = forwardRef<HTMLDivElement, ContextDrawerProps>(
     );
     const lgIds = getLgIds(dataLgId);
 
-    const contentRef = useRef<HTMLDivElement>(null);
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
+    const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
     const { ref: topInterceptRef, inView: isTopInView } = useInView({
       root: scrollContainerRef.current,
diff --git a/packages/copyable/src/Copyable/Copyable.tsx b/packages/copyable/src/Copyable/Copyable.tsx
@@ -59,7 +59,7 @@ export default function Copyable({
   const [copied, setCopied] = useState(false);
   const [showCopyButton, setShowCopyButton] = useState(false);
   const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);
-  const codeRef = useRef<HTMLElement>(null);
+  const codeRef = useRef<HTMLElement | null>(null);
 
   const { portalContainer } = usePopoverPortalContainer();
 
diff --git a/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx b/packages/date-picker/src/DatePicker/DatePickerContent/DatePickerContent.tsx
@@ -44,7 +44,7 @@ export const DatePickerContent = forwardRef<
   const prevMax = usePrevious(max);
 
   const formFieldRef = useForwardedRef(fwdRef, null);
-  const menuRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
   const prevDisabledValue = usePrevious(disabled);
 
   useBackdropClick(closeMenu, [formFieldRef, menuRef], {
diff --git a/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts b/packages/date-picker/src/DatePicker/DatePickerContext/useDatePickerComponentRefs.ts
@@ -12,10 +12,10 @@ export const useDateRangeComponentRefs = (): DatePickerComponentRefs => {
 
   const calendarCellRefs = useDynamicRefs<HTMLTableCellElement>();
 
-  const calendarButtonRef = useRef<HTMLButtonElement>(null);
+  const calendarButtonRef = useRef<HTMLButtonElement | null>(null);
 
-  const leftChevronRef = useRef<HTMLButtonElement>(null);
-  const rightChevronRef = useRef<HTMLButtonElement>(null);
+  const leftChevronRef = useRef<HTMLButtonElement | null>(null);
+  const rightChevronRef = useRef<HTMLButtonElement | null>(null);
   const chevronButtonRefs = {
     left: leftChevronRef,
     right: rightChevronRef,
diff --git a/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx b/packages/date-picker/src/DatePicker/DatePickerMenu/DatePickerMenu.tsx
@@ -63,8 +63,8 @@ export const DatePickerMenu = forwardRef<HTMLDivElement, DatePickerMenuProps>(
 
     const ref = useForwardedRef(fwdRef, null);
     const cellRefs = refs.calendarCellRefs;
-    const headerRef = useRef<HTMLDivElement>(null);
-    const calendarRef = useRef<HTMLTableElement>(null);
+    const headerRef = useRef<HTMLDivElement | null>(null);
+    const calendarRef = useRef<HTMLTableElement | null>(null);
 
     const prevValue = usePrevious(value);
 
diff --git a/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx b/packages/expandable-card/src/ExpandableCard/ExpandableCard.tsx
@@ -85,8 +85,8 @@ const ExpandableCard = ({
   };
 
   // Keep track of the children wrapper
-  const childrenInnerRef = useRef<HTMLDivElement>(null);
-  const childrenWrapperRef = useRef<HTMLDivElement>(null);
+  const childrenInnerRef = useRef<HTMLDivElement | null>(null);
+  const childrenWrapperRef = useRef<HTMLDivElement | null>(null);
 
   const [childrenHeight, setChildrenHeight] = useState(0);
 
diff --git a/packages/hooks/src/useAutoScroll/useAutoScroll.stories.tsx b/packages/hooks/src/useAutoScroll/useAutoScroll.stories.tsx
@@ -31,7 +31,7 @@ export default meta;
 
 export const Basic = ({ selected }: { selected?: number }) => {
   const data = range(testItems);
-  const menuRef = useRef<HTMLUListElement>(null);
+  const menuRef = useRef<HTMLUListElement | null>(null);
   const itemRefs = useDynamicRefs<HTMLLIElement>({ prefix: 'item' });
 
   useAutoScroll(itemRefs(`${selected}`), menuRef);
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx b/packages/hooks/src/useControlledValue/useControlledValue.spec.tsx
@@ -258,7 +258,7 @@ describe('packages/hooks/useControlledValue', () => {
       handlerProp?: ChangeEventHandler;
     }) => {
       const initialVal = '';
-      const inputRef = useRef<HTMLInputElement>(null);
+      const inputRef = useRef<HTMLInputElement | null>(null);
 
       const { value, handleChange, updateValue } = useControlledValue(
         valueProp,
diff --git a/packages/lib/src/createSyntheticEvent/createSyntheticEvent.spec.tsx b/packages/lib/src/createSyntheticEvent/createSyntheticEvent.spec.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import { createSyntheticEvent, HTMLElementProps } from '..';
 
 const MyInputComponent = ({ onChange }: HTMLElementProps<'input'>) => {
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleClick = () => {
     const nativeEvent = new Event('change', { bubbles: true });
diff --git a/packages/menu/src/Menu/Menu.tsx b/packages/menu/src/Menu/Menu.tsx
@@ -89,7 +89,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(function Menu(
   const lgIds = getLgIds(dataLgId);
 
   const popoverRef = useRef<HTMLDivElement | null>(null);
-  const defaultTriggerRef = useRef<HTMLElement>(null);
+  const defaultTriggerRef = useRef<HTMLElement | null>(null);
   const triggerRef = refEl ?? defaultTriggerRef;
   const keyboardUsedRef = useRef<boolean>(false);
 
diff --git a/packages/menu/src/SubMenu/SubMenu.tsx b/packages/menu/src/SubMenu/SubMenu.tsx
@@ -92,8 +92,8 @@ export const SubMenu = InferredPolymorphic<InternalSubMenuProps, 'button'>(
       }
     }, [rest.active, setOpen]);
 
-    const submenuRef = useRef<HTMLUListElement>(null);
-    const submenuTriggerRef = useRef<HTMLButtonElement>(null);
+    const submenuRef = useRef<HTMLUListElement | null>(null);
+    const submenuTriggerRef = useRef<HTMLButtonElement | null>(null);
     const subMenuHeight = useChildrenHeight(submenuRef, [open]);
 
     const handleClick: MouseEventHandler<
diff --git a/packages/password-input/src/PasswordInput.stories.tsx b/packages/password-input/src/PasswordInput.stories.tsx
@@ -175,7 +175,7 @@ export const CustomContainer = ({
   stateNotifications,
   ...rest
 }: PasswordInputProps) => {
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLInputElement | null>(null);
   return (
     <div
       style={{
diff --git a/packages/preview-card/src/PreviewCard/PreviewCard.tsx b/packages/preview-card/src/PreviewCard/PreviewCard.tsx
@@ -44,7 +44,7 @@ export const PreviewCard = forwardRef<HTMLDivElement, PreviewCardProps>(
     );
     const lgIds = getLgIds(dataLgId);
 
-    const contentRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement | null>(null);
 
     const id = useIdAllocator({ prefix: 'preview-card', id: idProp });
     const contentId = `${id}-content`;
diff --git a/packages/resizable/src/useResizable/useResizable.ts b/packages/resizable/src/useResizable/useResizable.ts
@@ -42,7 +42,7 @@ export const useResizable = <T extends HTMLElement = HTMLDivElement>({
   onResize,
   position,
 }: ResizableProps): ResizableReturn<T> => {
-  const resizableRef = useRef<T>(null);
+  const resizableRef = useRef<T | null>(null);
   const [isResizing, setIsResizing] = useState<boolean>(false);
   // Refs to store initial mouse position and element size at the start of a drag
   const initialMousePos = useRef<Readonly<{ x: number; y: number }>>({
diff --git a/packages/ripple/src/Ripple.spec.tsx b/packages/ripple/src/Ripple.spec.tsx
@@ -11,7 +11,7 @@ const buttonOptions: Options = { backgroundColor: 'black' };
 type Global = Omit<LGWindow, 'name'>;
 
 function ButtonWrapper() {
-  const ref = useRef<HTMLButtonElement>(null);
+  const ref = useRef<HTMLButtonElement | null>(null);
   const unregisterRipple = useRef<() => void>();
 
   useEffect(() => {
diff --git a/packages/search-input/src/SearchInput/SearchInput.tsx b/packages/search-input/src/SearchInput/SearchInput.tsx
@@ -94,11 +94,11 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
     const closeMenu = () => setOpen(false);
     const openMenu = () => setOpen(true);
 
-    const formRef = useRef<HTMLFormElement>(null);
-    const searchBoxRef = useRef<HTMLDivElement>(null);
-    const menuRef = useRef<HTMLUListElement>(null);
+    const formRef = useRef<HTMLFormElement | null>(null);
+    const searchBoxRef = useRef<HTMLDivElement | null>(null);
+    const menuRef = useRef<HTMLUListElement | null>(null);
     const inputRef = useForwardedRef(forwardRef, null);
-    const clearButtonRef = useRef<HTMLButtonElement>(null);
+    const clearButtonRef = useRef<HTMLButtonElement | null>(null);
     const resultRefs = useDynamicRefs<HTMLElement>({ prefix: 'result' });
     const [focusedElement, trackFocusedElement] = useState<Element>();
     const highlightedElementRef = resultRefs(`${highlightIndex}`);
diff --git a/packages/segmented-control/src/SegmentedControlOption/SegmentedControlOption.tsx b/packages/segmented-control/src/SegmentedControlOption/SegmentedControlOption.tsx
@@ -68,7 +68,7 @@ export const SegmentedControlOption =
       };
 
       const didComponentMount = useRef(false);
-      const buttonRef = useRef<HTMLButtonElement>(null);
+      const buttonRef = useRef<HTMLButtonElement | null>(null);
       useEffect(() => {
         // Check if the component did mount
         if (didComponentMount.current) {
diff --git a/packages/select/src/Option/Option.tsx b/packages/select/src/Option/Option.tsx
@@ -31,7 +31,7 @@ export function InternalOption({
 
   const { option: colorSet } = colorSets[theme];
 
-  const ref = useRef<HTMLLIElement>(null);
+  const ref = useRef<HTMLLIElement | null>(null);
 
   const scrollIntoView = useCallback(() => {
     if (ref.current == null) {
diff --git a/packages/table/src/utils/stories.testutils.tsx b/packages/table/src/utils/stories.testutils.tsx
@@ -26,7 +26,7 @@ import { makeKitchenSinkData, Person } from './makeData.testutils';
 type StoryTableProps = TableProps<any>;
 
 export const DynamicDataComponent: StoryFn<StoryTableProps> = args => {
-  const tableContainerRef = React.useRef<HTMLDivElement>(null);
+  const tableContainerRef = React.useRef<HTMLDivElement | null>(null);
   const [data] = useState(() => makeKitchenSinkData(10));
   const [showEmoji, setShowEmoji] = useState(true);
 
diff --git a/packages/toast/src/ToastContainer/ToastContainer.tsx b/packages/toast/src/ToastContainer/ToastContainer.tsx
@@ -67,8 +67,8 @@ export const ToastContainer = ({
 }: ToastContainerProps) => {
   const { popToast, getToast } = useToast();
   const regionId = useIdAllocator({ id: 'lg-toast-region' });
-  const toastContainerRef = useRef<HTMLDivElement>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const toastContainerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const getToastRef = useDynamicRefs<HTMLDivElement>({ prefix: 'toast' });
   const { theme } = useDarkMode();
   // Track hover state
diff --git a/packages/tooltip/src/Tooltip/Tooltip.tsx b/packages/tooltip/src/Tooltip/Tooltip.tsx
@@ -109,7 +109,7 @@ function Tooltip({
   const setOpen =
     isControlled && controlledSetOpen ? controlledSetOpen : uncontrolledSetOpen;
 
-  const tooltipRef = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
 
   const existingId = id ?? tooltipRef.current?.id;
   const tooltipId = useIdAllocator({ prefix: 'tooltip', id: existingId });

Original file line number	Diff line number	Diff line change
`@@ -52,8 +52,8 @@ export const MessageRating = forwardRef(`
`52`	`52`	`);`
`53`	`53`	`}`
`54`	`54`
`55`		`- const likeButtonRef = useRef<HTMLButtonElement>(null);`
`56`		`- const dislikeButtonRef = useRef<HTMLButtonElement>(null);`
	`55`	`+ const likeButtonRef = useRef<HTMLButtonElement \| null>(null);`
	`56`	`+ const dislikeButtonRef = useRef<HTMLButtonElement \| null>(null);`
`57`	`57`
`58`	`58`	`const { value, handleChange, updateValue } = useControlledValue<`
`59`	`59`	`MessageRatingProps['value']`