@wordpress/components 23.0.0 → 23.2.0

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -12,70 +7,35 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { Flex } from '../../flex';
-import { Spacer } from '../../spacer';
-import { space } from '../../ui/utils/space';
 
 export default {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		color: { control: { type: null } },
+		copyFormat: {
+			control: { type: 'select' },
+			options: [ 'rgb', 'hsl', 'hex', undefined ],
+		},
+		// We can't use a `on*` regex because this component will switch to
+		// legacy mode when an onChangeComplete prop is passed.
+		onChange: { action: 'onChange' },
 	},
 };
 
-const PROP_UNSET = 'unset';
-
-const Example = () => {
-	const [ color, setColor ] = useState( undefined );
-	const props = {
-		enableAlpha: boolean( 'enableAlpha', false ),
-		copyFormat: select(
-			'copyFormat',
-			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
-			PROP_UNSET
-		),
-	};
-
-	if ( props.copyFormat === PROP_UNSET ) {
-		delete props.copyFormat;
-	}
-
-	return (
-		<Flex
-			as={ Spacer }
-			gap={ space( 2 ) }
-			justify="space-around"
-			align="flex-start"
-			marginTop={ space( 10 ) }
-		>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-		</Flex>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-const LegacyExample = () => {
-	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
-	const legacyProps = {
-		color: legacyColor,
-		onChangeComplete: setLegacyColor,
-		disableAlpha: boolean( 'disableAlpha', true ),
-	};
+const Template = ( { onChange, ...props } ) => {
+	const [ color, setColor ] = useState();
 
 	return (
-		<Flex align="flex-start" justify="flex-start">
-			<ColorPicker { ...legacyProps } />
-			<pre style={ { width: '20em' } }>
-				{ JSON.stringify( legacyColor, undefined, 4 ) }
-			</pre>
-		</Flex>
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
 	);
 };
 
-export const legacy = () => <LegacyExample />;
+export const Default = Template.bind( {} );

package/src/color-picker/styles.ts

@@ -9,7 +9,6 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
 import { boxSizingReset } from '../utils';
 import Button from '../button';
@@ -111,10 +110,6 @@ export const ColorfulWrapper = styled.div`
 	}
 
 	${ interactiveHueStyles }
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 export const CopyButton = styled( Button )`

package/src/color-picker/test/index.js

@@ -8,6 +8,8 @@ import { render, fireEvent } from '@testing-library/react';
  */
 import { ColorPicker } from '..';
 
+jest.useFakeTimers();
+
 /**
  * Ordinarily we'd try to select the compnoent by role but the silder role appears
  * on several elements and we'd end up encoding assumptions about order when

package/src/combobox-control/index.js

@@ -121,7 +121,15 @@ function ComboboxControl( {
 	const onKeyDown = ( event ) => {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
 

package/src/combobox-control/test/index.js

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
+jest.useFakeTimers();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },

package/src/confirm-dialog/test/index.js

@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 describe( 'Confirm', () => {

package/src/dashicon/types.ts

@@ -3,12 +3,6 @@ export type DashiconProps = {
 	 * The icon name
 	 */
 	icon: IconKey;
-
-	/**
-	 * Class name
-	 */
-	className?: string;
-
 	/**
 	 * Size of the icon
 	 */

package/src/date-time/date/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
  */
 import DatePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );

package/src/date-time/time/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TimePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup( {

package/src/dimension-control/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,10 +49,10 @@ export function DimensionControl( props ) {
 	};
 
 	const selectLabel = (
-		<Fragment>
+		<>
 			{ icon && <Icon icon={ icon } /> }
 			{ label }
-		</Fragment>
+		</>
 	);
 
 	return (

package/src/dimension-control/test/index.test.js

@@ -14,6 +14,8 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;

package/src/disabled/stories/index.tsx

@@ -15,6 +15,7 @@ import Disabled from '../';
 import SelectControl from '../../select-control/';
 import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
+import { VStack } from '../../v-stack/';
 
 const meta: ComponentMeta< typeof Disabled > = {
 	title: 'Components/Disabled',
@@ -37,18 +38,21 @@ const Form = () => {
 	const [ textControlValue, setTextControlValue ] = useState( '' );
 	const [ textAreaValue, setTextAreaValue ] = useState( '' );
 	return (
-		<div>
+		<VStack>
 			<TextControl
+				__nextHasNoMarginBottom
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }
 			/>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label="TextArea Control"
 				value={ textAreaValue }
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [
@@ -58,7 +62,7 @@ const Form = () => {
 					{ value: 'c', label: 'Option C' },
 				] }
 			/>
-		</div>
+		</VStack>
 	);
 };
 

package/src/disabled/test/index.tsx

@@ -9,6 +9,8 @@ import { render, screen } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
+jest.useFakeTimers();
+
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">

package/src/dropdown/README.md

@@ -32,96 +32,91 @@ const MyDropdown = () => (
 
 The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
 
-### className
+### `className`: `string`
 
 className of the global container
 
--   Type: `String`
 -   Required: No
 
-### contentClassName
+### `contentClassName`: `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.
 
--   Type: `String`
 -   Required: No
 
-### position
+### `expandOnMobile`: `boolean`
 
-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.
+Opt-in prop to show popovers fullscreen on mobile.
 
--   Type: `String`
 -   Required: No
--   Default: `"top center"`
-
-### renderToggle
-
-A callback invoked to render the Dropdown Toggle Button.
-
--   Type: `Function`
--   Required: Yes
+-   Default: `false`
 
-The first argument of the callback is an object containing the following properties:
+### `focusOnMount`: `'firstElement' | boolean`
 
--   `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
+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"`.
 
-### renderContent
+Specifying a `true` value will focus the container instead.
 
-A callback invoked to render the content of the dropdown menu. Its first argument is the same as the `renderToggle` prop.
+Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
 
--   Type: `Function`
--   Required: Yes
+-   Required: No
+-   Default: `"firstElement"`
 
-### expandOnMobile
+### `headerTitle`: `string`
 
-Opt-in prop to show popovers fullscreen on mobile.
+Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
 
--   Type: `Boolean`
 -   Required: No
--   Default: `false`
 
-### headerTitle
+### `onClose`: `() => void`
 
-Set this to customize the text that is shown in the dropdown's header when it is fullscreen on mobile.
+A callback invoked when the popover should be closed.
 
--   Type: `String`
 -   Required: No
 
-### focusOnMount
-
-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"`.
+### `onToggle`: `( willOpen: boolean ) => void`
 
-Specifying a `true` value will focus the container instead.
+A callback invoked when the state of the popover changes from open to closed and vice versa.
 
-Specifying a `false` value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
+The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
 
--   Type: `'firstElement' | boolean`
 -   Required: No
--   Default: `"firstElement"`
 
-### popoverProps
+### `popoverProps`: `WordPressComponentProps< Omit< PopoverProps, 'children' > 'div', false	>`
 
 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.
 
--   Type: `Object`
 -   Required: No
 
-### onClose
+### `position`: `PopoverProps[ 'position' ]`
 
-A callback invoked when the popover should be closed.
+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.
 
--   Type: `Function`
 -   Required: No
+-   Default: `"top center"`
 
-### onToggle
+### `renderContent`: `( props: CallbackProps ) => ReactNode`
 
-A callback invoked when the state of the popover changes from open to closed and vice versa.
+A callback invoked to render the content of the dropdown menu.
 
-The callback receives a boolean as a parameter. If `true`, the popover will open. If `false`, the popover will close.
+- `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
+
+-   Required: Yes
+
+### `renderToggle`: `( props: CallbackProps ) => ReactNode`
+
+A callback invoked to render the Dropdown Toggle Button.
+
+Its props are the same as the `renderContent` props.
+
+-   Required: Yes
+
+### `style`: `React.CSSProperties`
+
+The style of the global container
 
--   Type: `Function`
 -   Required: No

package/src/dropdown/{index.js → index.tsx}

@@ -1,35 +1,39 @@
-// @ts-nocheck
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import Popover from '../popover';
+import type { DropdownProps } from './types';
 
-function useObservableState( initialState, onStateChange ) {
+function useObservableState(
+	initialState: boolean,
+	onStateChange?: ( newState: boolean ) => void
+) {
 	const [ state, setState ] = useState( initialState );
 	return [
 		state,
-		( value ) => {
+		( value: boolean ) => {
 			setState( value );
 			if ( onStateChange ) {
 				onStateChange( value );
 			}
 		},
-	];
+	] as const;
 }
 
-export default function Dropdown( props ) {
-	const {
+function UnforwardedDropdown(
+	{
 		renderContent,
 		renderToggle,
 		className,
@@ -42,12 +46,14 @@ export default function Dropdown( props ) {
 		onClose,
 		onToggle,
 		style,
-	} = props;
+	}: DropdownProps,
+	forwardedRef: ForwardedRef< any >
+) {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
-		useState( null );
-	const containerRef = useRef();
+		useState< HTMLDivElement | null >( null );
+	const containerRef = useRef< HTMLDivElement >();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 
 	useEffect(
@@ -70,8 +76,13 @@ export default function Dropdown( props ) {
 	 * case a dialog has opened, allowing focus to return when it's dismissed.
 	 */
 	function closeIfFocusOutside() {
+		if ( ! containerRef.current ) {
+			return;
+		}
+
 		const { ownerDocument } = containerRef.current;
-		const dialog = ownerDocument.activeElement.closest( '[role="dialog"]' );
+		const dialog =
+			ownerDocument?.activeElement?.closest( '[role="dialog"]' );
 		if (
 			! containerRef.current.contains( ownerDocument.activeElement ) &&
 			( ! dialog || dialog.contains( containerRef.current ) )
@@ -99,11 +110,15 @@ export default function Dropdown( props ) {
 	return (
 		<div
 			className={ classnames( 'components-dropdown', className ) }
-			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
+			ref={ useMergeRefs( [
+				containerRef,
+				forwardedRef,
+				setFallbackPopoverAnchor,
+			] ) }
 			// Some UAs focus the closest focusable parent when the toggle is
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
-			tabIndex="-1"
+			tabIndex={ -1 }
 			style={ style }
 		>
 			{ renderToggle( args ) }
@@ -136,3 +151,32 @@ export default function Dropdown( props ) {
 		</div>
 	);
 }
+
+/**
+ * Renders a button that opens a floating content modal when clicked.
+ *
+ * ```jsx
+ * import { Button, Dropdown } from '@wordpress/components';
+ *
+ * const MyDropdown = () => (
+ *   <Dropdown
+ *     className="my-container-class-name"
+ *     contentClassName="my-popover-content-classname"
+ *     position="bottom right"
+ *     renderToggle={ ( { isOpen, onToggle } ) => (
+ *       <Button
+ *         variant="primary"
+ *         onClick={ onToggle }
+ *         aria-expanded={ isOpen }
+ *       >
+ *         Toggle Popover!
+ *       </Button>
+ *     ) }
+ *     renderContent={ () => <div>This is the content of the popover.</div> }
+ *   />
+ * );
+ * ```
+ */
+export const Dropdown = forwardRef( UnforwardedDropdown );
+
+export default Dropdown;

package/src/dropdown/stories/{index.js → index.tsx}

@@ -1,29 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * Internal dependencies
  */
-import Dropdown from '../';
+import Dropdown from '..';
 import Button from '../../button';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
-export default {
+const meta: ComponentMeta< typeof Dropdown > = {
 	title: 'Components/Dropdown',
 	component: Dropdown,
 	subcomponents: { DropdownContentWrapper },
 	argTypes: {
-		expandOnMobile: { control: { type: 'boolean' } },
 		focusOnMount: {
 			control: {
 				type: 'radio',
 				options: [ 'firstElement', true, false ],
 			},
 		},
-		headerTitle: { control: { type: 'text' } },
 		renderContent: { control: { type: null } },
 		renderToggle: { control: { type: null } },
 	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+	},
 };
+export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof Dropdown > = ( args ) => {
 	return (
 		<div style={ { height: 150 } }>
 			<Dropdown { ...args } />
@@ -31,7 +40,7 @@ const Template = ( args ) => {
 	);
 };
 
-export const Default = Template.bind( {} );
+export const Default: ComponentStory< typeof Dropdown > = Template.bind( {} );
 Default.args = {
 	position: 'bottom right',
 	renderToggle: ( { isOpen, onToggle } ) => (
@@ -46,7 +55,9 @@ Default.args = {
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding = Template.bind( {} );
+export const WithMorePadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithMorePadding.args = {
 	...Default.args,
 	renderContent: () => (
@@ -61,7 +72,9 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding = Template.bind( {} );
+export const WithNoPadding: ComponentStory< typeof Dropdown > = Template.bind(
+	{}
+);
 WithNoPadding.args = {
 	...Default.args,
 	renderContent: () => (