From e21321d0bc98b90b0db4b860abe1ceb77d985a57 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:58:15 +0000
Subject: [PATCH 1/2] chore(deps): update react monorepo

Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 microsite/yarn.lock | 24 +++++++++++-----------
 storybook/yarn.lock | 24 +++++++++++-----------
 yarn.lock           | 50 +++++++++++++++++++--------------------------
 3 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/microsite/yarn.lock b/microsite/yarn.lock
index 00732d79f2..f4e48096a2 100644
--- a/microsite/yarn.lock
+++ b/microsite/yarn.lock
@@ -9812,14 +9812,14 @@ __metadata:
   linkType: hard
 
 "react-dom@npm:^18.0.0":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    scheduler: ^0.23.0
+    scheduler: ^0.23.2
   peerDependencies:
-    react: ^18.2.0
-  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -9930,11 +9930,11 @@ __metadata:
   linkType: hard
 
 "react@npm:^18.0.0":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -10406,12 +10406,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard
 
diff --git a/storybook/yarn.lock b/storybook/yarn.lock
index 9cd8e2075e..ce259e11aa 100644
--- a/storybook/yarn.lock
+++ b/storybook/yarn.lock
@@ -9602,14 +9602,14 @@ __metadata:
   linkType: hard
 
 "react-dom@npm:^18.0.2":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    scheduler: ^0.23.0
+    scheduler: ^0.23.2
   peerDependencies:
-    react: ^18.2.0
-  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -9743,11 +9743,11 @@ __metadata:
   linkType: hard
 
 "react@npm:^18.0.2":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -10180,12 +10180,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard
 
diff --git a/yarn.lock b/yarn.lock
index ded743929f..c150705e60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18508,11 +18508,11 @@ __metadata:
   linkType: hard
 
 "@types/react-dom@npm:^18":
-  version: 18.2.19
-  resolution: "@types/react-dom@npm:18.2.19"
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
     "@types/react": "*"
-  checksum: 087a19d8e4c1c0900ec4ac5ddb749a811a38274b25683d233c11755d2895cc6e475e8bf9bea3dee36519769298e078d4c2feab9ab4bd13b26bc2a6170716437e
+  checksum: a0cd9b1b815a6abd2a367a9eabdd8df8dd8f13f95897b2f9e1359ea3ac6619f957c1432ece004af7d95e2a7caddbba19faa045f831f32d6263483fc5404a7596
   languageName: node
   linkType: hard
 
@@ -18610,13 +18610,12 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:^18":
-  version: 18.2.58
-  resolution: "@types/react@npm:18.2.58"
+  version: 18.3.4
+  resolution: "@types/react@npm:18.3.4"
   dependencies:
     "@types/prop-types": "*"
-    "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 42551e30c8a54161a11b2ecd11406782ddba4472a4471d45034c551295263d56f06234f283526d0c0420352ce9ce9675b2a6c65db7a287d9613643d3ceaaf1f0
+  checksum: 555ccd1af86a23c781dea0360de64b2f7a0708cdcbf9e6496744b77630065868526fd55147c727dc5ef11b7fd712b04f7898757a84c67e2eb9dfd4c4ead10d95
   languageName: node
   linkType: hard
 
@@ -18698,13 +18697,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:*":
-  version: 0.16.1
-  resolution: "@types/scheduler@npm:0.16.1"
-  checksum: 2ff8034df029a6cbb3623b05fa895cac4fc504806a8e948ebe29675a1edfa5ac04faac7611016076b3ffefc2037bbe344ad1978304059b2d4c78e513ec43c7bf
-  languageName: node
-  linkType: hard
-
 "@types/semver@npm:^7.1.0, @types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
@@ -26398,11 +26390,11 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-react-hooks@npm:^4.3.0":
-  version: 4.6.0
-  resolution: "eslint-plugin-react-hooks@npm:4.6.0"
+  version: 4.6.2
+  resolution: "eslint-plugin-react-hooks@npm:4.6.2"
   peerDependencies:
     eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
-  checksum: 23001801f14c1d16bf0a837ca7970d9dd94e7b560384b41db378b49b6e32dc43d6e2790de1bd737a652a86f81a08d6a91f402525061b47719328f586a57e86c3
+  checksum: 395c433610f59577cfcf3f2e42bcb130436c8a0b3777ac64f441d88c5275f4fcfc89094cedab270f2822daf29af1079151a7a6579a8e9ea8cee66540ba0384c4
   languageName: node
   linkType: hard
 
@@ -38463,14 +38455,14 @@ __metadata:
   linkType: hard
 
 "react-dom@npm:^18.0.2":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    scheduler: ^0.23.0
+    scheduler: ^0.23.2
   peerDependencies:
-    react: ^18.2.0
-  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -39047,11 +39039,11 @@ __metadata:
   linkType: hard
 
 "react@npm:^18.0.2":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -40313,12 +40305,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard
 

From f26ff99a2fa6b9ed5b6c48b3f16a4ae2e2ab2a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Fri, 23 Aug 2024 14:31:10 +0200
Subject: [PATCH 2/2] fixup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/cool-poems-hammer.md               |   5 +
 .../ErrorBoundary/ErrorBoundary.test.tsx      |   3 +-
 plugins/search-react/api-report.md            |  18 +-
 .../src/components/SearchBar/SearchBar.tsx    | 248 +++++++++---------
 4 files changed, 145 insertions(+), 129 deletions(-)
 create mode 100644 .changeset/cool-poems-hammer.md

diff --git a/.changeset/cool-poems-hammer.md b/.changeset/cool-poems-hammer.md
new file mode 100644
index 0000000000..fd5897343e
--- /dev/null
+++ b/.changeset/cool-poems-hammer.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': patch
+---
+
+Slight type tweak to match newer React versions better
diff --git a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx
index 8bfb228f53..c96ab67782 100644
--- a/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx
+++ b/packages/core-components/src/layout/ErrorBoundary/ErrorBoundary.test.tsx
@@ -77,7 +77,8 @@ describe('<ErrorBoundary/>', () => {
         /^The above error occurred in the <Bomb> component:/,
       ),
       expect.stringMatching(/^ErrorBoundary/),
+      expect.stringMatching(/Warning: findDOMNode/), // React warning, unfortunate but currently true
     ]);
-    expect(error.length).toEqual(4);
+    expect(error.length).toEqual(5);
   });
 });
diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md
index b5b06a2904..d151ef1187 100644
--- a/plugins/search-react/api-report.md
+++ b/plugins/search-react/api-report.md
@@ -9,7 +9,6 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { AsyncState } from 'react-use/esm/useAsync';
 import { AutocompleteProps } from '@material-ui/lab/Autocomplete';
 import { Extension } from '@backstage/core-plugin-api';
-import { ForwardRefExoticComponent } from 'react';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { LinkProps } from '@backstage/core-components';
@@ -132,10 +131,23 @@ export type SearchAutocompleteProps<Option> = Omit<
 };
 
 // @public
-export const SearchBar: ForwardRefExoticComponent<SearchBarProps>;
+export const SearchBar: React_2.ForwardRefExoticComponent<
+  Omit<
+    Omit<Partial<SearchBarBaseProps>, 'ref'> &
+      React_2.RefAttributes<HTMLDivElement>,
+    'ref'
+  > &
+    React_2.RefAttributes<HTMLDivElement>
+>;
 
 // @public
-export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps>;
+export const SearchBarBase: React_2.ForwardRefExoticComponent<
+  Omit<
+    Omit<SearchBarBaseProps, 'ref'> & React_2.RefAttributes<HTMLDivElement>,
+    'ref'
+  > &
+    React_2.RefAttributes<HTMLDivElement>
+>;
 
 // @public
 export type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
index c6976508cc..a9ba1a11e8 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
@@ -30,7 +30,6 @@ import React, {
   ChangeEvent,
   ComponentType,
   forwardRef,
-  ForwardRefExoticComponent,
   KeyboardEvent,
   useCallback,
   useEffect,
@@ -70,138 +69,137 @@ export type SearchBarBaseProps = Omit<TextFieldProps, 'onChange'> & {
  *
  * @public
  */
-export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
-  withContext(
-    forwardRef((props, ref) => {
-      const {
-        onChange,
-        onKeyDown = () => {},
-        onClear = () => {},
-        onSubmit = () => {},
-        debounceTime = 200,
-        clearButton = true,
-        fullWidth = true,
-        value: defaultValue,
-        label,
-        placeholder,
-        inputProps = {},
-        InputProps = {},
-        endAdornment,
-        ...rest
-      } = props;
+export const SearchBarBase = withContext(
+  forwardRef<HTMLDivElement, SearchBarBaseProps>((props, ref) => {
+    const {
+      onChange,
+      onKeyDown = () => {},
+      onClear = () => {},
+      onSubmit = () => {},
+      debounceTime = 200,
+      clearButton = true,
+      fullWidth = true,
+      value: defaultValue,
+      label,
+      placeholder,
+      inputProps = {},
+      InputProps = {},
+      endAdornment,
+      ...rest
+    } = props;
 
-      const configApi = useApi(configApiRef);
-      const [value, setValue] = useState<string>('');
-      const forwardedValueRef = useRef<string>('');
+    const configApi = useApi(configApiRef);
+    const [value, setValue] = useState<string>('');
+    const forwardedValueRef = useRef<string>('');
 
-      useEffect(() => {
-        setValue(prevValue => {
-          // We only update the value if our current value is the same as it was
-          // for the most recent onChange call. Otherwise it means that the users
-          // has continued typing and we should not replace their input.
-          if (prevValue === forwardedValueRef.current) {
-            return String(defaultValue);
-          }
-          return prevValue;
-        });
-      }, [defaultValue, forwardedValueRef]);
-
-      useDebounce(
-        () => {
-          forwardedValueRef.current = value;
-          onChange(value);
-        },
-        debounceTime,
-        [value],
-      );
-
-      const handleChange = useCallback(
-        (e: ChangeEvent<HTMLInputElement>) => {
-          setValue(e.target.value);
-        },
-        [setValue],
-      );
-
-      const handleKeyDown = useCallback(
-        (e: KeyboardEvent<HTMLDivElement>) => {
-          if (onKeyDown) onKeyDown(e);
-          if (onSubmit && e.key === 'Enter') {
-            onSubmit();
-          }
-        },
-        [onKeyDown, onSubmit],
-      );
-
-      const handleClear = useCallback(() => {
-        forwardedValueRef.current = '';
-        onChange('');
-        setValue('');
-        if (onClear) {
-          onClear();
+    useEffect(() => {
+      setValue(prevValue => {
+        // We only update the value if our current value is the same as it was
+        // for the most recent onChange call. Otherwise it means that the users
+        // has continued typing and we should not replace their input.
+        if (prevValue === forwardedValueRef.current) {
+          return String(defaultValue);
         }
-      }, [onChange, onClear]);
+        return prevValue;
+      });
+    }, [defaultValue, forwardedValueRef]);
 
-      const ariaLabel: string | undefined = label ? undefined : 'Search';
+    useDebounce(
+      () => {
+        forwardedValueRef.current = value;
+        onChange(value);
+      },
+      debounceTime,
+      [value],
+    );
 
-      const inputPlaceholder =
-        placeholder ??
-        `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+      },
+      [setValue],
+    );
 
-      const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent<HTMLDivElement>) => {
+        if (onKeyDown) onKeyDown(e);
+        if (onSubmit && e.key === 'Enter') {
+          onSubmit();
+        }
+      },
+      [onKeyDown, onSubmit],
+    );
 
-      const startAdornment = (
-        <InputAdornment position="start">
-          <IconButton aria-label="Query" size="small" disabled>
-            <SearchIcon />
-          </IconButton>
-        </InputAdornment>
-      );
+    const handleClear = useCallback(() => {
+      forwardedValueRef.current = '';
+      onChange('');
+      setValue('');
+      if (onClear) {
+        onClear();
+      }
+    }, [onChange, onClear]);
 
-      const clearButtonEndAdornment = (
-        <InputAdornment position="end">
-          <Button
-            aria-label="Clear"
-            size="small"
-            onClick={handleClear}
-            onKeyDown={event => {
-              if (event.key === 'Enter') {
-                // write your functionality here
-                event.stopPropagation();
-              }
-            }}
-          >
-            Clear
-          </Button>
-        </InputAdornment>
-      );
+    const ariaLabel: string | undefined = label ? undefined : 'Search';
 
-      return (
-        <TextField
-          id="search-bar-text-field"
-          data-testid="search-bar-next"
-          variant="outlined"
-          margin="normal"
-          inputRef={ref}
-          value={value}
-          label={label}
-          placeholder={inputPlaceholder}
-          InputProps={{
-            startAdornment,
-            endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,
-            ...InputProps,
+    const inputPlaceholder =
+      placeholder ??
+      `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
+
+    const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;
+
+    const startAdornment = (
+      <InputAdornment position="start">
+        <IconButton aria-label="Query" size="small" disabled>
+          <SearchIcon />
+        </IconButton>
+      </InputAdornment>
+    );
+
+    const clearButtonEndAdornment = (
+      <InputAdornment position="end">
+        <Button
+          aria-label="Clear"
+          size="small"
+          onClick={handleClear}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              // write your functionality here
+              event.stopPropagation();
+            }
           }}
-          inputProps={{
-            'aria-label': ariaLabel,
-            ...inputProps,
-          }}
-          fullWidth={fullWidth}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          {...rest}
-        />
-      );
-    }),
-  );
+        >
+          Clear
+        </Button>
+      </InputAdornment>
+    );
+
+    return (
+      <TextField
+        id="search-bar-text-field"
+        data-testid="search-bar-next"
+        variant="outlined"
+        margin="normal"
+        inputRef={ref}
+        value={value}
+        label={label}
+        placeholder={inputPlaceholder}
+        InputProps={{
+          startAdornment,
+          endAdornment: clearButton ? clearButtonEndAdornment : endAdornment,
+          ...InputProps,
+        }}
+        inputProps={{
+          'aria-label': ariaLabel,
+          ...inputProps,
+        }}
+        fullWidth={fullWidth}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        {...rest}
+      />
+    );
+  }),
+);
 
 /**
  * Props for {@link SearchBar}.
@@ -215,8 +213,8 @@ export type SearchBarProps = Partial<SearchBarBaseProps>;
  *
  * @public
  */
-export const SearchBar: ForwardRefExoticComponent<SearchBarProps> = withContext(
-  forwardRef((props, ref) => {
+export const SearchBar = withContext(
+  forwardRef<HTMLDivElement, SearchBarProps>((props, ref) => {
     const { value: initialValue = '', onChange, ...rest } = props;
 
     const { term, setTerm } = useSearch();