@wordpress/components 25.6.1 → 25.8.0

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

@@ -14,7 +14,13 @@ import {
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useMemo, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useMemo,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button, Gridicons } from '@wordpress/components';
 import {
@@ -120,23 +126,44 @@ function SearchControl( {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ isActive, isDark ] );
 
+	const clearInput = useCallback( () => {
+		onChange( '' );
+	}, [ onChange ] );
+
+	const onPress = useCallback( () => {
+		setIsActive( true );
+		inputRef.current?.focus();
+	}, [] );
+
+	const onFocus = useCallback( () => {
+		setIsActive( true );
+	}, [] );
+
+	const onCancel = useCallback( () => {
+		clearTimeout( onCancelTimer.current );
+		onCancelTimer.current = setTimeout( () => {
+			inputRef.current?.blur();
+			clearInput();
+			setIsActive( false );
+		}, 0 );
+	}, [ clearInput ] );
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( ! isIOS ) {
+			onCancel();
+		}
+	}, [ isIOS, onCancel ] );
+
 	useEffect( () => {
 		const keyboardHideSubscription = Keyboard.addListener(
 			'keyboardDidHide',
-			() => {
-				if ( ! isIOS ) {
-					onCancel();
-				}
-			}
+			onKeyboardDidHide
 		);
 		return () => {
 			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
-	}, [] );
+	}, [ onKeyboardDidHide ] );
 
 	const {
 		'search-control__container': containerStyle,
@@ -153,18 +180,6 @@ function SearchControl( {
 		'search-control__right-icon': rightIconStyle,
 	} = currentStyles;
 
-	function clearInput() {
-		onChange( '' );
-	}
-
-	function onCancel() {
-		onCancelTimer.current = setTimeout( () => {
-			inputRef.current.blur();
-			clearInput();
-			setIsActive( false );
-		}, 0 );
-	}
-
 	function renderLeftButton() {
 		const button =
 			! isIOS && isActive ? (
@@ -234,10 +249,7 @@ function SearchControl( {
 	return (
 		<TouchableOpacity
 			style={ containerStyle }
-			onPress={ () => {
-				setIsActive( true );
-				inputRef.current.focus();
-			} }
+			onPress={ onPress }
 			activeOpacity={ 1 }
 		>
 			<View style={ innerContainerStyle }>
@@ -248,7 +260,7 @@ function SearchControl( {
 						style={ formInputStyle }
 						placeholderTextColor={ placeholderStyle?.color }
 						onChangeText={ onChange }
-						onFocus={ () => setIsActive( true ) }
+						onFocus={ onFocus }
 						value={ value }
 						placeholder={ placeholder }
 					/>

package/src/search-control/index.tsx

@@ -23,6 +23,7 @@ import type { ForwardedRef } from 'react';
 function UnforwardedSearchControl(
 	{
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		className,
 		onChange,
 		onKeyDown,
@@ -32,6 +33,7 @@ function UnforwardedSearchControl(
 		hideLabelFromVision = true,
 		help,
 		onClose,
+		size = 'default',
 		...restProps
 	}: WordPressComponentProps< SearchControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -44,9 +46,11 @@ function UnforwardedSearchControl(
 		if ( onClose ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Close search' ) }
 					onClick={ onClose }
+					size={ size }
 				/>
 			);
 		}
@@ -54,12 +58,14 @@ function UnforwardedSearchControl(
 		if ( !! value ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Reset search' ) }
 					onClick={ () => {
 						onChange( '' );
 						searchRef.current?.focus();
 					} }
+					size={ size }
 				/>
 			);
 		}
@@ -74,7 +80,10 @@ function UnforwardedSearchControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-search-control' ) }
+			className={ classnames( className, 'components-search-control', {
+				'is-next-40px-default-size': __next40pxDefaultSize,
+				'is-size-compact': size === 'compact',
+			} ) }
 		>
 			<div className="components-search-control__input-wrapper">
 				<input

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SearchControl from '..';
 
-const meta: ComponentMeta< typeof SearchControl > = {
+const meta: Meta< typeof SearchControl > = {
 	title: 'Components/SearchControl',
 	component: SearchControl,
 	argTypes: {
@@ -26,7 +26,7 @@ const meta: ComponentMeta< typeof SearchControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof SearchControl > = ( {
+const Template: StoryFn< typeof SearchControl > = ( {
 	onChange,
 	...props
 } ) => {

package/src/search-control/style.scss

@@ -4,7 +4,7 @@
 	input[type="search"].components-search-control__input {
 		@include input-control;
 		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
+		padding: 0 $grid-unit-60 0 $grid-unit-20;
 		background: $gray-100;
 		border: none;
 		width: 100%;
@@ -36,21 +36,28 @@
 			-webkit-appearance: none;
 		}
 	}
+
+	&.is-next-40px-default-size input[type="search"].components-search-control__input {
+		height: $grid-unit-50;
+	}
+
+	&.is-size-compact input[type="search"].components-search-control__input {
+		height: $grid-unit-40;
+	}
+
 }
 
 .components-search-control__icon {
 	position: absolute;
-	top: 0;
-	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
-	bottom: 0;
+	top: 50%;
+	transform: translateY(-50%);
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
 
-	> svg {
-		margin: $grid-unit-10 0;
-	}
+	width: $icon-size;
 }
 
 .components-search-control__input-wrapper {

package/src/search-control/types.ts

@@ -40,4 +40,16 @@ export type SearchControlProps = Pick<
 	 * The current value of the input.
 	 */
 	value?: string;
+	/**
+	 * The size of the component
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ const meta: Meta< typeof SelectControl > = {
 };
 export default meta;
 
-const SelectControlWithState: Story< typeof SelectControl > = ( props ) => {
+const SelectControlWithState: StoryFn< typeof SelectControl > = ( props ) => {
 	const [ selection, setSelection ] = useState< string[] >();
 
 	if ( props.multiple ) {
@@ -82,7 +82,7 @@ WithLabelAndHelpText.args = {
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
  * passed in as `children` for more customizeability.
  */
-export const WithCustomChildren: Story< typeof SelectControl > = ( args ) => {
+export const WithCustomChildren: StoryFn< typeof SelectControl > = ( args ) => {
 	return (
 		<SelectControlWithState { ...args }>
 			<option value="option-1">Option 1</option>

package/src/shortcut/index.tsx

@@ -3,6 +3,19 @@
  */
 import type { ShortcutProps } from './types';
 
+/**
+ * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed.
+ *
+ * ```jsx
+ * import { Shortcut } from '@wordpress/components';
+ *
+ * const MyShortcut = () => {
+ * 	return (
+ * 		<Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} />
+ * 	);
+ * };
+ * ```
+ */
 function Shortcut( props: ShortcutProps ) {
 	const { shortcut, className } = props;
 

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Shortcut from '../';
+
+const meta: Meta< typeof Shortcut > = {
+	component: Shortcut,
+	title: 'Components/Shortcut',
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const Template: StoryFn< typeof Shortcut > = ( props ) => {
+	return <Shortcut shortcut="Ctrl + S" { ...props } />;
+};
+
+export const Default: StoryFn< typeof Shortcut > = Template.bind( {} );
+
+export const WithAriaLabel = Template.bind( {} );
+WithAriaLabel.args = {
+	...Default.args,
+	shortcut: { display: 'Ctrl + L', ariaLabel: 'Load' },
+};

package/src/slot-fill/README.md

@@ -70,7 +70,7 @@ Both `Slot` and `Fill` accept a `name` string prop, where a `Slot` with a given
 
 `Slot` with `bubblesVirtually` set to true also accept an optional `className` to add to the slot container.
 
-`Slot` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
+`Slot` **without** `bubblesVirtually` accepts an optional `children` function prop, which takes `fills` as a param. It allows you to perform additional processing and wrap `fills` conditionally.
 
 _Example_:
 
@@ -103,14 +103,14 @@ const ToolbarItem = () => (
 	</Fill>
 );
 
-const Toolbar = () => 
-	const hideToolbar() => {
+const Toolbar = () => {
+	const hideToolbar = () => {
 		console.log( 'Hide toolbar' );
-	}
+	};
 	return (
 		<div className="toolbar">
 			<Slot fillProps={ { hideToolbar } } />
 		</div>
 	);
-);
+};
 ```

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

@@ -22,6 +22,9 @@ const SlotFillContext = createContext( {
 	unregisterSlot: () => {},
 	registerFill: () => {},
 	unregisterFill: () => {},
+
+	// This helps the provider know if it's using the default context value or not.
+	isDefault: true,
 } );
 
 export default SlotFillContext;

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

@@ -13,12 +13,20 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import { View } from '../../view';
 import SlotFillContext from './slot-fill-context';
 
-function Slot(
-	{ name, fillProps = {}, as: Component = 'div', ...props },
-	forwardedRef
-) {
+function Slot( props, forwardedRef ) {
+	const {
+		name,
+		fillProps = {},
+		as,
+		// `children` is not allowed. However, if it is passed,
+		// it will be displayed as is, so remove `children`.
+		children,
+		...restProps
+	} = props;
+
 	const { registerSlot, unregisterSlot, ...registry } =
 		useContext( SlotFillContext );
 	const ref = useRef();
@@ -41,7 +49,11 @@ function Slot(
 	} );
 
 	return (
-		<Component ref={ useMergeRefs( [ forwardedRef, ref ] ) } { ...props } />
+		<View
+			as={ as }
+			ref={ useMergeRefs( [ forwardedRef, ref ] ) }
+			{ ...restProps }
+		/>
 	);
 }
 

package/src/slot-fill/index.js

@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,6 +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 SlotFillContext from './bubbles-virtually/slot-fill-context';
 export { default as useSlot } from './bubbles-virtually/use-slot';
 export { default as useSlotFills } from './bubbles-virtually/use-slot-fills';
 
@@ -35,6 +36,10 @@ export const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {
 } );
 
 export function Provider( { children, ...props } ) {
+	const parent = useContext( SlotFillContext );
+	if ( ! parent.isDefault ) {
+		return children;
+	}
 	return (
 		<SlotFillProvider { ...props }>
 			<BubblesVirtuallySlotFillProvider>

package/src/slot-fill/stories/index.story.js

@@ -11,6 +11,8 @@ import { Slot, Fill, Provider as SlotFillProvider } from '../';
 export default {
 	title: 'Components/SlotFill',
 	component: Slot,
+	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+	subcomponents: { Fill, SlotFillProvider },
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },

package/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -42,12 +42,16 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="first"
   >
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -62,7 +66,9 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
   <div
     data-position="second"
   >
-    <div>
+    <div
+      class="emotion-0 emotion-1"
+    >
       Content
     </div>
   </div>
@@ -187,7 +193,9 @@ exports[`Slot should render in expected order when fills unmounted 1`] = `
 exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
-    <div />
+    <div
+      class="emotion-0 emotion-1"
+    />
   </div>
 </div>
 `;

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
  */
 import Snackbar from '..';
 
-const meta: ComponentMeta< typeof Snackbar > = {
+const meta: Meta< typeof Snackbar > = {
 	title: 'Components/Snackbar',
 	component: Snackbar,
 	argTypes: {
@@ -34,23 +34,22 @@ const meta: ComponentMeta< typeof Snackbar > = {
 };
 export default meta;
 
-const DefaultTemplate: ComponentStory< typeof Snackbar > = ( {
+const DefaultTemplate: StoryFn< typeof Snackbar > = ( {
 	children,
 	...props
 } ) => {
 	return <Snackbar { ...props }>{ children }</Snackbar>;
 };
 
-export const Default: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const Default: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 Default.args = {
 	children:
 		'Use Snackbars to communicate low priority, non-interruptive messages to the user.',
 };
 
-export const WithActions: ComponentStory< typeof Snackbar > =
-	DefaultTemplate.bind( {} );
+export const WithActions: StoryFn< typeof Snackbar > = DefaultTemplate.bind(
+	{}
+);
 WithActions.args = {
 	actions: [
 		{
@@ -61,9 +60,7 @@ WithActions.args = {
 	children: 'Use Snackbars with an action link to an external page.',
 };
 
-export const WithIcon: ComponentStory< typeof Snackbar > = DefaultTemplate.bind(
-	{}
-);
+export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {
 	children: 'Add an icon to make your snackbar stand out',
 	icon: (
@@ -73,7 +70,7 @@ WithIcon.args = {
 	),
 };
 
-export const WithExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithExplicitDismiss.args = {
 	children:
@@ -81,7 +78,7 @@ WithExplicitDismiss.args = {
 	explicitDismiss: true,
 };
 
-export const WithActionAndExplicitDismiss: ComponentStory< typeof Snackbar > =
+export const WithActionAndExplicitDismiss: StoryFn< typeof Snackbar > =
 	DefaultTemplate.bind( {} );
 WithActionAndExplicitDismiss.args = {
 	actions: [

package/src/snackbar/stories/list.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import SnackbarList from '../list';
 
-const meta: ComponentMeta< typeof SnackbarList > = {
+const meta: Meta< typeof SnackbarList > = {
 	title: 'Components/SnackbarList',
 	component: SnackbarList,
 	argTypes: {
@@ -32,7 +32,7 @@ const meta: ComponentMeta< typeof SnackbarList > = {
 };
 export default meta;
 
-export const Default: ComponentStory< typeof SnackbarList > = ( {
+export const Default: StoryFn< typeof SnackbarList > = ( {
 	children,
 	notices: noticesProp,
 	...props

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ const controls = [
 	{}
 );
 
-const meta: ComponentMeta< typeof Spacer > = {
+const meta: Meta< typeof Spacer > = {
 	component: Spacer,
 	title: 'Components (Experimental)/Spacer',
 	argTypes: {
@@ -54,7 +54,7 @@ const BlackBox = () => (
 	/>
 );
 
-const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+const Template: StoryFn< typeof Spacer > = ( { onChange, ...args } ) => {
 	return (
 		<>
 			<BlackBox />
@@ -64,7 +64,7 @@ const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+export const Default: StoryFn< typeof Spacer > = Template.bind( {} );
 Default.args = {
 	children: 'This is the spacer',
 };

package/src/spinner/index.tsx

@@ -50,7 +50,6 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * @example
  * ```js
  *   import { Spinner } from '@wordpress/components';
  *

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryFn, Meta } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import Spinner from '../';
 import { space } from '../../ui/utils/space';
 
-const meta: ComponentMeta< typeof Spinner > = {
+const meta: Meta< typeof Spinner > = {
 	title: 'Components/Spinner',
 	component: Spinner,
 	parameters: {
@@ -21,12 +21,12 @@ const meta: ComponentMeta< typeof Spinner > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Spinner > = ( args ) => {
+const Template: StoryFn< typeof Spinner > = ( args ) => {
 	return <Spinner { ...args } />;
 };
 
-export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const Default: StoryFn< typeof Spinner > = Template.bind( {} );
 
 // The Spinner can be resized to any size, but the stroke width will remain unchanged.
-export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+export const CustomSize: StoryFn< typeof Spinner > = Template.bind( {} );
 CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };