EN-26992: Upgrade to React 19

package.json

@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "@typescript-eslint/utils": "^8.15.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   },
   "devDependencies": {
     "@aabenoja/conventional-changelog-eslint-lerna": "^1.0.2",
@@ -52,8 +52,8 @@
     "@types/js-beautify": "^1.14.3",
     "@types/node": "^18.11.17",
     "@types/prop-types": "^15.7.14",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "babel-plugin-lodash": "^3.3.4",
     "commander": "^12.1.0",
     "commitlint": "^17.3.0",

packages/es-components/package.json

@@ -70,8 +70,8 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.2",
     "@types/node": "^18.11.17",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/rewire": "^2.5.28",
     "ast-types": "^0.14.2",
@@ -104,12 +104,12 @@
     "mochawesome-report-generator": "^6.2.0",
     "node-fetch": "^3.3.0",
     "node-forge": "^1.3.1",
-    "react": "^18.3.1",
+    "react": "^19.1.1",
     "react-context-toolbox": "^2.0.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.1",
     "react-styleguidist": "^13.1.4",
     "react-syntax-highlighter": "^15.5.0",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "^19.1.1",
     "rollup": "^3.8.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-generate-html-template": "^1.7.0",
@@ -127,17 +127,16 @@
   },
   "dependencies": {
     "@babel/helpers": "^7.20.7",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-react": "^7.27.1",
     "@babel/runtime": "^7.20.7",
     "@babel/runtime-corejs3": "^7.20.7",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.14.0",
     "@floating-ui/utils": "^0.2.1",
-    "@im-open/react-text-mask": "^5.4.4",
+    "@im-open/react-text-mask": "^5.5.0",
     "@popperjs/core": "^2.11.6",
     "@types/lodash": "^4.14.194",
     "@types/prop-types": "^15.7.14",
-    "@types/react-datepicker": "^6.0.0",
     "@types/react-modal": "^3.16.0",
     "@types/react-text-mask": "^5.4.11",
     "@types/react-transition-group": "^4.4.5",
@@ -150,7 +149,7 @@
     "get-root-node-polyfill": "^1.0.0",
     "prop-types": "^15.8.1",
     "react-animate-height": "^3.2.3",
-    "react-datepicker": "^6.1.0",
+    "react-datepicker": "^7.6.0",
     "react-is": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-overlays": "^5.2.1",

packages/es-components/src/components/base/icons/FullColorIcon.tsx

@@ -53,8 +53,4 @@ FullColorIcon.propTypes = {
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
-FullColorIcon.defaultProps = {
-  size: undefined
-};
-
 export default FullColorIcon;

packages/es-components/src/components/base/spinner/Spinner.tsx

@@ -99,7 +99,7 @@ export type SpinnerProps = RequireAtLeastOne<
   JSXElementProps<'svg'>;
 
 const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
-  function ForwardedSpinner({ title, description, ...other }, ref) {
+  function ForwardedSpinner({ title = '', description = '', ...other }, ref) {
     const propId = other.id || '';
     const generatedId = `${useUniqueId(propId)}-title`;
     const generatedDesc = `${useUniqueId(propId)}-desc`;
@@ -152,9 +152,4 @@ Spinner.propTypes = {
   description: descriptionTitleProp
 };
 
-Spinner.defaultProps = {
-  title: '',
-  description: ''
-};
-
 export default Spinner;

packages/es-components/src/components/containers/drawer/Drawer.tsx

@@ -224,18 +224,6 @@ Drawer.propTypes = {
   useDefaultStyles: PropTypes.bool
 };
 
-Drawer.defaultProps = {
-  activeKeys: undefined,
-  isAccordion: false,
-  closedIconName: 'add',
-  openedIconName: 'minus',
-  children: undefined,
-  useDefaultStyles: true,
-  onActiveKeysChanged: () => {
-    // noop
-  }
-};
-
 type DrawerComponent = DrawerComponentType & {
   Panel: typeof DrawerPanel;
   Item: typeof DrawerItem;

packages/es-components/src/components/containers/drawer/DrawerPanel.tsx

@@ -1,8 +1,8 @@
 import React, { useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 import Heading from '../heading/Heading';
 import {
   useDrawerItemContext,
   DrawerItem,
@@ -11,7 +11,7 @@
 } from './DrawerItem';
 import Icon, { IconProps } from '../../base/icons/Icon';
 import useUniqueId from '../../util/useUniqueId';
 import { IconName, iconNames, HeadingLevel } from 'es-components-shared-types';
 
 const PanelWrapper = styled.div`
   border-bottom: 1px solid ${props => props.theme.colors.gray3};
@@ -106,7 +106,7 @@
     },
     ref
   ) {
-    const buttonRef = useRef() as React.MutableRefObject<HTMLButtonElement>;
+    const buttonRef = useRef<HTMLButtonElement>(null);
     useImperativeHandle(ref, () => ({
       focusHeaderButton: () => buttonRef.current?.focus()
     }));
@@ -145,39 +145,4 @@
   }
 );
 
-export const propTypes = {
-  ...(PanelWrapper.propTypes || {}),
-  children: PropTypes.node.isRequired,
-  /** Title text displayed next to the open/close icon */
-  title: PropTypes.node.isRequired,
-  /** Aside text/content displayed on the right side of the panel title */
-  titleAside: PropTypes.node,
-  /** Removes the default padding from the panel body */
-  noPadding: PropTypes.bool,
-  /** Set desired aria-level for heading */
-
-  headingLevel: Heading.propTypes!.level,
-  open: PropTypes.bool,
-
-  // INTERNAL PROPS
-  /** @ignore */
-  closedIconName: PropTypes.oneOf<IconName>([...iconNames]),
-  /** @ignore */
-  openedIconName: PropTypes.oneOf<IconName>([...iconNames]),
-  /** @ignore */
-  panelKey: PropTypes.string
-};
-
-DrawerPanel.propTypes = propTypes;
-DrawerPanel.defaultProps = {
-  ...(PanelWrapper.defaultProps || {}),
-  noPadding: false,
-  titleAside: undefined,
-  headingLevel: 2,
-  panelKey: undefined,
-  open: undefined,
-  closedIconName: 'add',
-  openedIconName: 'minus'
-};
-
 export default DrawerPanel;

packages/es-components/src/components/containers/fieldset/Fieldset.tsx

@@ -8,7 +8,7 @@ import OrientationContext, {
 } from '../../controls/OrientationContext';
 import isBool from '../../util/isBool';
 
-type FieldsetProps = Omit<JSX.IntrinsicElements['fieldset'], 'ref'> & {
+type FieldsetProps = Omit<React.JSX.IntrinsicElements['fieldset'], 'ref'> & {
   legendContent?: React.ReactNode | undefined;
   orientation?: Orientation | undefined;
   flat?: boolean | undefined;
@@ -54,7 +54,13 @@ const Legend = styled.legend`
 
 const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
   function ForwardedFieldset(
-    { legendContent, children, orientation: orientationProp, flat, ...other },
+    {
+      legendContent = null,
+      children,
+      orientation: orientationProp,
+      flat,
+      ...other
+    },
     ref
   ) {
     const orientation = useContext(OrientationContext);
@@ -87,13 +93,6 @@ Fieldset.propTypes = {
   children: PropTypes.node
 };
 
-Fieldset.defaultProps = {
-  orientation: undefined,
-  legendContent: null,
-  flat: undefined,
-  children: undefined
-};
-
 (Fieldset as FieldsetComponent).Legend = Legend;
 
 export default Fieldset as FieldsetComponent;

packages/es-components/src/components/containers/form/Form.tsx

@@ -59,7 +59,3 @@ Form.propTypes = {
   /** Apply the Flat Style to all children */
   flat: PropTypes.bool
 };
-
-Form.defaultProps = {
-  flat: undefined
-};

packages/es-components/src/components/containers/horizontalScrollWrapper/HorizontalScrollWrapper.tsx

@@ -317,10 +317,6 @@ HorizontalScrollWrapper.propTypes = {
   slideAmount: PropTypes.number
 };
 
-HorizontalScrollWrapper.defaultProps = {
-  slideAmount: 300
-};
-
 export default withWindowSize<HorizontalScrollWrapperProps, HTMLDivElement>(
   HorizontalScrollWrapper
 );

packages/es-components/src/components/containers/loading-skeleton/LoadingSkeleton.tsx

@@ -77,7 +77,7 @@ export type LoadingSkeletonProps = JSXElementProps<'div'> & {
 
 const LoadingSkeleton = React.forwardRef<HTMLDivElement, LoadingSkeletonProps>(
   function ForwardedLoadingSkeleton(
-    { shapeColor, shimmerColor, ...props },
+    { shapeColor = '', shimmerColor = '', ...props },
     ref
   ) {
     const theme = useTheme() as SkeletonTheme;
@@ -98,11 +98,6 @@ LoadingSkeleton.propTypes = {
   shimmerColor: PropTypes.string
 };
 
-LoadingSkeleton.defaultProps = {
-  shapeColor: '',
-  shimmerColor: ''
-};
-
 type LoadingSkeletonComponent = typeof LoadingSkeleton & {
   Shape: typeof SkeletonShape;
 };

packages/es-components/src/components/containers/menu/MenuPanel.tsx

@@ -55,7 +55,7 @@ type MenuPanelProps = JSXElementProps<'div'> & {
 
 const MenuPanel = React.forwardRef<HTMLDivElement, MenuPanelProps>(
   function ForwardedMenuPanel(
-    { children, headerContent, isOpen, onClose, ...other },
+    { children, headerContent = null, isOpen = false, onClose, ...other },
     ref
   ) {
     const getTopIndex = useTopZIndex();
@@ -111,9 +111,4 @@ MenuPanel.propTypes = {
   onClose: PropTypes.func.isRequired
 };
 
-MenuPanel.defaultProps = {
-  headerContent: null,
-  isOpen: false
-};
-
 export default MenuPanel;

packages/es-components/src/components/containers/menu/MenuSection.tsx

@@ -38,7 +38,14 @@ const StyledChildrenContainer = styled.section`
 
 const MenuSection = React.forwardRef<HTMLElement, MenuSectionProps>(
   function MenuSection(props, ref) {
-    const { title, children, isLast, isFirst, isOnlySection, ...other } = props;
+    const {
+      title,
+      children,
+      isLast = false,
+      isFirst = false,
+      isOnlySection = false,
+      ...other
+    } = props;
     const inline = useContext(InlineContext);
 
     return (
@@ -67,12 +74,4 @@ MenuSection.propTypes = {
   isOnlySection: PropTypes.bool
 };
 
-MenuSection.defaultProps = {
-  title: undefined,
-  children: undefined,
-  isLast: false,
-  isFirst: false,
-  isOnlySection: false
-};
-
 export default MenuSection;

packages/es-components/src/components/containers/modal/ModalHeader.tsx

@@ -8,7 +8,7 @@ import Heading from '../heading/Heading';
 import { HeadingLevel, headingLevel } from 'es-components-shared-types';
 
 const DismissButton = OrigDismissButton as React.ForwardRefExoticComponent<
-  JSX.IntrinsicElements['button']
+  React.JSX.IntrinsicElements['button']
 >;
 
 // Note: ModalHeader relies on a parent (Modal) with ThemeProvider wrapping it

packages/es-components/src/components/containers/notification/LightNotification.tsx

@@ -8,8 +8,15 @@ import { BaseNotification, BaseNotificationProps } from './BaseNotification';
 const LightNotification = React.forwardRef<
   HTMLDivElement,
   BaseNotificationProps
->(function LightNotification(props, ref) {
-  return <BaseNotification ref={ref} {...props} styleType="light" />;
+>(function LightNotification({ onDismiss = noop, ...props }, ref) {
+  return (
+    <BaseNotification
+      ref={ref}
+      onDismiss={onDismiss}
+      {...props}
+      styleType="light"
+    />
+  );
 });
 
 LightNotification.propTypes = {
@@ -25,11 +32,4 @@ LightNotification.propTypes = {
   alwaysShowIcon: PropTypes.bool
 };
 
-LightNotification.defaultProps = {
-  includeIcon: false,
-  isDismissable: false,
-  onDismiss: noop,
-  alwaysShowIcon: false
-};
-
 export default LightNotification;

packages/es-components/src/components/containers/notification/Message.tsx

@@ -12,18 +12,13 @@ const propTypes = {
   text: PropTypes.node.isRequired
 };
 
-const defaultProps = {
-  emphasizedText: undefined
-};
-
 export const InlineMessage = React.forwardRef<HTMLSpanElement, MessageProps>(
   function ForwardedInlineMessage(props, ref) {
     return <Message {...props} isInline ref={ref} />;
   }
 );
 
 InlineMessage.propTypes = propTypes;
-InlineMessage.defaultProps = defaultProps;
 
 export const Message = React.forwardRef<HTMLSpanElement, MessageProps>(
   function Message({ emphasizedText, text, isInline, ...rest }, ref) {
@@ -44,4 +39,3 @@ export const Message = React.forwardRef<HTMLSpanElement, MessageProps>(
 );
 
 Message.propTypes = propTypes;
-Message.defaultProps = defaultProps;

packages/es-components/src/components/containers/notification/MessageNotification.tsx

@@ -8,8 +8,15 @@ import { validationStyleTypes } from 'es-components-shared-types';
 const MessageNotification = React.forwardRef<
   HTMLDivElement,
   BaseNotificationProps
->(function ForwardedMessageNotification(props, ref) {
-  return <BaseNotification ref={ref} {...props} styleType="messageOnly" />;
+>(function ForwardedMessageNotification({ onDismiss = noop, ...props }, ref) {
+  return (
+    <BaseNotification
+      ref={ref}
+      onDismiss={onDismiss}
+      {...props}
+      styleType="messageOnly"
+    />
+  );
 });
 
 MessageNotification.propTypes = {
@@ -25,11 +32,4 @@ MessageNotification.propTypes = {
   alwaysShowIcon: PropTypes.bool
 };
 
-MessageNotification.defaultProps = {
-  includeIcon: false,
-  isDismissable: false,
-  onDismiss: noop,
-  alwaysShowIcon: false
-};
-
 export default MessageNotification;