@wordpress/components 23.9.0 → 24.0.0

package/src/sandbox/index.native.js

@@ -186,6 +186,8 @@ const Sandbox = forwardRef( function Sandbox(
 		url,
 		onWindowEvents = {},
 		viewportProps = '',
+		onLoadEnd = () => {},
+		testID,
 	},
 	ref
 ) {
@@ -372,6 +374,8 @@ const Sandbox = forwardRef( function Sandbox(
 			showsHorizontalScrollIndicator={ false }
 			showsVerticalScrollIndicator={ false }
 			mediaPlaybackRequiresUserAction={ false }
+			onLoadEnd={ onLoadEnd }
+			testID={ testID }
 		/>
 	);
 } );

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

@@ -30,7 +30,8 @@ function useForceUpdate() {
 
 export default function Fill( { name, children } ) {
 	const { registerFill, unregisterFill, ...slot } = useSlot( name );
-	const ref = useRef( { rerender: useForceUpdate() } );
+	const rerender = useForceUpdate();
+	const ref = useRef( { rerender } );
 
 	useEffect( () => {
 		// We register fills so we can keep track of their existence.

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

@@ -8,7 +8,7 @@ import { proxyMap } from 'valtio/utils';
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -16,13 +16,13 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  */
 import SlotFillContext from './slot-fill-context';
 
-function useSlotRegistry() {
-	const slots = useRef( proxyMap() );
-	const fills = useRef( proxyMap() );
+function createSlotRegistry() {
+	const slots = proxyMap();
+	const fills = proxyMap();
 
-	const registerSlot = useCallback( ( name, ref, fillProps ) => {
-		const slot = slots.current.get( name ) || {};
-		slots.current.set(
+	function registerSlot( name, ref, fillProps ) {
+		const slot = slots.get( name ) || {};
+		slots.set(
 			name,
 			valRef( {
 				...slot,
@@ -30,77 +30,63 @@ function useSlotRegistry() {
 				fillProps: fillProps || slot.fillProps || {},
 			} )
 		);
-	}, [] );
+	}
 
-	const unregisterSlot = useCallback( ( name, ref ) => {
+	function unregisterSlot( name, ref ) {
 		// 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 );
+		if ( slots.get( name )?.ref === ref ) {
+			slots.delete( name );
 		}
-	}, [] );
+	}
 
-	const updateSlot = useCallback( ( name, fillProps ) => {
-		const slot = slots.current.get( name );
+	function updateSlot( name, fillProps ) {
+		const slot = slots.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() );
-			}
+		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
+			return;
 		}
-	}, [] );
 
-	const registerFill = useCallback( ( name, ref ) => {
-		fills.current.set(
-			name,
-			valRef( [ ...( fills.current.get( name ) || [] ), ref ] )
-		);
-	}, [] );
+		slot.fillProps = fillProps;
+		const slotFills = fills.get( name );
+		if ( slotFills ) {
+			// Force update fills.
+			slotFills.map( ( fill ) => fill.current.rerender() );
+		}
+	}
+
+	function registerFill( name, ref ) {
+		fills.set( name, valRef( [ ...( fills.get( name ) || [] ), ref ] ) );
+	}
 
-	const unregisterFill = useCallback( ( name, ref ) => {
-		if ( fills.current.get( name ) ) {
-			fills.current.set(
-				name,
-				valRef(
-					fills.current
-						.get( name )
-						.filter( ( fillRef ) => fillRef !== ref )
-				)
-			);
+	function unregisterFill( name, ref ) {
+		const fillsForName = fills.get( name );
+		if ( ! fillsForName ) {
+			return;
 		}
-	}, [] );
 
-	// Memoizing the return value so it can be directly passed to Provider value
-	const registry = useMemo(
-		() => ( {
-			slots: slots.current,
-			fills: fills.current,
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		} ),
-		[
-			registerSlot,
-			updateSlot,
-			unregisterSlot,
-			registerFill,
-			unregisterFill,
-		]
-	);
+		fills.set(
+			name,
+			valRef( fillsForName.filter( ( fillRef ) => fillRef !== ref ) )
+		);
+	}
 
-	return registry;
+	return {
+		slots,
+		fills,
+		registerSlot,
+		updateSlot,
+		unregisterSlot,
+		registerFill,
+		unregisterFill,
+	};
 }
 
 export default function SlotFillProvider( { children } ) {
-	const registry = useSlotRegistry();
+	const [ registry ] = useState( createSlotRegistry );
 	return (
 		<SlotFillContext.Provider value={ registry }>
 			{ children }

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

@@ -7,7 +7,7 @@ import { useSnapshot } from 'valtio';
 /**
  * WordPress dependencies
  */
-import { useCallback, useContext } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,52 +15,25 @@ import { useCallback, useContext } from '@wordpress/element';
 import SlotFillContext from './slot-fill-context';
 
 export default function useSlot( name ) {
-	const {
-		updateSlot: registryUpdateSlot,
-		unregisterSlot: registryUnregisterSlot,
-		registerFill: registryRegisterFill,
-		unregisterFill: registryUnregisterFill,
-		...registry
-	} = useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 	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.
+	// The important bit here is that the `useSnapshot` call ensures that the
+	// hook only causes a re-render if the slot with the given name changes,
+	// not any other slot.
 	const slot = slots.get( name );
 
-	const updateSlot = useCallback(
-		( fillProps ) => {
-			registryUpdateSlot( name, fillProps );
-		},
-		[ name, registryUpdateSlot ]
-	);
-
-	const unregisterSlot = useCallback(
-		( slotRef ) => {
-			registryUnregisterSlot( name, slotRef );
-		},
-		[ name, registryUnregisterSlot ]
-	);
-
-	const registerFill = useCallback(
-		( fillRef ) => {
-			registryRegisterFill( name, fillRef );
-		},
-		[ name, registryRegisterFill ]
-	);
-
-	const unregisterFill = useCallback(
-		( fillRef ) => {
-			registryUnregisterFill( name, fillRef );
-		},
-		[ name, registryUnregisterFill ]
+	const api = useMemo(
+		() => ( {
+			updateSlot: ( fillProps ) => registry.updateSlot( name, fillProps ),
+			unregisterSlot: ( ref ) => registry.unregisterSlot( name, ref ),
+			registerFill: ( ref ) => registry.registerFill( name, ref ),
+			unregisterFill: ( ref ) => registry.unregisterFill( name, ref ),
+		} ),
+		[ name, registry ]
 	);
 
 	return {
 		...slot,
-		updateSlot,
-		unregisterSlot,
-		registerFill,
-		unregisterFill,
+		...api,
 	};
 }

package/src/slot-fill/fill.js

@@ -3,7 +3,7 @@
 /**
  * WordPress dependencies
  */
-import { createPortal, useLayoutEffect, useRef } from '@wordpress/element';
+import { useContext, useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,7 +11,8 @@ import { createPortal, useLayoutEffect, useRef } from '@wordpress/element';
 import SlotFillContext from './context';
 import useSlot from './use-slot';
 
-function FillComponent( { name, children, registerFill, unregisterFill } ) {
+export default function Fill( { name, children } ) {
+	const { registerFill, unregisterFill } = useContext( SlotFillContext );
 	const slot = useSlot( name );
 
 	const ref = useRef( {
@@ -51,28 +52,5 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ name ] );
 
-	if ( ! slot || ! slot.node ) {
-		return null;
-	}
-
-	// If a function is passed as a child, provide it with the fillProps.
-	if ( typeof children === 'function' ) {
-		children = children( slot.props.fillProps );
-	}
-
-	return createPortal( children, slot.node );
+	return null;
 }
-
-const Fill = ( props ) => (
-	<SlotFillContext.Consumer>
-		{ ( { registerFill, unregisterFill } ) => (
-			<FillComponent
-				{ ...props }
-				registerFill={ registerFill }
-				unregisterFill={ unregisterFill }
-			/>
-		) }
-	</SlotFillContext.Consumer>
-);
-
-export default Fill;

package/src/slot-fill/index.js

@@ -13,7 +13,7 @@ import BubblesVirtuallyFill from './bubbles-virtually/fill';
 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 useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
 export function Fill( props ) {
@@ -65,5 +65,3 @@ export const createPrivateSlotFill = ( name ) => {
 
 	return { privateKey, ...privateSlotFill };
 };
-
-export { useSlot };

package/src/slot-fill/provider.js

@@ -19,7 +19,6 @@ export default class SlotFillProvider extends Component {
 		this.unregisterFill = this.unregisterFill.bind( this );
 		this.getSlot = this.getSlot.bind( this );
 		this.getFills = this.getFills.bind( this );
-		this.hasFills = this.hasFills.bind( this );
 		this.subscribe = this.subscribe.bind( this );
 
 		this.slots = {};
@@ -32,7 +31,6 @@ export default class SlotFillProvider extends Component {
 			unregisterFill: this.unregisterFill,
 			getSlot: this.getSlot,
 			getFills: this.getFills,
-			hasFills: this.hasFills,
 			subscribe: this.subscribe,
 		};
 	}
@@ -91,10 +89,6 @@ export default class SlotFillProvider extends Component {
 		return this.fills[ name ];
 	}
 
-	hasFills( name ) {
-		return this.fills[ name ] && !! this.fills[ name ].length;
-	}
-
 	forceUpdateSlot( name ) {
 		const slot = this.getSlot( name );
 

package/src/slot-fill/slot.js

@@ -29,7 +29,6 @@ class SlotComponent extends Component {
 		super( ...arguments );
 
 		this.isUnmounted = false;
-		this.bindNode = this.bindNode.bind( this );
 	}
 
 	componentDidMount() {
@@ -53,10 +52,6 @@ class SlotComponent extends Component {
 		}
 	}
 
-	bindNode( node ) {
-		this.node = node;
-	}
-
 	forceUpdate() {
 		if ( this.isUnmounted ) {
 			return;

package/src/style.scss

@@ -1,3 +1,9 @@
+// Include the default WP Components color variables.
+// TODO: Remove this once all admin-scheme variables are accounted for in the wp-components fallback values.
+:root {
+	@include admin-scheme(#3858e9);
+}
+
 // Variables
 @import "./utils/theme-variables.scss";
 

package/src/tab-panel/index.tsx

@@ -101,7 +101,7 @@ export function TabPanel( {
 	// to show the `tab-panel` associated with the clicked tab.
 	const activateTabAutomatically = (
 		_childIndex: number,
-		child: HTMLButtonElement
+		child: HTMLElement
 	) => {
 		child.click();
 	};

package/src/theme/color-algorithms.ts

@@ -48,7 +48,7 @@ export function checkContrasts(
 	outputs: ThemeOutputValues[ 'colors' ]
 ) {
 	const background = inputs.background || COLORS.white;
-	const accent = inputs.accent || '#007cba';
+	const accent = inputs.accent || '#3858e9';
 	const foreground = outputs.foreground || COLORS.gray[ 900 ];
 	const gray = outputs.gray || COLORS.gray;
 

package/src/theme/stories/index.tsx

@@ -103,7 +103,7 @@ export const ColorScheme: ComponentStory< typeof Theme > = ( {
 	);
 };
 ColorScheme.args = {
-	accent: '#007cba',
+	accent: '#3858e9',
 	background: '#fff',
 };
 ColorScheme.argTypes = {

package/src/theme/test/color-algorithms.ts

@@ -53,9 +53,9 @@ describe( 'Theme color algorithms', () => {
 				'wp.components.Theme: The background color ("#000") does not have sufficient contrast against the accent color ("#111").'
 			);
 
-			generateThemeVariables( { background: '#eee' } );
+			generateThemeVariables( { background: '#1a1a1a' } );
 			expect( console ).toHaveWarnedWith(
-				'wp.components.Theme: The background color ("#eee") does not have sufficient contrast against the accent color ("#007cba").'
+				'wp.components.Theme: The background color ("#1a1a1a") does not have sufficient contrast against the accent color ("#3858e9").'
 			);
 		} );
 

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

@@ -65,8 +65,8 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }
@@ -400,8 +400,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: none;
   z-index: 1;
 }

package/src/toolbar/stories/index.tsx

@@ -83,30 +83,32 @@ Default.args = {
 			<ToolbarGroup>
 				<ToolbarItem>
 					{
-						// @ts-expect-error TODO: Remove when ToolbarItem/DropdownMenu is typed
-						( toggleProps ) => (
-							<DropdownMenu
-								hasArrowIndicator
-								icon={ alignLeft }
-								label="Align"
-								controls={ [
-									{
-										icon: alignLeft,
-										title: 'Align left',
-										isActive: true,
-									},
-									{
-										icon: alignCenter,
-										title: 'Align center',
-									},
-									{
-										icon: alignRight,
-										title: 'Align right',
-									},
-								] }
-								toggleProps={ toggleProps }
-							/>
-						)
+						// @ts-expect-error TODO: Remove when DropdownMenu is typed
+						( toggleProps ) => {
+							return (
+								<DropdownMenu
+									hasArrowIndicator
+									icon={ alignLeft }
+									label="Align"
+									controls={ [
+										{
+											icon: alignLeft,
+											title: 'Align left',
+											isActive: true,
+										},
+										{
+											icon: alignCenter,
+											title: 'Align center',
+										},
+										{
+											icon: alignRight,
+											title: 'Align right',
+										},
+									] }
+									toggleProps={ toggleProps }
+								/>
+							);
+						}
 					}
 				</ToolbarItem>
 			</ToolbarGroup>

package/src/toolbar/toolbar-button/index.tsx

@@ -82,19 +82,16 @@ function UnforwardedToolbarButton(
 			{ ...props }
 			ref={ ref }
 		>
-			{
-				// @ts-expect-error
-				( toolbarItemProps ) => (
-					<Button
-						label={ title }
-						isPressed={ isActive }
-						disabled={ isDisabled }
-						{ ...toolbarItemProps }
-					>
-						{ children }
-					</Button>
-				)
-			}
+			{ ( toolbarItemProps ) => (
+				<Button
+					label={ title }
+					isPressed={ isActive }
+					disabled={ isDisabled }
+					{ ...toolbarItemProps }
+				>
+					{ children }
+				</Button>
+			) }
 		</ToolbarItem>
 	);
 }

package/src/toolbar/toolbar-item/{index.js → index.tsx}

@@ -1,9 +1,8 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
 import { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,14 @@ import warning from '@wordpress/warning';
  */
 import ToolbarContext from '../toolbar-context';
 
-function ToolbarItem( { children, as: Component, ...props }, ref ) {
+function ToolbarItem(
+	{
+		children,
+		as: Component,
+		...props
+	}: React.ComponentPropsWithoutRef< typeof BaseToolbarItem >,
+	ref: ForwardedRef< any >
+) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 
 	if ( typeof children !== 'function' && ! Component ) {
@@ -33,6 +39,9 @@ function ToolbarItem( { children, as: Component, ...props }, ref ) {
 		if ( Component ) {
 			return <Component { ...allProps }>{ children }</Component>;
 		}
+		if ( typeof children !== 'function' ) {
+			return null;
+		}
 		return children( allProps );
 	}
 

package/src/tree-grid/README.md

@@ -127,8 +127,26 @@ An integer value that represents the total number of items in the set, at this s
 
 An optional value that designates whether a row is expanded or collapsed. Currently this value only sets the correct aria-expanded property on a row, it has no other built-in behavior.
 
+If there is a need to implement `aria-expanded` elsewhere in the row, cell, or element within a cell, you may pass `isExpanded={ undefined }`. In order for keyboard navigation to continue working, add the `data-expanded` attribute with either `true`/`false`. This allows the `TreeGrid` component to still manage keyboard interactions while allowing the `aria-expanded` attribute to be placed elsewhere. See the example below.
+
 -   Required: No
 
+```jsx
+function TreeMenu() {
+	return (
+		<TreeGrid>
+			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 } isExpanded={ undefined } data-expanded={ false }>
+				<TreeGridCell>
+					{ ( props ) => (
+						<Button aria-expanded="false" onClick={ onSelect } { ...props }>Select</Button>
+					) }
+				</TreeGridCell>
+			</TreeGridRow>
+		</TreeGrid>
+	);
+}
+```
+
 ### TreeGridCell
 
 #### Props

package/src/tree-grid/types.ts

@@ -22,6 +22,13 @@ export type TreeGridRowProps = {
 	 * An optional value that designates whether a row is expanded or collapsed.
 	 * Currently this value only sets the correct aria-expanded property on a row,
 	 * it has no other built-in behavior.
+	 *
+	 * If there is a need to implement `aria-expanded` elsewhere in the row, cell,
+	 * or element within a cell, you may pass `isExpanded={ undefined }`.
+	 * In order for keyboard navigation to continue working, add the
+	 * `data-expanded` attribute with either `true`/`false`. This allows the
+	 * `TreeGrid` component to still manage keyboard interactions while allowing
+	 * the `aria-expanded` attribute to be placed elsewhere.
 	 */
 	isExpanded?: boolean;
 };

package/src/utils/colors-values.js

@@ -29,11 +29,11 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Matches @wordpress/base-styles
+// Matches the Modern admin scheme in @wordpress/base-styles
 const ADMIN = {
-	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))',
 	themeDark10:
-		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))',
 };
 
 const UI = {

package/src/utils/theme-variables.scss

@@ -2,10 +2,10 @@
 //
 // If the `--wp-components-color-accent` variable is not defined, fallback to
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
-// defined, fallback to the default theme color (WP blue).
-$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+// defined, fallback to the default theme color (WP blueberry).
+$components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+$components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+$components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 
 // Used when placing text on the accent color.
 $components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);

package/src/utils/use-deprecated-props.ts

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function useDeprecated36pxDefaultSizeProp<
+	P extends Record< string, any > & {
+		__next36pxDefaultSize?: boolean;
+		__next40pxDefaultSize?: boolean;
+	}
+>(
+	props: P,
+	/** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */
+	componentIdentifier: string
+) {
+	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
+		props;
+	if ( typeof __next36pxDefaultSize !== 'undefined' ) {
+		deprecated( '`__next36pxDefaultSize` prop in ' + componentIdentifier, {
+			alternative: '`__next40pxDefaultSize`',
+			since: '6.3',
+		} );
+	}
+
+	return {
+		...otherProps,
+		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
+	};
+}