Fix es lint warnings (https://github.com/woocommerce/woocommerce-blocks/pull/4206)

* Un-used PropTypes import

* Avoid global and use ownerDocument

* receiveCart return type

* ignoreRestSiblings when destructuring for @typescript-eslint/no-unused-vars

* Replace lodash find

* Use global rather than window

* Remove lodash map

* move rule to overrides

plugins/woocommerce-blocks/.eslintrc.js

@@ -82,6 +82,10 @@ module.exports = {
 				'jsdoc/require-param': 'off',
 				'no-shadow': 'off',
 				'@typescript-eslint/no-shadow': [ 'error' ],
+				'@typescript-eslint/no-unused-vars': [
+					'error',
+					{ ignoreRestSiblings: true },
+				],
 			},
 		},
 		{

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import Summary from '@woocommerce/base-components/summary';
 import { blocksConfig } from '@woocommerce/block-settings';
 

plugins/woocommerce-blocks/assets/js/base/components/price-slider/index.js

@@ -12,6 +12,7 @@ import {
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
+import { isObject } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -241,10 +242,13 @@ const PriceSlider = ( {
 		! hasValidConstraints && 'is-disabled'
 	);
 
+	const activeElement = isObject( minRange.current )
+		? minRange.current.ownerDocument.activeElement
+		: undefined;
 	const minRangeStep =
-		minRange && document.activeElement === minRange.current ? stepValue : 1;
+		activeElement && activeElement === minRange.current ? stepValue : 1;
 	const maxRangeStep =
-		maxRange && document.activeElement === maxRange.current ? stepValue : 1;
+		activeElement && activeElement === maxRange.current ? stepValue : 1;
 
 	return (
 		<div className={ classes }>

plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js

@@ -15,7 +15,7 @@ import {
 } from '@wordpress/components';
 import { Icon, server, external } from '@woocommerce/icons';
 import { SearchListControl } from '@woocommerce/components';
-import { mapValues, toArray, sortBy, find } from 'lodash';
+import { mapValues, toArray, sortBy } from 'lodash';
 import { getAdminLink, getSetting } from '@woocommerce/settings';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
@@ -274,10 +274,9 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		}
 
 		const selectedId = selected[ 0 ].id;
-		const productAttribute = find( ATTRIBUTES, [
-			'attribute_id',
-			selectedId.toString(),
-		] );
+		const productAttribute = ATTRIBUTES.find(
+			( attribute ) => attribute.attribute_id === selectedId.toString()
+		);
 
 		if ( ! productAttribute || attributeId === selectedId ) {
 			return;

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/checkout-button/index.js

@@ -40,14 +40,12 @@ const CheckoutButton = ( { link } ) => {
 	const { paymentMethods } = usePaymentMethods();
 
 	useEffect( () => {
-		// Add a listener for when the page is unloaded (specifically needed for Safari)
-		// to remove the spinner on the checkout button, so the saved page snapshot does not
-		// contain the spinner class. See https://archive.is/lOEW0 for why this is needed.
+		// Add a listener to remove the spinner on the checkout button, so the saved page snapshot does not
+		// contain the spinner class. See https://archive.is/lOEW0 for why this is needed for Safari.
 
 		if (
-			! window ||
-			typeof window.addEventListener !== 'function' ||
-			typeof window.removeEventListener !== 'function'
+			typeof global.addEventListener !== 'function' ||
+			typeof global.removeEventListener !== 'function'
 		) {
 			return;
 		}
@@ -56,10 +54,10 @@ const CheckoutButton = ( { link } ) => {
 			setShowSpinner( false );
 		};
 
-		window.addEventListener( 'beforeunload', hideSpinner );
+		global.addEventListener( 'pageshow', hideSpinner );
 
 		return () => {
-			window.removeEventListener( 'beforeunload', hideSpinner );
+			global.removeEventListener( 'pageshow', hideSpinner );
 		};
 	}, [] );
 

plugins/woocommerce-blocks/assets/js/data/cart/actions.ts

@@ -28,14 +28,16 @@ import type { ResponseError } from '../types';
  *
  * @param  {CartResponse}      response
  */
-export const receiveCart = ( response: CartResponse ) => {
+export const receiveCart = (
+	response: CartResponse
+): { type: string; response: Cart } => {
 	const cart = ( mapKeys( response, ( _, key ) =>
 		camelCase( key )
 	) as unknown ) as Cart;
 	return {
 		type: types.RECEIVE_CART,
 		response: cart,
-	} as const;
+	};
 };
 
 /**

plugins/woocommerce-blocks/assets/js/editor-components/product-attribute-term-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { find } from 'lodash';
 import PropTypes from 'prop-types';
 import { SearchListControl, SearchListItem } from '@woocommerce/components';
 import { SelectControl, Spinner } from '@wordpress/components';
@@ -139,7 +138,11 @@ const ProductAttributeTermControl = ( {
 				list={ currentList }
 				isLoading={ isLoading }
 				selected={ selected
-					.map( ( { id } ) => find( currentList, { id } ) )
+					.map( ( { id } ) =>
+						currentList.find(
+							( currentListItem ) => currentListItem.id === id
+						)
+					)
 					.filter( Boolean ) }
 				onChange={ onChange }
 				renderItem={ renderItem }

plugins/woocommerce-blocks/assets/js/editor-components/product-category-control/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { find } from 'lodash';
 import PropTypes from 'prop-types';
 import { SearchListControl, SearchListItem } from '@woocommerce/components';
 import { SelectControl } from '@wordpress/components';
@@ -137,7 +136,9 @@ const ProductCategoryControl = ( {
 				list={ categories }
 				isLoading={ isLoading }
 				selected={ selected
-					.map( ( id ) => find( categories, { id } ) )
+					.map( ( id ) =>
+						categories.find( ( category ) => category.id === id )
+					)
 					.filter( Boolean ) }
 				onChange={ onChange }
 				renderItem={ renderItem }

plugins/woocommerce-blocks/assets/js/editor-components/product-tag-control/index.js

@@ -3,7 +3,7 @@
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { debounce, find } from 'lodash';
+import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import { SearchListControl, SearchListItem } from '@woocommerce/components';
 import { SelectControl } from '@wordpress/components';
@@ -132,7 +132,9 @@ class ProductTagControl extends Component {
 					list={ list }
 					isLoading={ loading }
 					selected={ selected
-						.map( ( id ) => find( list, { id } ) )
+						.map( ( { id } ) =>
+							list.find( ( listItem ) => listItem.id === id )
+						)
 						.filter( Boolean ) }
 					onChange={ onChange }
 					onSearch={ limitTags ? this.debouncedOnSearch : null }

plugins/woocommerce-blocks/assets/js/icons/stories/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { omitBy, omit, map } from 'lodash';
+import { omitBy, omit } from 'lodash';
 import { useState } from '@wordpress/element';
 
 /**
@@ -22,6 +22,7 @@ const LibraryExample = () => {
 	const filteredIcons = omitBy( availableIcons, ( _icon, name ) => {
 		return ! name.includes( filter );
 	} );
+
 	return (
 		<div style={ { padding: '20px' } }>
 			<label htmlFor="filter-icons" style={ { paddingRight: '30px' } }>
@@ -39,16 +40,16 @@ const LibraryExample = () => {
 				style={ {
 					display: 'flex',
 					alignItems: 'bottom',
-					'flex-wrap': 'wrap',
+					flexWrap: 'wrap',
 				} }
 			>
-				{ map( filteredIcons, ( icon, name ) => {
+				{ Object.entries( filteredIcons ).map( ( [ name, icon ] ) => {
 					return (
 						<div
 							key={ name }
 							style={ {
 								display: 'flex',
-								'flex-direction': 'column',
+								flexDirection: 'column',
 								width: '25%',
 								padding: '25px 0 25px 0',
 							} }
@@ -68,12 +69,12 @@ const LibraryExample = () => {
 							>
 								<Icon srcElement={ icon } />
 								<Icon
-									style={ { 'padding-left': '10px' } }
+									style={ { paddingLeft: '10px' } }
 									srcElement={ icon }
 									size={ 36 }
 								/>
 								<Icon
-									style={ { 'padding-left': '10px' } }
+									style={ { paddingLeft: '10px' } }
 									srcElement={ icon }
 									size={ 48 }
 								/>

plugins/woocommerce-blocks/assets/js/utils/attributes-query.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { sortBy, map } from 'lodash';
+import { sortBy } from 'lodash';
 
 /**
  * Given a query object, removes an attribute filter by a single slug.
@@ -75,7 +75,7 @@ export const updateAttributeFilter = (
 		returnQuery.push( {
 			attribute: attribute.taxonomy,
 			operator,
-			slug: map( attributeTerms, 'slug' ).sort(),
+			slug: attributeTerms.map( ( { slug } ) => slug ).sort(),
 		} );
 		setQuery( sortBy( returnQuery, 'attribute' ) );
 	}