@wordpress/components 28.13.1-next.082ed6819.0 → 29.0.0

package/src/icon/stories/index.story.tsx

@@ -47,26 +47,68 @@ FillColor.args = {
 	...Default.args,
 };
 
+/**
+ * When `icon` is a function, it will be passed the `size` prop and any other additional props.
+ */
 export const WithAFunction = Template.bind( {} );
 WithAFunction.args = {
 	...Default.args,
-	icon: () => (
-		<SVG>
-			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
-		</SVG>
+	icon: ( { size }: { size?: number } ) => (
+		<img
+			width={ size }
+			height={ size }
+			src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+			alt="WordPress"
+		/>
 	),
 };
+WithAFunction.parameters = {
+	docs: {
+		source: {
+			code: `
+<Icon
+  icon={ ( { size } ) => (
+    <img
+      width={ size }
+      height={ size }
+      src="https://s.w.org/style/images/about/WordPress-logotype-wmark.png"
+      alt="WordPress"
+    />
+  ) }
+/>
+		`,
+		},
+	},
+};
 
-const MyIconComponent = () => (
-	<SVG>
+const MyIconComponent = ( { size }: { size?: number } ) => (
+	<SVG width={ size } height={ size }>
 		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
 	</SVG>
 );
 
+/**
+ * When `icon` is a component, it will be passed the `size` prop and any other additional props.
+ */
 export const WithAComponent = Template.bind( {} );
 WithAComponent.args = {
 	...Default.args,
-	icon: MyIconComponent,
+	icon: <MyIconComponent />,
+};
+WithAComponent.parameters = {
+	docs: {
+		source: {
+			code: `
+const MyIconComponent = ( { size } ) => (
+  <SVG width={ size } height={ size }>
+    <Path d="M5 4v3h5.5v12h3V7H19V4z" />
+  </SVG>
+);
+
+<Icon icon={ <MyIconComponent /> } />
+		`,
+		},
+	},
 };
 
 export const WithAnSVG = Template.bind( {} );
@@ -80,7 +122,7 @@ WithAnSVG.args = {
 };
 
 /**
- * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * Although it's preferred to use icons from the `@wordpress/icons` package, [Dashicons](https://developer.wordpress.org/resource/dashicons/) are still supported,
  * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
  * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
  */

package/src/index.ts

@@ -21,11 +21,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export {
-	__unstableMotion,
-	__unstableAnimatePresence,
-	__unstableMotionContext,
-} from './animation';
+export { __unstableMotion, __unstableAnimatePresence } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,

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

@@ -23,10 +23,10 @@ const meta: Meta< typeof InputControl > = {
 	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: { type: null } },
-		onChange: { control: { type: null } },
-		prefix: { control: { type: null } },
-		suffix: { control: { type: null } },
+		__unstableStateReducer: { control: false },
+		onChange: { control: false },
+		prefix: { control: false },
+		suffix: { control: false },
 		type: { control: { type: 'text' } },
 		value: { control: { disable: true } },
 	},

package/src/item-group/stories/index.story.tsx

@@ -17,8 +17,8 @@ const meta: Meta< typeof ItemGroup > = {
 	subcomponents: { Item },
 	title: 'Components (Experimental)/ItemGroup',
 	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
+		as: { control: false },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/menu/checkbox-item.tsx

@@ -16,30 +16,32 @@ import type { WordPressComponentProps } from '../context';
 import { MenuContext } from './context';
 import type { MenuCheckboxItemProps } from './types';
 import * as Styled from './styles';
-import { useTemporaryFocusVisibleFix } from './use-temporary-focus-visible-fix';
 
 export const MenuCheckboxItem = forwardRef<
 	HTMLDivElement,
 	WordPressComponentProps< MenuCheckboxItemProps, 'div', false >
 >( function MenuCheckboxItem(
-	{ 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.CheckboxItem can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuCheckboxItem
 			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/group-label.tsx

@@ -17,6 +17,13 @@ export const MenuGroupLabel = forwardRef<
 	WordPressComponentProps< MenuGroupLabelProps, 'div', false >
 >( function MenuGroup( props, ref ) {
 	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.GroupLabel can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuGroupLabel
 			ref={ ref }
@@ -31,7 +38,7 @@ export const MenuGroupLabel = forwardRef<
 				/>
 			}
 			{ ...props }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		/>
 	);
 } );

package/src/menu/group.tsx

@@ -16,11 +16,18 @@ export const MenuGroup = forwardRef<
 	WordPressComponentProps< MenuGroupProps, 'div', false >
 >( function MenuGroup( props, ref ) {
 	const menuContext = useContext( MenuContext );
+
+	if ( ! menuContext?.store ) {
+		throw new Error(
+			'Menu.Group can only be rendered inside a Menu component'
+		);
+	}
+
 	return (
 		<Styled.MenuGroup
 			ref={ ref }
 			{ ...props }
-			store={ menuContext?.store }
+			store={ menuContext.store }
 		/>
 	);
 } );

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/stories/index.story.tsx

@@ -46,8 +46,8 @@ const meta: Meta< typeof Menu > = {
 		ItemHelpText: Menu.ItemHelpText,
 	},
 	argTypes: {
-		children: { control: { type: null } },
-		trigger: { control: { type: null } },
+		children: { control: false },
+		trigger: { control: false },
 	},
 	tags: [ 'status-private' ],
 	parameters: {

package/src/menu/styles.ts

@@ -201,7 +201,7 @@ const baseItem = css`
 			[aria-disabled='true']
 		) {
 		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.white };
+		color: ${ COLORS.theme.accentInverted };
 	}
 
 	/* Keyboard focus (focus-visible) */

package/src/menu-group/stories/index.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof MenuGroup > = {
 	component: MenuGroup,
 	id: 'components-menugroup',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/menu-item/stories/index.story.tsx

@@ -20,7 +20,7 @@ const meta: Meta< typeof MenuItem > = {
 	title: 'Components/Actions/MenuItem',
 	id: 'components-menuitem',
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 		icon: {
 			control: { type: 'select' },
 			options: [ 'check', 'link', 'more' ],

package/src/menu-items-choice/stories/index.story.tsx

@@ -21,7 +21,7 @@ const meta: Meta< typeof MenuItemsChoice > = {
 	argTypes: {
 		onHover: { action: 'onHover' },
 		onSelect: { action: 'onSelect' },
-		value: { control: { type: null } },
+		value: { control: false },
 	},
 	parameters: {
 		controls: {

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/modal/stories/index.story.tsx

@@ -23,10 +23,10 @@ const meta: Meta< typeof Modal > = {
 	id: 'components-modal',
 	argTypes: {
 		children: {
-			control: { type: null },
+			control: false,
 		},
 		onKeyDown: {
-			control: { type: null },
+			control: false,
 		},
 		focusOnMount: {
 			options: [ true, false, 'firstElement', 'firstContentElement' ],

package/src/modal/test/index.tsx

@@ -269,7 +269,8 @@ describe( 'Modal', () => {
 	} );
 
 	describe( 'Focus handling', () => {
-		let originalGetClientRects: () => DOMRectList;
+		const originalGetClientRects =
+			window.HTMLElement.prototype.getClientRects;
 
 		const FocusMountDemo = ( {
 			focusOnMount,

package/src/navigable-container/stories/navigable-menu.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof NavigableMenu > = {
 	id: 'components-navigablemenu',
 	component: NavigableMenu,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/navigable-container/stories/tabbable-container.story.tsx

@@ -13,7 +13,7 @@ const meta: Meta< typeof TabbableContainer > = {
 	id: 'components-tabbablecontainer',
 	component: TabbableContainer,
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/navigation/stories/index.story.tsx

@@ -39,10 +39,10 @@ const meta: Meta< typeof Navigation > = {
 		NavigationMenu,
 	},
 	argTypes: {
-		activeItem: { control: { type: null } },
-		activeMenu: { control: { type: null } },
-		children: { control: { type: null } },
-		onActivateMenu: { control: { type: null } },
+		activeItem: { control: false },
+		activeMenu: { control: false },
+		children: { control: false },
+		onActivateMenu: { control: false },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/navigation/styles/navigation-styles.tsx

@@ -134,11 +134,12 @@ export const ItemBaseUI = styled.li`
 
 	&.is-active {
 		background-color: ${ COLORS.theme.accent };
-		color: ${ COLORS.white };
+		color: ${ COLORS.theme.accentInverted };
 
 		> button,
+		.components-button:hover,
 		> a {
-			color: ${ COLORS.white };
+			color: ${ COLORS.theme.accentInverted };
 			opacity: 1;
 		}
 	}

package/src/navigator/stories/index.story.tsx

@@ -24,9 +24,9 @@ const meta: Meta< typeof Navigator > = {
 	title: 'Components/Navigation/Navigator',
 	id: 'components-navigator',
 	argTypes: {
-		as: { control: { type: null } },
-		children: { control: { type: null } },
-		initialPath: { control: { type: null } },
+		as: { control: false },
+		children: { control: false },
+		initialPath: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

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

@@ -23,7 +23,7 @@ const meta: Meta< typeof NumberControl > = {
 		step: { control: { type: 'text' } },
 		suffix: { control: { type: 'text' } },
 		type: { control: { type: 'text' } },
-		value: { control: null },
+		value: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -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/panel/stories/index.story.tsx

@@ -23,7 +23,7 @@ const meta: Meta< typeof Panel > = {
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { PanelRow, PanelBody },
 	argTypes: {
-		children: { control: { type: null } },
+		children: { control: false },
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/placeholder/stories/index.story.tsx

@@ -21,9 +21,9 @@ const meta: Meta< typeof Placeholder > = {
 	component: Placeholder,
 	title: 'Components/Placeholder',
 	argTypes: {
-		children: { control: { type: null } },
-		notices: { control: { type: null } },
-		preview: { control: { type: null } },
+		children: { control: false },
+		notices: { control: false },
+		preview: { control: false },
 		icon: {
 			control: { type: 'select' },
 			options: Object.keys( ICONS ),