feat: bump to React 18.3 (#602)

package.json

@@ -87,7 +87,8 @@
     "@storybook/react-vite": "7.6.5",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "5.17.0",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "4.4.10",
     "@types/styled-components": "5.1.30",
     "@typescript-eslint/eslint-plugin": "6.14.0",
@@ -116,13 +117,13 @@
     "lint-staged": "15.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.5",
     "storybook": "7.6.5",
     "styled-components": "5.3.11",
-    "typescript": "5.3.3",
+    "typescript": "^5.4.5",
     "vite": "5.0.10",
     "vitest": "1.0.4"
   },
@@ -131,8 +132,8 @@
     "@emotion/styled": ">=11.11.0",
     "honorable": ">=1.0.0-beta.17",
     "honorable-theme-default": ">=1.0.0-beta.5",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
     "react-transition-group": ">=4.4.5",
     "styled-components": ">=5.3.11"
   },
@@ -146,4 +147,4 @@
       "eslint --fix --ext ts,tsx,js,jsx"
     ]
   }
-}
+}

src/components/AppIcon.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types'
 import {
   type ComponentProps,
   type ReactElement,
@@ -45,16 +44,6 @@ type AppIconProps = {
   onClose?: () => void
 }
 
-const propTypes = {
-  size: PropTypes.oneOf(SIZES),
-  spacing: PropTypes.oneOf(SPACINGS),
-  hue: PropTypes.oneOf(HUES),
-  clickable: PropTypes.bool,
-  url: PropTypes.string,
-  IconComponent: PropTypes.elementType,
-  alt: PropTypes.string,
-} as const
-
 const parentFillLevelToHue = {
   0: 'default',
   1: 'lighter',
@@ -227,7 +216,5 @@ function AppIconRef(
 
 const AppIcon = forwardRef(AppIconRef)
 
-AppIcon.propTypes = propTypes
-
 export default AppIcon
 export type { AppIconProps }

src/components/Banner.tsx

@@ -1,6 +1,5 @@
 import { type ReactNode, type Ref, forwardRef } from 'react'
 import { Div, Flex, type FlexProps, Span, type SpanProps } from 'honorable'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { type ColorKey, type SeverityExt, sanitizeSeverity } from '../types'
@@ -177,9 +176,4 @@ function BannerRef(
 
 const Banner = forwardRef(BannerRef)
 
-Banner.propTypes = {
-  severity: PropTypes.oneOf(BANNER_SEVERITIES),
-  onClose: PropTypes.func,
-}
-
 export default Banner

src/components/Callout.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames'
-import PropTypes from 'prop-types'
 import { type Dispatch, type PropsWithChildren, forwardRef, useId } from 'react'
 import styled, { useTheme } from 'styled-components'
 
@@ -375,12 +374,4 @@ const CalloutSC = styled.div<{
     : {}),
 }))
 
-Callout.propTypes = {
-  severity: PropTypes.oneOf(CALLOUT_SEVERITIES),
-  title: PropTypes.string,
-  size: PropTypes.oneOf(['compact', 'full']),
-  fillLevel: PropTypes.oneOf([0, 1, 2, 3]),
-  className: PropTypes.string,
-}
-
 export default Callout

src/components/Carousel.tsx

@@ -9,7 +9,6 @@ import {
 } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import { keyframes } from '@emotion/react'
-import PropTypes from 'prop-types'
 
 type DotProps = DivProps & {
   active?: boolean
@@ -20,10 +19,6 @@ export type CarouselProps = DivProps & {
   autoAdvanceTime?: number
 }
 
-const propTypes = {
-  autoAdvanceTime: PropTypes.number,
-}
-
 const dotAnimationIn = keyframes`
 0% {
   transform: scale(1)
@@ -172,6 +167,4 @@ function CarouselRef(
 
 const Carousel = forwardRef(CarouselRef)
 
-Carousel.propTypes = propTypes
-
 export default Carousel

src/components/Codeline.tsx

@@ -11,8 +11,6 @@ type CodelineProps = FlexProps & {
   onCopyClick?: (text: string) => Promise<void>
 }
 
-const propTypes = {}
-
 function CodelineRef(
   { children, displayText, onCopyClick, ...props }: CodelineProps,
   ref: Ref<any>
@@ -110,6 +108,4 @@ function CodelineRef(
 
 const Codeline = forwardRef(CodelineRef)
 
-Codeline.propTypes = propTypes
-
 export default Codeline

src/components/ComboBox.tsx

@@ -3,7 +3,6 @@ import { isEmpty, isUndefined, omit, pick } from 'lodash-es'
 import {
   type ComponentProps,
   type HTMLAttributes,
-  type Key,
   type KeyboardEvent,
   type KeyboardEventHandler,
   type MouseEventHandler,
@@ -25,6 +24,8 @@ import {
 } from 'react-stately'
 import styled, { useTheme } from 'styled-components'
 
+import { type Key } from '@react-types/shared'
+
 import { useFloatingDropdown } from '../hooks/useFloatingDropdown'
 
 import DropdownArrowIcon from './icons/DropdownArrowIcon'

src/components/Divider.tsx

@@ -1,17 +1,12 @@
 import { type Ref, forwardRef } from 'react'
 import { Div, Flex, type FlexProps, P } from 'honorable'
-import PropTypes from 'prop-types'
 
 type DividerProps = FlexProps & {
   text?: string
   color?: string
   backgroundColor?: string
 }
 
-const propTypes = {
-  text: PropTypes.string,
-}
-
 function DividerRef(
   {
     text,
@@ -55,6 +50,4 @@ function DividerRef(
 
 const Divider = forwardRef(DividerRef)
 
-Divider.propTypes = propTypes
-
 export default Divider

src/components/EmptyState.tsx

@@ -4,7 +4,6 @@ import {
   type Ref,
   forwardRef,
 } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 type EmptyStateProps = ComponentProps<typeof EmptyStateSC> & {
@@ -13,12 +12,6 @@ type EmptyStateProps = ComponentProps<typeof EmptyStateSC> & {
   icon?: ReactElement
 }
 
-const propTypes = {
-  message: PropTypes.string.isRequired,
-  description: PropTypes.string,
-  icon: PropTypes.element,
-}
-
 const EmptyStateSC = styled.div(({ theme }) => ({
   padding: theme.spacing.xxlarge,
   gap: theme.spacing.medium,
@@ -60,6 +53,4 @@ function EmptyStateRef(
 
 const EmptyState = forwardRef(EmptyStateRef)
 
-EmptyState.propTypes = propTypes
-
 export default EmptyState

src/components/Flyover.tsx

@@ -1,5 +1,4 @@
 import { type ReactNode, type Ref, forwardRef, useEffect } from 'react'
-import PropTypes from 'prop-types'
 
 import styled, { type StyledComponentPropsWithRef } from 'styled-components'
 
@@ -23,15 +22,6 @@ type FlyoverPropsType = Omit<ModalProps, 'size'> & {
   [x: string]: unknown
 }
 
-const propTypes = {
-  header: PropTypes.node,
-  lockBody: PropTypes.bool,
-  scrollable: PropTypes.bool,
-  asForm: PropTypes.bool,
-  width: PropTypes.string,
-  minWidth: PropTypes.number,
-} as const
-
 const FlyoverSC = styled.div(({ theme }) => ({
   position: 'relative',
   backgroundColor: theme.colors['fill-zero'],
@@ -151,6 +141,4 @@ function FlyoverRef(
 
 const Flyover = forwardRef(FlyoverRef)
 
-Flyover.propTypes = propTypes
-
 export default Flyover

src/components/FormField.tsx

@@ -1,6 +1,5 @@
 import { type AriaLabelingProps, type DOMProps } from '@react-types/shared'
 import { Div, type DivProps, Flex, Label, P } from 'honorable'
-import PropTypes from 'prop-types'
 import {
   type LabelHTMLAttributes,
   type PropsWithChildren,
@@ -45,16 +44,6 @@ export function useFormField() {
   return context
 }
 
-const propTypes = {
-  label: PropTypes.node,
-  caption: PropTypes.node,
-  hint: PropTypes.node,
-  length: PropTypes.number,
-  maxLength: PropTypes.number,
-  required: PropTypes.bool,
-  small: PropTypes.bool,
-}
-
 function FormFieldRef(
   {
     children,
@@ -181,6 +170,4 @@ function FormFieldRef(
 
 const FormField = forwardRef(FormFieldRef)
 
-FormField.propTypes = propTypes
-
 export default FormField

src/components/FormTitle.tsx

@@ -1,17 +1,11 @@
 import { type FlexProps, H3, P } from 'honorable'
-import PropTypes from 'prop-types'
 import { type Ref, forwardRef } from 'react'
 
 type FormTitleProps = FlexProps & {
   title?: string
   message?: string
 }
 
-const propTypes = {
-  title: PropTypes.string,
-  message: PropTypes.string,
-}
-
 function FormTitleRef(
   { title, message, ...props }: FormTitleProps,
   ref: Ref<any>
@@ -38,6 +32,4 @@ function FormTitleRef(
 
 const FormTitle = forwardRef(FormTitleRef)
 
-FormTitle.propTypes = propTypes
-
 export default FormTitle

src/components/Highlight.tsx

@@ -155,8 +155,6 @@ type HighlightProps = Omit<ComponentPropsWithoutRef<'pre'>, 'children'> & {
   children: string
 }
 
-const propTypes = {}
-
 function HighlightRef(
   { language, children, showLineNumbers, ...props }: HighlightProps,
   ref: Ref<any>
@@ -199,6 +197,4 @@ function HighlightRef(
 
 const Highlight = forwardRef(HighlightRef)
 
-Highlight.propTypes = propTypes
-
 export default Highlight

src/components/ListBox.tsx

@@ -1,7 +1,6 @@
 import {
   Children,
   type ComponentPropsWithRef,
-  type Key,
   type ReactElement,
   type ReactNode,
   type RefObject,
@@ -18,6 +17,8 @@ import styled, { type DefaultTheme, useTheme } from 'styled-components'
 
 import { Item } from 'react-stately'
 
+import { type Key } from '@react-types/shared'
+
 import { type CSSObject } from '../types'
 
 import Card from './Card'

src/components/Modal.tsx

@@ -1,5 +1,4 @@
 import { type ReactNode, type Ref, forwardRef, useEffect } from 'react'
-import PropTypes from 'prop-types'
 
 import styled, { type StyledComponentPropsWithRef } from 'styled-components'
 
@@ -40,15 +39,6 @@ type ModalPropsType = Omit<ModalProps, 'size'> & {
   [x: string]: unknown
 }
 
-const propTypes = {
-  form: PropTypes.bool,
-  size: PropTypes.oneOf(SIZES),
-  header: PropTypes.node,
-  actions: PropTypes.node,
-  severity: PropTypes.oneOf(SEVERITIES),
-  lockBody: PropTypes.bool,
-} as const
-
 const severityToIconColorKey = {
   default: 'icon-default',
   info: 'icon-info',
@@ -209,6 +199,4 @@ function ModalRef(
 
 const Modal = forwardRef(ModalRef)
 
-Modal.propTypes = propTypes
-
 export default Modal

src/components/PopoverListBox.tsx

@@ -18,7 +18,7 @@ type PopoverListBoxProps = {
   isOpen: boolean
   onClose: () => void
   listBoxState: ListState<object>
-  listBoxProps: AriaListBoxOptions<object>
+  listBoxProps: Omit<AriaListBoxOptions<object>, 'autoFocus'>
   floating: UseFloatingReturn<any>
 } & Pick<PopoverProps, 'popoverRef'> &
   Pick<ListBoxUnmanagedProps, 'listBoxRef'> &

src/components/Select.tsx

@@ -1,6 +1,5 @@
 import {
   type HTMLAttributes,
-  type Key,
   type ReactElement,
   type ReactNode,
   type RefObject,
@@ -15,6 +14,8 @@ import { type AriaSelectProps } from '@react-types/select'
 
 import { type Placement } from '@floating-ui/react-dom-interactions'
 
+import { type Key } from '@react-types/shared'
+
 import {
   type BimodalSelectProps,
   type BimodalSelectState,