Resolve defaultProps deprecation warning for React v18+ (#5689)

* Remove `defaultProps` reference from functional components * Prettier * Add changeset * Change changeset message
JedWatson · Jul 13, 2023 · 16414bb · 16414bb
1 parent a465818
commit 16414bb
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 32 deletions.
diff --git a/.changeset/metal-pens-boil.md b/.changeset/metal-pens-boil.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Resolve `defaultProps` deprecation warning for React v18+.
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
@@ -498,49 +498,53 @@ export const NoOptionsMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'No options',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'noOptionsMessage', {
-        'menu-notice': true,
-        'menu-notice--no-options': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'noOptionsMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--no-options': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-NoOptionsMessage.defaultProps = {
-  children: 'No options',
-};
 
 export const LoadingMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'Loading...',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingMessage', {
-        'menu-notice': true,
-        'menu-notice--loading': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'loadingMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--loading': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-LoadingMessage.defaultProps = {
-  children: 'Loading...',
-};
 
 // ==============================
 // Menu Portal

diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
@@ -287,17 +287,22 @@ export const LoadingIndicator = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: LoadingIndicatorProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, isRtl } = props;
-
+>({
+  innerProps,
+  isRtl,
+  size = 4,
+  ...restProps
+}: LoadingIndicatorProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingIndicator', {
-        indicator: true,
-        'loading-indicator': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, innerProps, isRtl, size },
+        'loadingIndicator',
+        {
+          indicator: true,
+          'loading-indicator': true,
+        }
+      )}
       {...innerProps}
     >
       <LoadingDot delay={0} offset={isRtl} />
@@ -306,4 +311,3 @@ export const LoadingIndicator = <
     </div>
   );
 };
-LoadingIndicator.defaultProps = { size: 4 };