Merge pull request #8058 from VKCOM/SevereCloud/feat/support-react-19…

…-types
VKCOM · Dec 11, 2024 · d89135c · d89135c
2 parents 1b32ca1 + cdb8234
commit d89135c
Show file tree

Hide file tree

Showing 65 changed files with 177 additions and 192 deletions.
diff --git a/.yarn/patches/@types-mdx-npm-2.0.13-52981f86f6.patch b/.yarn/patches/@types-mdx-npm-2.0.13-52981f86f6.patch
@@ -0,0 +1,12 @@
+diff --git a/types.d.ts b/types.d.ts
+index 498bb694de2e6a62f14d3fe998dc538aff920fc6..719f0ea55bb472e2df0e38a06df88d5ad6156b44 100644
+--- a/types.d.ts
++++ b/types.d.ts
+@@ -1,5 +1,7 @@
+ // Internal helper types
+
++import type { JSX } from "react/jsx-runtime";
++
+ /**
+  * This is the global JSX.ElementType if it’s defined, otherwise never.
+  */
diff --git a/package.json b/package.json
@@ -28,8 +28,8 @@
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@types/webpack": "^5.28.5",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
@@ -100,7 +100,8 @@
     "yargs": "^17.7.2"
   },
   "resolutions": {
-    "markdown-to-jsx@npm:^6.11.4": "^7.5.0"
+    "markdown-to-jsx@npm:^6.11.4": "^7.5.0",
+    "@types/mdx@npm:^2.0.0": "patch:@types/mdx@npm%3A2.0.13#~/.yarn/patches/@types-mdx-npm-2.0.13-52981f86f6.patch"
   },
   "scripts": {
     "docs:styleguide": "yarn workspace @project-docs/styleguide run start",

diff --git a/packages/vkui/package.json b/packages/vkui/package.json
@@ -77,8 +77,8 @@
     "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
     "@swc/helpers": "^0.5.15",

diff --git a/packages/vkui/src/components/ActionSheet/types.ts b/packages/vkui/src/components/ActionSheet/types.ts
@@ -2,7 +2,7 @@ import type * as React from 'react';
 import type { PlacementWithAuto } from '../../lib/floating/types/common';
 import { type FocusTrapProps } from '../FocusTrap/FocusTrap';
 
-export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
+export type ToggleRef = Element | null | undefined | React.RefObject<Element | null>;
 
 export interface SharedDropdownProps extends FocusTrapProps {
   closing: boolean;

diff --git a/packages/vkui/src/components/AppRoot/AppRoot.test.tsx b/packages/vkui/src/components/AppRoot/AppRoot.test.tsx
@@ -170,7 +170,7 @@ describe('AppRoot', () => {
   describe('portalRoot prop', () => {
     it('should accept custom portal root', () => {
       const customPortalRoot = document.createElement('div');
-      let portalRoot: React.MutableRefObject<HTMLElement | null> = React.createRef();
+      let portalRoot: React.RefObject<HTMLElement | null> = React.createRef();
       const contextCallback = jest.fn().mockImplementation((ctx) => {
         portalRoot.current = ctx.portalRoot ?? null;
         return null;

diff --git a/packages/vkui/src/components/AppRoot/AppRoot.tsx b/packages/vkui/src/components/AppRoot/AppRoot.tsx
@@ -40,7 +40,7 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Кастомный root-элемент портала
    */
-  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
+  portalRoot?: HTMLElement | React.RefObject<HTMLElement | null> | null;
   /**
    * Отключает рендер всплывающих компонентов в отдельном контейнере
    */

diff --git a/packages/vkui/src/components/AppRoot/AppRootContext.ts b/packages/vkui/src/components/AppRoot/AppRootContext.ts
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { type AppRootUserSelectMode, type SafeAreaInsets } from './types';
 
 export interface AppRootContextInterface {
-  appRoot: React.RefObject<HTMLElement>;
-  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
+  appRoot: React.RefObject<HTMLElement | null>;
+  portalRoot?: HTMLElement | React.RefObject<HTMLElement | null> | null;
   safeAreaInsets?: SafeAreaInsets;
   embedded: boolean;
   mode: 'partial' | 'embedded' | 'full';

diff --git a/packages/vkui/src/components/AppRoot/AppRootPortal.tsx b/packages/vkui/src/components/AppRoot/AppRootPortal.tsx
@@ -18,7 +18,7 @@ export interface AppRootPortalProps extends HasChildren {
    *
    * По умолчанию в качестве портала будет использован `document.body`
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement | null> | null;
   className?: string;
 }
 

diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.test.tsx
@@ -11,7 +11,7 @@ import {
 } from './ScrollContext';
 
 type ChildWithContextProps = {
-  contextRef?: RefObject<ScrollContextInterface>;
+  contextRef?: RefObject<ScrollContextInterface | null>;
   beforeScrollLockFn?: VoidFunction;
 };
 const ChildWithContext = ({ contextRef, beforeScrollLockFn }: ChildWithContextProps) => {

diff --git a/packages/vkui/src/components/AppRoot/ScrollContext.tsx b/packages/vkui/src/components/AppRoot/ScrollContext.tsx
@@ -81,7 +81,7 @@ function useScrollLockController(enableScrollLock: () => void, disableScrollLock
 }
 
 export interface ScrollControllerProps extends HasChildren {
-  elRef: React.RefObject<HTMLElement>;
+  elRef: React.RefObject<HTMLElement | null>;
 }
 
 export const GlobalScrollController = ({ children }: ScrollControllerProps): React.ReactNode => {

diff --git a/packages/vkui/src/components/AspectRatio/AspectRatio.tsx b/packages/vkui/src/components/AspectRatio/AspectRatio.tsx
@@ -23,7 +23,11 @@ export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>,
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export function AspectRatio({ ratio, mode = 'stretch', ...props }: AspectRatioProps): JSX.Element {
+export function AspectRatio({
+  ratio,
+  mode = 'stretch',
+  ...props
+}: AspectRatioProps): React.JSX.Element {
   const style: React.CSSProperties & CSSCustomProperties = {
     '--vkui_internal--aspect_ratio': String(ratio),
   };

diff --git a/packages/vkui/src/components/ChipsInput/useChipsInput.ts b/packages/vkui/src/components/ChipsInput/useChipsInput.ts
@@ -84,7 +84,7 @@ export const useChipsInput = <O extends ChipOption>({
   addOptionFromInput: (inputValue: string) => void;
   removeOption: (newValue: O | ChipOptionValue) => void;
   clearOptions: () => void;
-  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;
   inputValue: string;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => any;
   clearInput: () => void;
@@ -96,7 +96,7 @@ export const useChipsInput = <O extends ChipOption>({
     onChange,
   });
 
-  const inputRef = React.useRef<HTMLInputElement & SimulateReactInputTargetState>(null);
+  const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) | null>(null);
   const [inputValue, setInputChange] = useEnsuredControl({
     disabled,
     value: inputValueProp,

diff --git a/packages/vkui/src/components/ChipsSelect/useChipsSelect.ts b/packages/vkui/src/components/ChipsSelect/useChipsSelect.ts
@@ -97,7 +97,7 @@ export const useChipsSelect = <O extends ChipOption>({
   addOptionFromInput: (inputValue: string) => void;
   removeOption: (newValue: ChipOptionValue | O) => void;
   clearOptions: () => void;
-  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;
   clearInput: () => void;
 } => {
   const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({

diff --git a/packages/vkui/src/components/Clickable/useState.tsx b/packages/vkui/src/components/Clickable/useState.tsx
@@ -142,7 +142,7 @@ interface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDel
   /**
    * Блокирование активации состояний
    */
-  lockStateRef: React.MutableRefObject<boolean>;
+  lockStateRef: React.RefObject<boolean>;
   setParentStateLock: (v: boolean) => void;
 }
 
@@ -245,7 +245,7 @@ function useLockState(
 
 function useLockRef(
   setParentStateLockBubbling: (v: boolean) => void,
-): readonly [React.MutableRefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {
+): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {
   const lockStateRef = React.useRef(false);
 
   const setStateLockBubblingImmediate = React.useCallback(

diff --git a/packages/vkui/src/components/Clickable/useStateWithDelay.tsx b/packages/vkui/src/components/Clickable/useStateWithDelay.tsx
@@ -41,7 +41,7 @@ export function useStateWithDelay<S>(
   onStateChange: (v: S) => void = noop,
 ): [S, DispatchWithDelay<React.SetStateAction<S>>] {
   const [value, setValue] = React.useState(initialState);
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const handleSetValue = React.useCallback(
     (nextValue: React.SetStateAction<S>) => {

diff --git a/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx b/packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx
@@ -1182,7 +1182,7 @@ describe('CustomSelect', () => {
 
   it('check input should close popover and reset selected option', async () => {
     jest.useFakeTimers();
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
 
@@ -1231,7 +1231,7 @@ describe('CustomSelect', () => {
     'should open dropdown when keydown %s',
     async (key) => {
       jest.useFakeTimers();
-      const inputRef: React.RefObject<HTMLInputElement> = {
+      const inputRef: React.RefObject<HTMLInputElement | null> = {
         current: null,
       };
       render(
@@ -1277,7 +1277,7 @@ describe('CustomSelect', () => {
 
   it('should call onInputChange callback when change input', async () => {
     jest.useFakeTimers();
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
     const onInputChange = jest.fn();
@@ -1302,7 +1302,7 @@ describe('CustomSelect', () => {
   });
 
   it('check scroll to bottom to element', async () => {
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
 
@@ -1335,7 +1335,7 @@ describe('CustomSelect', () => {
   });
 
   it('check scroll to up', async () => {
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
 
@@ -1368,7 +1368,7 @@ describe('CustomSelect', () => {
   });
 
   it('should not hover disabled option', async () => {
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
     render(
@@ -1392,7 +1392,7 @@ describe('CustomSelect', () => {
   });
 
   it('should not call select option when not focus to option', async () => {
-    const inputRef: React.RefObject<HTMLInputElement> = {
+    const inputRef: React.RefObject<HTMLInputElement | null> = {
       current: null,
     };
     const onChange = jest.fn();

diff --git a/packages/vkui/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx b/packages/vkui/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx
@@ -11,7 +11,7 @@ export interface CustomSelectDropdownProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
     Pick<CustomScrollViewProps, 'overscrollBehavior'>,
     HasDataAttribute {
-  targetRef: React.RefObject<HTMLElement>;
+  targetRef: React.RefObject<HTMLElement | null>;
   placement?: Placement;
   scrollBoxRef?: React.Ref<HTMLDivElement>;
   fetching?: boolean;

diff --git a/packages/vkui/src/components/Epic/Epic.tsx b/packages/vkui/src/components/Epic/Epic.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { getNavId } from '../../lib/getNavId';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -30,8 +30,10 @@ export const Epic = ({
 
   const story =
     (React.Children.toArray(children).find(
-      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,
-    ) as React.ReactElement | undefined) ?? null;
+      (story) =>
+        React.isValidElement(story) &&
+        getNavId((story as React.ReactElement<NavIdProps>).props, warn) === activeStory,
+    ) as Array<React.ReactElement<NavIdProps>> | undefined) ?? null;
 
   return (
     <RootComponent

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx
@@ -1,4 +1,4 @@
-import { act, type MutableRefObject } from 'react';
+import { act, type RefObject } from 'react';
 import { render } from '@testing-library/react';
 import { noop } from '@vkontakte/vkjs';
 import { baselineComponent } from '../../testing/utils';
@@ -23,10 +23,10 @@ describe('FixedLayout', () => {
   baselineComponent(FixedLayout);
 
   it('check update width by parent width', async () => {
-    const parentRef: MutableRefObject<HTMLDivElement | null> = {
+    const parentRef: RefObject<HTMLDivElement | null> = {
       current: null,
     };
-    const layoutRef: MutableRefObject<HTMLDivElement | null> = {
+    const layoutRef: RefObject<HTMLDivElement | null> = {
       current: null,
     };
     let parentWidth = 500;
@@ -59,10 +59,10 @@ describe('FixedLayout', () => {
   });
 
   it('check update width by column width', async () => {
-    const colRef: MutableRefObject<HTMLDivElement | null> = {
+    const colRef: RefObject<HTMLDivElement | null> = {
       current: null,
     };
-    const layoutRef: MutableRefObject<HTMLDivElement | null> = {
+    const layoutRef: RefObject<HTMLDivElement | null> = {
       current: null,
     };
     let colWidth = 280;
@@ -113,7 +113,7 @@ describe('FixedLayout', () => {
         className: styles.verticalBottom,
       },
     ])('should have className $className when use props $props', ({ props, className }) => {
-      const layoutRef: MutableRefObject<HTMLDivElement | null> = {
+      const layoutRef: RefObject<HTMLDivElement | null> = {
         current: null,
       };
       render(

diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.stories.tsx
@@ -37,7 +37,7 @@ type Story = StoryObj<HorizontalScrollProps>;
 export const Playground: Story = {
   render: function Render(args) {
     const [commonFriends, setCommonFriends] = React.useState<UserExtendedInterface[]>([]);
-    const timer = React.useRef<ReturnType<typeof setTimeout>>();
+    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
     React.useEffect(() => {
       // Эмуляция загрузки

diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx
@@ -102,7 +102,7 @@ describe('HorizontalScroll', () => {
   });
 
   it('click on arrow right should change scrollLeft', async () => {
-    const ref: React.MutableRefObject<HTMLDivElement | null> = {
+    const ref: React.RefObject<HTMLDivElement | null> = {
       current: null,
     };
     render(
@@ -130,7 +130,7 @@ describe('HorizontalScroll', () => {
   });
 
   it('click on arrow left should change scrollLeft', async () => {
-    const ref: React.MutableRefObject<HTMLDivElement | null> = {
+    const ref: React.RefObject<HTMLDivElement | null> = {
       current: null,
     };
     render(
@@ -161,7 +161,7 @@ describe('HorizontalScroll', () => {
   });
 
   it('use custom scroll function to left and right', async () => {
-    const ref: React.MutableRefObject<HTMLDivElement | null> = {
+    const ref: React.RefObject<HTMLDivElement | null> = {
       current: null,
     };
     render(
@@ -197,7 +197,7 @@ describe('HorizontalScroll', () => {
   });
 
   it('scroll by arrow', () => {
-    const ref: React.MutableRefObject<HTMLDivElement | null> = {
+    const ref: React.RefObject<HTMLDivElement | null> = {
       current: null,
     };
     render(

diff --git a/packages/vkui/src/components/ImageBase/ImageBaseOverlay/hooks.ts b/packages/vkui/src/components/ImageBase/ImageBaseOverlay/hooks.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useFocusWithin } from '../../../hooks/useFocusWithin';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 
-export function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>) {
+export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLElement | null>) {
   const focusWithin = useFocusWithin(rootRef);
   const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);
 

diff --git a/packages/vkui/src/components/ImageBase/validators.ts b/packages/vkui/src/components/ImageBase/validators.ts
@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import { warnOnce } from '../../lib/warnOnce';
 import {
   getBadgeIconSizeByImageBaseSize,
@@ -32,23 +33,23 @@ function parseIconSizeByWidthProp(width: unknown): number | null {
   return size > 0 ? size : null;
 }
 
-function getElementDisplayName(element: JSX.Element): string | null {
+function getElementDisplayName(element: React.JSX.Element): string | null {
   return element.type.displayName ?? null;
 }
 
-function getElementWidthProp(element: JSX.Element): number | string | null {
+function getElementWidthProp(element: React.JSX.Element): number | string | null {
   return element.props.width ?? null;
 }
 
-function getIconSizeByElement(element: JSX.Element): number | null {
+function getIconSizeByElement(element: React.JSX.Element): number | null {
   const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));
   const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));
   return sizeByWidth ? sizeByWidth : sizeByDisplayName;
 }
 
 interface IconProp {
   name: string;
-  value: JSX.Element;
+  value: React.JSX.Element;
 }
 
 interface SelectorFn {