feat: support React 19 in peerDependencies (#393)

korvin89 · web-flow · commit b3bb63e9eb22 · 2026-06-05T15:09:02.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -120,8 +120,8 @@
   },
   "peerDependencies": {
     "@gravity-ui/uikit": "^7.39.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "nano-staged": {
     "*.{scss}": [
diff --git a/src/components/ChangelogDialog/ChangelogDialog.tsx b/src/components/ChangelogDialog/ChangelogDialog.tsx
@@ -57,7 +57,7 @@ export function ChangelogDialog(props: ChangelogDialogProps) {
         className,
     } = props;
 
-    const idRef = React.useRef<number>();
+    const idRef = React.useRef<number | undefined>(undefined);
     idRef.current = idRef.current || getNextId();
     const dialogCaptionId = `changelog-dialog-title-${idRef.current}`;
 
diff --git a/src/components/DelayedTextInput/hooks/useDelayedValue.ts b/src/components/DelayedTextInput/hooks/useDelayedValue.ts
@@ -19,7 +19,7 @@ export function useDelayedValue<TValue = unknown>(
 ) {
     const [currentValue, setCurrentValue] = React.useState<TValue>(value);
 
-    const timeoutRef = React.useRef<number>();
+    const timeoutRef = React.useRef<number | undefined>(undefined);
 
     const delayedOnChange = React.useCallback(
         (nextValue: TValue) => {
diff --git a/src/components/Gallery/Gallery.tsx b/src/components/Gallery/Gallery.tsx
@@ -42,8 +42,8 @@ export const Gallery = ({
     const items = children ? React.Children.map(children, (child) => child.props) : emptyItems;
     const itemsCount = items.length;
 
-    const [itemRefs, setItemRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>(() =>
-        items.map(() => React.createRef()),
+    const [itemRefs, setItemRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>(
+        () => items.map(() => React.createRef()),
     );
 
     const [hiddenHeader, setHiddenHeader] = React.useState(false);
@@ -188,9 +188,15 @@ export const Gallery = ({
 
                                     const selected = activeItemIndex === index;
 
+                                    // Narrows RefObject<T | null> back to RefObject<T>
+                                    // for compatibility with @types/react@18 LegacyRef typing.
+                                    const buttonRef = itemRefs[
+                                        index
+                                    ] as React.RefObject<HTMLButtonElement>;
+
                                     return (
                                         <button
-                                            ref={itemRefs[index]}
+                                            ref={buttonRef}
                                             type="button"
                                             key={index}
                                             onClick={handleClick}
diff --git a/src/components/Gallery/hooks/useNavigation.ts b/src/components/Gallery/hooks/useNavigation.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type UseNavigationProps = {
     initialItemIndex?: number;
-    itemRefs: React.RefObject<HTMLButtonElement>[];
+    itemRefs: React.RefObject<HTMLButtonElement | null>[];
 };
 
 export function useNavigation({initialItemIndex = 0, itemRefs}: UseNavigationProps) {
diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx
@@ -12,7 +12,7 @@ import './Notification.scss';
 const b = block('notification');
 
 type Props = {
-    wrapperRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement | null>;
     notification: NotificationProps;
 };
 
diff --git a/src/components/Notification/NotificationWithSwipe.tsx b/src/components/Notification/NotificationWithSwipe.tsx
@@ -17,7 +17,7 @@ const swipeActionContainerCls = b('swipe-action-container');
 type Props = {
     notification: NotificationProps;
     swipeThreshold?: number;
-    wrapperRef?: React.RefObject<HTMLDivElement>;
+    wrapperRef?: React.RefObject<HTMLDivElement | null>;
 };
 
 export const NotificationWithSwipe = React.memo(function NotificationWithSwipe(props: Props) {
diff --git a/src/components/Notification/definitions.ts b/src/components/Notification/definitions.ts
@@ -26,7 +26,7 @@ export type NotificationProps = {
     id: string;
     content:
         | React.ReactNode
-        | ((props: {wrapperRef?: React.RefObject<HTMLDivElement>}) => React.ReactNode);
+        | ((props: {wrapperRef?: React.RefObject<HTMLDivElement | null>}) => React.ReactNode);
 
     title?: React.ReactNode;
     formattedDate?: React.ReactNode;
diff --git a/src/components/Notifications/Notifications.tsx b/src/components/Notifications/Notifications.tsx
@@ -19,7 +19,7 @@ const b = block('notifications');
 export const Notifications = React.memo(function Notifications(props: NotificationsProps) {
     const {t} = i18n.useTranslation();
 
-    let content: JSX.Element;
+    let content: React.ReactElement;
 
     const visibleNotificationsCount = props.notifications.filter((n) => !n.archived).length;
     const hasUnloadedNotifications =
diff --git a/src/components/Notifications/__stories__/mockData.tsx b/src/components/Notifications/__stories__/mockData.tsx
@@ -78,7 +78,7 @@ export const notificationSideActions = {
     ),
 };
 
-export const notificationBottomActions: JSX.Element = (
+export const notificationBottomActions: React.ReactElement = (
     <React.Fragment>
         <NotificationAction
             action={{text: 'Confirm', view: 'normal', onClick: () => console.log('CONFIRM')}}
@@ -89,7 +89,9 @@ export const notificationBottomActions: JSX.Element = (
     </React.Fragment>
 );
 
-export const LongNotificationContent = (props: {wrapperRef?: React.RefObject<HTMLDivElement>}) => {
+export const LongNotificationContent = (props: {
+    wrapperRef?: React.RefObject<HTMLDivElement | null>;
+}) => {
     const {wrapperRef} = props;
 
     const handleUpdate = (expanded: boolean) => {
diff --git a/src/components/Notifications/definitions.ts b/src/components/Notifications/definitions.ts
@@ -8,7 +8,7 @@ export type NotificationsProps = {
     title?: React.ReactNode;
     actions?: React.ReactNode;
 
-    renderCustomHeader?: (params: {title: React.ReactNode}) => JSX.Element;
+    renderCustomHeader?: (params: {title: React.ReactNode}) => React.ReactElement;
 
     notifications: NotificationProps[];
     areAllNotificationsLoaded?: boolean;
diff --git a/src/components/Reactions/Reaction.tsx b/src/components/Reactions/Reaction.tsx
@@ -31,7 +31,7 @@ export interface RenderReactionProps {
     /** Click handler */
     onClick: () => void;
     /** Button reference needed for popup positioning */
-    ref?: React.RefObject<HTMLButtonElement>;
+    ref?: React.RefObject<HTMLButtonElement | null>;
     /** Counter value */
     counter?: React.ReactNode;
     /** Is reaction selected */
diff --git a/src/components/Reactions/Reactions.tsx b/src/components/Reactions/Reactions.tsx
@@ -32,7 +32,7 @@ export type ReactionsPaletteProps = Pick<
 
 export interface RenderAddProps<AddReactionRef extends HTMLElement = HTMLButtonElement> {
     paletteOpened: boolean;
-    ref: React.RefObject<AddReactionRef>;
+    ref: React.RefObject<AddReactionRef | null>;
     triggerProps: {
         onClick: () => void;
     } & Pick<
diff --git a/src/components/Reactions/context.ts b/src/components/Reactions/context.ts
@@ -4,7 +4,7 @@ import type {ReactionState} from './Reaction';
 
 export interface ReactionsContextTooltipProps {
     reaction: ReactionState;
-    ref: React.RefObject<HTMLButtonElement>;
+    ref: React.RefObject<HTMLButtonElement | null>;
     open: boolean;
 }
 
diff --git a/src/components/Reactions/hooks.ts b/src/components/Reactions/hooks.ts
@@ -11,7 +11,7 @@ const DELAY = {
 
 export function useReactionsPopup(
     reaction: ReactionState,
-    ref: React.RefObject<HTMLButtonElement>,
+    ref: React.RefObject<HTMLButtonElement | null>,
 ) {
     const {value} = reaction;
 
diff --git a/src/components/TokenizedInput/components/Wrapper/Wrapper.tsx b/src/components/TokenizedInput/components/Wrapper/Wrapper.tsx
@@ -14,8 +14,12 @@ export function Wrapper({children}: React.PropsWithChildren<unknown>) {
     const {isClearable, classNames, wrapperRef} = wrapperInfo.state;
     const {onBlur, onKeyDown, onClear} = wrapperInfo.callbacks;
 
+    // Narrows RefObject<T | null> back to RefObject<T>
+    // for compatibility with @types/react@18 LegacyRef typing.
+    const divRef = wrapperRef as React.RefObject<HTMLDivElement>;
+
     return (
-        <div className={classNames.wrapper} onBlur={onBlur} onKeyDown={onKeyDown} ref={wrapperRef}>
+        <div className={classNames.wrapper} onBlur={onBlur} onKeyDown={onKeyDown} ref={divRef}>
             {children}
             {isClearable && (
                 <button
diff --git a/src/components/TokenizedInput/types.ts b/src/components/TokenizedInput/types.ts
@@ -145,7 +145,7 @@ export type TokenizedInputInfo<T extends TokenValueBase> = {
         /** Wrapper className */
         className?: string;
         /** Wrapper ref */
-        wrapperRef: React.RefObject<HTMLDivElement>;
+        wrapperRef: React.RefObject<HTMLDivElement | null>;
     };
     callbacks: {
         /** Applies pending changes */
