@wordpress/components 19.12.0 → 19.15.0

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/image/index.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Image, Text, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
 
 /**
  * WordPress dependencies
@@ -210,7 +211,7 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<Image
+						<FastImage
 							{ ...( ! resizeMode && {
 								aspectRatio: imageData?.aspectRatio,
 							} ) }
@@ -219,7 +220,7 @@ const ImageComponent = ( {
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
-							resizeMode={ resizeMode }
+							resizeMode={ FastImage.resizeMode[ resizeMode ] }
 						/>
 					</View>
 				) }

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-picker/index.native.js

@@ -3,7 +3,6 @@
  */
 import { SafeAreaView, TouchableOpacity, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { lowerCase, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +25,7 @@ import styles from './styles.scss';
 export const createDirectEntry = ( value ) => {
 	let type = 'URL';
 
-	const protocol = lowerCase( getProtocol( value ) ) || '';
+	const protocol = getProtocol( value )?.toLowerCase() || '';
 
 	if ( protocol.includes( 'mailto' ) ) {
 		type = 'mailto';
@@ -36,7 +35,7 @@ export const createDirectEntry = ( value ) => {
 		type = 'tel';
 	}
 
-	if ( startsWith( value, '#' ) ) {
+	if ( value?.startsWith( '#' ) ) {
 		type = 'internal';
 	}
 

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,6 @@ import {
 	Animated,
 	Easing,
 } from 'react-native';
-import { take, values, map, reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -65,9 +64,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 },
 	} );
@@ -102,11 +100,13 @@ const SegmentedControls = ( {
 		const { paddingLeft: offset } = isIOS
 			? styles.containerIOS
 			: styles.container;
-		const widths = map( values( segmentsDimensions ), 'width' );
-		const widthsDistance = take( widths, index );
-		const widthsDistanceSum = reduce(
-			widthsDistance,
-			( sum, n ) => sum + n
+		const widths = Object.values( segmentsDimensions ).map(
+			( dimension ) => dimension.width
+		);
+		const widthsDistance = widths.slice( 0, index );
+		const widthsDistanceSum = widthsDistance.reduce(
+			( sum, n ) => sum + n,
+			0
 		);
 
 		const endValue = index === 0 ? 0 : widthsDistanceSum;

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

@@ -10,8 +10,10 @@ import classnames from 'classnames';
  */
 import {
 	createPortal,
+	useCallback,
 	useEffect,
 	useRef,
+	useState,
 	forwardRef,
 } from '@wordpress/element';
 import {
@@ -24,7 +26,7 @@ import {
 } from '@wordpress/compose';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -73,6 +75,8 @@ function Modal( props, forwardedRef ) {
 	const focusReturnRef = useFocusReturn();
 	const focusOutsideProps = useFocusOutside( onRequestClose );
 
+	const [ hasScrolledContent, setHasScrolledContent ] = useState( false );
+
 	useEffect( () => {
 		openModalCount++;
 
@@ -89,7 +93,7 @@ function Modal( props, forwardedRef ) {
 				ariaHelper.showApp();
 			}
 		};
-	}, [] );
+	}, [ bodyOpenClassName ] );
 
 	function handleEscapeKeyDown( event ) {
 		if (
@@ -104,6 +108,19 @@ function Modal( props, forwardedRef ) {
 		}
 	}
 
+	const onContentContainerScroll = useCallback(
+		( e ) => {
+			const scrollY = e?.target?.scrollTop ?? -1;
+
+			if ( ! hasScrolledContent && scrollY > 0 ) {
+				setHasScrolledContent( true );
+			} else if ( hasScrolledContent && scrollY <= 0 ) {
+				setHasScrolledContent( false );
+			}
+		},
+		[ hasScrolledContent ]
+	);
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -142,8 +159,10 @@ function Modal( props, forwardedRef ) {
 					<div
 						className={ classnames( 'components-modal__content', {
 							'hide-header': __experimentalHideHeader,
+							'has-scrolled-content': hasScrolledContent,
 						} ) }
 						role="document"
+						onScroll={ onContentContainerScroll }
 					>
 						{ ! __experimentalHideHeader && (
 							<div className="components-modal__header">
@@ -168,7 +187,7 @@ function Modal( props, forwardedRef ) {
 								{ isDismissible && (
 									<Button
 										onClick={ onRequestClose }
-										icon={ closeSmall }
+										icon={ close }
 										label={
 											closeButtonLabel ||
 											__( 'Close dialog' )

package/src/modal/stories/index.js

@@ -35,7 +35,23 @@ const ModalExample = ( props ) => {
 				Open Modal
 			</Button>
 			{ isOpen && (
-				<Modal { ...props } onRequestClose={ closeModal }>
+				<Modal
+					{ ...props }
+					onRequestClose={ closeModal }
+					style={ { maxWidth: '600px' } }
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+						sed do eiusmod tempor incididunt ut labore et magna
+						aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation ullamco laboris nisi ut aliquip ex ea ea
+						commodo consequat. Duis aute irure dolor in
+						reprehenderit in voluptate velit esse cillum dolore eu
+						fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+						non proident, sunt in culpa qui officia deserunt mollit
+						anim id est laborum.
+					</p>
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

package/src/modal/style.scss

@@ -8,6 +8,7 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
+	backdrop-filter: blur($grid-unit);
 
 	// This animates the appearance of the white background.
 	@include edit-post__fade-in-animation();
@@ -63,13 +64,13 @@
 // modal screen).
 .components-modal__header {
 	box-sizing: border-box;
-	border-bottom: $border-width solid $gray-300;
+	border-bottom: $border-width solid transparent;
 	padding: 0 $grid-unit-40;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height;
+	height: $header-height + $grid-unit-20;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -77,7 +78,7 @@
 	left: 0;
 
 	.components-modal__header-heading {
-		font-size: 1rem;
+		font-size: 1.2rem;
 		font-weight: 600;
 	}
 
@@ -90,6 +91,10 @@
 		position: relative;
 		left: $grid-unit-10;
 	}
+
+	.components-modal__content.has-scrolled-content:not(.hide-header) & {
+		border-bottom-color: $gray-300;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -113,26 +118,12 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height;
+	margin-top: $header-height + $grid-unit-20;
 	padding: 0 $grid-unit-40 $grid-unit-30;
 	overflow: auto;
 
-	// Emulate margin-bottom for the header. Uses a pseudo-element since the
-	// absolutely positioned header’s margins wouldn’t effect siblings and
-	// padding-top on the content element would effect positioning of any
-	// sticky elements within.
-	&::before {
-		content: "";
-		display: block;
-		margin-bottom: $grid-unit-30;
-	}
-
 	&.hide-header {
 		margin-top: 0;
 		padding-top: $grid-unit-30;
-
-		&::before {
-			content: none;
-		}
 	}
 }

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/group/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { find, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,8 +15,10 @@ import { NavigationGroupContext } from './context';
 import { GroupTitleUI } from '../styles/navigation-styles';
 import { useNavigationContext } from '../context';
 
+let uniqueId = 0;
+
 export default function NavigationGroup( { children, className, title } ) {
-	const [ groupId ] = useState( uniqueId( 'group-' ) );
+	const [ groupId ] = useState( `group-${ ++uniqueId }` );
 	const {
 		navigationTree: { items },
 	} = useNavigationContext();
@@ -25,7 +26,11 @@ export default function NavigationGroup( { children, className, title } ) {
 	const context = { group: groupId };
 
 	// Keep the children rendered to make sure invisible items are included in the navigation tree.
-	if ( ! find( items, { group: groupId, _isVisible: true } ) ) {
+	if (
+		! Object.values( items ).some(
+			( item ) => item.group === groupId && item._isVisible
+		)
+	) {
 		return (
 			<NavigationGroupContext.Provider value={ context }>
 				{ children }

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,
@@ -53,6 +54,9 @@ export default function Navigation( {
 		if ( activeMenu !== menu ) {
 			setActiveMenu( activeMenu );
 		}
+		// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+		// See https://github.com/WordPress/gutenberg/pull/41612 for context.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu ] );
 
 	const context = {

package/src/navigation/item/base.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,10 +15,13 @@ import { useNavigationContext } from '../context';
 import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { ItemBaseUI } from '../styles/navigation-styles';
 
+let uniqueId = 0;
+
 export default function NavigationItemBase( props ) {
-	const { children, className, ...restProps } = props;
+	// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
+	const { children, className, title, href, ...restProps } = props;
 
-	const [ itemId ] = useState( uniqueId( 'item-' ) );
+	const [ itemId ] = useState( `item-${ ++uniqueId }` );
 
 	useNavigationTreeItem( itemId, props );
 	const { navigationTree } = useNavigationContext();

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/item/use-navigation-tree-item.js

@@ -34,5 +34,7 @@ export const useNavigationTreeItem = ( itemId, props ) => {
 		return () => {
 			removeItem( itemId );
 		};
+		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ activeMenu, search ] );
 };

package/src/navigation/menu/menu-title-search.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -49,7 +44,9 @@ function MenuTitleSearch( {
 			return;
 		}
 
-		const count = filter( items, '_isVisible' ).length;
+		const count = Object.values( items ).filter(
+			( item ) => item._isVisible
+		).length;
 		const resultsFoundMessage = sprintf(
 			/* translators: %d: number of results. */
 			_n( '%d result found.', '%d results found.', count ),

package/src/navigation/menu/search-no-results-found.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -19,7 +14,9 @@ export default function NavigationSearchNoResultsFound( { search } ) {
 		navigationTree: { items },
 	} = useNavigationContext();
 
-	const resultsCount = filter( items, '_isVisible' ).length;
+	const resultsCount = Object.values( items ).filter(
+		( item ) => item._isVisible
+	).length;
 
 	if ( ! search || !! resultsCount ) {
 		return null;

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">