@wordpress/components 19.13.0 → 19.16.0

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,14 @@
 		position: relative;
 		left: $grid-unit-10;
 	}
+
+	.components-modal__content.has-scrolled-content:not(.hide-header) & {
+		border-bottom-color: $gray-300;
+	}
+
+	& + p {
+		margin-top: 0;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -113,26 +122,12 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height;
-	padding: 0 $grid-unit-40 $grid-unit-30;
+	margin-top: $header-height + $grid-unit-20;
+	padding: 0 $grid-unit-40 $grid-unit-40;
 	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/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

@@ -54,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/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/use-navigation-tree-nodes.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,14 +8,20 @@ export const useNavigationTreeNodes = () => {
 
 	const getNode = ( key ) => nodes[ key ];
 
-	const addNode = ( key, value ) =>
-		setNodes( ( original ) => ( {
+	const addNode = ( key, value ) => {
+		const { children, ...newNode } = value;
+		return setNodes( ( original ) => ( {
 			...original,
-			[ key ]: omit( value, 'children' ),
+			[ key ]: newNode,
 		} ) );
+	};
 
-	const removeNode = ( key ) =>
-		setNodes( ( original ) => omit( original, key ) );
+	const removeNode = ( key ) => {
+		return setNodes( ( original ) => {
+			const { [ key ]: removedNode, ...remainingNodes } = original;
+			return remainingNodes;
+		} );
+	};
 
 	return { nodes, getNode, addNode, removeNode };
 };

package/src/navigation/utils.js

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
 
 // @see packages/block-editor/src/components/inserter/search-items.js
 export const normalizeInput = ( input ) =>
-	deburr( input ).replace( /^\//, '' ).toLowerCase();
+	removeAccents( input ).replace( /^\//, '' ).toLowerCase();
 
 export const normalizedSearch = ( title, search ) =>
 	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );

package/src/number-control/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, number, text } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -16,29 +11,21 @@ import NumberControl from '../';
 export default {
 	title: 'Components (Experimental)/NumberControl',
 	component: NumberControl,
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		size: {
+			control: {
+				type: 'select',
+				options: [ 'default', 'small', '__unstable-large' ],
+			},
+		},
+		onChange: { action: 'onChange' },
 	},
 };
 
-function Example() {
+function Template( { onChange, ...props } ) {
 	const [ value, setValue ] = useState( '0' );
 	const [ isValidValue, setIsValidValue ] = useState( true );
 
-	const props = {
-		disabled: boolean( 'disabled', false ),
-		hideLabelFromVision: boolean( 'hideLabelFromVision', false ),
-		isPressEnterToChange: boolean( 'isPressEnterToChange', false ),
-		isShiftStepEnabled: boolean( 'isShiftStepEnabled', true ),
-		label: text( 'label', 'Number' ),
-		min: number( 'min', 0 ),
-		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', '0' ),
-		required: boolean( 'required', false ),
-		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', '1' ),
-	};
-
 	return (
 		<>
 			<NumberControl
@@ -47,6 +34,7 @@ function Example() {
 				onChange={ ( v, extra ) => {
 					setValue( v );
 					setIsValidValue( extra.event.target.validity.valid );
+					onChange( v, extra );
 				} }
 			/>
 			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
@@ -54,6 +42,18 @@ function Example() {
 	);
 }
 
-export const _default = () => {
-	return <Example />;
+export const Default = Template.bind( {} );
+Default.args = {
+	disabled: false,
+	hideLabelFromVision: false,
+	isPressEnterToChange: false,
+	isShiftStepEnabled: true,
+	label: 'Number',
+	min: 0,
+	max: 100,
+	placeholder: '0',
+	required: false,
+	shiftStep: 10,
+	size: 'default',
+	step: '1',
 };

package/src/popover/README.md

@@ -61,7 +61,7 @@ Set this prop to `false` to disable focus changing entirely. This should only be
 
 ### placement
 
-The direction in which the popover should open relative to its parent node or anchor node. 
+The direction in which the popover should open relative to its parent node or anchor node.
 
 The available base placements are 'top', 'right', 'bottom', 'left'.
 
@@ -137,7 +137,7 @@ A callback function which is used to override the anchor value computation algor
 
 If you need the `DOMRect` object i.e., the position of popover to be calculated on every time, the popover re-renders, then use `getAnchorRect`.
 
-`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` object.
+`getAnchorRect` callback function receives a reference to the popover anchor element as a function parameter and it should return a `DOMRect` object. Noting that `getAnchorRect` can be called with `null`.
 
 -   Type: `Function`
 -   Required: No

package/src/popover/index.js

@@ -128,6 +128,7 @@ const Popover = (
 	}
 
 	const arrowRef = useRef( null );
+	const anchorRefFallback = useRef( null );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const hasArrow = ! isExpanded && ! noArrow;
@@ -148,14 +149,17 @@ const Popover = (
 		} else if ( anchorRect && anchorRect?.ownerDocument ) {
 			return anchorRect.ownerDocument;
 		} else if ( getAnchorRect ) {
-			return getAnchorRect()?.ownerDocument ?? document;
+			return (
+				getAnchorRect( anchorRefFallback.current )?.ownerDocument ??
+				document
+			);
 		}
 
 		return document;
 	}, [ anchorRef, anchorRect, getAnchorRect ] );
 
 	/**
-	 * Offsets the the position of the popover when the anchor is inside an iframe.
+	 * Offsets the position of the popover when the anchor is inside an iframe.
 	 */
 	const frameOffset = useMemo( () => {
 		const { defaultView } = ownerDocument;
@@ -203,19 +207,22 @@ const Popover = (
 			: undefined,
 		hasArrow ? arrow( { element: arrowRef } ) : undefined,
 	].filter( ( m ) => !! m );
-	const anchorRefFallback = useRef( null );
 	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
-	const onDialogClose = ( type, event ) => {
-		// Ideally the popover should have just a single onClose prop and
-		// not three props that potentially do the same thing.
-		if ( type === 'focus-outside' && onFocusOutside ) {
-			onFocusOutside( event );
-		} else if ( onClose ) {
-			onClose();
-		}
-	};
+	let onDialogClose;
+
+	if ( onClose || onFocusOutside ) {
+		onDialogClose = ( type, event ) => {
+			// Ideally the popover should have just a single onClose prop and
+			// not three props that potentially do the same thing.
+			if ( type === 'focus-outside' && onFocusOutside ) {
+				onFocusOutside( event );
+			} else if ( onClose ) {
+				onClose();
+			}
+		};
+	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
 		focusOnMount,
@@ -275,7 +282,7 @@ const Popover = (
 		} else if ( getAnchorRect ) {
 			usedRef = {
 				getBoundingClientRect() {
-					const rect = getAnchorRect();
+					const rect = getAnchorRect( anchorRefFallback.current );
 					return new window.DOMRect(
 						rect.x ?? rect.left,
 						rect.y ?? rect.top,

package/src/popover/stories/index.js

@@ -27,6 +27,7 @@ export const _default = () => {
 	const show = boolean( 'Example: Show', true );
 	const children = text( 'children', 'Popover Content' );
 	const animate = boolean( 'animate', false );
+	const expandOnMobile = boolean( 'expandOnMobile', false );
 	const focusOnMount = select(
 		'focusOnMount',
 		{
@@ -41,6 +42,7 @@ export const _default = () => {
 	const props = {
 		animate,
 		children,
+		expandOnMobile,
 		focusOnMount,
 		noArrow,
 		isAlternate,

package/src/popover/style.scss

@@ -31,7 +31,7 @@
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
-		min-width: auto;
+		width: auto;
 		border: none;
 		outline: none;
 		border-top: $border-width solid $gray-900;

package/src/radio-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 import type { ChangeEvent } from 'react';
 
@@ -65,7 +64,7 @@ export function RadioControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	if ( isEmpty( options ) ) {
+	if ( ! options?.length ) {
 		return null;
 	}