@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

package/src/tools-panel/styles.ts

@@ -1,176 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import {
-	StyledField as BaseControlField,
-	StyledHelp as BaseControlHelp,
-	Wrapper as BaseControlWrapper,
-} from '../base-control/styles/base-control-styles';
-import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../utils/space';
-
-const toolsPanelGrid = {
-	columns: ( columns: number ) => css`
-		grid-template-columns: ${ `repeat( ${ columns }, minmax(0, 1fr) )` };
-	`,
-	spacing: css`
-		column-gap: ${ space( 4 ) };
-		row-gap: ${ space( 4 ) };
-	`,
-	item: {
-		fullWidth: css`
-			grid-column: 1 / -1;
-		`,
-	},
-};
-
-// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
-export const ToolsPanel = ( columns: number ) => css`
-	${ toolsPanelGrid.columns( columns ) }
-	${ toolsPanelGrid.spacing }
-	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
-	margin-top: -1px;
-	padding: ${ space( 4 ) };
-`;
-
-/**
- * Items injected into a ToolsPanel via a virtual bubbling slot will require
- * an inner dom element to be injected. The following rule allows for the
- * CSS grid display to be re-established.
- */
-
-export const ToolsPanelWithInnerWrapper = ( columns: number ) => {
-	return css`
-		> div:not( :first-of-type ) {
-			display: grid;
-			${ toolsPanelGrid.columns( columns ) }
-			${ toolsPanelGrid.spacing }
-			${ toolsPanelGrid.item.fullWidth }
-		}
-	`;
-};
-
-export const ToolsPanelHiddenInnerWrapper = css`
-	> div:not( :first-of-type ) {
-		display: none;
-	}
-`;
-
-export function getToolsPanelStyles( {
-	columns,
-	hasInnerWrapper,
-	areAllOptionalControlsHidden,
-}: {
-	columns: number;
-	hasInnerWrapper: boolean;
-	areAllOptionalControlsHidden: boolean;
-} ) {
-	return css(
-		ToolsPanel( columns ),
-		hasInnerWrapper && ToolsPanelWithInnerWrapper( columns ),
-		areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper
-	);
-}
-
-export const ToolsPanelHeader = css`
-	${ toolsPanelGrid.item.fullWidth }
-	gap: ${ space( 2 ) };
-
-	/**
-	 * The targeting of dropdown menu component classes here is a temporary
-	 * measure only.
-	 *
-	 * The following styles should be replaced once the DropdownMenu has been
-	 * refactored and can be targeted via component interpolation.
-	 */
-	.components-dropdown-menu {
-		margin: ${ space( -1 ) } 0;
-		line-height: 0;
-	}
-	&&&& .components-dropdown-menu__toggle {
-		padding: 0;
-		min-width: ${ space( 6 ) };
-	}
-`;
-
-export const ToolsPanelHeading = css`
-	font-size: inherit;
-	font-weight: ${ CONFIG.fontWeightMedium };
-	line-height: normal;
-
-	/* Required to meet specificity requirements to ensure zero margin */
-	&& {
-		margin: 0;
-	}
-`;
-
-export const ToolsPanelItem = css`
-	${ toolsPanelGrid.item.fullWidth }
-
-	/* Clear spacing in and around controls added as panel items. */
-	/* Remove when they can be addressed via context system. */
-	& > div,
-	& > fieldset {
-		padding-bottom: 0;
-		margin-bottom: 0;
-		max-width: 100%;
-	}
-
-	/* Remove BaseControl components margins and leave spacing to grid layout */
-	&& ${ BaseControlWrapper } {
-		margin-bottom: 0;
-
-		/**
-		 * To maintain proper spacing within a base control, the field's bottom
-		 * margin should only be removed when there is no help text included and
-		 * it is therefore the last-child.
-		 */
-		${ BaseControlField }:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	${ BaseControlHelp } {
-		margin-bottom: 0;
-	}
-`;
-
-export const ToolsPanelItemPlaceholder = css`
-	display: none;
-`;
-
-export const DropdownMenu = css`
-	min-width: 200px;
-`;
-
-export const ResetLabel = styled.span`
-	color: ${ COLORS.theme.accentDarker10 };
-	font-size: 11px;
-	font-weight: ${ CONFIG.fontWeightMedium };
-	line-height: 1.4;
-	${ rtl( { marginLeft: space( 3 ) } ) }
-	text-transform: uppercase;
-`;
-
-export const DefaultControlsItem = css`
-	color: ${ COLORS.gray[ 900 ] };
-
-	&&[aria-disabled='true'] {
-		color: ${ COLORS.gray[ 700 ] };
-		opacity: 1;
-
-		&:hover {
-			color: ${ COLORS.gray[ 700 ] };
-		}
-
-		${ ResetLabel } {
-			opacity: 0.3;
-		}
-	}
-`;

package/src/utils/deprecated-36px-size.ts

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import deprecated from '@wordpress/deprecated';
-
-export function maybeWarnDeprecated36pxSize( {
-	componentName,
-	__next40pxDefaultSize,
-	size,
-	__shouldNotWarnDeprecated36pxSize,
-}: {
-	componentName: string;
-	__next40pxDefaultSize: boolean | undefined;
-	size: string | undefined;
-	__shouldNotWarnDeprecated36pxSize?: boolean;
-} ) {
-	if (
-		__shouldNotWarnDeprecated36pxSize ||
-		__next40pxDefaultSize ||
-		( size !== undefined && size !== 'default' )
-	) {
-		return;
-	}
-
-	deprecated( `36px default size for wp.components.${ componentName }`, {
-		since: '6.8',
-		version: '7.1',
-		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-	} );
-}

package/src/utils/use-deprecated-props.ts

@@ -1,14 +0,0 @@
-export function useDeprecated36pxDefaultSizeProp<
-	P extends Record< string, any > & {
-		__next36pxDefaultSize?: boolean;
-		__next40pxDefaultSize?: boolean;
-	},
->( props: P ) {
-	const { __next36pxDefaultSize, __next40pxDefaultSize, ...otherProps } =
-		props;
-
-	return {
-		...otherProps,
-		__next40pxDefaultSize: __next40pxDefaultSize ?? __next36pxDefaultSize,
-	};
-}

package/src/utils/with-ignore-ime-events.ts

@@ -1,32 +0,0 @@
-/**
- * A higher-order function that wraps a keyboard event handler to ensure it is not an IME event.
- *
- * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
- * During an IME composition, keyboard events (e.g. Enter or Escape) can be fired
- * which are intended to control the IME and not the application.
- * These events should be ignored by any application logic.
- *
- * @param handler The keyboard event handler to execute after ensuring it was not an IME event.
- *
- * @return A wrapped version of the given event handler that ignores IME events.
- */
-export function withIgnoreIMEEvents<
-	E extends React.KeyboardEvent | KeyboardEvent,
->( handler: ( event: E ) => void ) {
-	return ( event: E ) => {
-		const { isComposing } =
-			'nativeEvent' in event ? event.nativeEvent : event;
-
-		if (
-			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;
-		}
-
-		handler( event );
-	};
-}

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

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import CheckboxControl from '../../checkbox-control';
-
-const UnforwardedValidatedCheckboxControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: React.ComponentProps< typeof CheckboxControl > & ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLInputElement >
-) => {
-	const validityTargetRef = useRef< HTMLDivElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	return (
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			ref={ mergedRefs }
-			customValidity={ customValidity }
-			getValidityTarget={ () =>
-				validityTargetRef.current?.querySelector< HTMLInputElement >(
-					'input[type="checkbox"]'
-				)
-			}
-		>
-			<CheckboxControl
-				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
-				{ ...restProps }
-			/>
-		</ControlWithError>
-	);
-};
-
-export const ValidatedCheckboxControl = forwardRef(
-	UnforwardedValidatedCheckboxControl
-);
-ValidatedCheckboxControl.displayName = 'ValidatedCheckboxControl';

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

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef, useRef } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { ControlWithError } from '../control-with-error';
-import NumberControl from '../../number-control';
-import type { ValidatedControlProps } from './types';
-
-const UnforwardedValidatedNumberControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: Omit<
-		React.ComponentProps< typeof NumberControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLInputElement >
-) => {
-	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	return (
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			customValidity={ customValidity }
-			getValidityTarget={ () => validityTargetRef.current }
-		>
-			<NumberControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
-		</ControlWithError>
-	);
-};
-
-export const ValidatedNumberControl = forwardRef(
-	UnforwardedValidatedNumberControl
-);
-ValidatedNumberControl.displayName = 'ValidatedNumberControl';

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

@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { ControlWithError } from '../control-with-error';
-import type { ValidatedControlProps } from './types';
-import RadioControl from '../../radio-control';
-
-const UnforwardedValidatedRadioControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: React.ComponentProps< typeof RadioControl > & ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLDivElement >
-) => {
-	const validityTargetRef = useRef< HTMLDivElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	return (
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			// TODO: Upstream limitation - RadioControl does not accept a ref.
-			ref={ mergedRefs }
-			customValidity={ customValidity }
-			getValidityTarget={ () =>
-				validityTargetRef.current?.querySelector< HTMLInputElement >(
-					'input[type="radio"]'
-				)
-			}
-		>
-			<RadioControl { ...restProps } />
-		</ControlWithError>
-	);
-};
-
-export const ValidatedRadioControl = forwardRef(
-	UnforwardedValidatedRadioControl
-);
-ValidatedRadioControl.displayName = 'ValidatedRadioControl';

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

@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef, useRef } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import { ControlWithError } from '../control-with-error';
-import SelectControl from '../../select-control';
-import type { ValidatedControlProps } from './types';
-
-const UnforwardedValidatedSelectControl = (
-	{
-		required,
-		customValidity,
-		markWhenOptional,
-		...restProps
-	}: Omit<
-		React.ComponentProps< typeof SelectControl >,
-		'multiple' | 'onChange' | 'value'
-	> & {
-		value?: string;
-		onChange: ( value: string ) => void;
-	} & ValidatedControlProps,
-	forwardedRef: React.ForwardedRef< HTMLSelectElement >
-) => {
-	const validityTargetRef = useRef< HTMLSelectElement >( null );
-	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-
-	return (
-		<ControlWithError
-			required={ required }
-			markWhenOptional={ markWhenOptional }
-			customValidity={ customValidity }
-			getValidityTarget={ () => validityTargetRef.current }
-		>
-			<SelectControl ref={ mergedRefs } { ...restProps } />
-		</ControlWithError>
-	);
-};
-
-export const ValidatedSelectControl = forwardRef(
-	UnforwardedValidatedSelectControl
-);
-ValidatedSelectControl.displayName = 'ValidatedSelectControl';

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

@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import type { StoryObj, Meta } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
-import { ValidatedCheckboxControl } from '../checkbox-control';
-import { formDecorator } from './story-utils';
-
-const meta: Meta< typeof ValidatedCheckboxControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedCheckboxControl',
-	id: 'components-validatedcheckboxcontrol',
-	component: ValidatedCheckboxControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		checked: { control: false },
-		// TODO: Figure out why this deprecated prop is still showing up here and not in the WP Storybook.
-		heading: { table: { disable: true } },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedCheckboxControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ checked, setChecked ] = useState( false );
-
-		return (
-			<ValidatedCheckboxControl
-				{ ...args }
-				checked={ checked }
-				onChange={ ( newValue ) => {
-					setChecked( newValue );
-					onChange?.( newValue );
-				} }
-				customValidity={
-					checked
-						? {
-								type: 'invalid',
-								message: 'This checkbox may not be checked.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Checkbox',
-	help: 'This checkbox may neither be checked nor unchecked.',
-};

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

@@ -1,65 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import type { StoryObj, Meta } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
-import { ValidatedNumberControl } from '../number-control';
-import { formDecorator } from './story-utils';
-
-const meta: Meta< typeof ValidatedNumberControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedNumberControl',
-	id: 'components-validatednumbercontrol',
-	component: ValidatedNumberControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		prefix: { control: { type: 'text' } },
-		step: { control: { type: 'text' } },
-		suffix: { control: { type: 'text' } },
-		type: { control: { type: 'text' } },
-		value: { control: false },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedNumberControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] =
-			useState<
-				React.ComponentProps< typeof ValidatedNumberControl >[ 'value' ]
-			>();
-
-		return (
-			<ValidatedNumberControl
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue, extra ) => {
-					setValue( newValue );
-					onChange?.( newValue, extra );
-				} }
-				customValidity={
-					value && parseInt( value.toString(), 10 ) % 2 !== 0
-						? {
-								type: 'invalid',
-								message: 'Choose an even number.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Number',
-	help: 'Odd numbers are not allowed.',
-};

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

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