Components: Remove react-click-outside in favor of withFocusOutside

[tyxla]

Proposed Changes

Removing react-click-outside in favor of withFocusOutside.

There seem to be some further cleanup opportunities here, but I'll leave them for another, less-convoluted-to-test PR.

Why are these changes being made?

While chasing where the first findDOMNode error comes from, I found that it comes from the react-click-outside package, and I realized we can replace that package completely with withFocusOutside from @wordpress/components. We only need to rename the method. See how it was done in Gutenberg: WordPress/gutenberg#16878

So, 3 good reasons:

• Getting rid of an findDOMNode instance
• Removing an old, unmaintained package
• Reusing existing bundled functionality instead of 3rd party packages.

Testing Instructions

• Bear with me and spin up a local Calypso instance 😅
• Use case 1:
  • Start as a logged-out user.
  • Go to http://calypso.localhost:3000/jetpack/connect/authorize?from=woocommerce-onboarding&_wp_nonce=foobar&blogname=Just%20Another%20WordPress.com%20Site&client_id=12345&close_window_after_login=0&close_window_after_auth=0&home_url=https://yourjetpack.blog&redirect_uri=https://yourjetpack.blog/wp-admin/admin.php&scope=administrator:34579bf2a3185a47d1b31aab30125d&secret=640fdbd69f96a8ca9e61&site=https://yourjetpack.blog&site_url=https://yourjetpack.blog&state=1&allow_site_connection=1&installed_ext_success=1& in order to simulate the "Woo onboarding" version of the Jetpack Connect signup form.
  • Verify that as you focus the email field, its great-parent element receives active class.
  • Verify that as you blur the email field, its great-parent element loses the active class.
• Use case 2 (note that we're exploiting this one a bit):
  • Apply this diff:

diff --git a/client/my-sites/customer-home/main.tsx b/client/my-sites/customer-home/main.tsx
index d9e5e9c2a8d..7e34331320d 100644
--- a/client/my-sites/customer-home/main.tsx
+++ b/client/my-sites/customer-home/main.tsx
@@ -7,9 +7,13 @@ import shouldShowLaunchpadFirst from 'calypso/state/selectors/should-show-launch
 import { FullScreenLaunchpad } from './components/full-screen-launchpad';
 import HomeContent from './components/home-content';
 import type { SiteDetails } from '@automattic/data-stores';
+import { setLayoutFocus } from 'calypso/state/ui/layout-focus/actions';
+import { useDispatch } from 'calypso/state';

 export default function CustomerHome( { site }: { site: SiteDetails } ) {
        const showLaunchpadFirst = shouldShowLaunchpadFirst( site );
+       const dispatch = useDispatch();
+       dispatch( setLayoutFocus( 'sites' ) );

        const isSiteLaunched = site?.launch_status === 'launched' || false;

• Go to /home/:site
• You should see the site selector expanded in a broken way on the left side of the sidebar. Don't worry about it too much.
• Click outside of the site selector, for example somewhere in the right area of your screen (the white)
• Verify that the site selector still closes.
• Use case 3
  • Nope, there's no case 3. Thank you for reaching the end and for testing thoroughly 🙇

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131545

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131545&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131545&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~313 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                 +1057 B  (+0.0%)     +210 B  (+0.0%)
entry-login                 -765 B  (-0.0%)     -331 B  (-0.1%)
entry-subscriptions         +530 B  (+0.0%)      +66 B  (+0.0%)
entry-stepper               +517 B  (+0.0%)     +132 B  (+0.0%)
entry-domains-landing       +517 B  (+0.1%)     +130 B  (+0.1%)
entry-browsehappy           +517 B  (+0.2%)     +130 B  (+0.2%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~5063 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
site-performance                        -2695 B  (-0.2%)     -974 B  (-0.2%)
themes                                  -2368 B  (-0.2%)     -876 B  (-0.3%)
subscribers                             -2368 B  (-0.2%)     -876 B  (-0.2%)
stats                                   -2368 B  (-0.2%)     -876 B  (-0.3%)
staging-site                            -2368 B  (-0.2%)     -876 B  (-0.2%)
sites-dashboard                         -2368 B  (-0.2%)     -876 B  (-0.3%)
site-tools                              -2368 B  (-0.1%)     -876 B  (-0.2%)
site-settings                           -2368 B  (-0.2%)     -876 B  (-0.2%)
site-purchases                          -2368 B  (-0.1%)     -876 B  (-0.1%)
site-overview                           -2368 B  (-0.1%)     -876 B  (-0.2%)
site-monitoring                         -2368 B  (-0.2%)     -876 B  (-0.2%)
site-marketing                          -2368 B  (-0.2%)     -876 B  (-0.2%)
site-logs                               -2368 B  (-0.2%)     -876 B  (-0.2%)
purchases                               -2368 B  (-0.1%)     -876 B  (-0.1%)
promote-post-i2                         -2368 B  (-0.3%)     -876 B  (-0.4%)
plugins                                 -2368 B  (-0.1%)     -876 B  (-0.1%)
people                                  -2368 B  (-0.3%)     -876 B  (-0.3%)
marketing                               -2368 B  (-0.3%)     -876 B  (-0.3%)
jetpack-cloud-plugin-management         -2368 B  (-0.1%)     -876 B  (-0.1%)
import                                  -2368 B  (-0.3%)     -876 B  (-0.4%)
hosting-features                        -2368 B  (-0.2%)     -876 B  (-0.2%)
hosting                                 -2368 B  (-0.1%)     -876 B  (-0.1%)
github-deployments                      -2368 B  (-0.2%)     -876 B  (-0.2%)
earn                                    -2368 B  (-0.3%)     -876 B  (-0.4%)
domains                                 -2368 B  (-0.1%)     -876 B  (-0.1%)
a8c-for-agencies-plugins                -2368 B  (-0.1%)     -876 B  (-0.1%)
woocommerce-installation                -1284 B  (-0.4%)     -512 B  (-0.5%)
woocommerce                             -1284 B  (-0.4%)     -512 B  (-0.5%)
theme                                   -1284 B  (-0.2%)     -512 B  (-0.2%)
settings-writing                        -1284 B  (-0.2%)     -512 B  (-0.3%)
settings-security                       -1284 B  (-0.3%)     -512 B  (-0.3%)
settings-reading                        -1284 B  (-0.3%)     -512 B  (-0.4%)
settings-podcast                        -1284 B  (-0.3%)     -512 B  (-0.3%)
settings-performance                    -1284 B  (-0.2%)     -512 B  (-0.3%)
settings-newsletter                     -1284 B  (-0.2%)     -512 B  (-0.3%)
settings-jetpack                        -1284 B  (-0.2%)     -512 B  (-0.3%)
settings-discussion                     -1284 B  (-0.3%)     -512 B  (-0.4%)
settings                                -1284 B  (-0.1%)     -512 B  (-0.2%)
scan                                    -1284 B  (-0.1%)     -512 B  (-0.2%)
preview                                 -1284 B  (-0.4%)     -512 B  (-0.6%)
posts-custom                            -1284 B  (-0.2%)     -512 B  (-0.2%)
posts                                   -1284 B  (-0.2%)     -512 B  (-0.2%)
plans                                   -1284 B  (-0.1%)     -512 B  (-0.1%)
pages                                   -1284 B  (-0.3%)     -512 B  (-0.3%)
migrate                                 -1284 B  (-0.3%)     -512 B  (-0.4%)
media                                   -1284 B  (-0.1%)     -512 B  (-0.1%)
marketplace                             -1284 B  (-0.2%)     -512 B  (-0.3%)
jetpack-social                          -1284 B  (-0.2%)     -512 B  (-0.3%)
jetpack-search                          -1284 B  (-0.2%)     -512 B  (-0.3%)
jetpack-cloud-settings                  -1284 B  (-0.2%)     -512 B  (-0.2%)
jetpack-cloud-pricing                   -1284 B  (-0.2%)     -512 B  (-0.2%)
jetpack-cloud-overview                  -1284 B  (-0.3%)     -462 B  (-0.3%)
jetpack-cloud-features-comparison       -1284 B  (-0.2%)     -512 B  (-0.2%)
jetpack-cloud                           -1284 B  (-0.3%)     -512 B  (-0.4%)
home                                    -1284 B  (-0.1%)     -512 B  (-0.1%)
gutenberg-editor                        -1284 B  (-0.2%)     -512 B  (-0.3%)
google-my-business                      -1284 B  (-0.3%)     -512 B  (-0.3%)
export                                  -1284 B  (-0.4%)     -512 B  (-0.5%)
email                                   -1284 B  (-0.2%)     -512 B  (-0.2%)
customize                               -1284 B  (-0.4%)     -512 B  (-0.5%)
concierge                               -1284 B  (-0.3%)     -512 B  (-0.4%)
comments                                -1284 B  (-0.2%)     -512 B  (-0.2%)
checkout                                -1284 B  (-0.1%)     -512 B  (-0.1%)
backup                                  -1284 B  (-0.1%)     -512 B  (-0.2%)
add-ons                                 -1284 B  (-0.4%)     -512 B  (-0.5%)
activity                                -1284 B  (-0.2%)     -512 B  (-0.2%)
accept-invite                           -1282 B  (-0.7%)     -414 B  (-0.8%)
jetpack-connect                         -1247 B  (-0.1%)     -508 B  (-0.1%)
a8c-for-agencies-referrals               +598 B  (+0.1%)    +1460 B  (+0.5%)
a8c-for-agencies-migrations              +598 B  (+0.1%)    +1356 B  (+0.5%)
a8c-for-agencies-partner-directory       +337 B  (+0.1%)     +557 B  (+0.3%)
plugin-bundle-flow                       +322 B  (+0.1%)      +34 B  (+0.0%)
a8c-for-agencies-signup                  +271 B  (+0.2%)      +12 B  (+0.0%)
jetpack-cloud-partner-portal             +270 B  (+0.0%)     -143 B  (-0.0%)
jetpack-cloud-agency-signup              +270 B  (+0.3%)      +27 B  (+0.1%)
a8c-for-agencies-client                  +233 B  (+0.0%)       -8 B  (-0.0%)
a8c-for-agencies-purchases               +196 B  (+0.0%)     +661 B  (+0.3%)
a8c-for-agencies-marketplace             +196 B  (+0.0%)     +613 B  (+0.2%)
a8c-for-agencies-team                    +103 B  (+0.0%)       -9 B  (-0.0%)
jetpack-cloud-agency-dashboard            -78 B  (-0.0%)      -17 B  (-0.0%)
update-design-flow                        +13 B  (+0.0%)      +58 B  (+0.0%)
reader                                    +13 B  (+0.0%)      +70 B  (+0.0%)
patterns                                  +13 B  (+0.0%)      -16 B  (-0.0%)
link-in-bio-tld-flow                      +13 B  (+0.0%)       +9 B  (+0.0%)
import-hosted-site-flow                   +13 B  (+0.0%)      +66 B  (+0.0%)
copy-site-flow                            +13 B  (+0.0%)      +38 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~751 bytes removed 📉 [gzipped])

name                                                                         parsed_size           gzip_size
async-load-signup-steps-user                                                     -1282 B  (-0.5%)     -412 B  (-0.6%)
async-load-design-blocks                                                         -1269 B  (-0.1%)     -410 B  (-0.1%)
async-load-comment-block-editor                                                  -1084 B  (-0.0%)     -364 B  (-0.1%)
async-load-automattic-global-styles-src-components-global-styles-variations      -1050 B  (-0.1%)     -352 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-store-address                    +322 B  (+0.3%)      +27 B  (+0.1%)
async-load-automattic-design-preview                                               +34 B  (+0.1%)      +10 B  (+0.1%)
async-load-signup-steps-domains                                                    +13 B  (+0.0%)      +22 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug remove/react-click-outside on your sandbox.

[ciampo]

I'm glad there's no "use case 3" — LGTM 🚀

• Code changes LGTM and are on par with the equivalent refactor in Gutenberg;
• Both scenarios from the testing instructions are working as expected