@wordpress/components 23.0.0 → 23.1.0

package/src/dropdown/types.ts

@@ -1,3 +1,20 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type Popover from '../popover';
+import type { PopoverProps } from '../popover/types';
+
+type CallbackProps = {
+	isOpen: boolean;
+	onToggle: () => void;
+	onClose: () => void;
+};
+
 export type DropdownContentWrapperProps = {
 	/**
 	 * Amount of padding to apply on the dropdown content.
@@ -6,3 +23,93 @@ export type DropdownContentWrapperProps = {
 	 */
 	paddingSize?: 'none' | 'small' | 'medium';
 };
+
+export type DropdownProps = {
+	/**
+	 * The className of the global container.
+	 */
+	className?: string;
+	/**
+	 * If you want to target the dropdown menu for styling purposes,
+	 * you need to provide a contentClassName because it's not being rendered
+	 * as a child of the container node.
+	 */
+	contentClassName?: string;
+	/**
+	 * Opt-in prop to show popovers fullscreen on mobile.
+	 *
+	 * @default false
+	 */
+	expandOnMobile?: boolean;
+	/**
+	 * By default, the first tabbable element in the popover will receive focus
+	 * when it mounts. This is the same as setting this prop to "firstElement".
+	 * Specifying a true value will focus the container instead.
+	 * Specifying a false value disables the focus handling entirely
+	 * (this should only be done when an appropriately accessible
+	 * substitute behavior exists).
+	 *
+	 * @default 'firstElement'
+	 */
+	focusOnMount?: 'firstElement' | boolean;
+	/**
+	 * Set this to customize the text that is shown in the dropdown's header
+	 * when it is fullscreen on mobile.
+	 */
+	headerTitle?: string;
+	/**
+	 * A callback invoked when the popover should be closed.
+	 */
+	onClose?: () => void;
+	/**
+	 * A callback invoked when the state of the popover changes
+	 * from open to closed and vice versa.
+	 * The callback receives a boolean as a parameter.
+	 * If true, the popover will open.
+	 * If false, the popover will close.
+	 */
+	onToggle?: ( willOpen: boolean ) => void;
+	/**
+	 * Properties of popoverProps object will be passed as props
+	 * to the Popover component.
+	 * Use this object to access properties/features
+	 * of the Popover component that are not already exposed
+	 * in the Dropdown component,
+	 * e.g.: the ability to have the popover without an arrow.
+	 */
+	popoverProps?: Omit<
+		ComponentPropsWithoutRef< typeof Popover >,
+		'children'
+	>;
+	/**
+	 * The direction in which the popover should open
+	 * relative to its parent node.
+	 * Specify a y- and an x-axis as a space-separated string.
+	 * Supports "top", "bottom" y-axis,
+	 * and "left", "center", "right" x-axis.
+	 *
+	 * @default 'top center'
+	 */
+	position?: PopoverProps[ 'position' ];
+	/**
+	 * A callback invoked to render the content of the dropdown menu.
+	 * Its first argument is the same as the renderToggle prop.
+	 */
+	renderContent: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * A callback invoked to render the Dropdown Toggle Button.
+	 *
+	 * The first argument of the callback is an object
+	 * containing the following properties:
+	 *
+	 * - isOpen: whether the dropdown menu is opened or not
+	 * - onToggle: A function switching the dropdown menu's state
+	 * from open to closed and vice versa
+	 * - onClose: A function that closes the menu if invoked
+	 */
+	renderToggle: ( props: CallbackProps ) => ReactNode;
+	/**
+	 * The style of the global container.
+	 */
+	style?: CSSProperties;
+};

package/src/dropdown-menu/README.md

@@ -101,14 +101,13 @@ const MyDropdownMenu = () => (
 Alternatively, specify a `children` function which returns elements valid for use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
 
 ```jsx
-import { Fragment } from '@wordpress/element';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
 
 const MyDropdownMenu = () => (
 	<DropdownMenu icon={ more } label="Select a direction">
 		{ ( { onClose } ) => (
-			<Fragment>
+			<>
 				<MenuGroup>
 					<MenuItem icon={ arrowUp } onClick={ onClose }>
 						Move Up
@@ -122,7 +121,7 @@ const MyDropdownMenu = () => (
 						Remove
 					</MenuItem>
 				</MenuGroup>
-			</Fragment>
+			</>
 		) }
 	</DropdownMenu>
 );

package/src/dropdown-menu/test/index.js

@@ -15,6 +15,8 @@ import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
 import DropdownMenu from '../';
 import { MenuItem } from '../../';
 
+jest.useFakeTimers();
+
 describe( 'DropdownMenu', () => {
 	it( 'should not render when neither controls nor children are assigned', () => {
 		render( <DropdownMenu /> );

package/src/external-link/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
+jest.useFakeTimers();
+
 const setupUser = () =>
 	userEvent.setup( {
 		advanceTimers: jest.advanceTimersByTime,

package/src/focal-point-picker/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Picker from '..';
 
+jest.useFakeTimers();
+
 describe( 'FocalPointPicker', () => {
 	describe( 'focus and blur', () => {
 		it( 'clicking the draggable area should focus it', async () => {

package/src/font-size-picker/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+jest.useFakeTimers();
+
 describe( 'FontSizePicker', () => {
 	test.each( [
 		// Use units when initial value uses units.

package/src/form-file-upload/test/index.tsx

@@ -14,6 +14,8 @@ import FormFileUpload from '..';
  */
 const { File } = window;
 
+jest.useFakeTimers();
+
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
 	target: expect.objectContaining( {

package/src/form-toggle/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import FormToggle, { noop } from '..';
 import type { FormToggleProps } from '../types';
 
+jest.useFakeTimers();
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const ControlledFormToggle = ( { onChange }: FormToggleProps ) => {

package/src/form-token-field/test/index.tsx

@@ -21,6 +21,8 @@ import { useState } from '@wordpress/element';
  */
 import FormTokenField from '../';
 
+jest.useFakeTimers();
+
 const FormTokenFieldWithState = ( {
 	onChange,
 	value,
@@ -486,6 +488,7 @@ describe( 'FormTokenField', () => {
 
 			// This is testing implementation details, but I'm not sure there's
 			// a better way.
+			// eslint-disable-next-line testing-library/no-node-access
 			expect( input.parentElement?.parentElement ).toHaveClass(
 				'test-classname'
 			);

package/src/gradient-picker/index.js

@@ -99,7 +99,6 @@ export default function GradientPicker( {
 	value,
 	clearable = true,
 	disableCustomGradients = false,
-	__experimentalHasMultipleOrigins,
 	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback(
@@ -107,7 +106,7 @@ export default function GradientPicker( {
 		[ onChange ]
 	);
 	const Component =
-		__experimentalHasMultipleOrigins && gradients?.length
+		gradients?.length && gradients[ 0 ].gradients
 			? MultipleOrigin
 			: SingleOrigin;
 

package/src/gradient-picker/stories/index.js

@@ -87,7 +87,6 @@ WithNoExistingGradients.args = {
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
 	...Default.args,
-	__experimentalHasMultipleOrigins: true,
 	gradients: [
 		{ name: 'Origin 1', gradients: GRADIENTS },
 		{ name: 'Origin 2', gradients: GRADIENTS },

package/src/guide/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Guide from '../';
 
+jest.useFakeTimers();
+
 describe( 'Guide', () => {
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide pages={ [] } /> );

package/src/higher-order/navigate-regions/index.js

@@ -42,14 +42,17 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {
 
 	function focusRegion( offset ) {
 		const regions = Array.from(
-			ref.current.querySelectorAll( '[role="region"]' )
+			ref.current.querySelectorAll( '[role="region"][tabindex="-1"]' )
 		);
 		if ( ! regions.length ) {
 			return;
 		}
 		let nextRegion = regions[ 0 ];
+		// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
 		const selectedIndex = regions.indexOf(
-			ref.current.ownerDocument.activeElement
+			ref.current.ownerDocument.activeElement.closest(
+				'[role="region"][tabindex="-1"]'
+			)
 		);
 		if ( selectedIndex !== -1 ) {
 			let nextIndex = selectedIndex + offset;

package/src/higher-order/navigate-regions/style.scss

@@ -4,14 +4,17 @@
 }
 
 .is-focusing-regions {
-	[role="region"]:focus {
+	[role="region"]:focus::after {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		content: "";
+		pointer-events: none;
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
-
-		.interface-navigable-region__stacker {
-			position: relative;
-			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
-		}
+		z-index: z-index(".is-focusing-regions {region} :focus::after");
 	}
 
 	// Fixes for edge cases.
@@ -25,40 +28,11 @@
 	// regardles of the CSS used on other components.
 
 	// Header top bar when Distraction free mode is on.
-	&.is-distraction-free .interface-interface-skeleton__header {
-		.interface-navigable-region__stacker,
-		.edit-post-header {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__sidebar {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-sidebar-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar toggle button shown when navigating regions.
-	.interface-interface-skeleton__actions {
-		.interface-navigable-region__stacker,
-		.edit-post-layout__toggle-publish-panel {
-			outline: inherit;
-			outline-offset: inherit;
-		}
-	}
-
-	// Publish sidebar.
-	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
+	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
+	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;
 	}
 }
-
-.interface-navigable-region__stacker {
-	height: 100%;
-	width: 100%;
-}

package/src/higher-order/with-filters/test/index.js

@@ -13,6 +13,8 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
  */
 import withFilters from '..';
 
+jest.useFakeTimers();
+
 describe( 'withFilters', () => {
 	const hookName = 'EnhancedComponent';
 	const MyComponent = () => <div>My component</div>;
@@ -79,14 +81,13 @@ describe( 'withFilters', () => {
 
 		const { container } = render( <EnhancedComponent /> );
 
-		expect( container ).toMatchSnapshot();
-
-		jest.runAllTimers();
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when new filter added after component was mounted', async () => {
+	it( 'should re-render component once when new filter added after component was mounted', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -94,25 +95,24 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component once when two filters added in the same animation frame', async () => {
+	it( 'should re-render component once when two filters added in the same animation frame', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -120,65 +120,62 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-2',
-				( FilteredComponent ) => () =>
-					(
-						<section>
-							<FilteredComponent />
-						</section>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-2',
+			( FilteredComponent ) => () =>
+				(
+					<section>
+						<FilteredComponent />
+					</section>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
+	it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy',
-				( FilteredComponent ) => () =>
-					(
-						<div>
-							<FilteredComponent />
-						</div>
-					)
-			);
-			jest.runAllTimers();
-		} );
-
-		await act( () => {
-			removeFilter( hookName, 'test/enhanced-component-spy' );
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy',
+			( FilteredComponent ) => () =>
+				(
+					<div>
+						<FilteredComponent />
+					</div>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
+
+		removeFilter( hookName, 'test/enhanced-component-spy' );
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should re-render both components once each when one filter added', async () => {
+	it( 'should re-render both components once each when one filter added', () => {
 		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
@@ -192,19 +189,18 @@ describe( 'withFilters', () => {
 
 		SpiedComponent.mockClear();
 
-		await act( () => {
-			addFilter(
-				hookName,
-				'test/enhanced-component-spy-1',
-				( FilteredComponent ) => () =>
-					(
-						<blockquote>
-							<FilteredComponent />
-						</blockquote>
-					)
-			);
-			jest.runAllTimers();
-		} );
+		addFilter(
+			hookName,
+			'test/enhanced-component-spy-1',
+			( FilteredComponent ) => () =>
+				(
+					<blockquote>
+						<FilteredComponent />
+					</blockquote>
+				)
+		);
+
+		act( () => jest.runAllTimers() );
 
 		expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
 		expect( container ).toMatchSnapshot();

package/src/higher-order/with-focus-outside/test/index.js

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusOutside from '../';
 
+jest.useFakeTimers();
+
 let onFocusOutside;
 
 describe( 'withFocusOutside', () => {

package/src/higher-order/with-focus-return/test/index.js

@@ -14,6 +14,8 @@ import { Component } from '@wordpress/element';
  */
 import withFocusReturn from '../';
 
+jest.useFakeTimers();
+
 class Test extends Component {
 	render() {
 		const { className, focusHistory } = this.props;

package/src/higher-order/with-notices/test/index.js

@@ -101,6 +101,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createErrorNotice( message );
 		} );
+		// eslint-disable-next-line testing-library/no-node-access
 		expect( getByText( message )?.closest( '.is-error' ) ).not.toBeNull();
 	} );
 

package/src/icon/stories/index.tsx

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+import { wordpress } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Icon from '..';
+import { VStack } from '../../v-stack';
+
+const meta: ComponentMeta< typeof Icon > = {
+	title: 'Components/Icon',
+	component: Icon,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Icon > = ( args ) => (
+	<Icon { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	icon: wordpress,
+};
+
+export const FillColor: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<div
+			style={ {
+				fill: 'blue',
+			} }
+		>
+			<Icon { ...args } />
+		</div>
+	);
+};
+FillColor.args = {
+	...Default.args,
+};
+
+export const WithAFunction = Template.bind( {} );
+WithAFunction.args = {
+	...Default.args,
+	icon: () => (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+const MyIconComponent = () => (
+	<SVG>
+		<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+	</SVG>
+);
+
+export const WithAComponent = Template.bind( {} );
+WithAComponent.args = {
+	...Default.args,
+	icon: MyIconComponent,
+};
+
+export const WithAnSVG = Template.bind( {} );
+WithAnSVG.args = {
+	...Default.args,
+	icon: (
+		<SVG>
+			<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+		</SVG>
+	),
+};
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, 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.
+ */
+export const WithADashicon: ComponentStory< typeof Icon > = ( args ) => {
+	return (
+		<VStack>
+			<Icon { ...args } />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};
+WithADashicon.args = {
+	...Default.args,
+	icon: 'wordpress',
+};