@wordpress/components 39.0.0 → 40.1.0

package/src/tree-grid/test/__snapshots__/index.tsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
-<div>
-  <button />
-</div>
-`;
-
-exports[`RovingTabIndexItem allows children to be declared using a child render function as an alternative to \`as\` 1`] = `
-<div>
-  <button
-    class="my-button"
-  >
-    Click Me!
-  </button>
-</div>
-`;
-
-exports[`RovingTabIndexItem forwards props to the \`as\` component 1`] = `
-<div>
-  <button
-    class="my-button"
-  >
-    Click Me!
-  </button>
-</div>
-`;

package/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`RovingTabIndex does not render any elements other than its children 1`] = `
-<div>
-  <div>
-    child element
-  </div>
-</div>
-`;

package/src/tree-grid/test/cell.tsx

@@ -1,46 +0,0 @@
-import { render } from '@testing-library/react';
-import { forwardRef } from '@wordpress/element';
-import TreeGrid from '..';
-import TreeGridCell from '../cell';
-
-const TestButton = forwardRef(
-	(
-		{ ...props }: React.ComponentPropsWithoutRef< 'button' >,
-		ref: React.ForwardedRef< HTMLButtonElement >
-	) => <button { ...props } ref={ ref }></button>
-);
-
-describe( 'TreeGridCell', () => {
-	it( 'requires TreeGrid to be declared as a parent component somewhere in the component hierarchy', () => {
-		expect( () =>
-			render(
-				<TreeGridCell>
-					{ ( props ) => (
-						<TestButton className="my-button" { ...props }>
-							Click Me!
-						</TestButton>
-					) }
-				</TreeGridCell>
-			)
-		).toThrow();
-		expect( console ).toHaveErrored();
-	} );
-
-	it( 'uses a child render function to render children', () => {
-		const { container } = render(
-			<TreeGrid>
-				<tr>
-					<TreeGridCell>
-						{ ( props ) => (
-							<TestButton className="my-button" { ...props }>
-								Click Me!
-							</TestButton>
-						) }
-					</TreeGridCell>
-				</tr>
-			</TreeGrid>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );

package/src/tree-grid/test/row.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import TreeGridRow from '../row';
-
-describe( 'TreeGridRow', () => {
-	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
-	it( 'forwards other props to the rendered tr element', () => {
-		const { container } = render(
-			<table>
-				<tbody>
-					<TreeGridRow
-						className="my-row"
-						level={ 1 }
-						positionInSet={ 1 }
-						setSize={ 1 }
-					>
-						<td>Test</td>
-					</TreeGridRow>
-				</tbody>
-			</table>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-} );

package/src/validated-form-controls/components/combobox-control.tsx

@@ -1,56 +0,0 @@
-import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useEffect, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import ComboboxControl from '../../combobox-control';
-
-const UnforwardedValidatedComboboxControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: Omit<
-		React.ComponentProps< typeof ComboboxControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLInputElement >
-) => {
-	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
-	// so we need to set it manually.
-	useEffect( () => {
-		const input =
-			validityTargetRef.current?.querySelector< HTMLInputElement >(
-				'input[role="combobox"]'
-			);
-		if ( input ) {
-			input.required = required ?? false;
-		}
-	}, [ required ] );
-
-	return (
-		// TODO: Bug - Missing value error is not cleared immediately on change, waits for blur.
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			ref={ mergedRefs }
-			customValidity={ customValidity }
-			getValidityTarget={ () =>
-				validityTargetRef.current?.querySelector< HTMLInputElement >(
-					'input[role="combobox"]'
-				)
-			}
-		>
-			<ComboboxControl { ...restProps } />
-		</ControlWithError>
-	);
-};
-
-export const ValidatedComboboxControl = forwardRef(
-	UnforwardedValidatedComboboxControl
-);
-ValidatedComboboxControl.displayName = 'ValidatedComboboxControl';

package/src/validated-form-controls/components/form-token-field.tsx

@@ -1,57 +0,0 @@
-import { forwardRef, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import { FormTokenField } from '../../form-token-field';
-
-const UnforwardedValidatedFormTokenField = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: React.ComponentProps< typeof FormTokenField > & ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLDivElement >
-) => {
-	const validityTargetRef = useRef< HTMLInputElement >( null );
-
-	return (
-		<div
-			className="components-validated-control__wrapper-with-error-delegate"
-			ref={ forwardedRef }
-		>
-			<ControlWithError
-				required={ required }
-				markWhenOptional={ markWhenOptional }
-				customValidity={ customValidity }
-				getValidityTarget={ () => validityTargetRef.current }
-			>
-				<FormTokenField { ...restProps } />
-			</ControlWithError>
-			<input
-				className="components-validated-control__error-delegate"
-				type="text"
-				ref={ validityTargetRef }
-				required={ required }
-				value={
-					restProps.value && restProps.value.length > 0
-						? 'hasvalue'
-						: ''
-				}
-				tabIndex={ -1 }
-				onChange={ () => {} }
-				onFocus={ ( e ) => {
-					e.target.previousElementSibling
-						?.querySelector< HTMLInputElement >(
-							'input[type="text"]'
-						)
-						?.focus();
-				} }
-			/>
-		</div>
-	);
-};
-
-export const ValidatedFormTokenField = forwardRef(
-	UnforwardedValidatedFormTokenField
-);
-ValidatedFormTokenField.displayName = 'ValidatedFormTokenField';

package/src/validated-form-controls/components/stories/combobox-control.story.tsx

@@ -1,56 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { ValidatedComboboxControl } from '../combobox-control';
-import { formDecorator } from './story-utils';
-
-const meta: Meta< typeof ValidatedComboboxControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedComboboxControl',
-	id: 'components-validatedcomboboxcontrol',
-	component: ValidatedComboboxControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		value: { control: false },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedComboboxControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedComboboxControl
-				>[ 'value' ]
-			>();
-
-		return (
-			<ValidatedComboboxControl
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue ) => {
-					setValue( newValue );
-					onChange?.( newValue );
-				} }
-				customValidity={
-					value === 'a'
-						? {
-								type: 'invalid',
-								message: 'Option A is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Combobox',
-	help: 'Option A is not allowed.',
-	options: [
-		{ value: 'a', label: 'Option A (not allowed)' },
-		{ value: 'b', label: 'Option B' },
-	],
-};

package/src/validated-form-controls/components/stories/form-token-field.story.tsx

@@ -1,60 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { ValidatedFormTokenField } from '../form-token-field';
-import { formDecorator } from './story-utils';
-import type { TokenItem } from '../../../form-token-field/types';
-
-const meta: Meta< typeof ValidatedFormTokenField > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedFormTokenField',
-	id: 'components-validatedformtokenfield',
-	component: ValidatedFormTokenField,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		onChange: { control: false },
-		value: { control: false },
-		customValidity: { control: false },
-	},
-};
-export default meta;
-
-/**
- * This demonstrates how array validation would work with the ValidatedFormTokenField component.
- */
-export const Default: StoryObj< typeof ValidatedFormTokenField > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );
-
-		return (
-			<ValidatedFormTokenField
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue ) => {
-					setValue( newValue );
-					onChange?.( newValue );
-				} }
-				customValidity={
-					value?.some( ( token ) => {
-						const tokenValue =
-							typeof token === 'string' ? token : token.value;
-						return tokenValue.toLowerCase() === 'error';
-					} )
-						? {
-								type: 'invalid',
-								message: 'The tag "error" is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-
-Default.args = {
-	required: true,
-	label: 'Tags',
-	placeholder: 'Add tags...',
-	suggestions: [ 'Posts', 'Pages', 'Media', 'Error' ],
-	__experimentalExpandOnFocus: true,
-};

package/src/validated-form-controls/components/stories/input-control.story.tsx

@@ -1,126 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { seen, unseen } from '@wordpress/icons';
-import { ValidatedInputControl } from '../input-control';
-import { formDecorator } from './story-utils';
-import InputControlSuffixWrapper from '../../../input-control/input-suffix-wrapper';
-import { Button } from '../../../button';
-
-const meta: Meta< typeof ValidatedInputControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedInputControl',
-	id: 'components-validatedinputcontrol',
-	component: ValidatedInputControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: false },
-		onChange: { control: false },
-		prefix: { control: false },
-		suffix: { control: false },
-		type: { control: { type: 'text' } },
-		value: { control: false },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedInputControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< string | undefined >( '' );
-
-		return (
-			<ValidatedInputControl
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue, ...rest ) => {
-					setValue( newValue );
-					onChange?.( newValue, ...rest );
-				} }
-				customValidity={
-					value?.toLowerCase() === 'error'
-						? {
-								type: 'invalid',
-								message: 'The word "error" is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Input',
-	help: 'The word "error" will trigger an error.',
-};
-
-/**
- * This demonstrates how password validation would work with the standard implementation.
- *
- * We are planning to move to a custom implementation more tailored to the password use case.
- */
-export const Password: StoryObj< typeof ValidatedInputControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< string | undefined >( '' );
-		const [ visible, setVisible ] = useState( false );
-
-		return (
-			<ValidatedInputControl
-				{ ...args }
-				type={ visible ? 'text' : 'password' }
-				suffix={
-					<InputControlSuffixWrapper variant="control">
-						<Button
-							size="small"
-							icon={ visible ? unseen : seen }
-							onClick={ () => setVisible( ( v ) => ! v ) }
-							label={
-								visible ? 'Hide password' : 'Show password'
-							}
-						/>
-					</InputControlSuffixWrapper>
-				}
-				value={ value }
-				onChange={ ( newValue, ...rest ) => {
-					setValue( newValue );
-					onChange?.( newValue, ...rest );
-				} }
-				customValidity={ ( () => {
-					if ( ! /\d/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one number.',
-						};
-					}
-					if ( ! /[A-Z]/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one capital letter.',
-						};
-					}
-					if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one symbol.',
-						};
-					}
-					return undefined;
-				} )() }
-			/>
-		);
-	},
-};
-Password.args = {
-	required: true,
-	label: 'Password',
-	help: 'Minimum 8 characters, include a number, capital letter, and symbol (!@£$%^&*#).',
-	minLength: 8,
-};
-Password.argTypes = {
-	suffix: { control: false },
-	type: { control: false },
-};