Update @types/react to 19

design-system/docs/app/(site)/colours/colours-inner.tsx

@@ -7,6 +7,8 @@ import { Heading, Text } from '@keystar/ui/typography';
 
 import { DocsContent } from '../../../components/content';
 
+import type { JSX } from 'react';
+
 export function Colours(): JSX.Element {
   const colors = [
     {

design-system/docs/components/content/index.tsx

@@ -6,6 +6,7 @@ import {
   ReactNode,
   Fragment,
   useCallback,
+  type JSX,
 } from 'react';
 
 import { Icon } from '@keystar/ui/icon';

design-system/docs/components/doc-page.tsx

@@ -5,6 +5,8 @@ import { generateToc } from '../utils/generate-toc';
 import { DocsContent } from './content';
 import { DocContent } from './mdx-components/mdx-content';
 
+import type { JSX } from 'react';
+
 export type DocPageProps = {
   content: Tag;
   description: string | null;

design-system/docs/components/layout.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 
 import { Flex } from '@keystar/ui/layout';
 

design-system/docs/components/mdx-components/code-block.tsx

@@ -4,6 +4,8 @@ import { css, tokenSchema } from '@keystar/ui/style';
 
 import { Highlight } from './highlight';
 
+import type { JSX } from 'react';
+
 type CodeBlockProps = {
   language?: string;
   content: string;

design-system/docs/components/mdx-components/highlight.tsx

@@ -5,6 +5,8 @@ import { Box } from '@keystar/ui/layout';
 
 import { usePrismTheme } from './prism-theme';
 
+import type { JSX } from 'react';
+
 interface HighlightProps {
   code: string;
   language: string;

design-system/docs/components/mdx-components/mdx-content.tsx

@@ -3,7 +3,7 @@ import type {
   RenderableTreeNodes,
   Scalar,
 } from '@markdoc/markdoc';
-import React, { ElementType, ReactNode } from 'react';
+import React, { ElementType, ReactNode, type JSX } from 'react';
 import { isTag } from '../../utils/utils';
 import { mdxComponents } from './mdx-components';
 

design-system/docs/components/mdx-components/mdx-table.tsx

@@ -3,6 +3,8 @@ import { Box, BoxProps } from '@keystar/ui/layout';
 import { css } from '@keystar/ui/style';
 import { Text } from '@keystar/ui/typography';
 
+import type { JSX } from 'react';
+
 export function MdxTable({ children, ...rest }: BoxProps): JSX.Element {
   return (
     <Box overflow="auto">

design-system/docs/components/mdx-components/react-live/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 import copy from 'clipboard-copy';
 import { createUrl } from 'playroom/utils';
-import { ReactNode, useEffect, useId, useState } from 'react';
+import { ReactNode, useEffect, useId, useState, type JSX } from 'react';
 
 import { ActionButton } from '@keystar/ui/button';
 import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon';

design-system/docs/package.json

@@ -52,7 +52,7 @@
     "@storybook/preview-api": "^7.4.6",
     "@storybook/react": "^7.4.6",
     "@types/node": "22.13.1",
-    "@types/react": "^18.2.8",
+    "@types/react": "^19.0.8",
     "babel-loader": "^8.2.5",
     "playroom": "^0.28.0",
     "storybook": "^7.0.22",

design-system/docs/playroom/components.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export * from '../components/scope';
 
 export function Render({

design-system/docs/playroom/frame.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, type JSX } from 'react';
 
 import {
   ClientSideOnlyDocumentElement,

design-system/pkg/package.json

@@ -1560,7 +1560,7 @@
     "@react-types/switch": "^3.5.5",
     "@react-types/table": "^3.10.1",
     "@react-types/tabs": "^3.3.9",
-    "@types/react": "^18.2.8",
+    "@types/react": "^19.0.8",
     "emery": "^1.4.1",
     "facepaint": "^1.2.1"
   },
@@ -1578,7 +1578,7 @@
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/facepaint": "^1.2.2",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^19.0.3",
     "lucide-static": "^0.314.0",
     "next": "^15.1.6",
     "react": "^19.0.0",

design-system/pkg/src/action-group/ActionGroup.tsx

@@ -14,7 +14,6 @@ import { ListState, useListState } from '@react-stately/list';
 import { AriaLabelingProps, DOMProps, Node } from '@react-types/shared';
 import {
   ForwardedRef,
-  Key,
   ReactElement,
   ReactNode,
   forwardRef,
@@ -371,7 +370,7 @@ function ActionGroup<T extends object>(
 
 /** Group related action buttons together. */
 const _ActionGroup: <T>(
-  props: ActionGroupProps<T> & { ref?: RefObject<HTMLDivElement> }
+  props: ActionGroupProps<T> & { ref?: RefObject<HTMLDivElement | null> }
 ) => ReactElement = forwardRef(ActionGroup) as any;
 export { _ActionGroup as ActionGroup };
 
@@ -382,7 +381,7 @@ interface ActionGroupItemProps<T> extends DOMProps, BaseStyleProps {
   hideButtonText?: boolean;
   orientation?: 'horizontal' | 'vertical';
   prominence?: 'low' | 'default';
-  onAction?: (key: Key) => void;
+  onAction?: (key: string | number) => void;
 }
 
 function ActionGroupItem<T>({
@@ -490,7 +489,7 @@ interface ActionGroupMenuProps<T> extends AriaLabelingProps {
   isDisabled?: boolean;
   isOnlyItem?: boolean;
   items: Node<T>[];
-  onAction?: (key: Key) => void;
+  onAction?: (key: string | number) => void;
   orientation?: 'horizontal' | 'vertical';
   prominence?: 'low' | 'default';
   state: ListState<T>;

design-system/pkg/src/breadcrumbs/Breadcrumbs.tsx

@@ -28,6 +28,7 @@ import { classNames, css, tokenSchema, useStyleProps } from '@keystar/ui/style';
 
 import { BreadcrumbItem, breadcrumbsClassList } from './BreadcrumbItem';
 import { BreadcrumbsProps } from './types';
+import { ItemProps } from '@react-types/shared';
 
 const MIN_VISIBLE_ITEMS = 1;
 const MAX_VISIBLE_ITEMS = 4;
@@ -47,7 +48,7 @@ function Breadcrumbs<T>(
   } = props;
 
   // Not using React.Children.toArray because it mutates the key prop.
-  let childArray: ReactElement[] = [];
+  let childArray: ReactElement<ItemProps<T>>[] = [];
   Children.forEach(children, child => {
     if (isValidElement(child)) {
       childArray.push(child);

design-system/pkg/src/button/ButtonGroup.tsx

@@ -121,7 +121,7 @@ export const ButtonGroup: ForwardRefExoticComponent<
   // 2. External changes: buttongroup won't change size due to any parents
   //    changing size, so listen to its container for size changes to figure out
   //    if we should remeasure
-  let parent = useRef<HTMLElement>();
+  let parent = useRef<HTMLElement>(null);
   useLayoutEffect(() => {
     if (domRef.current) {
       parent.current = domRef.current.parentElement as HTMLElement;

design-system/pkg/src/calendar/CalendarBase.tsx

@@ -30,7 +30,7 @@ interface CalendarBaseProps<T extends CalendarState | RangeCalendarState>
   calendarProps: HTMLAttributes<HTMLElement>;
   nextButtonProps: AriaButtonProps;
   prevButtonProps: AriaButtonProps;
-  calendarRef: RefObject<HTMLDivElement>;
+  calendarRef: RefObject<HTMLDivElement | null>;
 }
 
 export function CalendarBase<T extends CalendarState | RangeCalendarState>(

design-system/pkg/src/checkbox/Checkbox.tsx

@@ -70,7 +70,7 @@ function CheckboxAlone(props: CheckboxProps) {
 
 function CheckboxInner(
   props: CheckboxProps & {
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     inputProps: InputHTMLAttributes<HTMLInputElement>;
   }
 ) {

design-system/pkg/src/combobox/Combobox.tsx

@@ -131,7 +131,6 @@ const ComboboxBase = React.forwardRef(function ComboboxBase<T extends object>(
         labelProps={labelProps}
         ref={fieldRef}
       >
-        {/* @ts-expect-error FIXME: not sure how to resolve this type error */}
         <ComboboxInput
           {...props}
           isOpen={state.isOpen}
@@ -190,9 +189,9 @@ export function ComboboxEmptyState(props: { loadingState?: LoadingState }) {
 
 export function usePopoverStyles(props: {
   menuWidth?: number;
-  buttonRef: RefObject<HTMLButtonElement>;
-  inputRef: RefObject<HTMLInputElement>;
-  fieldRef: RefObject<HTMLDivElement>;
+  buttonRef: RefObject<HTMLButtonElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
+  fieldRef: RefObject<HTMLDivElement | null>;
 }) {
   const { buttonRef, inputRef, fieldRef, menuWidth: menuWidthProp } = props;
 
@@ -231,18 +230,18 @@ export function useStatefulRef<T extends HTMLElement>() {
   }, [current, statefulRef]);
 }
 
-interface ComboboxInputProps extends ComboboxProps<unknown> {
+interface ComboboxInputProps<T> extends ComboboxProps<T> {
   inputProps: InputHTMLAttributes<HTMLInputElement>;
-  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+  inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
   triggerProps: AriaButtonProps;
-  triggerRef: RefObject<HTMLButtonElement>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
   style?: React.CSSProperties;
   isOpen?: boolean;
 }
 
 /** @private Used by multi variant. */
-export const ComboboxInput = React.forwardRef(function ComboboxInput(
-  props: ComboboxInputProps,
+export const ComboboxInput = React.forwardRef(function ComboboxInput<T>(
+  props: ComboboxInputProps<T>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 ) {
   let {
@@ -258,7 +257,7 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
     menuTrigger,
   } = props;
   let stringFormatter = useLocalizedStringFormatter(localizedMessages);
-  let timeoutRef = useRef<NodeJS.Timeout>();
+  let timeoutRef = useRef<NodeJS.Timeout>(undefined);
   let [showLoading, setShowLoading] = useState(false);
 
   let loadingCircle = (
@@ -362,7 +361,9 @@ export const ComboboxInput = React.forwardRef(function ComboboxInput(
       </div>
     </FocusRing>
   );
-});
+}) as <T>(
+  props: ComboboxInputProps<T> & { ref?: ForwardedRef<HTMLDivElement> }
+) => ReactElement;
 
 /**
  * A combobox combines a text input with a listbox, and allows users to filter a

design-system/pkg/src/combobox/MobileCombobox.tsx

@@ -294,7 +294,7 @@ function ComboboxTray<T extends object>(props: ComboboxTrayProps<T>) {
     onClose,
   } = props;
 
-  let timeoutRef = useRef<NodeJS.Timeout>();
+  let timeoutRef = useRef<NodeJS.Timeout>(undefined);
   let [showLoading, setShowLoading] = useState(false);
   let inputRef = useRef<HTMLInputElement>(null);
   let buttonRef = useRef<HTMLDivElement>(null);

design-system/pkg/src/combobox/MobileComboboxMulti.tsx

@@ -291,7 +291,7 @@ function ComboboxTray<T extends object>(props: ComboboxTrayProps<T>) {
     onClose,
   } = props;
 
-  let timeoutRef = useRef<NodeJS.Timeout>();
+  let timeoutRef = useRef<NodeJS.Timeout>(undefined);
   let [showLoading, setShowLoading] = useState(false);
   let inputRef = useRef<HTMLInputElement>(null);
   let buttonRef = useRef<HTMLDivElement>(null);

design-system/pkg/src/date-time/DatePickerPopover.tsx

@@ -17,7 +17,7 @@ export function DatePickerPopover({
   dialogProps: AriaDialogProps;
   shouldFlip?: boolean;
   state: DatePickerState | DateRangePickerState;
-  triggerRef: React.RefObject<HTMLElement>;
+  triggerRef: React.RefObject<HTMLElement | null>;
 }) {
   let scrollRef = useRef<HTMLDivElement>(null);
   let { direction } = useLocale();

design-system/pkg/src/date-time/stories/DateField.stories.tsx

@@ -17,6 +17,7 @@ import { ArgTypes, action } from '@keystar/ui-storybook';
 import React from 'react';
 
 import { DateField, DateFieldProps } from '..';
+import { Key } from '@react-types/shared';
 
 export default {
   title: 'Components/Date and Time/DateField',
@@ -268,8 +269,8 @@ const calendars = [
 ];
 
 function Example<T extends DateValue>(props: DateFieldProps<T>) {
-  let [locale, setLocale] = React.useState<React.Key>('');
-  let [calendar, setCalendar] = React.useState<React.Key>(calendars[0].key);
+  let [locale, setLocale] = React.useState<Key>('');
+  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
   let { locale: defaultLocale } = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
@@ -289,7 +290,7 @@ function Example<T extends DateValue>(props: DateFieldProps<T>) {
     [preferredCalendars]
   );
 
-  let updateLocale = (locale: React.Key) => {
+  let updateLocale = (locale: Key) => {
     setLocale(locale);
     let pref = preferences.find(p => p.locale === locale);
     setCalendar(pref!.ordering.split(' ')[0]);

design-system/pkg/src/dialog/DialogTrigger.tsx

@@ -6,7 +6,7 @@ import {
   useOverlayTriggerState,
 } from '@react-stately/overlays';
 import { assertNever } from 'emery';
-import { Children, Fragment, ReactElement, useEffect, useRef } from 'react';
+import { Children, Fragment, ReactElement, useEffect, useRef, type JSX } from 'react';
 
 import { Modal, Popover, PopoverProps, Tray } from '@keystar/ui/overlays';
 import { breakpointQueries, useMediaQuery } from '@keystar/ui/style';

design-system/pkg/src/dialog/types.ts

@@ -44,7 +44,7 @@ export type DialogTriggerProps = {
    * The ref of the element the dialog should visually attach itself to.
    * Defaults to the trigger button if not defined.
    */
-  targetRef?: RefObject<HTMLElement>;
+  targetRef?: RefObject<HTMLElement | null>;
   /** Whether a "modal" type dialog should be dismissable. */
   isDismissable?: boolean;
   /** Whether pressing the escape key to close the dialog should be disabled. */

design-system/pkg/src/drag-and-drop/types.ts

@@ -20,8 +20,9 @@ import {
   DraggableCollectionProps,
   DragItem,
   DroppableCollectionProps,
+  Key,
 } from '@react-types/shared';
-import { Key, RefObject } from 'react';
+import { RefObject, type JSX } from 'react';
 
 interface DraggableCollectionStateOpts
   extends Omit<DraggableCollectionStateOptions, 'getItems'> {}

design-system/pkg/src/drag-and-drop/useDragAndDrop.ts

@@ -17,7 +17,7 @@ import {
   useDroppableCollectionState,
 } from '@react-stately/dnd';
 import type { Key } from '@react-types/shared';
-import { RefObject, useMemo } from 'react';
+import { RefObject, useMemo, type JSX } from 'react';
 
 import {
   DragAndDropHooks,

design-system/pkg/src/editor/EditorListbox.tsx

@@ -15,8 +15,8 @@ import { ListBoxBase, listStyles, useListBoxLayout } from '@keystar/ui/listbox';
 import { BaseStyleProps } from '@keystar/ui/style';
 
 export type EditorListboxProps<T> = {
-  listenerRef: RefObject<HTMLElement>;
-  scrollRef?: RefObject<HTMLElement>;
+  listenerRef: RefObject<HTMLElement | null>;
+  scrollRef?: RefObject<HTMLElement | null>;
   onAction?: (key: Key) => void;
   onEscape?: () => void;
 } & CollectionBase<T> &

design-system/pkg/src/editor/EditorToolbar.tsx

@@ -330,7 +330,10 @@ function useToolbarItem<P extends { isDisabled?: boolean }>(props: P) {
   };
 }
 
-function useToolbar(props: EditorToolbarProps, ref: RefObject<HTMLElement>) {
+function useToolbar(
+  props: EditorToolbarProps,
+  ref: RefObject<HTMLElement | null>
+) {
   let [lastFocusedId, setLastFocusedId] = useState<Key | null>(null);
   let { direction } = useLocale();
   let focusManager = createFocusManager(ref, { wrap: true });

design-system/pkg/src/list-view/ListView.tsx

@@ -77,7 +77,7 @@ function useListLayout<T>(
 
 function ListView<T extends object>(
   props: ListViewProps<T>,
-  ref: RefObject<HTMLDivElement>
+  ref: RefObject<HTMLDivElement | null>
 ) {
   let {
     density = 'regular',
@@ -409,6 +409,6 @@ function CenteredWrapper({ children }: PropsWithChildren) {
  * or perform an action.
  */
 const _ListView = React.forwardRef(ListView as any) as <T>(
-  props: ListViewProps<T> & { ref?: RefObject<HTMLDivElement> }
+  props: ListViewProps<T> & { ref?: RefObject<HTMLDivElement | null> }
 ) => ReactElement;
 export { _ListView as ListView };