@wordpress/components 25.6.1 → 26.0.1-next.5a1d1283.0

package/src/progress-bar/styles.ts

@@ -54,7 +54,10 @@ export const Indicator = styled.div< {
 					animationName: animateProgressBar,
 					width: `${ INDETERMINATE_TRACK_WIDTH }%`,
 			  } )
-			: css( { width: `${ value }%` } ) };
+			: css( {
+					width: `${ value }%`,
+					transition: 'width 0.4s ease-in-out',
+			  } ) };
 `;
 
 export const ProgressElement = styled.progress`

package/src/query-controls/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ import type {
 	QueryControlsWithMultipleCategorySelectionProps,
 } from '../types';
 
-const meta: ComponentMeta< typeof QueryControls > = {
+const meta: Meta< typeof QueryControls > = {
 	title: 'Components/QueryControls',
 	component: QueryControls,
 	argTypes: {
@@ -37,7 +37,7 @@ const meta: ComponentMeta< typeof QueryControls > = {
 };
 export default meta;
 
-export const Default: Story< typeof QueryControls > = ( args ) => {
+export const Default: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -146,7 +146,7 @@ Default.args = {
 	selectedAuthorId: 1,
 };
 
-const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
+const SingleCategoryTemplate: StoryFn< typeof QueryControls > = ( args ) => {
 	const {
 		onAuthorChange,
 		onCategoryChange,
@@ -184,8 +184,7 @@ const SingleCategoryTemplate: Story< typeof QueryControls > = ( args ) => {
 		/>
 	);
 };
-export const SelectSingleCategory: Story< typeof QueryControls > =
-	SingleCategoryTemplate.bind( {} );
+export const SelectSingleCategory = SingleCategoryTemplate.bind( {} );
 SelectSingleCategory.args = {
 	categoriesList: [
 		{

package/src/radio-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 RadioControl from '..';
 
-const meta: ComponentMeta< typeof RadioControl > = {
+const meta: Meta< typeof RadioControl > = {
 	component: RadioControl,
 	title: 'Components/RadioControl',
 	argTypes: {
@@ -39,7 +39,7 @@ const meta: ComponentMeta< typeof RadioControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RadioControl > = ( {
+const Template: StoryFn< typeof RadioControl > = ( {
 	onChange,
 	options,
 	...args
@@ -59,9 +59,7 @@ const Template: ComponentStory< typeof RadioControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RadioControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RadioControl > = Template.bind( {} );
 Default.args = {
 	label: 'Post visibility',
 	options: [

package/src/radio-group/stories/index.story.js

@@ -12,6 +12,7 @@ import RadioGroup from '../';
 export default {
 	title: 'Components (Deprecated)/RadioGroup',
 	component: RadioGroup,
+	subcomponents: { Radio },
 	parameters: {
 		docs: {
 			description: {

package/src/range-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
@@ -16,7 +16,7 @@ import RangeControl from '..';
 
 const ICONS = { starEmpty, starFilled, styles, wordpress };
 
-const meta: ComponentMeta< typeof RangeControl > = {
+const meta: Meta< typeof RangeControl > = {
 	component: RangeControl,
 	title: 'Components/RangeControl',
 	argTypes: {
@@ -53,10 +53,7 @@ const meta: ComponentMeta< typeof RangeControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof RangeControl > = ( {
-	onChange,
-	...args
-} ) => {
+const Template: StoryFn< typeof RangeControl > = ( { onChange, ...args } ) => {
 	const [ value, setValue ] = useState< number >();
 
 	return (
@@ -71,9 +68,7 @@ const Template: ComponentStory< typeof RangeControl > = ( {
 	);
 };
 
-export const Default: ComponentStory< typeof RangeControl > = Template.bind(
-	{}
-);
+export const Default: StoryFn< typeof RangeControl > = Template.bind( {} );
 Default.args = {
 	help: 'Please select how transparent you would like this.',
 	initialPosition: 50,
@@ -87,7 +82,7 @@ Default.args = {
  * values. This also overrides both `withInputField` and `showTooltip` props to
  * `false`.
  */
-export const WithAnyStep: ComponentStory< typeof RangeControl > = ( {
+export const WithAnyStep: StoryFn< typeof RangeControl > = ( {
 	onChange,
 	...args
 } ) => {
@@ -113,7 +108,7 @@ WithAnyStep.args = {
 	step: 'any',
 };
 
-const MarkTemplate: ComponentStory< typeof RangeControl > = ( {
+const MarkTemplate: StoryFn< typeof RangeControl > = ( {
 	label,
 	onChange,
 	...args
@@ -168,7 +163,7 @@ const marksWithNegatives = [
  * automatically generated or custom mark indicators can be provided by an
  * `Array`.
  */
-export const WithIntegerStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithIntegerStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithIntegerStepAndMarks.args = {
@@ -184,7 +179,7 @@ WithIntegerStepAndMarks.args = {
  * `step` ticks. Marks may be automatically generated or custom mark indicators
  * can be provided by an `Array`.
  */
-export const WithDecimalStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithDecimalStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithDecimalStepAndMarks.args = {
@@ -203,9 +198,8 @@ WithDecimalStepAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeMinimumAndMarks: ComponentStory<
-	typeof RangeControl
-> = MarkTemplate.bind( {} );
+export const WithNegativeMinimumAndMarks: StoryFn< typeof RangeControl > =
+	MarkTemplate.bind( {} );
 
 WithNegativeMinimumAndMarks.args = {
 	marks: marksWithNegatives,
@@ -219,7 +213,7 @@ WithNegativeMinimumAndMarks.args = {
  * indicators can represent negative values as well. Marks may be automatically
  * generated or custom mark indicators can be provided by an `Array`.
  */
-export const WithNegativeRangeAndMarks: ComponentStory< typeof RangeControl > =
+export const WithNegativeRangeAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithNegativeRangeAndMarks.args = {
@@ -234,7 +228,7 @@ WithNegativeRangeAndMarks.args = {
  * non-integer values. This may still be used in conjunction with `marks`
  * rendering a visual representation of `step` ticks.
  */
-export const WithAnyStepAndMarks: ComponentStory< typeof RangeControl > =
+export const WithAnyStepAndMarks: StoryFn< typeof RangeControl > =
 	MarkTemplate.bind( {} );
 
 WithAnyStepAndMarks.args = {

package/src/resizable-box/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
@@ -13,7 +13,7 @@ import ResizableBox from '..';
  */
 import { useState } from '@wordpress/element';
 
-const meta: ComponentMeta< typeof ResizableBox > = {
+const meta: Meta< typeof ResizableBox > = {
 	title: 'Components/ResizableBox',
 	component: ResizableBox,
 	argTypes: {
@@ -28,7 +28,7 @@ const meta: ComponentMeta< typeof ResizableBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResizableBox > = ( {
+const Template: StoryFn< typeof ResizableBox > = ( {
 	onResizeStop,
 	...props
 } ) => {

package/src/responsive-wrapper/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 ResponsiveWrapper from '..';
 
-const meta: ComponentMeta< typeof ResponsiveWrapper > = {
+const meta: Meta< typeof ResponsiveWrapper > = {
 	component: ResponsiveWrapper,
 	title: 'Components/ResponsiveWrapper',
 	argTypes: {
@@ -21,7 +21,7 @@ const meta: ComponentMeta< typeof ResponsiveWrapper > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ResponsiveWrapper > = ( args ) => (
+const Template: StoryFn< typeof ResponsiveWrapper > = ( args ) => (
 	<ResponsiveWrapper { ...args } />
 );
 
@@ -46,8 +46,7 @@ Default.args = {
  * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
  * its container, unless the `height` and `width` attributes are specified.
  */
-export const WithSVG: ComponentStory< typeof ResponsiveWrapper > =
-	Template.bind( {} );
+export const WithSVG: StoryFn< typeof ResponsiveWrapper > = Template.bind( {} );
 WithSVG.args = {
 	children: (
 		<svg

package/src/sandbox/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 SandBox from '..';
 
-const meta: ComponentMeta< typeof SandBox > = {
+const meta: Meta< typeof SandBox > = {
 	component: SandBox,
 	title: 'Components/SandBox',
 	argTypes: {
@@ -22,9 +22,7 @@ const meta: ComponentMeta< typeof SandBox > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof SandBox > = ( args ) => (
-	<SandBox { ...args } />
-);
+const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {

package/src/scroll-lock/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -15,7 +15,7 @@ import { useState } from '@wordpress/element';
 import Button from '../../button';
 import ScrollLock from '..';
 
-const meta: ComponentMeta< typeof ScrollLock > = {
+const meta: Meta< typeof ScrollLock > = {
 	component: ScrollLock,
 	title: 'Components/ScrollLock',
 	parameters: {
@@ -59,7 +59,7 @@ function ToggleContainer( props: { children: ReactNode } ) {
 	);
 }
 
-export const Default: ComponentStory< typeof ScrollLock > = () => {
+export const Default: StoryFn< typeof ScrollLock > = () => {
 	const [ isScrollLocked, setScrollLocked ] = useState( false );
 	const toggleLock = () => setScrollLocked( ! isScrollLocked );
 

package/src/scrollable/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
@@ -14,7 +14,7 @@ import { useRef } from '@wordpress/element';
 import { View } from '../../view';
 import { Scrollable } from '..';
 
-const meta: ComponentMeta< typeof Scrollable > = {
+const meta: Meta< typeof Scrollable > = {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
 	argTypes: {
@@ -34,7 +34,7 @@ const meta: ComponentMeta< typeof Scrollable > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
+const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 	const targetRef = useRef< HTMLInputElement >( null );
 
 	const onButtonClick = () => {
@@ -76,7 +76,7 @@ const Template: ComponentStory< typeof Scrollable > = ( { ...args } ) => {
 	);
 };
 
-export const Default: ComponentStory< typeof Scrollable > = Template.bind( {} );
+export const Default: StoryFn< typeof Scrollable > = Template.bind( {} );
 Default.args = {
 	smoothScroll: false,
 	scrollDirection: 'y',

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/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/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 }
+		/>
 	);
 }