@wordpress/components 28.13.0 → 28.14.1-next.cd6172eb0.0

package/src/menu/item-help-text.tsx

@@ -1,18 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
 import * as Styled from './styles';
 
 export const MenuItemHelpText = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
 >( function MenuItemHelpText( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.ItemHelpText can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuItemHelpText numberOfLines={ 2 } ref={ ref } { ...props } />
 	);

package/src/menu/item-label.tsx

@@ -1,18 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../context';
+import { MenuContext } from './context';
 import * as Styled from './styles';
 
 export const MenuItemLabel = forwardRef<
 	HTMLSpanElement,
 	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
 >( function MenuItemLabel( props, ref ) {
+	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.ItemLabel can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuItemLabel numberOfLines={ 1 } ref={ ref } { ...props } />
 	);

package/src/menu/item.tsx

@@ -10,27 +10,29 @@ import type { WordPressComponentProps } from '../context';
 import type { MenuItemProps } from './types';
 import * as Styled from './styles';
 import { MenuContext } from './context';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 export const MenuItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuItemProps, 'div', false >
 >( function MenuItem(
-	{ prefix, suffix, children, onBlur, hideOnClick = true, ...props },
+	{ prefix, suffix, children, hideOnClick = true, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Item can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		>
 			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
 

package/src/menu/radio-item.tsx

@@ -17,7 +17,6 @@ import { MenuContext } from './context';
 import type { MenuRadioItemProps } from './types';
 import * as Styled from './styles';
 import { SVG, Circle } from '@wordpress/primitives';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 const radioCheck = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -29,24 +28,27 @@ export const MenuRadioItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuRadioItemProps, 'div', false >
 >( function MenuRadioItem(
-	{ suffix, children, onBlur, hideOnClick = false, ...props },
+	{ suffix, children, hideOnClick = false, ...props },
 	ref
 ) {
-	// TODO: Remove when https://github.com/ariakit/ariakit/issues/4083 is fixed
-	const focusVisibleFixProps = useTemporaryFocusVisibleFix( { onBlur } );
 	const menuContext = useContext( MenuContext );
 
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.RadioItem can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuRadioItem
 			ref={ ref }
 			{ ...props }
-			{ ...focusVisibleFixProps }
 			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		>
 			<Ariakit.MenuItemCheck
-				store={ menuContext?.store }
+				store={ menuContext.store }
 				render={ <Styled.ItemPrefixWrapper /> }
 				// Override some ariakit inline styles
 				style={ { width: 'auto', height: 'auto' } }

package/src/menu/separator.tsx

@@ -16,12 +16,19 @@ export const MenuSeparator = forwardRef<
 	WordPressComponentProps< MenuSeparatorProps, 'hr', false >
 >( function MenuSeparator( props, ref ) {
 	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Separator can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuSeparator
 			ref={ ref }
 			{ ...props }
-			store={ menuContext?.store }
-			variant={ menuContext?.variant }
+			store={ menuContext.store }
+			variant={ menuContext.variant }
 		/>
 	);
 } );

package/src/menu-items-choice/style.scss

@@ -1,5 +1,6 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
+	min-height: $button-size-next-default-40px;
 	height: auto;
 
 	svg {

package/src/number-control/README.md

@@ -16,6 +16,7 @@ const Example = () => {
 
 	return (
 		<NumberControl
+			__next40pxDefaultSize
 			isShiftStepEnabled={ true }
 			onChange={ setValue }
 			shiftStep={ 10 }
@@ -146,4 +147,4 @@ Start opting into the larger default height that will become the default size in
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `false`
+-   Default: `false`

package/src/number-control/index.tsx

@@ -26,6 +26,7 @@ import { HStack } from '../h-stack';
 import { Spacer } from '../spacer';
 import { useCx } from '../utils';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const noop = () => {};
 
@@ -53,9 +54,17 @@ function UnforwardedNumberControl(
 		size = 'default',
 		suffix,
 		onChange = noop,
+		__shouldNotWarnDeprecated36pxSize,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp< NumberControlProps >( props );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'NumberControl',
+		size,
+		__next40pxDefaultSize: restProps.__next40pxDefaultSize,
+		__shouldNotWarnDeprecated36pxSize,
+	} );
+
 	if ( hideHTMLArrows ) {
 		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
 			alternative: 'spinControls="none"',

package/src/number-control/stories/index.story.tsx

@@ -62,4 +62,5 @@ const Template: StoryFn< typeof NumberControl > = ( {
 export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
+	__next40pxDefaultSize: true,
 };

package/src/number-control/test/index.tsx

@@ -12,9 +12,13 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import NumberControl from '..';
+import _NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+const NumberControl = (
+	props: React.ComponentProps< typeof _NumberControl >
+) => <_NumberControl __next40pxDefaultSize { ...props } />;
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );

package/src/number-control/types.ts

@@ -91,4 +91,11 @@ export type NumberControlProps = Omit<
 	 * The value of the input.
 	 */
 	value?: number | string;
+	/**
+	 * Do not throw a warning for the deprecated 36px default size.
+	 * For internal components of other components that already throw the warning.
+	 *
+	 * @ignore
+	 */
+	__shouldNotWarnDeprecated36pxSize?: boolean;
 };

package/src/range-control/index.tsx

@@ -350,6 +350,7 @@ function UnforwardedRangeControl(
 						step={ step }
 						// @ts-expect-error TODO: Investigate if the `null` value is necessary
 						value={ inputSliderValue }
+						__shouldNotWarnDeprecated36pxSize
 					/>
 				) }
 				{ allowReset && (

package/src/resizable-box/index.tsx

@@ -112,6 +112,16 @@ function UnforwardedResizableBox(
 				showHandle && 'has-show-handle',
 				className
 			) }
+			// Add a focusable element within the drag handle. Unfortunately,
+			// `re-resizable` does not make them properly focusable by default,
+			// causing focus to move the the block wrapper which triggers block
+			// drag.
+			handleComponent={ Object.fromEntries(
+				Object.keys( HANDLE_CLASSES ).map( ( key ) => [
+					key,
+					<div key={ key } tabIndex={ -1 } />,
+				] )
+			) }
 			handleClasses={ HANDLE_CLASSES }
 			handleStyles={ HANDLE_STYLES }
 			ref={ ref }

package/src/resizable-box/style.scss

@@ -15,6 +15,14 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	.components-resizable-box__container.has-show-handle & {
 		display: block;
 	}
+
+	> div {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: z-index(".components-resizable-box__handle");
+		outline: none;
+	}
 }
 
 // Make the image inside the resize to get the full width

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

@@ -4,7 +4,6 @@
 import { useObservableValue } from '@wordpress/compose';
 import {
 	useContext,
-	useReducer,
 	useRef,
 	useEffect,
 	createPortal,
@@ -20,18 +19,15 @@ import type { FillComponentProps } from '../types';
 export default function Fill( { name, children }: FillComponentProps ) {
 	const registry = useContext( SlotFillContext );
 	const slot = useObservableValue( registry.slots, name );
-	const [ , rerender ] = useReducer( () => [], [] );
-	const ref = useRef( { rerender } );
+	const instanceRef = useRef( {} );
 
+	// We register fills so we can keep track of their existence.
+	// Slots can use the `useSlotFills` hook to know if there're already fills
+	// registered so they can choose to render themselves or not.
 	useEffect( () => {
-		// We register fills so we can keep track of their existence.
-		// Some Slot implementations need to know if there're already fills
-		// registered so they can choose to render themselves or not.
-		const refValue = ref.current;
-		registry.registerFill( name, refValue );
-		return () => {
-			registry.unregisterFill( name, refValue );
-		};
+		const instance = instanceRef.current;
+		registry.registerFill( name, instance );
+		return () => registry.unregisterFill( name, instance );
 	}, [ registry, name ] );
 
 	if ( ! slot || ! slot.ref.current ) {

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

@@ -23,13 +23,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 		ref,
 		fillProps
 	) => {
-		const slot = slots.get( name );
-
-		slots.set( name, {
-			...slot,
-			ref: ref || slot?.ref,
-			fillProps: fillProps || slot?.fillProps || {},
-		} );
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const unregisterSlot: SlotFillBubblesVirtuallyContext[ 'unregisterSlot' ] =
@@ -66,12 +60,7 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 			return;
 		}
 
-		slot.fillProps = fillProps;
-		const slotFills = fills.get( name );
-		if ( slotFills ) {
-			// Force update fills.
-			slotFills.forEach( ( fill ) => fill.rerender() );
-		}
+		slots.set( name, { ref, fillProps } );
 	};
 
 	const registerFill: SlotFillBubblesVirtuallyContext[ 'registerFill' ] = (

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

@@ -39,8 +39,7 @@ function Slot(
 		...restProps
 	} = props;
 
-	const { registerSlot, unregisterSlot, ...registry } =
-		useContext( SlotFillContext );
+	const registry = useContext( SlotFillContext );
 
 	const ref = useRef< HTMLElement >( null );
 
@@ -54,11 +53,9 @@ function Slot(
 	}, [ fillProps ] );
 
 	useLayoutEffect( () => {
-		registerSlot( name, ref, fillPropsRef.current );
-		return () => {
-			unregisterSlot( name, ref );
-		};
-	}, [ registerSlot, unregisterSlot, name ] );
+		registry.registerSlot( name, ref, fillPropsRef.current );
+		return () => registry.unregisterSlot( name, ref );
+	}, [ registry, name ] );
 
 	useLayoutEffect( () => {
 		registry.updateSlot( name, ref, fillPropsRef.current );

package/src/slot-fill/types.ts

@@ -110,15 +110,16 @@ export type SlotFillProviderProps = {
 
 export type SlotRef = RefObject< HTMLElement >;
 export type Rerenderable = { rerender: () => void };
+export type FillInstance = {};
 
 export type SlotFillBubblesVirtuallyContext = {
 	slots: ObservableMap< SlotKey, { ref: SlotRef; fillProps: FillProps } >;
-	fills: ObservableMap< SlotKey, Rerenderable[] >;
+	fills: ObservableMap< SlotKey, FillInstance[] >;
 	registerSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
 	unregisterSlot: ( name: SlotKey, ref: SlotRef ) => void;
 	updateSlot: ( name: SlotKey, ref: SlotRef, fillProps: FillProps ) => void;
-	registerFill: ( name: SlotKey, ref: Rerenderable ) => void;
-	unregisterFill: ( name: SlotKey, ref: Rerenderable ) => void;
+	registerFill: ( name: SlotKey, instance: FillInstance ) => void;
+	unregisterFill: ( name: SlotKey, instance: FillInstance ) => void;
 
 	/**
 	 * This helps the provider know if it's using the default context value or not.

package/src/tabs/tab.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import * as Ariakit from '@ariakit/react';
-
 /**
  * WordPress dependencies
  */
@@ -29,18 +24,6 @@ export const Tab = forwardRef<
 >( function Tab( { children, tabId, disabled, render, ...otherProps }, ref ) {
 	const { store, instanceId } = useTabsContext() ?? {};
 
-	// If the active item is not connected, the tablist may end up in a state
-	// where none of the tabs are tabbable. In this case, we force all tabs to
-	// be tabbable, so that as soon as an item received focus, it becomes active
-	// and Tablist goes back to working as expected.
-	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
-	const tabbable = Ariakit.useStoreState( store, ( state ) => {
-		return (
-			state?.activeId !== null &&
-			! store?.item( state?.activeId )?.element?.isConnected
-		);
-	} );
-
 	if ( ! store ) {
 		warning( '`Tabs.Tab` must be wrapped in a `Tabs` component.' );
 		return null;
@@ -55,7 +38,6 @@ export const Tab = forwardRef<
 			id={ instancedTabId }
 			disabled={ disabled }
 			render={ render }
-			tabbable={ tabbable }
 			{ ...otherProps }
 		>
 			<StyledTabChildren>{ children }</StyledTabChildren>