@wordpress/components 39.0.0 → 40.1.0

package/src/palette-edit/types.ts

@@ -7,6 +7,7 @@ export type Color = {
 	name: string;
 	slug: string;
 	gradient?: never;
+	colors?: never;
 };
 
 export type Gradient = {
@@ -14,9 +15,23 @@ export type Gradient = {
 	name: string;
 	slug: string;
 	color?: never;
+	colors?: never;
 };
 
-export type PaletteElement = Color | Gradient;
+export type Duotone = {
+	colors: string[];
+	name: string;
+	slug: string;
+	color?: never;
+	gradient?: never;
+};
+
+export type PaletteElement = Color | Gradient | Duotone;
+
+/**
+ * The kind of preset a `PaletteEdit` instance is editing.
+ */
+export type PaletteVariant = 'color' | 'gradient' | 'duotone';
 
 export type BasePaletteEdit = {
 	/**
@@ -71,6 +86,8 @@ type PaletteEditColors = {
 	 */
 	onChange: ( values?: Color[] ) => void;
 	gradients?: never;
+	duotones?: never;
+	colorPalette?: never;
 };
 
 type PaletteEditGradients = {
@@ -83,17 +100,40 @@ type PaletteEditGradients = {
 	 */
 	onChange: ( values?: Gradient[] ) => void;
 	colors?: never;
+	duotones?: never;
+	colorPalette?: never;
+};
+
+type PaletteEditDuotones = {
+	/**
+	 * The duotones in the palette.
+	 */
+	duotones: Duotone[];
+	/**
+	 * Runs on changing the value.
+	 */
+	onChange: ( values?: Duotone[] ) => void;
+	/**
+	 * The colors offered when picking the shadows and highlights of a duotone,
+	 * and from which the value of a newly added duotone is derived.
+	 *
+	 * @default []
+	 */
+	colorPalette?: Color[];
+	colors?: never;
+	gradients?: never;
 };
 
 export type PaletteEditProps = BasePaletteEdit &
-	( PaletteEditColors | PaletteEditGradients );
+	( PaletteEditColors | PaletteEditGradients | PaletteEditDuotones );
 
 type EditingElement = number | null;
 
-export type ColorPickerPopoverProps< T extends Color | Gradient > = {
+export type ColorPickerPopoverProps< T extends PaletteElement > = {
 	element: T;
 	onChange: ( newElement: T ) => void;
-	isGradient?: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	onClose?: () => void;
 	popoverProps?: PaletteEditProps[ 'popoverProps' ];
 };
@@ -104,10 +144,11 @@ export type NameInputProps = {
 	value: PaletteElement[ 'name' ];
 };
 
-export type OptionProps< T extends Color | Gradient > = {
+export type OptionProps< T extends PaletteElement > = {
 	element: T;
 	onChange: ( newElement: T ) => void;
-	isGradient: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	key: Key;
 	onRemove: MouseEventHandler< HTMLButtonElement >;
@@ -115,10 +156,11 @@ export type OptionProps< T extends Color | Gradient > = {
 	slugPrefix: string;
 };
 
-export type PaletteEditListViewProps< T extends Color | Gradient > = {
+export type PaletteEditListViewProps< T extends PaletteElement > = {
 	elements: T[];
 	onChange: ( newElements?: T[] ) => void;
-	isGradient: T extends Gradient ? true : false;
+	variant: PaletteVariant;
+	colorPalette?: Color[];
 	canOnlyChangeValues: PaletteEditProps[ 'canOnlyChangeValues' ];
 	addColorRef: React.RefObject< HTMLButtonElement | null >;
 	editingElement?: EditingElement;

package/src/panel/test/__snapshots__/body.jsdom.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelBody > basic rendering > should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/header.jsdom.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelHeader > basic rendering > should render PanelHeader with empty div inside 1`] = `
+<div>
+  <div
+    class="components-panel__header"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Panel > basic rendering > should render an additional className 1`] = `
+<div>
+  <div
+    class="the-panel components-panel"
+  />
+</div>
+`;
+
+exports[`Panel > basic rendering > should render an empty div without any provided props 1`] = `
+<div>
+  <div
+    class="components-panel"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/row.jsdom.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelRow > should render with the custom class name 1`] = `
+<div>
+  <div
+    class="components-panel__row custom"
+  />
+</div>
+`;
+
+exports[`PanelRow > should render with the default class name 1`] = `
+<div>
+  <div
+    class="components-panel__row"
+  />
+</div>
+`;

package/src/panel/test/{body.tsx → body.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PanelBody } from '../body';
@@ -131,7 +132,7 @@ describe( 'PanelBody', () => {
 
 		it( 'should pass button props to panel title', async () => {
 			const user = userEvent.setup();
-			const mock = jest.fn();
+			const mock = vi.fn();
 
 			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>

package/src/panel/test/{header.tsx → header.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import PanelHeader from '../header';
 

package/src/panel/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Panel from '..';
 

package/src/panel/test/{row.tsx → row.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import PanelRow from '../row';
 

package/src/placeholder/style.scss

@@ -51,11 +51,6 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-05;
 		fill: currentColor;
-		// Optimize for high contrast modes.
-		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-		@media (forced-colors: active) {
-			fill: CanvasText;
-		}
 	}
 
 	// Don't take up space if the label is empty.

package/src/placeholder/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
@@ -6,10 +7,13 @@ import BasePlaceholder from '../';
 import type { WordPressComponentProps } from '../../context';
 import type { PlaceholderProps } from '../types';
 
-jest.mock( '@wordpress/compose', () => {
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => {
+	const original = await importOriginal();
 	return {
-		...jest.requireActual( '@wordpress/compose' ),
-		useResizeObserver: jest.fn( () => [] ),
+		...original,
+		useResizeObserver: vi.fn(
+			() => []
+		) as unknown as typeof original.useResizeObserver,
 	};
 } );
 
@@ -31,15 +35,18 @@ const Placeholder = (
 
 const getPlaceholder = () => screen.getByTestId( 'placeholder' );
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
-const mockedSpeak = jest.mocked( speak );
+vi.mock( import( '@wordpress/a11y' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	speak: vi.fn(),
+} ) );
+const mockedUseResizeObserver = vi.mocked( useResizeObserver );
+const mockedSpeak = vi.mocked( speak );
 
 describe( 'Placeholder', () => {
 	beforeEach( () => {
-		// @ts-expect-error The imported hook is not typed as a Jest mock.
-		useResizeObserver.mockReturnValue( [
+		mockedUseResizeObserver.mockReturnValue( [
 			<div key="1" />,
-			{ width: 320 },
+			{ width: 320, height: null },
 		] );
 		mockedSpeak.mockReset();
 	} );
@@ -153,10 +160,9 @@ describe( 'Placeholder', () => {
 
 	describe( 'resize aware', () => {
 		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			// @ts-expect-error The imported hook is not typed as a Jest mock.
-			useResizeObserver.mockReturnValue( [
+			mockedUseResizeObserver.mockReturnValue( [
 				<div key="1" />,
-				{ width: 480 },
+				{ width: 480, height: null },
 			] );
 
 			render( <Placeholder /> );
@@ -168,10 +174,9 @@ describe( 'Placeholder', () => {
 		} );
 
 		it( 'should assign modifier class', () => {
-			// @ts-expect-error The imported hook is not typed as a Jest mock.
-			useResizeObserver.mockReturnValue( [
+			mockedUseResizeObserver.mockReturnValue( [
 				<div key="1" />,
-				{ width: null },
+				{ width: null, height: null },
 			] );
 
 			render( <Placeholder /> );

package/src/popover/README.md

@@ -183,9 +183,9 @@ Used to show/hide the arrow that points at the popover's anchor.
 -   Required: No
 -   Default: `true`
 
-### `offset`: `number`
+### `offset`: `number | { mainAxis?: number; crossAxis?: number }`
 
-The distance (in px) between the anchor and the popover.
+The distance (in px) between the anchor and the popover. A number displaces the popover along its main axis; pass an object to also displace it along its cross axis.
 
 -   Required: No
 

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import Button from '../../button';
 import { Popover } from '..';
-import { PopoverInsideIframeRenderedInExternalSlot } from '../test/utils';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 import type { PopoverProps } from '../types';
 
 const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [
@@ -174,6 +174,9 @@ export const AllPlacements: StoryObj< typeof Popover > = {
 	// Excluding placement and position since they all possible values
 	// are passed directly in code.
 	parameters: {
+		// FIXME: All Placements: scrollable demo region is not keyboard-accessible (scrollable-region-focusable).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
 		controls: {
 			exclude: [ 'placement', 'position' ],
 		},
@@ -239,6 +242,7 @@ export const DynamicHeight: StoryObj< typeof Popover > = {
 	],
 	args: {
 		...Default.args,
+		animate: false,
 		children: (
 			<div
 				style={ {

package/src/popover/stories/utils.tsx

@@ -0,0 +1,79 @@
+import { createPortal, useState } from '@wordpress/element';
+import Popover from '..';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import type { WordPressComponentProps } from '../../context';
+
+const GenericIframe = ( {
+	children,
+	...props
+}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
+	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
+
+	return (
+		<iframe
+			{ ...props }
+			title="My Iframe"
+			srcDoc="<!doctype html><html><body></body></html>"
+			// Waiting for the load event ensures that this works in Firefox.
+			// See: https://github.com/facebook/react/issues/22847#issuecomment-991394558
+			onLoad={ ( event ) => {
+				if ( event.currentTarget.contentDocument ) {
+					setContainerNode(
+						event.currentTarget.contentDocument.body
+					);
+				}
+			} }
+		>
+			{ containerNode && createPortal( children, containerNode ) }
+		</iframe>
+	);
+};
+
+export const PopoverInsideIframeRenderedInExternalSlot = (
+	props: React.ComponentProps< typeof Popover >
+) => {
+	const SLOT_NAME = 'my-slot';
+	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
+		null
+	);
+
+	return (
+		<SlotFillProvider>
+			<Popover.Slot name={ SLOT_NAME } />
+			<GenericIframe
+				style={ {
+					width: '100%',
+					height: '400px',
+					border: '0',
+					outline: '1px solid purple',
+				} }
+			>
+				<div
+					style={ {
+						height: '200vh',
+						paddingTop: '10vh',
+					} }
+				>
+					<p
+						style={ {
+							padding: '8px',
+							background: 'salmon',
+							maxWidth: '200px',
+							marginTop: '100px',
+							marginLeft: 'auto',
+							marginRight: 'auto',
+						} }
+						ref={ setAnchorRef }
+					>
+						Popover&apos;s anchor
+					</p>
+					<Popover
+						{ ...props }
+						__unstableSlotName={ SLOT_NAME }
+						anchor={ anchorRef }
+					/>
+				</div>
+			</GenericIframe>
+		</SlotFillProvider>
+	);
+};

package/src/popover/test/{index.tsx → index.jsdom.test.tsx}

@@ -15,7 +15,7 @@ import {
 } from '../utils';
 import Popover from '..';
 import type { PopoverProps } from '../types';
-import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
+import { PopoverInsideIframeRenderedInExternalSlot } from './utils/index.js';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
@@ -174,6 +174,29 @@ describe( 'Popover', () => {
 			} );
 		} );
 
+		describe( 'offset', () => {
+			it( 'should displace the popover along its cross axis when passed an offset object', async () => {
+				render(
+					<Popover
+						placement="right-start"
+						offset={ { mainAxis: 16, crossAxis: 24 } }
+						animate={ false }
+						flip={ false }
+						shift={ false }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).toHaveStyle(
+					'transform: translateX(16px) translateY(24px)'
+				);
+			} );
+		} );
+
 		describe( 'style', () => {
 			it( 'outputs inline styles added through the style prop in addition to built-in popover positioning styles', async () => {
 				render(

package/src/popover/test/utils/index.js

@@ -0,0 +1 @@
+export { PopoverInsideIframeRenderedInExternalSlot } from '../../stories/utils';

package/src/popover/test/utils/index.tsx

@@ -1,79 +1,5 @@
-import { createPortal, useState } from '@wordpress/element';
-import Popover from '../..';
-import { Provider as SlotFillProvider } from '../../../slot-fill';
-import type { WordPressComponentProps } from '../../../context';
+import type Popover from '../..';
 
-const GenericIframe = ( {
-	children,
-	...props
-}: WordPressComponentProps< { children: React.ReactNode }, 'iframe' > ) => {
-	const [ containerNode, setContainerNode ] = useState< HTMLElement >();
-
-	return (
-		<iframe
-			{ ...props }
-			title="My Iframe"
-			srcDoc="<!doctype html><html><body></body></html>"
-			// Waiting for the load event ensures that this works in Firefox.
-			// See https://github.com/facebook/react/issues/22847#issuecomment-991394558
-			onLoad={ ( event ) => {
-				if ( event.currentTarget.contentDocument ) {
-					setContainerNode(
-						event.currentTarget.contentDocument.body
-					);
-				}
-			} }
-		>
-			{ containerNode && createPortal( children, containerNode ) }
-		</iframe>
-	);
-};
-
-export const PopoverInsideIframeRenderedInExternalSlot = (
-	props: React.ComponentProps< typeof Popover >
-) => {
-	const SLOT_NAME = 'my-slot';
-	const [ anchorRef, setAnchorRef ] = useState< HTMLParagraphElement | null >(
-		null
-	);
-
-	return (
-		<SlotFillProvider>
-			<Popover.Slot name={ SLOT_NAME } />
-			<GenericIframe
-				style={ {
-					width: '100%',
-					height: '400px',
-					border: '0',
-					outline: '1px solid purple',
-				} }
-			>
-				<div
-					style={ {
-						height: '200vh',
-						paddingTop: '10vh',
-					} }
-				>
-					<p
-						style={ {
-							padding: '8px',
-							background: 'salmon',
-							maxWidth: '200px',
-							marginTop: '100px',
-							marginLeft: 'auto',
-							marginRight: 'auto',
-						} }
-						ref={ setAnchorRef }
-					>
-						Popover&apos;s anchor
-					</p>
-					<Popover
-						{ ...props }
-						__unstableSlotName={ SLOT_NAME }
-						anchor={ anchorRef }
-					/>
-				</div>
-			</GenericIframe>
-		</SlotFillProvider>
-	);
-};
+export declare const PopoverInsideIframeRenderedInExternalSlot: React.ComponentType<
+	React.ComponentProps< typeof Popover >
+>;

package/src/popover/types.ts

@@ -105,9 +105,15 @@ export type PopoverProps = {
 	 */
 	noArrow?: boolean;
 	/**
-	 * The distance (in px) between the anchor and the popover.
-	 */
-	offset?: number;
+	 * The distance (in px) between the anchor and the popover. Pass an object to
+	 * also displace the popover along its cross axis.
+	 */
+	offset?:
+		| number
+		| {
+				mainAxis?: number;
+				crossAxis?: number;
+		  };
 	/**
 	 * A callback invoked when the popover should be closed.
 	 */

package/src/private-apis.ts

@@ -6,14 +6,10 @@ import { Tabs } from './tabs';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 import {
-	ValidatedComboboxControl,
 	ValidatedInputControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
 } from './validated-form-controls';
-import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
 import ContentEditableControl from './content-editable-control';
 
 export const privateApis = {};
@@ -26,10 +22,6 @@ lock( privateApis, {
 	Badge,
 	useDrag,
 	ValidatedInputControl,
-	ValidatedComboboxControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
-	ValidatedFormTokenField,
 } );

package/src/progress-bar/index.tsx

@@ -1,7 +1,8 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import * as ProgressBarStyled from './styles';
+import styles from './style.module.scss';
 import type { ProgressBarProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -13,23 +14,26 @@ function UnforwardedProgressBar(
 	const isIndeterminate = ! Number.isFinite( value );
 
 	return (
-		<ProgressBarStyled.Track className={ className }>
-			<ProgressBarStyled.Indicator
+		<div className={ clsx( styles.track, className ) }>
+			<div
+				className={ clsx( styles.indicator, {
+					[ styles[ 'is-indeterminate' ] ]: isIndeterminate,
+				} ) }
 				style={ {
 					'--indicator-width': ! isIndeterminate
 						? `${ value }%`
 						: undefined,
 				} }
-				isIndeterminate={ isIndeterminate }
 			/>
-			<ProgressBarStyled.ProgressElement
+			<progress
+				className={ styles[ 'progress-element' ] }
 				max={ 100 }
 				value={ value }
 				aria-label={ __( 'Loading …' ) }
 				ref={ ref }
 				{ ...progressProps }
 			/>
-		</ProgressBarStyled.Track>
+		</div>
 	);
 }