feat(deps): migrate frontend to React 19 (#21531)

## What Migrates the frontend stack from **React 18.3 → 19.2**. The website, sdk, companion and emails packages were already on React 19; this brings the remaining holdouts (`twenty-front`, `twenty-ui`, `twenty-ui-deprecated`, `twenty-front-component-renderer`) and `twenty-server`'s email rendering onto 19, and pins a single React version repo-wide. ## Why React 18.x is now the legacy line. Staying current keeps us on the patched/maintained branch and unblocks downstream library majors (react-router 7, mantine 9, etc.) that require React 19 peers. ## Dependency bumps (required by React 19 peers / removed APIs) | Package | From | To | Reason | |---|---|---|---| | react / react-dom | 18.3.1 | 19.2.3 | core | | @hello-pangea/dnd | 16 | 18 | peer `^18 \|\| ^19` | | react-datepicker | 6 | 9 | v<7 used removed `findDOMNode`; drops `@types/react-datepicker` | | react-data-grid | beta.13 | beta.59 | peer `^19.2`; new render API | | graphiql (+ @graphiql/react, plugin-explorer) | 3 / 0.23 / 1 | 5 / 0.37 / 5.1 | peer `^18 \|\| ^19` | | react-helmet-async | 1.3 | **@dr.pogodin/react-helmet** 3.2 | upstream caps peer at `^18`; drop-in React 19 fork | A `resolutions` pin enforces a single React (19.2.3) + `@types/react` (19.2.14) across the monorepo to avoid duplicate copies / type-identity splits. Versions are the aged lockfile patches (clears the `npmMinimalAgeGate`). ## Code changes - **Global `JSX` shim** (`react-jsx-global.d.ts` per package): React 19 moved the `JSX` namespace under `React.JSX`; several deps' published types (notably `@linaria/react`'s `styled.d.ts`, which types every `styled.x` via `keyof JSX.IntrinsicElements`) still reference the global namespace. Without the shim, every styled component degrades to `any` props. - **Ref nullability**: `useRef<T>(null)` now returns `RefObject<T | null>`; widened consumer prop/hook ref types accordingly (incl. the shared `useListenClickOutside`). - **react-datepicker v9**: `onChange`/`onSelect` accept `Date | null`, `calendarStartDay` typing, `ReactDatePickerProps`→`DatePickerProps`, relaxed the dynamic `selectsMultiple` discriminated union. - **react-data-grid beta.59**: `formatter`→`renderCell`, `editor`→`renderEditCell`, `headerRenderer`→`renderHeaderCell`, `components`→`renderers`, `onRowClick`→`onCellClick`, object-shaped `useRowSelection`, Set-based selection. - **dnd style cast**: `@radix-ui/react-popper` augments `CSSProperties` with a `--radix-*` index signature that dnd's closed `DraggingStyle` doesn't satisfy → cast at the spread. ## Status / testing - ✅ `typecheck` green: twenty-front, twenty-ui, twenty-ui-deprecated, twenty-front-component-renderer, twenty-server - ⏳ build / lint / unit tests / storybook+argos / runtime smoke-test in progress Draft until local + CI verification completes. Notable behavior to QA manually: spreadsheet import (data-grid), date pickers, drag-and-drop boards/lists, GraphQL playground, page titles/favicon.  <a href="https://cubic.dev/pr/twentyhq/twenty/pull/21531?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
2026-06-14 15:42:22 +02:00
parent 9901fa93d9
commit 7c0136b97b
112 changed files with 1065 additions and 1217 deletions
@@ -6,7 +6,7 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { lazy, Suspense, useEffect } from 'react';
+import { type JSX, lazy, Suspense, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { isDefined } from 'twenty-shared/utils';
 import { IconDownload, IconX } from 'twenty-ui-deprecated/display';
@@ -25,7 +25,7 @@ export const Default: Story = {};

 export const Performance = getProfilingStory({
  componentName: 'EllipsisDisplay',
-  averageThresholdInMs: 0.1,
+  averageThresholdInMs: 0.2,
  numberOfRuns: 20,
  numberOfTestsPerRun: 10,
 });
@@ -4,7 +4,7 @@ import { type FieldAddressDraftValue } from '@/object-record/record-field/ui/typ

 export const useFocusManagement = (
  inputRefs: {
-    [key in keyof FieldAddressDraftValue]?: RefObject<HTMLInputElement>;
+    [key in keyof FieldAddressDraftValue]?: RefObject<HTMLInputElement | null>;
  },
  internalValue: FieldAddressDraftValue,
  onTab?: (newAddress: FieldAddressDraftValue) => void,
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { lazy, Suspense, useContext, type ComponentType } from 'react';
-import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
+import type { DatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
@@ -334,10 +334,19 @@ type DatePickerProps = {
  hideCalendar?: boolean;
 };

-type DatePickerPropsType = ReactDatePickerLibProps<
-  boolean | undefined,
-  boolean | undefined
->;
+// react-datepicker v9 types its props as a discriminated union keyed on
+// selectsRange/selectsMultiple. We drive selectsMultiple dynamically, which TS
+// cannot narrow to a single union branch, so collapse the discriminants to plain
+// optionals (selectedDates is accepted but ignored by the library at runtime).
+type DatePickerPropsType = Omit<
+  ReactDatePickerLibProps,
+  'selectsRange' | 'selectsMultiple' | 'onChange' | 'formatMultipleDates'
+> & {
+  selectsRange?: boolean;
+  selectsMultiple?: boolean;
+  selectedDates?: Date[];
+  onChange?: (date: Date | null) => void;
+};

 const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
  import('react-datepicker').then((mod) => ({
@@ -410,13 +419,19 @@ export const DatePicker = ({
    onChange?.(newDate?.toString() ?? null);
  };

-  const handleDateChange = (datePicked: Date) => {
+  const handleDateChange = (datePicked: Date | null) => {
+    if (!isDefined(datePicked)) {
+      return;
+    }
    const plainDatePicked = turnJSDateToPlainDate(datePicked);

    onChange?.(plainDatePicked.toString());
  };

-  const handleDateSelect = (datePicked: Date) => {
+  const handleDateSelect = (datePicked: Date | null) => {
+    if (!isDefined(datePicked)) {
+      return;
+    }
    const plainDatePicked = turnJSDateToPlainDate(datePicked);

    handleClose?.(plainDatePicked.toString());
@@ -493,7 +508,9 @@ export const DatePicker = ({
            openToDate={dateForDatePicker ?? undefined}
            disabledKeyboardNavigation
            onChange={handleDateChange}
-            calendarStartDay={calendarStartDay}
+            calendarStartDay={
+              calendarStartDay as 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined
+            }
            renderCustomHeader={({
              prevMonthButtonDisabled,
              nextMonthButtonDisabled,
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { Suspense, lazy, useContext, type ComponentType } from 'react';
-import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
+import type { DatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
@@ -309,10 +309,7 @@ type DatePickerWithoutCalendarProps = {
  keyboardEventsDisabled?: boolean;
 };

-type DatePickerPropsType = ReactDatePickerLibProps<
-  boolean | undefined,
-  boolean | undefined
->;
+type DatePickerPropsType = ReactDatePickerLibProps;

 const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
  import('react-datepicker').then((mod) => ({
@@ -370,13 +367,19 @@ export const DatePickerWithoutCalendar = ({
    onChange?.(newDate?.toString() ?? null);
  };

-  const handleDateChange = (datePicked: Date) => {
+  const handleDateChange = (datePicked: Date | null) => {
+    if (!isDefined(datePicked)) {
+      return;
+    }
    const plainDatePicked = turnJSDateToPlainDate(datePicked);

    onChange?.(plainDatePicked.toString());
  };

-  const handleDateSelect = (datePicked: Date) => {
+  const handleDateSelect = (datePicked: Date | null) => {
+    if (!isDefined(datePicked)) {
+      return;
+    }
    const plainDatePicked = turnJSDateToPlainDate(datePicked);

    handleClose?.(plainDatePicked.toString());
@@ -443,7 +446,9 @@ export const DatePickerWithoutCalendar = ({
            openToDate={dateForDatePicker ?? undefined}
            disabledKeyboardNavigation
            onChange={handleDateChange}
-            calendarStartDay={calendarStartDay}
+            calendarStartDay={
+              calendarStartDay as 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined
+            }
            renderCustomHeader={({
              prevMonthButtonDisabled,
              nextMonthButtonDisabled,
@@ -15,7 +15,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { lazy, Suspense, useContext, type ComponentType } from 'react';
-import type { ReactDatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
+import type { DatePickerProps as ReactDatePickerLibProps } from 'react-datepicker';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

 import 'react-datepicker/dist/react-datepicker.css';
@@ -346,10 +346,19 @@ type DateTimePickerProps = {
  timeZone?: string;
 };

-type DatePickerPropsType = ReactDatePickerLibProps<
-  boolean | undefined,
-  boolean | undefined
->;
+// react-datepicker v9 types its props as a discriminated union keyed on
+// selectsRange/selectsMultiple. We drive selectsMultiple dynamically, which TS
+// cannot narrow to a single union branch, so collapse the discriminants to plain
+// optionals (selectedDates is accepted but ignored by the library at runtime).
+type DatePickerPropsType = Omit<
+  ReactDatePickerLibProps,
+  'selectsRange' | 'selectsMultiple' | 'onChange' | 'formatMultipleDates'
+> & {
+  selectsRange?: boolean;
+  selectsMultiple?: boolean;
+  selectedDates?: Date[];
+  onChange?: (date: Date | null) => void;
+};

 const ReactDatePicker = lazy<ComponentType<DatePickerPropsType>>(() =>
  import('react-datepicker').then((mod) => ({
@@ -438,13 +447,19 @@ export const DateTimePicker = ({
    onChange?.(newZonedDateTime);
  };

-  const handleDateChange = (newDate: Date) => {
+  const handleDateChange = (newDate: Date | null) => {
+    if (!isDefined(newDate)) {
+      return;
+    }
    const { zonedDateTime } = getZonedDateTimeFromDatePicked(newDate);

    onChange?.(zonedDateTime);
  };

-  const handleDateSelect = (newDate: Date) => {
+  const handleDateSelect = (newDate: Date | null) => {
+    if (!isDefined(newDate)) {
+      return;
+    }
    const { zonedDateTime } = getZonedDateTimeFromDatePicked(newDate);

    handleClose?.(zonedDateTime);
@@ -524,7 +539,9 @@ export const DateTimePicker = ({
            openToDate={shiftedDateForReactDatePicker}
            disabledKeyboardNavigation
            onChange={handleDateChange}
-            calendarStartDay={calendarStartDayNumber}
+            calendarStartDay={
+              calendarStartDayNumber as 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined
+            }
            renderCustomHeader={({
              prevMonthButtonDisabled,
              nextMonthButtonDisabled,
@@ -1,6 +1,6 @@
 import { Draggable } from '@hello-pangea/dnd';
 import { isFunction } from '@sniptt/guards';
-import { useContext } from 'react';
+import { type JSX, useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

@@ -0,0 +1,15 @@
+import { type DraggableProvidedDraggableProps } from '@hello-pangea/dnd';
+import { type CSSProperties } from 'react';
+
+type CssCompatibleDraggableProps = Omit<
+  DraggableProvidedDraggableProps,
+  'style'
+> & { style?: CSSProperties };
+
+// @hello-pangea/dnd types draggableProps.style as DraggingStyle | NotDraggingStyle —
+// closed interfaces that do not satisfy the `--radix-${string}` index signature
+// @radix-ui/react-popper augments onto React.CSSProperties. Widen the style so the
+// props can be spread onto a styled element without a per-call-site cast.
+export const getCssCompatibleDraggableProps = (
+  draggableProps: DraggableProvidedDraggableProps,
+): CssCompatibleDraggableProps => draggableProps as CssCompatibleDraggableProps;
@@ -1,3 +1,4 @@
+import { type JSX } from 'react';
 import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
 import {
@@ -5,7 +5,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { Key } from 'ts-key-enum';

 type ModalHotkeysAndClickOutsideEffectProps = {
-  modalRef: React.RefObject<HTMLDivElement>;
+  modalRef: React.RefObject<HTMLDivElement | null>;
  onEnter?: () => void;
  isClosable?: boolean;
  onClose?: () => void;
@@ -4,7 +4,7 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { type FocusEvent, useRef } from 'react';
+import { type JSX, type FocusEvent, useRef } from 'react';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -10,7 +10,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
-import { type ReactNode, useContext } from 'react';
+import { type JSX, type ReactNode, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
 import { Pill } from 'twenty-ui-deprecated/components';
@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { type JSX, createContext } from 'react';

 import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
@@ -2,7 +2,7 @@ import { type RefObject, useEffect } from 'react';
 import { isDefined } from 'twenty-shared/utils';

 type NodeDimensionEffectProps = {
-  elementRef: RefObject<HTMLElement>;
+  elementRef: RefObject<HTMLElement | null>;
  onDimensionChange: (dimensions: { width: number; height: number }) => void;
 };

@@ -10,7 +10,7 @@ import { type SelectionBox } from '@/ui/utilities/drag-select/types/SelectionBox
 import { isValidSelectionStart } from '@/ui/utilities/drag-select/utils/selectionBoxValidation';

 type DragSelectProps = {
-  selectableItemsContainerRef: RefObject<HTMLElement>;
+  selectableItemsContainerRef: RefObject<HTMLElement | null>;
  onDragSelectionChange: (id: string, selected: boolean) => void;
  onDragSelectionStart?: (event: MouseEvent | TouchEvent) => void;
  onDragSelectionEnd?: (event: MouseEvent | TouchEvent) => void;
@@ -1,6 +1,6 @@
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from '@dr.pogodin/react-helmet';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
@@ -1,4 +1,4 @@
-import { Helmet } from 'react-helmet-async';
+import { Helmet } from '@dr.pogodin/react-helmet';

 type PageTitleProps = {
  title: string;
@@ -9,7 +9,7 @@ import { isDefined } from 'twenty-shared/utils';
 const CLICK_OUTSIDE_DEBUG_MODE = false;

 export type ClickOutsideListenerProps<T extends Element> = {
-  refs: Array<RefObject<T>>;
+  refs: Array<RefObject<T | null>>;
  excludedClickOutsideIds?: string[];
  callback: (event: MouseEvent | TouchEvent) => void;
  listenerId: string;