refactor: drop support for React 16 & 17

README.md

@@ -56,7 +56,7 @@ You can find our documentation under the following links:
 
 ## Requirements
 
-- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**16.14.0 or higher**)
+- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**18.0.0 or higher**)
 - [Node.js](https://nodejs.org/) (**LTS version**)
 - If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
 

docs/Welcome.mdx

@@ -25,7 +25,7 @@ In addition to that, UI5 Web Components for React is providing complex component
 
 ## Requirements
 
-- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**16.14.0 or higher**)
+- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**18.0.0 or higher**)
 - [Node.js](https://nodejs.org/) (**LTS version**)
 - If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
 

packages/base/package.json

@@ -31,7 +31,7 @@
   "peerDependencies": {
     "@types/react": "*",
     "@ui5/webcomponents-base": "~2.0.1",
-    "react": "^16.14.0 || ^17 || ^18 || ^19"
+    "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/base/src/hooks/index.ts

@@ -1,6 +1,5 @@
 import { useCurrentTheme } from './useCurrentTheme.js';
 import { useI18nBundle } from './useI18nBundle.js';
-import { useIsomorphicId } from './useIsomorphicId.js';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 import { useIsRTL } from './useIsRTL.js';
 import { useStylesheet } from './useStylesheet.js';
@@ -13,7 +12,6 @@ export {
   useIsRTL,
   useSyncRef,
   useViewportRange,
-  useIsomorphicId,
   useStylesheet,
   useCurrentTheme
 };

packages/base/src/utils/index.ts

@@ -1,5 +1,3 @@
-import type { SyntheticEvent } from 'react';
-
 export const deprecationNotice = (component: string, message: string) => {
   if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
     const value = `*** ui5-webcomponents-react Deprecation Notice - ${component} ***\n`;
@@ -23,14 +21,6 @@ export const enrichEventWithDetails = <
   event: Event,
   payload: Detail
 ): EnrichedEventType<Event, Detail> => {
-  // todo: once we drop React 16 support, remove this
-  // the helper accepts both SyntheticEvents and browser events
-  const syntheticEventCast = event as unknown as SyntheticEvent;
-  if (typeof syntheticEventCast.persist === 'function') {
-    // if there is a persist method, it's a SyntheticEvent so we need to persist it
-    syntheticEventCast.persist();
-  }
-
   // Determine if we need to create a new details object
   const shouldCreateNewDetails =
     event.detail === null || event.detail === undefined || typeof event.detail !== 'object';

packages/charts/package.json

@@ -40,7 +40,7 @@
   "peerDependencies": {
     "@ui5/webcomponents-react": "~2.0.0",
     "@ui5/webcomponents-react-base": "~2.0.0",
-    "react": "^16.14.0 || ^17 || ^18"
+    "react": "^18"
   },
   "publishConfig": {
     "access": "public"

packages/charts/src/components/ColumnChartWithTrend/ColumnChartWithTrend.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { ThemingParameters, useIsomorphicId } from '@ui5/webcomponents-react-base';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useId } from 'react';
 import type { TooltipProps, YAxisProps } from 'recharts';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
@@ -120,7 +120,7 @@ const ColumnChartWithTrend = forwardRef<HTMLDivElement, ColumnChartWithTrendProp
     ...rest
   } = props;
 
-  const syncId = useIsomorphicId();
+  const syncId = useId();
 
   const chartConfig: ColumnChartWithTrendProps['chartConfig'] = {
     yAxisVisible: false,

packages/compat/package.json

@@ -41,8 +41,8 @@
     "@types/react-dom": "*",
     "@ui5/webcomponents-compat": "~2.0.1",
     "@ui5/webcomponents-react": "workspace:~",
-    "react": "^16.14.0 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/main/package.json

@@ -64,8 +64,8 @@
     "@ui5/webcomponents-base": "~2.0.1",
     "@ui5/webcomponents-fiori": "~2.0.1",
     "@ui5/webcomponents-icons": "~2.0.1",
-    "react": "^16.14.0 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14.0 || ^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/main/src/components/AnalyticalCardHeader/index.tsx

@@ -2,10 +2,10 @@
 
 import iconDown from '@ui5/webcomponents-icons/dist/down.js';
 import iconUp from '@ui5/webcomponents-icons/dist/up.js';
-import { useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { MouseEventHandler, ReactElement, ReactNode } from 'react';
-import { cloneElement, forwardRef } from 'react';
+import { cloneElement, forwardRef, useId } from 'react';
 import { DeviationIndicator, ValueColor } from '../../enums/index.js';
 import {
   ARIA_DESC_CARD_HEADER,
@@ -127,7 +127,7 @@ export const AnalyticalCardHeader = forwardRef<HTMLDivElement, AnalyticalCardHea
 
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
 
-  const uniqueHeaderId = useIsomorphicId();
+  const uniqueHeaderId = useId();
   const headerId = id ?? uniqueHeaderId;
 
   const sideIndicators = flattenFragments(children) as ReactElement<NumericSideIndicatorPropTypes>[];

packages/main/src/components/AnalyticalTable/index.tsx

@@ -5,15 +5,14 @@ import {
   debounce,
   enrichEventWithDetails,
   useI18nBundle,
-  useIsomorphicId,
   useIsomorphicLayoutEffect,
   useIsRTL,
   useStylesheet,
   useSyncRef
 } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties, MutableRefObject } from 'react';
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
 import {
   useColumnOrder,
   useExpanded,
@@ -179,7 +178,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.Visible ||
     subComponentsBehavior === AnalyticalTableSubComponentsBehavior.IncludeHeight;
 
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const titleBarId = useRef(`titlebar-${uniqueId}`).current;
   const invalidTableTextId = useRef(`invalidTableText-${uniqueId}`).current;

packages/main/src/components/ExpandableText/index.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import LinkAccessibleRole from '@ui5/webcomponents/dist/types/LinkAccessibleRole.js';
-import { useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId, useState } from 'react';
 import { CLOSE_POPOVER, SHOW_FULL_TEXT, SHOW_LESS, SHOW_MORE } from '../../i18n/i18n-defaults.js';
 import type { CommonProps } from '../../types/index.js';
 import { Link } from '../../webComponents/index.js';
@@ -47,7 +47,7 @@ const ExpandableText = forwardRef<HTMLSpanElement, ExpandableTextPropTypes>((pro
 
   const [collapsed, setCollapsed] = useState(true);
   const [popoverOpen, setPopoverOpen] = useState(false);
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const trimmedChildren = renderWhitespace ? children : children?.replace(/\s+/g, ' ').trim();
   const isOverflow = trimmedChildren?.length >= maxCharacters;

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -5,9 +5,9 @@ import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import group2Icon from '@ui5/webcomponents-icons/dist/group-2.js';
 import listIcon from '@ui5/webcomponents-icons/dist/list.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { Dispatch, ReactElement, RefObject, SetStateAction } from 'react';
-import { Children, cloneElement, useEffect, useReducer, useRef, useState } from 'react';
+import { Children, cloneElement, useEffect, useId, useReducer, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { FlexBoxDirection, FlexBoxJustifyContent, MessageBoxAction, MessageBoxType } from '../../enums/index.js';
 import {
@@ -145,7 +145,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
     isPhone
   } = props;
   useStylesheet(styleData, 'FilterBarDialog');
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
   const [searchString, setSearchString] = useState('');
   const [toggledFilters, setToggledFilters] = useState({});
   const dialogRefs = useRef({});

packages/main/src/components/MessageBox/index.tsx

@@ -6,10 +6,10 @@ import PopupAccessibleRole from '@ui5/webcomponents/dist/types/PopupAccessibleRo
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import iconSysHelp from '@ui5/webcomponents-icons/dist/sys-help-2.js';
-import { useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
-import { cloneElement, forwardRef, isValidElement } from 'react';
+import { cloneElement, forwardRef, isValidElement, useId } from 'react';
 import { MessageBoxAction, MessageBoxType } from '../../enums/index.js';
 import {
   ABORT,
@@ -200,7 +200,7 @@ const MessageBox = forwardRef<DialogDomRef, MessageBoxPropTypes>((props, ref) =>
     onClose(action);
   };
 
-  const messageBoxId = useIsomorphicId();
+  const messageBoxId = useId();
   const internalActions = getActions(actions, type);
 
   const getInitialFocus = () => {

packages/main/src/components/ThemeProvider/index.tsx

@@ -5,18 +5,13 @@ import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsSco
 import { attachLanguageChange, detachLanguageChange } from '@ui5/webcomponents-base/dist/locale/languageChange.js';
 import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
-import {
-  I18nStore,
-  StyleStore,
-  useIsomorphicId,
-  useIsomorphicLayoutEffect,
-  useStylesheet
-} from '@ui5/webcomponents-react-base';
+import { I18nStore, StyleStore, useIsomorphicLayoutEffect, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { FC, ReactNode } from 'react';
+import { useId } from 'react';
 import { styleData } from './ThemeProvider.css.js';
 
 function ThemeProviderStyles() {
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
   useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`);
   useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`);
   return null;

packages/main/src/components/VariantManagement/ManageViewsDialog.tsx

@@ -2,9 +2,9 @@ import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
-import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import type { MouseEventHandler, ReactElement } from 'react';
-import { Children, isValidElement, useEffect, useRef, useState } from 'react';
+import { Children, isValidElement, useEffect, useId, useRef, useState } from 'react';
 import { FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
 import {
   APPLY_AUTOMATICALLY,
@@ -67,7 +67,7 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
     showOnlyFavorites,
     onManageViewsCancel
   } = props;
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   const cancelText = i18nBundle.getText(CANCEL);
   const saveText = i18nBundle.getText(SAVE);

packages/main/src/components/VariantManagement/SaveViewDialog.tsx

@@ -1,8 +1,8 @@
 import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
-import { enrichEventWithDetails, useI18nBundle, useIsomorphicId, useStylesheet } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import { useRef, useState } from 'react';
+import { useId, useRef, useState } from 'react';
 import { FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
 import {
   APPLY_AUTOMATICALLY,
@@ -52,7 +52,7 @@ export const SaveViewDialog = (props: SaveViewDialogPropTypes) => {
   const inputRef = useRef(undefined);
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
   useStylesheet(styleData, 'SaveViewDialog');
-  const uniqueId = useIsomorphicId();
+  const uniqueId = useId();
 
   const cancelText = i18nBundle.getText(CANCEL);
   const saveText = i18nBundle.getText(SAVE);

yarn.lock

@@ -6904,7 +6904,7 @@ __metadata:
   peerDependencies:
     "@types/react": "*"
     "@ui5/webcomponents-base": ~2.0.1
-    react: ^16.14.0 || ^17 || ^18 || ^19
+    react: ^18 || ^19
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -6925,7 +6925,7 @@ __metadata:
   peerDependencies:
     "@ui5/webcomponents-react": ~2.0.0
     "@ui5/webcomponents-react-base": ~2.0.0
-    react: ^16.14.0 || ^17 || ^18
+    react: ^18
   languageName: unknown
   linkType: soft
 
@@ -6950,8 +6950,8 @@ __metadata:
     "@types/react-dom": "*"
     "@ui5/webcomponents-compat": ~2.0.1
     "@ui5/webcomponents-react": "workspace:~"
-    react: ^16.14.0 || ^17 || ^18 || ^19
-    react-dom: ^16.14.0 || ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -6979,8 +6979,8 @@ __metadata:
     "@ui5/webcomponents-base": ~2.0.1
     "@ui5/webcomponents-fiori": ~2.0.1
     "@ui5/webcomponents-icons": ~2.0.1
-    react: ^16.14.0 || ^17 || ^18 || ^19
-    react-dom: ^16.14.0 || ^17 || ^18 || ^19
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
   peerDependenciesMeta:
     "@types/react":
       optional: true