fix: update types for React 19 compatibility (#2522)

e-yushkiavichus · web-flow · commit 2f16669e2ffa · 2025-12-22T14:45:51.000+03:00
diff --git a/src/components/Drawer/components/Drawer.tsx b/src/components/Drawer/components/Drawer.tsx
@@ -145,7 +145,13 @@ export const Drawer = ({
 
     const role = useRole(context, {role: 'dialog'});
     const {getFloatingProps} = useInteractions([dismiss, role]);
-    const handleFloatingRef = useForkRef<HTMLDivElement>(refs.setFloating, floatingRef);
+    /*
+     *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+     */
+    const handleFloatingRef = useForkRef<HTMLDivElement>(
+        refs.setFloating,
+        floatingRef as React.Ref<HTMLDivElement>,
+    );
 
     const portal =
         isMounted || keepMounted ? (
diff --git a/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx b/src/components/DropdownMenu/DropdownMenuNavigationContext.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 export type DropdownMenuNavigationContextType = {
     activeMenuPath: number[];
     setActiveMenuPath: (path: number[]) => void;
-    anchorRef: React.RefObject<HTMLDivElement>;
+    anchorRef: React.RefObject<HTMLDivElement | null>;
 };
 
 const rootMenuPath: number[] = [];
@@ -19,7 +19,7 @@ export const DropdownMenuNavigationContext = React.createContext<DropdownMenuNav
 );
 
 export type DropdownMenuNavigationContextProviderProps = {
-    anchorRef: React.RefObject<HTMLDivElement>;
+    anchorRef: React.RefObject<HTMLDivElement | null>;
     children: React.ReactNode;
     disabled: boolean;
 };
diff --git a/src/components/DropdownMenu/DropdownMenuPopup.tsx b/src/components/DropdownMenu/DropdownMenuPopup.tsx
@@ -21,7 +21,7 @@ import {stringifyNavigationPath} from './utils/stringifyNavigationPath';
 export type DropdownMenuPopupProps<T> = {
     items: DropdownMenuListItem<T>[];
     open: boolean;
-    anchorRef: React.RefObject<HTMLDivElement>;
+    anchorRef: React.RefObject<HTMLDivElement | null>;
     onClose?: () => void;
     size?: DropdownMenuSize;
     menuProps?: MenuProps;
diff --git a/src/components/DropdownMenu/hooks/useScrollHandler.ts b/src/components/DropdownMenu/hooks/useScrollHandler.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export function useScrollHandler(
     onScroll: (event: Event) => void,
-    anchorRef: React.RefObject<HTMLDivElement>,
+    anchorRef: React.RefObject<HTMLDivElement | null>,
     disabled?: boolean,
 ) {
     React.useEffect(() => {
diff --git a/src/components/List/components/SimpleContainer.tsx b/src/components/List/components/SimpleContainer.tsx
@@ -12,7 +12,7 @@ export type SimpleContainerProps = React.PropsWithChildren<{
     onScrollToItem?: (node: HTMLElement) => boolean;
 }>;
 
-type RefsList = Record<number, React.RefObject<ListItem>>;
+type RefsList = Record<number, React.RefObject<ListItem | null>>;
 
 export type SimpleContainerState = {
     refsList: RefsList;
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -100,7 +100,7 @@ export interface ModalProps
     /** Callback called when `Popup` is closed and "out" transition is completed */
     onTransitionOutComplete?: () => void;
     contentOverflow?: 'visible' | 'auto';
-    floatingRef?: React.RefObject<HTMLDivElement>;
+    floatingRef?: React.RefObject<HTMLDivElement | null>;
     disableHeightTransition?: boolean;
 }
 
@@ -180,7 +180,13 @@ function ModalComponent({
         onOpenChange: handleOpenChange,
     });
 
-    const handleFloatingRef = useForkRef<HTMLDivElement>(refs.setFloating, floatingRef);
+    const handleFloatingRef = useForkRef<HTMLDivElement>(
+        refs.setFloating,
+        /*
+         *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+         */
+        floatingRef as React.Ref<HTMLDivElement>,
+    );
 
     const dismiss = useDismiss(context, {
         enabled: !disableOutsideClick || !disableEscapeKeyDown,
diff --git a/src/components/NumberInput/utils.ts b/src/components/NumberInput/utils.ts
@@ -158,7 +158,7 @@ export function clampToNearestStepValue({
 }
 
 export function updateCursorPosition(
-    inputRef: React.RefObject<HTMLInputElement>,
+    inputRef: React.RefObject<HTMLInputElement | null>,
     eventRawValue: string | undefined = '',
     computedEventValue: string | undefined = '',
 ) {
diff --git a/src/components/PinInput/PinInput.tsx b/src/components/PinInput/PinInput.tsx
@@ -44,7 +44,7 @@ export interface PinInputProps extends DOMProps, AriaLabelingProps, QAProps, Foc
     note?: TextInputProps['note'];
     validationState?: TextInputProps['validationState'];
     errorMessage?: TextInputProps['errorMessage'];
-    apiRef?: React.RefObject<PinInputApi>;
+    apiRef?: React.RefObject<PinInputApi | null>;
 }
 
 const b = block('pin-input');
diff --git a/src/components/Popup/types.ts b/src/components/Popup/types.ts
@@ -8,7 +8,7 @@ export type PopupPlacement = AutoPlacement | Placement | Placement[];
 
 export type PopupAnchorElement = Element | VirtualElement;
 
-export type PopupAnchorRef = React.RefObject<PopupAnchorElement>;
+export type PopupAnchorRef = React.RefObject<PopupAnchorElement | null>;
 
 type RemoveFunction<T> = T extends Function ? never : T;
 
diff --git a/src/components/Select/components/SelectPopup/types.ts b/src/components/Select/components/SelectPopup/types.ts
@@ -9,7 +9,7 @@ export type SelectPopupProps = {
     width?: SelectProps['popupWidth'];
     open?: boolean;
     placement?: PopupPlacement;
-    controlRef?: React.RefObject<HTMLElement>;
+    controlRef?: React.RefObject<HTMLElement | null>;
     children?: React.ReactNode;
     className?: string;
     disablePortal?: boolean;
diff --git a/src/components/Select/utils.tsx b/src/components/Select/utils.tsx
@@ -227,11 +227,11 @@ export const findItemIndexByQuickSearch = (
     });
 };
 
-export const getListItems = (listRef: React.RefObject<List<FlattenOption>>) => {
+export const getListItems = (listRef: React.RefObject<List<FlattenOption> | null>) => {
     return listRef?.current?.getItems() || [];
 };
 
-export const getActiveItem = (listRef: React.RefObject<List<FlattenOption>>) => {
+export const getActiveItem = (listRef: React.RefObject<List<FlattenOption> | null>) => {
     const items = getListItems(listRef);
     const activeItemIndex = listRef?.current?.getActiveItem();
 
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -48,7 +48,7 @@ interface TableState {
     // without that page will wobble on scrolling
     activeScrollElement: ActiveScrollElementType;
     columnsStyles: React.CSSProperties[];
-    columnHeaderRefs: React.RefObject<HTMLTableCellElement>[];
+    columnHeaderRefs: React.RefObject<HTMLTableCellElement | null>[];
 }
 
 export interface TableColumnConfig<I> {
@@ -422,7 +422,11 @@ export class Table<I extends TableDataItem = Record<string, string>> extends Rea
                         return (
                             <th
                                 key={id}
-                                ref={this.state.columnHeaderRefs[index]}
+                                ref={
+                                    this.state.columnHeaderRefs[
+                                        index
+                                    ] as React.Ref<HTMLTableCellElement>
+                                }
                                 style={columnsStyles[index]}
                                 className={b(
                                     'cell',
diff --git a/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx b/src/components/Table/hoc/withTableSettings/TableColumnSetup/TableColumnSetup.tsx
@@ -154,7 +154,14 @@ const useDndRenderContainer = ({onDragEnd, renderControls}: UseDndRenderContaine
 
         return (
             <React.Fragment>
-                <ListContainerView ref={containerRef} id={id} className={className}>
+                <ListContainerView
+                    /*
+                     *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+                     */
+                    ref={containerRef as React.Ref<HTMLDivElement>}
+                    id={id}
+                    className={className}
+                >
                     {stickyStartItemList}
                     <DragDropContext onDragEnd={onDragEnd}>
                         <Droppable droppableId={uniqId} renderClone={renderDndActiveItem}>
diff --git a/src/components/Toaster/ToastList/ToastList.tsx b/src/components/Toaster/ToastList/ToastList.tsx
@@ -27,15 +27,26 @@ export function ToastList(props: ToastListProps) {
             {toasts.map((toast) => (
                 <CSSTransition
                     key={`${toast.name}_${toast.addedAt}`}
-                    nodeRef={toast.ref}
+                    /*
+                     * TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+                     */
+                    nodeRef={toast.ref as React.Ref<HTMLElement>}
                     classNames={mobile ? mobileTransitionClassNames : desktopTransitionClassNames}
                     addEndListener={(done) =>
                         toast.ref?.current?.addEventListener('animationend', done)
                     }
                     onEnter={() => updateToastHeightCssProperty(toast)}
                     onExit={() => updateToastHeightCssProperty(toast)}
                 >
-                    <Toast {...toast} mobile={mobile} removeCallback={removeCallback} />
+                    <Toast
+                        {...toast}
+                        /*
+                         * TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+                         */
+                        ref={toast.ref as React.Ref<HTMLDivElement>}
+                        mobile={mobile}
+                        removeCallback={removeCallback}
+                    />
                 </CSSTransition>
             ))}
         </TransitionGroup>
diff --git a/src/components/Toaster/types.ts b/src/components/Toaster/types.ts
@@ -34,7 +34,7 @@ export type ToastProps = {
 
 export type InternalToastProps = ToastProps & {
     addedAt?: number;
-    ref?: React.RefObject<HTMLDivElement>;
+    ref?: React.RefObject<HTMLDivElement | null>;
 };
 
 export interface ToasterContextMethods {
diff --git a/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx b/src/components/TreeList/__stories__/components/RenderVirtualizedContainer.tsx
@@ -17,7 +17,10 @@ export const RenderVirtualizedContainer = <T,>({
             qa={qa}
             fixedHeight
             id={id}
-            ref={containerRef}
+            /*
+             *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+             */
+            ref={containerRef as React.Ref<HTMLDivElement>}
             className={className}
             extraProps={{style: {padding: 0}}}
         >
diff --git a/src/components/TreeList/__stories__/stories/WithDndListStory.tsx b/src/components/TreeList/__stories__/stories/WithDndListStory.tsx
@@ -95,7 +95,10 @@ export const WithDndListStory = (storyProps: WithDndListStoryProps) => {
                     }}
                 >
                     {(droppableProvided: DroppableProvided) => (
-                        <ListContainerView ref={containerRef} id={id}>
+                        /*
+                         *TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+                         */
+                        <ListContainerView ref={containerRef as React.Ref<HTMLDivElement>} id={id}>
                             <div
                                 {...droppableProvided.droppableProps}
                                 ref={droppableProvided.innerRef}
diff --git a/src/components/TreeList/types.ts b/src/components/TreeList/types.ts
@@ -42,7 +42,7 @@ export interface TreeListProps<T, P extends {} = {}> extends QAProps {
     /**
      * Control outside list container dom element. For example for keyboard
      */
-    containerRef?: React.RefObject<HTMLDivElement>;
+    containerRef?: React.RefObject<HTMLDivElement | null>;
     list: UseListResult<T>;
     id?: string | undefined;
     className?: string;
diff --git a/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx b/src/components/TreeSelect/__stories__/components/WithDndListExample.tsx
@@ -85,7 +85,14 @@ export const WithDndListExample = (storyProps: WithDndListExampleProps) => {
                     }}
                 >
                     {(droppableProvided: DroppableProvided) => (
-                        <ListContainerView ref={containerRef} id={id} className={className}>
+                        <ListContainerView
+                            /*
+                             *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+                             */
+                            ref={containerRef as React.Ref<HTMLDivElement>}
+                            id={id}
+                            className={className}
+                        >
                             <div
                                 {...droppableProvided.droppableProps}
                                 ref={droppableProvided.innerRef}
diff --git a/src/components/legacy/Breadcrumbs/Breadcrumbs.tsx b/src/components/legacy/Breadcrumbs/Breadcrumbs.tsx
@@ -110,7 +110,7 @@ export class Breadcrumbs<T extends BreadcrumbsItem = BreadcrumbsItem> extends Re
         return null;
     }
 
-    private container: React.RefObject<HTMLDivElement>;
+    private container: React.RefObject<HTMLDivElement | null>;
     private resizeObserver?: ResizeObserver;
 
     constructor(props: BreadcrumbsProps<T>) {
@@ -142,10 +142,12 @@ export class Breadcrumbs<T extends BreadcrumbsItem = BreadcrumbsItem> extends Re
     render() {
         const {className, qa} = this.props;
         const {calculated} = this.state;
-
+        /*
+         *  TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+         */
         return (
             <div className={b({calculated: calculated ? 'yes' : 'no'}, className)} data-qa={qa}>
-                <div className={b('inner')} ref={this.container}>
+                <div className={b('inner')} ref={this.container as React.Ref<HTMLDivElement>}>
                     {this.renderRootItem()}
                     {this.renderMoreItem()}
                     {this.renderVisibleItems()}
diff --git a/src/components/legacy/Popover/types.ts b/src/components/legacy/Popover/types.ts
@@ -67,7 +67,7 @@ export interface PopoverExternalProps {
     /** If true, focus will be transferred to the first element when the popover opens */
     autoFocus?: boolean;
     /** Focused element when the popover closes */
-    restoreFocusRef?: React.RefObject<HTMLElement>;
+    restoreFocusRef?: React.RefObject<HTMLElement | null>;
 }
 
 export type PopoverBehaviorProps = {
diff --git a/src/components/useList/components/ListContainer/ListContainer.tsx b/src/components/useList/components/ListContainer/ListContainer.tsx
@@ -7,7 +7,7 @@ import {ListItemRecursiveRenderer} from '../ListRecursiveRenderer/ListRecursiveR
 
 export type ListContainerProps<T, P extends {} = {}> = Omit<ListContainerViewProps, 'children'> & {
     list: UseListResult<T>;
-    containerRef?: React.RefObject<HTMLDivElement>;
+    containerRef?: React.RefObject<HTMLDivElement | null>;
     renderItem(
         id: ListItemId,
         index: number,
@@ -25,7 +25,10 @@ export function ListContainer<T, P extends {} = {}>({
     ...props
 }: ListContainerProps<T, P>) {
     return (
-        <ListContainerView ref={containerRef} {...props}>
+        /*
+         * TODO: Remove casting in React 19 (https://github.com/gravity-ui/uikit/issues/2537)
+         */
+        <ListContainerView ref={containerRef as React.Ref<HTMLDivElement>} {...props}>
             {list.structure.items.map((item, index) => (
                 <ListItemRecursiveRenderer
                     key={index}
diff --git a/src/components/useList/hooks/useListKeydown.tsx b/src/components/useList/hooks/useListKeydown.tsx
@@ -8,7 +8,7 @@ import {scrollToListItem} from '../utils/scrollToListItem';
 
 interface UseListKeydownProps<T = unknown> {
     onItemClick?: ListOnItemClick;
-    containerRef?: React.RefObject<HTMLDivElement>;
+    containerRef?: React.RefObject<HTMLDivElement | null>;
     enabled?: boolean;
     list: UseListResult<T>;
 }
diff --git a/src/components/utils/layer-manager/LayerManager.ts b/src/components/utils/layer-manager/LayerManager.ts
@@ -45,7 +45,7 @@ export interface LayerExtendableProps {
 type ContentElement = Element | (VirtualElement & {contains?: (other: Node | null) => boolean});
 
 export interface LayerConfig extends LayerExtendableProps {
-    contentRefs?: Array<React.RefObject<ContentElement> | undefined>;
+    contentRefs?: Array<React.RefObject<ContentElement | null> | undefined>;
 }
 
 class LayerManager {
diff --git a/src/hooks/useListNavigation/useListNavigation.ts b/src/hooks/useListNavigation/useListNavigation.ts
@@ -14,7 +14,7 @@ export type UseListNavigationProps<ItemType, AnchorType> = {
     processEndKey?: boolean;
     disabled?: boolean;
     initialValue?: number;
-    anchorRef?: React.RefObject<AnchorType>;
+    anchorRef?: React.RefObject<AnchorType | null>;
     onAnchorKeyDown?: (activeItemIndex: number, event: KeyboardEvent) => void | boolean;
 };
 
diff --git a/src/hooks/useOutsideClick/useOutsideClick.tsx b/src/hooks/useOutsideClick/useOutsideClick.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface UseOutsideClickProps<T> {
-    ref: React.RefObject<T>;
+    ref: React.RefObject<T | null>;
     handler?: (e: MouseEvent | TouchEvent) => void;
 }
 
diff --git a/src/hooks/usePortalContainer/PortalProvider.tsx b/src/hooks/usePortalContainer/PortalProvider.tsx
@@ -2,12 +2,14 @@
 
 import * as React from 'react';
 
-export const PortalContext = React.createContext<React.RefObject<HTMLElement>>({current: null});
+export const PortalContext = React.createContext<React.RefObject<HTMLElement | null>>({
+    current: null,
+});
 
 PortalContext.displayName = 'PortalContext';
 
 export type PortalProviderProps = React.PropsWithChildren<{
-    container: React.RefObject<HTMLElement>;
+    container: React.RefObject<HTMLElement | null>;
 }>;
 
 export function PortalProvider({container, children}: PortalProviderProps) {

Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,7 @@ export function clampToNearestStepValue({`
`158`	`158`	`}`
`159`	`159`
`160`	`160`	`export function updateCursorPosition(`
`161`		`- inputRef: React.RefObject<HTMLInputElement>,`
	`161`	`+ inputRef: React.RefObject<HTMLInputElement \| null>,`
`162`	`162`	`eventRawValue: string \| undefined = '',`
`163`	`163`	`computedEventValue: string \| undefined = '',`
`164`	`164`	`) {`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export interface PinInputProps extends DOMProps, AriaLabelingProps, QAProps, Foc`
`44`	`44`	`note?: TextInputProps['note'];`
`45`	`45`	`validationState?: TextInputProps['validationState'];`
`46`	`46`	`errorMessage?: TextInputProps['errorMessage'];`
`47`		`- apiRef?: React.RefObject<PinInputApi>;`
	`47`	`+ apiRef?: React.RefObject<PinInputApi \| null>;`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`const b = block('pin-input');`