@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.2.0

package/src/sandbox/index.js

@@ -205,32 +205,38 @@ export default function Sandbox( {
 			setHeight( data.height );
 		}
 
-		const { ownerDocument } = ref.current;
+		const iframe = ref.current;
+		const { ownerDocument } = iframe;
 		const { defaultView } = ownerDocument;
 
 		// This used to be registered using <iframe onLoad={} />, but it made the iframe blank
 		// after reordering the containing block. See these two issues for more details:
 		// https://github.com/WordPress/gutenberg/issues/6146
 		// https://github.com/facebook/react/issues/18752
-		ref.current.addEventListener( 'load', tryNoForceSandbox, false );
+		iframe.addEventListener( 'load', tryNoForceSandbox, false );
 		defaultView.addEventListener( 'message', checkMessageForResize );
 
 		return () => {
-			ref.current?.removeEventListener(
-				'load',
-				tryNoForceSandbox,
-				false
-			);
+			iframe?.removeEventListener( 'load', tryNoForceSandbox, false );
 			defaultView.addEventListener( 'message', checkMessageForResize );
 		};
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	useEffect( () => {
 		trySandbox();
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
+		// Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor.
+		// See https://github.com/WordPress/gutenberg/pull/44378
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ html, type ] );
 
 	return (

package/src/sandbox/index.native.js

@@ -282,6 +282,9 @@ function Sandbox( {
 
 	useEffect( () => {
 		updateContentHtml();
+		// 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
 	}, [ html, title, type, styles, scripts ] );
 
 	useEffect( () => {

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