@wordpress/components 21.1.0 → 21.2.0

package/src/search-control/index.native.js

@@ -115,6 +115,9 @@ function SearchControl( {
 		mergeFutureStyles( activeDarkStyles, [ isActive, isDark ] );
 
 		setCurrentStyles( futureStyles );
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isActive, isDark ] );
 
 	useEffect( () => {
@@ -130,6 +133,9 @@ function SearchControl( {
 			clearTimeout( onCancelTimer.current );
 			keyboardHideSubscription.remove();
 		};
+		// Disable reason: deferring this refactor to the native team.
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const {

package/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -1,4 +1,8 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
@@ -6,8 +10,8 @@ import { createContext } from '@wordpress/element';
 import warning from '@wordpress/warning';
 
 const SlotFillContext = createContext( {
-	slots: {},
-	fills: {},
+	slots: proxyMap(),
+	fills: proxyMap(),
 	registerSlot: () => {
 		warning(
 			'Components must be wrapped within `SlotFillProvider`. ' +

package/src/slot-fill/bubbles-virtually/slot-fill-provider.js

@@ -1,8 +1,14 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { ref as valRef } from 'valtio';
+import { proxyMap } from 'valtio/utils';
+
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useState } from '@wordpress/element';
+import { useMemo, useCallback, useRef } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -11,79 +17,68 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
 import SlotFillContext from './slot-fill-context';
 
 function useSlotRegistry() {
-	const [ slots, setSlots ] = useState( {} );
-	const [ fills, setFills ] = useState( {} );
+	const slots = useRef( proxyMap() );
+	const fills = useRef( proxyMap() );
 
 	const registerSlot = useCallback( ( name, ref, fillProps ) => {
-		setSlots( ( prevSlots ) => {
-			const slot = prevSlots[ name ] || {};
-			return {
-				...prevSlots,
-				[ name ]: {
-					...slot,
-					ref: ref || slot.ref,
-					fillProps: fillProps || slot.fillProps || {},
-				},
-			};
-		} );
+		const slot = slots.current.get( name ) || {};
+		slots.current.set(
+			name,
+			valRef( {
+				...slot,
+				ref: ref || slot.ref,
+				fillProps: fillProps || slot.fillProps || {},
+			} )
+		);
 	}, [] );
 
 	const unregisterSlot = useCallback( ( name, ref ) => {
-		setSlots( ( prevSlots ) => {
-			const { [ name ]: slot, ...nextSlots } = prevSlots;
-			// Make sure we're not unregistering a slot registered by another element
-			// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
-			if ( slot?.ref === ref ) {
-				return nextSlots;
-			}
-			return prevSlots;
-		} );
+		// Make sure we're not unregistering a slot registered by another element
+		// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
+		if ( slots.current.get( name )?.ref === ref ) {
+			slots.current.delete( name );
+		}
 	}, [] );
 
-	const updateSlot = useCallback(
-		( name, fillProps ) => {
-			const slot = slots[ name ];
-			if ( ! slot ) {
-				return;
-			}
-			if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
-				slot.fillProps = fillProps;
-				const slotFills = fills[ name ];
-				if ( slotFills ) {
-					// Force update fills.
-					slotFills.map( ( fill ) => fill.current.rerender() );
-				}
+	const updateSlot = useCallback( ( name, fillProps ) => {
+		const slot = slots.current.get( name );
+		if ( ! slot ) {
+			return;
+		}
+
+		if ( ! isShallowEqual( slot.fillProps, fillProps ) ) {
+			slot.fillProps = fillProps;
+			const slotFills = fills.current.get( name );
+			if ( slotFills ) {
+				// Force update fills.
+				slotFills.map( ( fill ) => fill.current.rerender() );
 			}
-		},
-		[ slots, fills ]
-	);
+		}
+	}, [] );
 
 	const registerFill = useCallback( ( name, ref ) => {
-		setFills( ( prevFills ) => ( {
-			...prevFills,
-			[ name ]: [ ...( prevFills[ name ] || [] ), ref ],
-		} ) );
+		fills.current.set(
+			name,
+			valRef( [ ...( fills.current.get( name ) || [] ), ref ] )
+		);
 	}, [] );
 
 	const unregisterFill = useCallback( ( name, ref ) => {
-		setFills( ( prevFills ) => {
-			if ( prevFills[ name ] ) {
-				return {
-					...prevFills,
-					[ name ]: prevFills[ name ].filter(
-						( fillRef ) => fillRef !== ref
-					),
-				};
-			}
-			return prevFills;
-		} );
+		if ( fills.current.get( name ) ) {
+			fills.current.set(
+				name,
+				fills.current
+					.get( name )
+					.filter( ( fillRef ) => fillRef !== ref )
+			);
+		}
 	}, [] );
 
 	// Memoizing the return value so it can be directly passed to Provider value
 	const registry = useMemo(
 		() => ( {
-			slots,
-			fills,
+			slots: slots.current,
+			fills: fills.current,
 			registerSlot,
 			updateSlot,
 			unregisterSlot,
@@ -91,8 +86,6 @@ function useSlotRegistry() {
 			unregisterFill,
 		} ),
 		[
-			slots,
-			fills,
 			registerSlot,
 			updateSlot,
 			unregisterSlot,

package/src/slot-fill/bubbles-virtually/use-slot-fills.js

@@ -0,0 +1,24 @@
+// @ts-nocheck
+/**
+ * External dependencies
+ */
+import { useSnapshot } from 'valtio';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SlotFillContext from './slot-fill-context';
+
+export default function useSlotFills( name ) {
+	const registry = useContext( SlotFillContext );
+	const fills = useSnapshot( registry.fills, { sync: true } );
+	// The important bit here is that this call ensures that the hook
+	// only causes a re-render if the "fills" of a given slot name
+	// change change, not any fills.
+	return fills.get( name );
+}

package/src/slot-fill/bubbles-virtually/use-slot.js

@@ -1,8 +1,13 @@
 // @ts-nocheck
+/**
+ * External dependencies
+ */
+import { useSnapshot } from 'valtio';
+
 /**
  * WordPress dependencies
  */
-import { useCallback, useContext, useMemo } from '@wordpress/element';
+import { useCallback, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,10 +16,11 @@ import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
 	const registry = useContext( SlotFillContext );
-
-	const slot = registry.slots[ name ] || {};
-	const slotFills = registry.fills[ name ];
-	const fills = useMemo( () => slotFills || [], [ slotFills ] );
+	const slots = useSnapshot( registry.slots, { sync: true } );
+	// The important bit here is that this call ensures
+	// the hook only causes a re-render if the slot
+	// with the given name change, not any other slot.
+	const slot = slots.get( name );
 
 	const updateSlot = useCallback(
 		( fillProps ) => {
@@ -48,7 +54,6 @@ export default function useSlot( name ) {
 		...slot,
 		updateSlot,
 		unregisterSlot,
-		fills,
 		registerFill,
 		unregisterFill,
 	};

package/src/slot-fill/index.js

@@ -14,6 +14,7 @@ import BubblesVirtuallySlot from './bubbles-virtually/slot';
 import BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';
 import SlotFillProvider from './provider';
 import useSlot from './bubbles-virtually/use-slot';
+export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
 export function Fill( props ) {
 	// We're adding both Fills here so they can register themselves before

package/src/style.scss

@@ -17,7 +17,6 @@
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./duotone-picker/style.scss";
-@import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -159,6 +159,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-15 {
+  color: #1e1e1e;
   width: 30px;
   padding-left: 0;
   padding-right: 0;

package/src/toggle-group-control/toggle-group-control-option-base/styles.ts

@@ -55,13 +55,6 @@ export const buttonView = css`
 	}
 `;
 
-export const buttonActive = css`
-	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
-`;
-
 export const ButtonContentView = styled.div`
 	font-size: ${ CONFIG.fontSize };
 	line-height: 1;
@@ -82,8 +75,17 @@ export const isIcon = ( {
 	};
 
 	return css`
+		color: ${ COLORS.gray[ 900 ] };
 		width: ${ iconButtonSizes[ size ] };
 		padding-left: 0;
 		padding-right: 0;
 	`;
 };
+
+export const buttonActive = css`
+	color: ${ COLORS.white };
+
+	&:active {
+		background: transparent;
+	}
+`;

package/src/tools-panel/stories/index.js

@@ -29,11 +29,13 @@ export const _default = () => {
 	const [ height, setHeight ] = useState();
 	const [ minHeight, setMinHeight ] = useState();
 	const [ width, setWidth ] = useState();
+	const [ scale, setScale ] = useState();
 
 	const resetAll = () => {
 		setHeight( undefined );
 		setWidth( undefined );
 		setMinHeight( undefined );
+		setScale( undefined );
 	};
 
 	return (
@@ -79,6 +81,31 @@ export const _default = () => {
 							onChange={ ( next ) => setMinHeight( next ) }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! scale }
+						label="Scale"
+						onDeselect={ () => setScale( undefined ) }
+					>
+						<ToggleGroupControl
+							label="Scale"
+							value={ scale }
+							onChange={ ( next ) => setScale( next ) }
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="cover"
+								label="Cover"
+							/>
+							<ToggleGroupControlOption
+								value="contain"
+								label="Contain"
+							/>
+							<ToggleGroupControlOption
+								value="fill"
+								label="Fill"
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</Panel>
 		</PanelWrapperView>

package/src/tools-panel/styles.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 /**
@@ -12,7 +13,7 @@ import {
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
-import { COLORS, CONFIG } from '../utils';
+import { COLORS, CONFIG, rtl } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
@@ -145,3 +146,29 @@ export const ToolsPanelItemPlaceholder = css`
 export const DropdownMenu = css`
 	min-width: 200px;
 `;
+
+export const ResetLabel = styled.span`
+	color: var( --wp-admin-theme-color-darker-10 );
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	${ rtl( { marginLeft: space( 3 ) } ) }
+	text-transform: uppercase;
+`;
+
+export const DefaultControlsItem = css`
+	color: ${ COLORS.gray[ 900 ] };
+
+	&&[aria-disabled='true'] {
+		color: ${ COLORS.gray[ 700 ] };
+		opacity: 1;
+
+		&:hover {
+			color: ${ COLORS.gray[ 700 ] };
+		}
+
+		${ ResetLabel } {
+			opacity: 0.3;
+		}
+	}
+`;

package/src/tools-panel/tools-panel-header/component.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { speak } from '@wordpress/a11y';
-import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { check, moreVertical, plus } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
@@ -20,12 +20,14 @@ import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
 	ToolsPanelHeaderProps,
 } from '../types';
 
 const DefaultControlsGroup = ( {
+	itemClassName,
 	items,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
@@ -33,15 +35,17 @@ const DefaultControlsGroup = ( {
 		return null;
 	}
 
+	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
+
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Defaults' ) }>
 			{ items.map( ( [ label, hasValue ] ) => {
 				if ( hasValue ) {
 					return (
 						<MenuItem
 							key={ label }
+							className={ itemClassName }
 							role="menuitem"
-							icon={ reset }
 							label={ sprintf(
 								// translators: %s: The name of the control being reset e.g. "Padding".
 								__( 'Reset %s' ),
@@ -58,6 +62,7 @@ const DefaultControlsGroup = ( {
 									'assertive'
 								);
 							} }
+							suffix={ resetSuffix }
 						>
 							{ label }
 						</MenuItem>
@@ -67,8 +72,8 @@ const DefaultControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
+						className={ itemClassName }
 						role="menuitemcheckbox"
-						icon={ check }
 						isSelected
 						aria-disabled
 					>
@@ -89,7 +94,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Tools' ) }>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -147,6 +152,7 @@ const ToolsPanelHeader = (
 ) => {
 	const {
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
@@ -197,6 +203,7 @@ const ToolsPanelHeader = (
 							<DefaultControlsGroup
 								items={ defaultItems }
 								toggleItem={ toggleItem }
+								itemClassName={ defaultControlsItemClassName }
 							/>
 							<OptionalControlsGroup
 								items={ optionalItems }

package/src/tools-panel/tools-panel-header/hook.ts

@@ -33,12 +33,17 @@ export function useToolsPanelHeader(
 		return cx( styles.ToolsPanelHeading );
 	}, [ cx ] );
 
+	const defaultControlsItemClassName = useMemo( () => {
+		return cx( styles.DefaultControlsItem );
+	}, [ cx ] );
+
 	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
 		useToolsPanelContext();
 
 	return {
 		...otherProps,
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,

package/src/tools-panel/types.ts

@@ -147,6 +147,7 @@ export type ToolsPanelContext = {
 };
 
 export type ToolsPanelControlsGroupProps = {
+	itemClassName?: string;
 	items: [ string, boolean ][];
 	toggleItem: ( label: string ) => void;
 };

package/tsconfig.json

@@ -47,10 +47,8 @@
 		"src/color-list-picker",
 		"src/combobox-control",
 		"src/custom-gradient-picker",
-		"src/custom-select-control",
 		"src/dimension-control",
 		"src/duotone-picker",
-		"src/font-size-picker",
 		"src/gradient-picker",
 		"src/guide",
 		"src/higher-order/navigate-regions",