@wordpress/components 19.12.0 → 19.13.0

package/src/mobile/bottom-sheet/index.native.js

@@ -55,22 +55,19 @@ class BottomSheet extends Component {
 		this.isScrolling = this.isScrolling.bind( this );
 		this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this );
 		this.onDismiss = this.onDismiss.bind( this );
-		this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind(
-			this
-		);
+		this.onShouldSetBottomSheetMaxHeight =
+			this.onShouldSetBottomSheetMaxHeight.bind( this );
 
 		this.setIsFullScreen = this.setIsFullScreen.bind( this );
 
 		this.onDimensionsChange = this.onDimensionsChange.bind( this );
 		this.onHeaderLayout = this.onHeaderLayout.bind( this );
 		this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this );
-		this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind(
-			this
-		);
+		this.onHandleClosingBottomSheet =
+			this.onHandleClosingBottomSheet.bind( this );
 		this.onHardwareButtonPress = this.onHardwareButtonPress.bind( this );
-		this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind(
-			this
-		);
+		this.onHandleHardwareButtonPress =
+			this.onHandleHardwareButtonPress.bind( this );
 		this.keyboardShow = this.keyboardShow.bind( this );
 		this.keyboardHide = this.keyboardHide.bind( this );
 
@@ -568,15 +565,15 @@ class BottomSheet extends Component {
 					>
 						<BottomSheetProvider
 							value={ {
-								shouldEnableBottomSheetScroll: this
-									.onShouldEnableScroll,
-								shouldEnableBottomSheetMaxHeight: this
-									.onShouldSetBottomSheetMaxHeight,
+								shouldEnableBottomSheetScroll:
+									this.onShouldEnableScroll,
+								shouldEnableBottomSheetMaxHeight:
+									this.onShouldSetBottomSheetMaxHeight,
 								isBottomSheetContentScrolling: isScrolling,
-								onHandleClosingBottomSheet: this
-									.onHandleClosingBottomSheet,
-								onHandleHardwareButtonPress: this
-									.onHandleHardwareButtonPress,
+								onHandleClosingBottomSheet:
+									this.onHandleClosingBottomSheet,
+								onHandleHardwareButtonPress:
+									this.onHandleHardwareButtonPress,
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
 								safeAreaBottomInset,

package/src/mobile/bottom-sheet/picker-cell.native.js

@@ -10,13 +10,8 @@ import Cell from './cell';
 import Picker from '../picker';
 
 export default function BottomSheetPickerCell( props ) {
-	const {
-		options,
-		hideCancelButton,
-		onChangeValue,
-		value,
-		...cellProps
-	} = props;
+	const { options, hideCancelButton, onChangeValue, value, ...cellProps } =
+		props;
 
 	let picker;
 

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -30,13 +30,11 @@ class BottomSheetStepperCell extends Component {
 
 		this.announceValue = this.announceValue.bind( this );
 		this.onDecrementValue = this.onDecrementValue.bind( this );
-		this.onDecrementValuePressIn = this.onDecrementValuePressIn.bind(
-			this
-		);
+		this.onDecrementValuePressIn =
+			this.onDecrementValuePressIn.bind( this );
 		this.onIncrementValue = this.onIncrementValue.bind( this );
-		this.onIncrementValuePressIn = this.onIncrementValuePressIn.bind(
-			this
-		);
+		this.onIncrementValuePressIn =
+			this.onIncrementValuePressIn.bind( this );
 		this.onPressOut = this.onPressOut.bind( this );
 
 		const { value, defaultValue, min } = props;

package/src/mobile/color-settings/index.native.js

@@ -68,10 +68,8 @@ const ColorSettingsMemo = memo(
 );
 function ColorSettings( props ) {
 	const route = useRoute();
-	const {
-		onHandleClosingBottomSheet,
-		shouldEnableBottomSheetMaxHeight,
-	} = useContext( BottomSheetContext );
+	const { onHandleClosingBottomSheet, shouldEnableBottomSheetMaxHeight } =
+		useContext( BottomSheetContext );
 
 	return (
 		<ColorSettingsMemo

package/src/mobile/global-styles-context/index.native.js

@@ -83,12 +83,13 @@ export const useGlobalStyles = () => {
 	return globalStyles;
 };
 
-export const withGlobalStyles = ( WrappedComponent ) => ( props ) => (
-	<GlobalStylesContext.Consumer>
-		{ ( globalStyles ) => (
-			<WrappedComponent { ...props } globalStyles={ globalStyles } />
-		) }
-	</GlobalStylesContext.Consumer>
-);
+export const withGlobalStyles = ( WrappedComponent ) => ( props ) =>
+	(
+		<GlobalStylesContext.Consumer>
+			{ ( globalStyles ) => (
+				<WrappedComponent { ...props } globalStyles={ globalStyles } />
+			) }
+		</GlobalStylesContext.Consumer>
+	);
 
 export default GlobalStylesContext;

package/src/mobile/gradient/index.native.js

@@ -109,17 +109,20 @@ function Gradient( {
 	const { width = 0, height = 0 } = sizes || {};
 	const { isGradient, getGradientType, gradients } = colorsUtils;
 
-	const colorGroup = useMemo( () => getGradientColorGroup( gradientValue ), [
-		gradientValue,
-	] );
+	const colorGroup = useMemo(
+		() => getGradientColorGroup( gradientValue ),
+		[ gradientValue ]
+	);
 
-	const locations = useMemo( () => getColorLocations( colorGroup ), [
-		colorGroup,
-	] );
+	const locations = useMemo(
+		() => getColorLocations( colorGroup ),
+		[ colorGroup ]
+	);
 
-	const colors = useMemo( () => getGradientBaseColors( colorGroup ), [
-		colorGroup,
-	] );
+	const colors = useMemo(
+		() => getGradientBaseColors( colorGroup ),
+		[ colorGroup ]
+	);
 
 	if ( ! gradientValue || ! isGradient( gradientValue ) ) {
 		return null;

package/src/mobile/gradient/test/index.native.js

@@ -108,9 +108,7 @@ describe( 'getColorLocations', () => {
 			'linear-gradient(45deg, red, blue, green)'
 		);
 		expect( getColorLocations( colorGroup ) ).toStrictEqual( [
-			0,
-			0.5,
-			1,
+			0, 0.5, 1,
 		] );
 	} );
 } );

package/src/mobile/html-text-input/index.native.js

@@ -138,9 +138,8 @@ export class HTMLTextInput extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostContent } = select(
-			'core/editor'
-		);
+		const { getEditedPostAttribute, getEditedPostContent } =
+			select( 'core/editor' );
 
 		return {
 			title: getEditedPostAttribute( 'title' ),

package/src/mobile/inserter-button/index.native.js

@@ -30,12 +30,8 @@ class MenuItem extends Component {
 	}
 
 	render() {
-		const {
-			getStylesFromColorScheme,
-			item,
-			itemWidth,
-			maxWidth,
-		} = this.props;
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
 
 		const modalIconWrapperStyle = getStylesFromColorScheme(
 			styles.modalIconWrapper,

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -59,8 +59,12 @@ function ImageLinkDestinationsScreen( props ) {
 	const navigation = useNavigation();
 	const route = useRoute();
 	const { url = '' } = props;
-	const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } =
-		route.params || {};
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
 
 	function goToLinkPicker() {
 		navigation.navigate( blockSettingsScreens.linkPicker, {

package/src/mobile/media-edit/index.native.js

@@ -39,9 +39,8 @@ export class MediaEdit extends Component {
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );
-		this.getDestructiveButtonIndex = this.getDestructiveButtonIndex.bind(
-			this
-		);
+		this.getDestructiveButtonIndex =
+			this.getDestructiveButtonIndex.bind( this );
 	}
 
 	getMediaOptionsItems() {

package/src/mobile/segmented-control/index.native.js

@@ -9,7 +9,7 @@ import {
 	Animated,
 	Easing,
 } from 'react-native';
-import { take, values, map, reduce } from 'lodash';
+import { values, map, reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -65,9 +65,8 @@ const SegmentedControls = ( {
 	addonRight,
 } ) => {
 	const selectedSegmentIndex = selectedIndex || 0;
-	const [ activeSegmentIndex, setActiveSegmentIndex ] = useState(
-		selectedSegmentIndex
-	);
+	const [ activeSegmentIndex, setActiveSegmentIndex ] =
+		useState( selectedSegmentIndex );
 	const [ segmentsDimensions, setSegmentsDimensions ] = useState( {
 		[ activeSegmentIndex ]: { width: 0, height: 0 },
 	} );
@@ -103,7 +102,7 @@ const SegmentedControls = ( {
 			? styles.containerIOS
 			: styles.container;
 		const widths = map( values( segmentsDimensions ), 'width' );
-		const widthsDistance = take( widths, index );
+		const widthsDistance = widths.slice( 0, index );
 		const widthsDistanceSum = reduce(
 			widthsDistance,
 			( sum, n ) => sum + n

package/src/mobile/utils/test/index.native.js

@@ -55,16 +55,7 @@ describe( 'toFixed', () => {
 
 	it( 'function returns the number applying `decimalNum` all point numbers', () => {
 		const toCheck = [
-			1.01,
-			1.02,
-			1.03,
-			1.04,
-			1.05,
-			1.06,
-			1.07,
-			1.08,
-			1.09,
-			1.1,
+			1.01, 1.02, 1.03, 1.04, 1.05, 1.06, 1.07, 1.08, 1.09, 1.1,
 		];
 		toCheck.forEach( ( num ) => {
 			const result = toFixed( num, 2 );
@@ -88,8 +79,8 @@ describe( 'isContainerRelated', () => {
 	];
 
 	beforeAll( () => {
-		const registerCoreBlocks = require( '@wordpress/block-library' )
-			.registerCoreBlocks;
+		const registerCoreBlocks =
+			require( '@wordpress/block-library' ).registerCoreBlocks;
 		registerCoreBlocks();
 	} );
 

package/src/modal/index.js

@@ -89,7 +89,7 @@ function Modal( props, forwardedRef ) {
 				ariaHelper.showApp();
 			}
 		};
-	}, [] );
+	}, [ bodyOpenClassName ] );
 
 	function handleEscapeKeyDown( event ) {
 		if (

package/src/navigable-container/container.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { omit, noop, isFunction } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import { omit, noop, isFunction } from 'lodash';
 import { Component, forwardRef } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+const noop = () => {};
 const MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];
 
 function cycleValue( value, total, offset ) {
@@ -52,7 +53,7 @@ class NavigableContainer extends Component {
 		const { forwardedRef } = this.props;
 		this.container = ref;
 
-		if ( isFunction( forwardedRef ) ) {
+		if ( typeof forwardedRef === 'function' ) {
 			forwardedRef( ref );
 		} else if ( forwardedRef && 'current' in forwardedRef ) {
 			forwardedRef.current = ref;

package/src/navigable-container/test/menu.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { fireEvent, render } from '@testing-library/react';
-import { each } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,7 @@ import { NavigableMenu } from '../menu';
 
 function simulateVisible( container, selector ) {
 	const elements = container.querySelectorAll( selector );
-	each( elements, ( elem ) => {
+	elements.forEach( ( elem ) => {
 		elem.getClientRects = () => [
 			'trick-jsdom-into-having-size-for-element-rect',
 		];

package/src/navigable-container/test/tabbable.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { fireEvent, render } from '@testing-library/react';
-import { each } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,7 @@ import { TabbableContainer } from '../tabbable';
 
 function simulateVisible( container, selector ) {
 	const elements = container.querySelectorAll( selector );
-	each( elements, ( elem ) => {
+	elements.forEach( ( elem ) => {
 		elem.getClientRects = () => [
 			'trick-jsdom-into-having-size-for-element-rect',
 		];

package/src/navigation/context.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import { ROOT_MENU } from './constants';
 
+const noop = () => {};
+
 export const NavigationContext = createContext( {
 	activeItem: undefined,
 	activeMenu: ROOT_MENU,

package/src/navigation/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import { NavigationContext } from './context';
 import { NavigationUI } from './styles/navigation-styles';
 import { useCreateNavigationTree } from './use-create-navigation-tree';
 
+const noop = () => {};
+
 export default function Navigation( {
 	activeItem,
 	activeMenu = ROOT_MENU,

package/src/navigation/item/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
+const noop = () => {};
+
 export default function NavigationItem( props ) {
 	const {
 		badge,

package/src/navigation/stories/controlled-state.js

@@ -19,7 +19,7 @@ export function ControlledStateStory() {
 	const MockLink = ( { href, children } ) => (
 		<Button
 			href={ href }
-			// Since we're not actually navigating pages, simulate it with on onClick.
+			// Since we're not actually navigating pages, simulate it with onClick.
 			onClick={ ( event ) => {
 				event.preventDefault();
 				const item = href.replace( 'https://example.com/', '' );

package/src/navigation/stories/more-examples.js

@@ -20,9 +20,8 @@ export function MoreExamplesStory() {
 		return () => clearTimeout( timeout );
 	} );
 	const [ backButtonBadge, setBackButtonBadge ] = useState( 1 );
-	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] = useState(
-		1
-	);
+	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] =
+		useState( 1 );
 
 	return (
 		<Navigation activeItem={ activeItem } className="navigation-story">