fix: add React 19 compatibility for getWidget (defaultOptions + remove isForwardRef)

fixes #4907

- Add support for new static defaultOptions property on widgets (React 19 compatible)

- Maintain backwards compatibility with legacy defaultProps.options pattern

- Replace deprecated react-is.isForwardRef() with general component detection

- Update documentation and add migration guide

Author: Ashutoshx7

CHANGELOG.md

@@ -71,6 +71,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Fixed issue with default value not being prefilled when object with if/then is nested inside another object, fixing [#4222](https://github.com/rjsf-team/react-jsonschema-form/issues/4222)
 - Fixed issue with schema array with nested dependent fixed-length, fixing [#3754](https://github.com/rjsf-team/react-jsonschema-form/issues/3754)
 - Updated `CustomValidator` type to accept `errorSchema`, so its implementation can be based on result of ajv validation ([#4898](https://github.com/rjsf-team/react-jsonschema-form/pull/4899))
+- Updated `getWidget.tsx` to support a new static `defaultOptions` property for widget default options (recommended for React 19 compatibility), while maintaining backwards compatibility with the legacy `defaultProps.options` pattern, fixing [#4907](https://github.com/rjsf-team/react-jsonschema-form/issues/4907). Also replaced `react-is.isForwardRef()` with a more general component detection check.
 
 ## @rjsf/validator-ajv8
 

packages/docs/docs/advanced-customization/custom-widgets-fields.md

@@ -250,7 +250,7 @@ This is useful if you expose the `uiSchema` as pure JSON, which can't carry func
 
 ### Custom widget options
 
-If you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has `defaultProps`, the options will be merged with the (optional) options object from `defaultProps`:
+If you need to pass options to your custom widget, you can add a `ui:options` object containing those properties. If the widget has a static `defaultOptions` property, the options will be merged with the options object from `defaultOptions`:
 
 ```tsx
 import { RJSFSchema, UiSchema, WidgetProps } from '@rjsf/utils';
@@ -266,10 +266,9 @@ function MyCustomWidget(props: WidgetProps) {
   return <input style={{ color, backgroundColor }} />;
 }
 
-MyCustomWidget.defaultProps = {
-  options: {
-    color: 'red',
-  },
+// React 19+: Use defaultOptions instead of defaultProps.options
+(MyCustomWidget as any).defaultOptions = {
+  color: 'red',
 };
 
 const uiSchema: UiSchema = {

packages/docs/docs/migration-guides/v7.x upgrade guide.md

@@ -0,0 +1,73 @@
+# 7.x Upgrade Guide
+
+## Breaking changes
+
+### Widget defaultProps.options deprecated in favor of defaultOptions
+
+In order to support React 19 properly, the `mergeWidgetOptions()` function in `@rjsf/utils` `getWidget.tsx` was updated to support a new `defaultOptions` static property.
+
+React 19 [deprecated `defaultProps`](https://react.dev/blog/2024/04/25/react-19#removed-proptypes-and-defaultprops) for function components. To maintain React 19 compatibility, widgets should now use a static `defaultOptions` property instead of `defaultProps.options`.
+
+**Note:** For backwards compatibility, `defaultProps.options` is still supported but **deprecated**. It will be removed in a future major version. You should migrate to the new pattern.
+
+#### Migration
+
+**Before (React 18 and earlier):**
+
+```tsx
+import { WidgetProps } from '@rjsf/utils';
+
+function MyCustomWidget(props: WidgetProps) {
+  const { options } = props;
+  const { color, backgroundColor } = options;
+  return <input style={{ color, backgroundColor }} />;
+}
+
+// Old pattern - deprecated in React 19
+MyCustomWidget.defaultProps = {
+  options: {
+    color: 'red',
+  },
+};
+```
+
+**After (React 19 compatible):**
+
+```tsx
+import { WidgetProps } from '@rjsf/utils';
+
+function MyCustomWidget(props: WidgetProps) {
+  const { options } = props;
+  const { color, backgroundColor } = options;
+  return <input style={{ color, backgroundColor }} />;
+}
+
+// New pattern - React 19 compatible
+(MyCustomWidget as any).defaultOptions = {
+  color: 'red',
+};
+```
+
+Note the key differences:
+
+1. Use `defaultOptions` instead of `defaultProps.options`
+2. The options are now a flat object directly on the widget, not nested inside `defaultProps`
+
+### react-is.isForwardRef() removed
+
+The usage of `react-is.isForwardRef()` was removed from `getWidget.tsx` because React 19 no longer supports this function. ForwardRef components are now detected using a more general check for React exotic components (`$$typeof` property).
+
+This change should be transparent to most users, as the widget detection logic now properly handles:
+
+- Regular function components
+- Memoized components (`React.memo`)
+- ForwardRef components (`React.forwardRef`)
+- Other exotic React components
+
+## New deprecations
+
+None in this release.
+
+## Removed deprecations
+
+None in this release.

packages/utils/src/getWidget.tsx

@@ -1,9 +1,9 @@
-import { createElement } from 'react';
+// Note: createElement was removed as ReactIs.isForwardRef() is deprecated in React 19
 import ReactIs from 'react-is';
 import get from 'lodash/get';
 import set from 'lodash/set';
 
-import { FormContextType, RJSFSchema, Widget, RegistryWidgetsType, StrictRJSFSchema } from './types';
+import { FormContextType, GenericObjectType, RJSFSchema, Widget, RegistryWidgetsType, StrictRJSFSchema } from './types';
 import getSchemaType from './getSchemaType';
 
 /** The map of schema types to widget type to widget name
@@ -61,10 +61,13 @@ const widgetMap: { [k: string]: { [j: string]: string } } = {
   },
 };
 
-/** Wraps the given widget with stateless functional component that will merge any `defaultProps.options` with the
+/** Wraps the given widget with stateless functional component that will merge any `defaultOptions` with the
  * `options` that are provided in the props. It will add the wrapper component as a `MergedWidget` property onto the
  * `Widget` so that future attempts to wrap `AWidget` will return the already existing wrapper.
  *
+ * NOTE: In React 19, `defaultProps` is deprecated for function components. Widgets should now define default options
+ * using a static `defaultOptions` property instead of `defaultProps.options`.
+ *
  * @param AWidget - A widget that will be wrapped or one that is already wrapped
  * @returns - The wrapper widget
  */
@@ -74,7 +77,15 @@ function mergeWidgetOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   let MergedWidget: Widget<T, S, F> | undefined = get(AWidget, 'MergedWidget');
   // cache return value as property of widget for proper react reconciliation
   if (!MergedWidget) {
-    const defaultOptions = (AWidget.defaultProps && AWidget.defaultProps.options) || {};
+    // Support both new `defaultOptions` (React 19+) and legacy `defaultProps.options` for backwards compatibility
+    const widgetWithDefaults = AWidget as Widget<T, S, F> & {
+      defaultOptions?: GenericObjectType;
+      defaultProps?: { options?: GenericObjectType };
+    };
+    const defaultOptions =
+      widgetWithDefaults.defaultOptions ||
+      (widgetWithDefaults.defaultProps && widgetWithDefaults.defaultProps.options) ||
+      {};
     MergedWidget = ({ options, ...props }) => {
       return <AWidget options={{ ...defaultOptions, ...options }} {...props} />;
     };
@@ -101,10 +112,15 @@ export default function getWidget<T = any, S extends StrictRJSFSchema = RJSFSche
 ): Widget<T, S, F> {
   const type = getSchemaType(schema);
 
+  // Check if widget is a valid React component:
+  // - Regular function components (typeof === 'function')
+  // - Memoized components (ReactIs.isMemo)
+  // - ForwardRef and other exotic components (typeof === 'object' with $$typeof)
+  // Note: ReactIs.isForwardRef() was removed in React 19, so we use a more general check
   if (
     typeof widget === 'function' ||
-    (widget && ReactIs.isForwardRef(createElement(widget))) ||
-    ReactIs.isMemo(widget)
+    ReactIs.isMemo(widget) ||
+    (typeof widget === 'object' && widget !== null && '$$typeof' in widget)
   ) {
     return mergeWidgetOptions<T, S, F>(widget as Widget<T, S, F>);
   }

packages/utils/test/getWidget.test.tsx

@@ -42,27 +42,23 @@ const TestRefWidget: Widget = forwardRef<HTMLSpanElement, Partial<WidgetProps>>(
   );
 });
 
-TestRefWidget.defaultProps = {
-  options: { id: 'test-id' },
-};
+// React 19+: Use defaultOptions instead of defaultProps.options
+(TestRefWidget as any).defaultOptions = { id: 'test-id' };
 
 function TestWidget(props: WidgetProps) {
   const { options } = props;
   return <div {...options}>test</div>;
 }
 
-TestWidget.defaultProps = {
-  id: 'foo',
-};
+// Note: This widget has no defaultOptions, testing fallback behavior
 
 function TestWidgetDefaults(props: WidgetProps) {
   const { options } = props;
   return <div {...options}>test</div>;
 }
 
-TestWidgetDefaults.defaultProps = {
-  options: { color: 'yellow' },
-};
+// React 19+: Use defaultOptions instead of defaultProps.options
+(TestWidgetDefaults as any).defaultOptions = { color: 'yellow' };
 
 const widgetProps: WidgetProps = {
   id: '',