@wordpress/components 25.8.2 → 25.9.0

package/src/duotone-picker/README.md

@@ -3,8 +3,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const DUOTONE_PALETTE = [
 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },

package/src/duotone-picker/duotone-picker.tsx

@@ -67,6 +67,7 @@ function DuotonePicker( {
 	onChange,
 	'aria-label': ariaLabel,
 	'aria-labelledby': ariaLabelledby,
+	...otherProps
 }: DuotonePickerProps ) {
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
@@ -74,13 +75,15 @@ function DuotonePicker( {
 	);
 
 	const isUnset = value === 'unset';
+	const unsetOptionLabel = __( 'Unset' );
 
 	const unsetOption = (
 		<CircularOptionPicker.Option
 			key="unset"
 			value="unset"
 			isSelected={ isUnset }
-			tooltipText={ __( 'Unset' ) }
+			tooltipText={ unsetOptionLabel }
+			aria-label={ unsetOptionLabel }
 			className="components-duotone-picker__color-indicator"
 			onClick={ () => {
 				onChange( isUnset ? undefined : 'unset' );
@@ -154,6 +157,7 @@ function DuotonePicker( {
 
 	return (
 		<CircularOptionPicker
+			{ ...otherProps }
 			{ ...metaProps }
 			options={ unsetable ? [ unsetOption, ...options ] : options }
 			actions={

package/src/elevation/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useElevation } from './hook';
 import type { ElevationProps } from './types';

package/src/elevation/hook.ts

@@ -12,8 +12,8 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import * as styles from './styles';
 import { CONFIG, reduceMotion } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';

package/src/external-link/index.tsx

@@ -17,7 +17,7 @@ import { external } from '@wordpress/icons';
 import { VisuallyHidden } from '../visually-hidden';
 import { StyledIcon } from './styles/external-link-styles';
 import type { ExternalLinkProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 function UnforwardedExternalLink(
 	props: Omit<

package/src/external-link/test/index.tsx

@@ -9,11 +9,9 @@ import userEvent from '@testing-library/user-event';
  */
 import { ExternalLink } from '..';
 
-const setupUser = () => userEvent.setup();
-
 describe( 'ExternalLink', () => {
 	test( 'should call function passed in onClick handler when clicking the link', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const onClickMock = jest.fn();
 
 		render(
@@ -32,7 +30,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should prevent default action when clicking an internal anchor link without passing onClick prop', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 
 		render(
 			<ExternalLink href="#test">I&apos;m an anchor link!</ExternalLink>
@@ -55,7 +53,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should call function passed in onClick handler and prevent default action when clicking an internal anchor link', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const onClickMock = jest.fn();
 
 		render(
@@ -76,7 +74,7 @@ describe( 'ExternalLink', () => {
 	} );
 
 	test( 'should not prevent default action when clicking a non anchor link without passing onClick prop', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 
 		render(
 			<ExternalLink href="https://wordpress.org">

package/src/flex/flex/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useFlex } from './hook';
 import { FlexContext } from './../context';
 import { View } from '../../view';

package/src/flex/flex/hook.ts

@@ -12,10 +12,10 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
-import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
-import { space } from '../../ui/utils/space';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
+import { useResponsiveValue } from '../../utils/use-responsive-value';
+import { space } from '../../utils/space';
 import * as styles from '../styles';
 import { useCx } from '../../utils';
 import type { FlexProps } from '../types';

package/src/flex/flex-block/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';

package/src/flex/flex-block/hook.ts

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useFlexItem } from '../flex-item';
 import type { FlexBlockProps } from '../types';
 

package/src/flex/flex-item/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
 import type { FlexItemProps } from '../types';

package/src/flex/flex-item/hook.ts

@@ -7,8 +7,8 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';

package/src/flex/types.ts

@@ -6,8 +6,8 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
-import type { SpaceInput } from '../ui/utils/space';
+import type { ResponsiveCSSValue } from '../utils/types';
+import type { SpaceInput } from '../utils/space';
 
 export type FlexDirection = ResponsiveCSSValue<
 	CSSProperties[ 'flexDirection' ]

package/src/focal-point-picker/README.md

@@ -8,8 +8,8 @@ Focal Point Picker is a component which creates a UI for identifying the most im
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FocalPointPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const Example = () => {
 	const [ focalPoint, setFocalPoint ] = useState( {

package/src/focal-point-picker/focal-point.tsx

@@ -8,7 +8,7 @@ import { PointerCircle } from './styles/focal-point-style';
  */
 import classnames from 'classnames';
 import type { FocalPointProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function FocalPoint( {
 	left = '50%',

package/src/focal-point-picker/grid.tsx

@@ -7,7 +7,7 @@ import {
 	GridLineY,
 } from './styles/focal-point-picker-style';
 import type { FocalPointPickerGridProps } from './types';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 
 export default function FocalPointPickerGrid( {
 	bounds,

package/src/focal-point-picker/index.tsx

@@ -28,7 +28,7 @@ import {
 } from './styles/focal-point-picker-style';
 import { INITIAL_BOUNDS } from './utils';
 import { useUpdateEffect } from '../utils/hooks';
-import type { WordPressComponentProps } from '../ui/context/wordpress-component';
+import type { WordPressComponentProps } from '../context/wordpress-component';
 import type {
 	FocalPoint as FocalPointType,
 	FocalPointPickerProps,

package/src/focusable-iframe/README.md

@@ -32,7 +32,7 @@ Callback to invoke when iframe receives focus. Passes an emulated `FocusEvent` o
 
 ### `iframeRef`
 
--   Type: `wp.element.Ref`
+-   Type: `React.Ref`
 -   Required: No
 
-If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `wp.element.createRef` called from your component.
+If a reference to the underlying DOM element is needed, pass `iframeRef` as the result of a `React.createRef` called from your component.

package/src/font-size-picker/README.md

@@ -6,8 +6,8 @@ The component renders a user interface that allows the user to select predefined
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FontSizePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 const fontSizes = [

package/src/font-size-picker/styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import BaseControl from '../base-control';
 import Button from '../button';
 import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils';
 
 export const Container = styled.fieldset`

package/src/form-file-upload/README.md

@@ -38,9 +38,9 @@ Children are passed as children of `Button`.
 
 ### icon
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
 
--   Type: `String|Function|WPComponent|null`
+-   Type: `String|Function|Component|null`
 -   Required: No
 -   Default: `null`
 

package/src/form-file-upload/index.tsx

@@ -7,7 +7,7 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../button';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { FormFileUploadProps } from './types';
 
 /**

package/src/form-toggle/README.md

@@ -54,8 +54,8 @@ When a user switches a toggle, its corresponding action takes effect immediately
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormToggle } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );

package/src/form-toggle/index.tsx

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import type { FormToggleProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export const noop = () => {};
 

package/src/form-token-field/README.md

@@ -67,8 +67,8 @@ The `value` property is handled in a manner similar to controlled form component
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { FormTokenField } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const continents = [
 	'Africa',

package/src/form-token-field/style.scss

@@ -164,6 +164,7 @@
 	list-style: none;
 	box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
 	margin: 0;
+	padding: 0;
 }
 
 .components-form-token-field__suggestion {
@@ -174,6 +175,7 @@
 	min-height: $button-size-compact;
 	margin: 0;
 	cursor: pointer;
+	box-sizing: border-box;
 
 	&.is-selected {
 		background: $components-color-accent;

package/src/form-token-field/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {

package/src/form-token-field/token-input.tsx

@@ -12,7 +12,7 @@ import { forwardRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { TokenInputProps } from './types';
 
 export function UnForwardedTokenInput(

package/src/gradient-picker/README.md

@@ -9,8 +9,8 @@ GradientPicker is a React component that renders a color gradient picker to defi
 Render a GradientPicker.
 
 ```jsx
+import { useState } from 'react';
 import { GradientPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const myGradientPicker = () => {
 	const [ gradient, setGradient ] = useState( null );

package/src/grid/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import useGrid from './hook';
 import type { GridProps } from './types';

package/src/grid/hook.ts

@@ -11,10 +11,10 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import { getAlignmentProps } from './utils';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import { useResponsiveValue } from '../utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
 import type { GridProps } from './types';

package/src/grid/types.ts

@@ -6,7 +6,7 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
+import type { ResponsiveCSSValue } from '../utils/types';
 
 type GridAlignment =
 	| 'bottom'

package/src/guide/page.tsx

@@ -7,7 +7,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 export default function GuidePage(
 	props: WordPressComponentProps< {}, 'div', false >

package/src/h-stack/component.tsx

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useHStack } from './hook';
 import type { Props } from './types';

package/src/h-stack/hook.tsx

@@ -6,11 +6,11 @@ import type { ReactElement } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { hasConnectNamespace, useContextSystem } from '../context';
 import { FlexItem, useFlex } from '../flex';
 import { getAlignmentProps } from './utils';
-import { getValidChildren } from '../ui/utils/get-valid-children';
+import { getValidChildren } from '../utils/get-valid-children';
 import type { Props } from './types';
 
 export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {

package/src/heading/component.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect } from '../context';
 import { View } from '../view';
 import { useHeading } from './hook';
 import type { HeadingProps } from './types';

package/src/heading/hook.ts

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem } from '../context';
 import { useText } from '../text';
-import { getHeadingFontSize } from '../ui/utils/font-size';
+import { getHeadingFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import type { HeadingProps } from './types';
 

package/src/higher-order/with-constrained-tabbing/README.md

@@ -7,12 +7,12 @@
 Wrap your original component with `withConstrainedTabbing`.
 
 ```jsx
+import { useState } from 'react';
 import {
 	withConstrainedTabbing,
 	TextControl,
 	Button,
 } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const ConstrainedTabbing = withConstrainedTabbing(
 	( { children } ) => children

package/src/higher-order/with-focus-return/README.md

@@ -7,8 +7,8 @@
 ### `withFocusReturn`
 
 ```jsx
+import { useState } from 'react';
 import { withFocusReturn, TextControl, Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const EnhancedComponent = withFocusReturn( () => (
 	<div>

package/src/higher-order/with-focus-return/index.tsx

@@ -36,7 +36,7 @@ type Props = {
  */
 export default createHigherOrderComponent(
 	// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
-	( options: WPComponent | Record< string, unknown > ) => {
+	( options: React.ComponentType | Record< string, unknown > ) => {
 		const HoC =
 			( { onFocusReturn }: Props = {} ) =>
 			( WrappedComponent: React.ComponentType ) => {

package/src/higher-order/with-spoken-messages/index.tsx

@@ -4,7 +4,7 @@
 import { createHigherOrderComponent, useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
 
 /**
  * A Higher Order Component used to be provide speak and debounced speak
@@ -12,9 +12,9 @@ import { speak } from '@wordpress/a11y';
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
  *
- * @param {WPComponent} Component The component to be wrapped.
+ * @param {ComponentType} Component The component to be wrapped.
  *
- * @return {WPComponent} The wrapped component.
+ * @return {ComponentType} The wrapped component.
  */
 export default createHigherOrderComponent(
 	( Component ) => ( props ) => (

package/src/icon/README.md

@@ -67,9 +67,9 @@ The component accepts the following props. Any additional props are passed throu
 
 ### icon
 
-The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and `null`.
+The icon to render. Supported values are: Dashicons (specified as strings), functions, Component instances and `null`.
 
--   Type: `String|Function|WPComponent|null`
+-   Type: `String|Function|Component|null`
 -   Required: No
 -   Default: `null`
 

package/src/input-control/index.tsx

@@ -16,9 +16,10 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const noop = () => {};
 
@@ -30,8 +31,11 @@ function useUniqueId( idProp?: string ) {
 }
 
 export function UnforwardedInputControl(
-	{
-		__next36pxDefaultSize,
+	props: InputControlProps,
+	ref: ForwardedRef< HTMLInputElement >
+) {
+	const {
+		__next40pxDefaultSize,
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
 		className,
@@ -50,10 +54,13 @@ export function UnforwardedInputControl(
 		style,
 		suffix,
 		value,
-		...props
-	}: InputControlProps,
-	ref: ForwardedRef< HTMLInputElement >
-) {
+		...restProps
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >(
+		props,
+		'wp.components.InputControl',
+		'6.4'
+	);
+
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	const id = useUniqueId( idProp );
@@ -61,7 +68,7 @@ export function UnforwardedInputControl(
 
 	const draftHookProps = useDraft( {
 		value,
-		onBlur: props.onBlur,
+		onBlur: restProps.onBlur,
 		onChange,
 	} );
 
@@ -78,7 +85,7 @@ export function UnforwardedInputControl(
 			__nextHasNoMarginBottom
 		>
 			<InputBase
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__unstableInputWidth={ __unstableInputWidth }
 				disabled={ disabled }
 				gap={ 3 }
@@ -94,9 +101,9 @@ export function UnforwardedInputControl(
 				suffix={ suffix }
 			>
 				<InputField
-					{ ...props }
+					{ ...restProps }
 					{ ...helpProp }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }