-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The following changes were made to support React 18: - Updated `react` and `react-dom` dev dependency versions from 17.0.2 to 18.2.0 - Updated peer dependencies to allow React 18 - Updated `react-collapsed` from v3.6.0 to v4.1.2 which supports React 18 - Copied `@reach/auto-id`'s `useId` hook with minor modifications from https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/reach-auto-id.ts. Because the peer dependencies of that library don't allow React 18, we weren't able to install it directly anymore. This `useId` hook uses React 18's `useId` hook if it's present and otherwise falls back to custom logic for React 16 and 17. - Added a new `renderPin` prop to `MapboxMap` to allows React 18 users to render custom JSX into the DOM node for the marker element. This gets around the issue of having to call `createRoot` from `react-dom/client` in `MapboxMap`. This was causing issues on React 16/17 sites because Vite and Webpack were unable to determine that the dynamic import of `react-dom/client` wouldn't be reachable, and tried to resolve the package unsuccessfully. Rather than force existing consumers of the repo to update their bundler config to exclude `react-dom/client`, we provide this optional prop to React 18 users if they want to use React 18 features in their custom pin component, or if they don't want to get the console warning about using `ReactDOM.render` if they use the `PinComponent` prop. To support testing in React 18: - We are now fetching TextEncoder from utils when setting up the test environment because the new react-dom does not have it - `@testing-library/react-hooks` doesn't support React 18 and it's functionality has now been added to `@testing-library/react` in v14. Because of this, `@testing-library/react` was upgraded to v14.2.1, which only supports React 18, and `@testing-library/react-hooks` was removed from the dev dependencies. The GitHub workflow for testing React 16 and 17 was updated to manually downgrade `@testing-library/react` to v12 and install `@testing-library/react-hooks`. Custom logic is added so that if `@testing-library/react-hooks` is installed, it's `renderHook` method is used (i.e. React 16/17), and otherwise the `renderHook` method from `@testing-library/react` is used (React 18). J=BACK-2911, BACK-2923 TEST=auto, manual Updated the test-site to use the new React 18 app initialization and tested all updated components manually to ensure they're not broken. Did a local npm pack of the repo and successfully used it in Pages repos with React 17 and 18. Some updates were also made to clean up our tests: - Upgraded `@testing-library/user-event` from v13.5.0 to v14.5.2, which makes async calls, so we no longer need `waitFor`. As part of this change, we started getting some new console errors when trying to navigate in tests by clicking links. This is because navigation is not defined in the jest jsdom environment. A util function was added to mock the console to remove these errors. - Updated the GitHub test workflow for React 16 and 17 to manually install optional swc libraries because the post install script doesn't seem to run properly after we install specific versions of react-related packages. More info at swc-project/swc#5616 (comment) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Nidhi Manu <nmanu@yext.com>
- Loading branch information
1 parent
d9ff191
commit 66fc567
Showing
62 changed files
with
5,388 additions
and
2,149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file modified
BIN
-1.49 KB
(100%)
.storybook/snapshots/__snapshots__/mapboxmap--custom-pin.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+768 Bytes
(100%)
.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
||
[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [MapboxMapProps](./search-ui-react.mapboxmapprops.md) > [renderPin](./search-ui-react.mapboxmapprops.renderpin.md) | ||
|
||
## MapboxMapProps.renderPin property | ||
|
||
Render function for a custom marker on the map. This function takes in an HTML element and is responible for rendering the pin into that element, which will be used as the marker. By default, the built-in marker image from Mapbox GL is used. This prop should not be used with [PinComponent](./search-ui-react.mapboxmapprops.pincomponent.md)<!-- -->. If both are provided, only PinComponent will be used. | ||
|
||
**Signature:** | ||
|
||
```typescript | ||
renderPin?: (props: PinComponentProps<T> & { | ||
container: HTMLElement; | ||
}) => void; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!-- Do not edit this file. It is automatically generated by API Documenter. --> | ||
|
||
[Home](./index.md) > [@yext/search-ui-react](./search-ui-react.md) > [PinComponentProps](./search-ui-react.pincomponentprops.md) | ||
|
||
## PinComponentProps type | ||
|
||
Props for rendering a custom marker on the map. | ||
|
||
**Signature:** | ||
|
||
```typescript | ||
type PinComponentProps<T> = { | ||
index: number; | ||
mapbox: mapboxgl.Map; | ||
result: Result<T>; | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.