@wordpress/components 21.2.0 → 22.0.0

package/src/color-palette/stories/{index.js → index.tsx}

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
 /**
  * WordPress dependencies
  */
@@ -6,34 +12,25 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorPalette from '../';
+import ColorPalette from '..';
 import Popover from '../../popover';
 import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { ColorObject, PaletteObject } from '../types';
 
-const meta = {
+const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
+		// Removing the control because setting this prop without changing the
+		// format of the `colors` prop can break the component.
 		__experimentalHasMultipleOrigins: {
 			control: {
 				type: null,
 			},
 		},
-		__experimentalIsRenderedInSidebar: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		clearable: {
-			control: {
-				type: 'boolean',
-			},
-		},
-		disableCustomColors: {
-			control: {
-				type: 'boolean',
-			},
-		},
+		as: { control: { type: null } },
+		onChange: { action: 'onChange', control: { type: null } },
+		value: { control: { type: null } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -42,14 +39,26 @@ const meta = {
 };
 export default meta;
 
-const Template = ( args ) => {
+const Template: ComponentStory< typeof ColorPalette > = ( {
+	onChange,
+	...args
+} ) => {
 	const firstColor =
-		args.colors[ 0 ].color || args.colors[ 0 ].colors[ 0 ].color;
-	const [ color, setColor ] = useState( firstColor );
+		( args.colors as ColorObject[] )[ 0 ].color ||
+		( args.colors as PaletteObject[] )[ 0 ].colors[ 0 ].color;
+	const [ color, setColor ] = useState< string | undefined >( firstColor );
 
 	return (
 		<SlotFillProvider>
-			<ColorPalette { ...args } value={ color } onChange={ setColor } />
+			<ColorPalette
+				{ ...args }
+				value={ color }
+				onChange={ ( newColor ) => {
+					setColor( newColor );
+					onChange?.( newColor );
+				} }
+			/>
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
 			<Popover.Slot />
 		</SlotFillProvider>
 	);
@@ -92,14 +101,16 @@ MultipleOrigins.args = {
 	],
 };
 
-export const CSSVariables = ( args ) => {
+export const CSSVariables: ComponentStory< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
-			style={ {
-				'--red': '#f00',
-				'--yellow': '#ff0',
-				'--blue': '#00f',
-			} }
+			style={
+				{
+					'--red': '#f00',
+					'--yellow': '#ff0',
+					'--blue': '#00f',
+				} as CSSProperties
+			}
 		>
 			<Template { ...args } />
 		</div>

package/src/color-palette/style.scss

@@ -14,9 +14,9 @@
 	background-image:
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
 		repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
-	background-position: 0 0, 25px 25px;
+	background-position: 0 0, 24px 24px;
 	/*rtl:end:ignore*/
-	background-size: calc(2 * 25px) calc(2 * 25px);
+	background-size: calc(2 * 24px) calc(2 * 24px);
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;

package/src/color-palette/test/{index.js → index.tsx}

@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event';
 /**
  * Internal dependencies
  */
-import ColorPalette from '../';
+import ColorPalette from '..';
 
 describe( 'ColorPalette', () => {
 	const colors = [

package/src/color-palette/types.ts

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+
+type OnColorChange = ( newColor?: string ) => void;
+
+export type ColorObject = {
+	name: string;
+	color: NonNullable< CSSProperties[ 'color' ] >;
+};
+
+export type PaletteObject = {
+	name: string;
+	colors: ColorObject[];
+};
+
+type PaletteProps = {
+	className?: string;
+	clearColor: () => void;
+	onChange: OnColorChange;
+	value?: string;
+	actions?: ReactNode;
+};
+
+export type SinglePaletteProps = PaletteProps & {
+	colors: ColorObject[];
+};
+
+export type MultiplePalettesProps = PaletteProps & {
+	colors: PaletteObject[];
+};
+
+// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
+export type CustomColorPickerDropdownProps = {
+	isRenderedInSidebar: boolean;
+	renderContent: () => ReactNode;
+	popoverProps?: string[];
+	renderToggle: ( props: {
+		isOpen: boolean;
+		onToggle: MouseEventHandler< HTMLButtonElement >;
+	} ) => ReactNode;
+};
+
+export type ColorPaletteProps = {
+	/**
+	 * Whether the palette should have a clearing button.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Array with the colors to be shown. When displaying multiple color palettes
+	 * to choose from, the format of the array changes from an array of colors
+	 * objects, to an array of color palettes.
+	 *
+	 * @default []
+	 */
+	colors?: ( PaletteObject | ColorObject )[];
+	/**
+	 * Whether to allow the user to pick a custom color on top of the predefined
+	 * choices (defined via the `colors` prop).
+	 *
+	 * @default false
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether the color picker should display the alpha channel
+	 * both in the bottom inputs as well as in the color picker itself.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: OnColorChange;
+	/**
+	 * Currently active value.
+	 */
+	value?: string;
+	/**
+	 * Whether the colors prop is an array of color palettes,
+	 * rather than an array of color objects.
+	 *
+	 * @default false
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};

package/src/color-picker/input-with-slider.tsx

@@ -45,7 +45,7 @@ export const InputWithSlider = ( {
 						{ abbreviation }
 					</Spacer>
 				}
-				hideHTMLArrows
+				spinControls="none"
 				size="__unstable-large"
 			/>
 			<RangeControl

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

@@ -271,7 +271,7 @@ describe.each( [
 
 		// No options are rendered if no match is found
 		await user.keyboard( unmatchedString );
-		expect( screen.queryByRole( 'option' ) ).toBeNull();
+		expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
 
 		// Clearing the input renders all options again
 		await user.clear( input );

package/src/confirm-dialog/types.ts

@@ -3,7 +3,13 @@
  */
 import type { MouseEvent, KeyboardEvent, ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { ModalProps } from '../modal/types';
+
 export type DialogInputEvent =
+	| Parameters< ModalProps[ 'onRequestClose' ] >[ 0 ]
 	| KeyboardEvent< HTMLDivElement >
 	| MouseEvent< HTMLButtonElement >;
 

package/src/custom-gradient-picker/gradient-bar/index.js

@@ -1,8 +1,6 @@
 /**
  * External dependencies
  */
-
-import { some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -91,7 +89,7 @@ export default function CustomGradientBar( {
 
 		// If the insert point is close to an existing control point don't show it.
 		if (
-			some( controlPoints, ( { position } ) => {
+			controlPoints.some( ( { position } ) => {
 				return (
 					Math.abs( insertPosition - position ) <
 					MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT

package/src/custom-select-control/README.md

@@ -131,6 +131,20 @@ Start opting into the unconstrained width style that will become the default in
 -   Required: No
 -   Default: `false`
 
+#### onMouseOver
+
+A handler for onMouseOver events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onMouseOut
+
+A handler for onMouseOut events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

package/src/custom-select-control/index.js

@@ -61,21 +61,26 @@ const stateReducer = (
 			return changes;
 	}
 };
-export default function CustomSelectControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next36pxDefaultSize = false,
-	/** Start opting into the unconstrained width that will become the default in a future version. */
-	__nextUnconstrainedWidth = false,
-	className,
-	hideLabelFromVision,
-	label,
-	describedBy,
-	options: items,
-	onChange: onSelectedItemChange,
-	/** @type {import('../select-control/types').SelectControlProps.size} */
-	size = 'default',
-	value: _selectedItem,
-} ) {
+
+export default function CustomSelectControl( props ) {
+	const {
+		/** Start opting into the larger default height that will become the default size in a future version. */
+		__next36pxDefaultSize = false,
+		/** Start opting into the unconstrained width that will become the default in a future version. */
+		__nextUnconstrainedWidth = false,
+		className,
+		hideLabelFromVision,
+		label,
+		describedBy,
+		options: items,
+		onChange: onSelectedItemChange,
+		/** @type {import('../select-control/types').SelectControlProps.size} */
+		size = 'default',
+		value: _selectedItem,
+		onMouseOver,
+		onMouseOut,
+	} = props;
+
 	const {
 		getLabelProps,
 		getToggleButtonProps,
@@ -173,6 +178,8 @@ export default function CustomSelectControl( {
 				suffix={ <SelectControlChevronDown /> }
 			>
 				<SelectControlSelect
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					as="button"
 					onFocus={ () => setIsFocused( true ) }
 					onBlur={ () => setIsFocused( false ) }

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

@@ -207,6 +207,8 @@ function UnforwardedDateTimePicker(
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
+ *       __nextRemoveHelpButton
+ *       __nextRemoveResetButton
  *     />
  *   );
  * };

package/src/date-time/stories/date-time.tsx

@@ -52,6 +52,10 @@ const Template: ComponentStory< typeof DateTimePicker > = ( {
 export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
+Default.args = {
+	__nextRemoveHelpButton: true,
+	__nextRemoveResetButton: true,
+};
 
 export const WithEvents: ComponentStory< typeof DateTimePicker > =
 	Template.bind( {} );

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

@@ -180,7 +180,7 @@ export function TimePicker( {
 			min={ 1 }
 			max={ 31 }
 			required
-			hideHTMLArrows
+			spinControls="none"
 			isPressEnterToChange
 			isDragEnabled={ false }
 			isShiftStepEnabled={ false }
@@ -246,7 +246,7 @@ export function TimePicker( {
 							min={ is12Hour ? 1 : 0 }
 							max={ is12Hour ? 12 : 23 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -273,7 +273,7 @@ export function TimePicker( {
 							min={ 0 }
 							max={ 59 }
 							required
-							hideHTMLArrows
+							spinControls="none"
 							isPressEnterToChange
 							isDragEnabled={ false }
 							isShiftStepEnabled={ false }
@@ -344,7 +344,7 @@ export function TimePicker( {
 						min={ 1 }
 						max={ 9999 }
 						required
-						hideHTMLArrows
+						spinControls="none"
 						isPressEnterToChange
 						isDragEnabled={ false }
 						isShiftStepEnabled={ false }

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

@@ -303,12 +303,8 @@ describe( 'TimePicker', () => {
 		 * This is not ideal, but best of we can do for now until we refactor
 		 * AM/PM into accessible elements, like radio buttons.
 		 */
-		expect(
-			screen.getByText( 'AM' ).classList.contains( 'is-primary' )
-		).toBe( false );
-		expect(
-			screen.getByText( 'PM' ).classList.contains( 'is-primary' )
-		).toBe( true );
+		expect( screen.getByText( 'AM' ) ).not.toHaveClass( 'is-primary' );
+		expect( screen.getByText( 'PM' ) ).toHaveClass( 'is-primary' );
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {

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

@@ -38,6 +38,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -309,6 +310,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -590,6 +592,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;
@@ -883,6 +886,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-justify-content: space-between;
   justify-content: space-between;
   height: 100%;
+  box-sizing: border-box;
   position: relative;
   border-radius: 2px;
   padding-top: 0;

package/src/disabled/README.md

@@ -47,6 +47,8 @@ function CustomButton( props ) {
 }
 ```
 
+_Note: this component may not behave as expected in browsers that don't support [the `inert` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert). We recommend adding [the official WICG polyfill](https://github.com/WICG/inert) when using this component in your project._
+
 ### Props
 
 The component accepts the following props:

package/src/disabled/index.tsx

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import type { HTMLProps } from 'react';
-
 /**
  * WordPress dependencies
  */
-import { useDisabled } from '@wordpress/compose';
-import { createContext, forwardRef } from '@wordpress/element';
+import { createContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,17 +14,15 @@ import { useCx } from '../utils';
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
 
-// Extracting this ContentWrapper component in order to make it more explicit
-// the same 'ContentWrapper' component is needed so that React can reconcile
-// the dom correctly when switching between disabled/non-disabled (instead
-// of thrashing the previous DOM and therefore losing the form fields values).
-const ContentWrapper = forwardRef<
-	HTMLDivElement,
-	HTMLProps< HTMLDivElement >
->( ( props, ref ) => <div { ...props } ref={ ref } /> );
-
 /**
- * `Disabled` is a component which disables descendant tabbable elements and prevents pointer interaction.
+ * `Disabled` is a component which disables descendant tabbable elements and
+ * prevents pointer interaction.
+ *
+ * _Note: this component may not behave as expected in browsers that don't
+ * support the `inert` HTML attribute. We recommend adding the official WICG
+ * polyfill when using this component in your project._
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
  *
  * ```jsx
  * import { Button, Disabled, TextControl } from '@wordpress/components';
@@ -65,29 +57,22 @@ function Disabled( {
 	isDisabled = true,
 	...props
 }: WordPressComponentProps< DisabledProps, 'div' > ) {
-	const ref = useDisabled();
 	const cx = useCx();
-	if ( ! isDisabled ) {
-		return (
-			<Provider value={ false }>
-				<ContentWrapper>{ children }</ContentWrapper>
-			</Provider>
-		);
-	}
 
 	return (
-		<Provider value={ true }>
-			<ContentWrapper
-				ref={ ref }
-				className={ cx(
-					disabledStyles,
-					className,
-					'components-disabled'
-				) }
+		<Provider value={ isDisabled }>
+			<div
+				// @ts-ignore Reason: inert is a recent HTML attribute
+				inert={ isDisabled ? 'true' : undefined }
+				className={
+					isDisabled
+						? cx( disabledStyles, className, 'components-disabled' )
+						: undefined
+				}
 				{ ...props }
 			>
 				{ children }
-			</ContentWrapper>
+			</div>
 		</Provider>
 	);
 }