@wordpress/components 32.5.0 → 32.5.2-next.v.202604091042.0

package/src/custom-select-control-v2/custom-select.tsx

@@ -19,7 +19,7 @@ import type {
 	CustomSelectStore,
 	CustomSelectButtonProps,
 	CustomSelectButtonSize,
-	_CustomSelectInternalProps,
+	CustomSelectInternalProps,
 	_CustomSelectProps,
 } from './types';
 import InputBase from '../input-control/input-base';
@@ -85,8 +85,8 @@ const CustomSelectButton = ( {
 	);
 };
 
-function _CustomSelect(
-	props: _CustomSelectInternalProps &
+function CustomSelect(
+	props: CustomSelectInternalProps &
 		_CustomSelectProps &
 		CustomSelectStore &
 		CustomSelectButtonSize
@@ -161,4 +161,4 @@ function _CustomSelect(
 	);
 }
 
-export default _CustomSelect;
+export default CustomSelect;

package/src/custom-select-control-v2/index.tsx

@@ -5,7 +5,7 @@ import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-import _CustomSelect from './custom-select';
+import CustomSelect from './custom-select';
 import type { CustomSelectProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import Item from './item';
@@ -21,7 +21,7 @@ function CustomSelectControlV2(
 		value,
 	} );
 
-	return <_CustomSelect { ...restProps } store={ store } />;
+	return <CustomSelect { ...restProps } store={ store } />;
 }
 
 CustomSelectControlV2.Item = Item;

package/src/custom-select-control-v2/types.ts

@@ -50,7 +50,7 @@ export type CustomSelectButtonProps = {
 };
 
 // Props only exposed on the internal implementation
-export type _CustomSelectInternalProps = {
+export type CustomSelectInternalProps = {
 	/**
 	 * True if the consumer is emulating the legacy component behavior and look
 	 */

package/src/divider/README.md

@@ -11,17 +11,16 @@ This feature is still experimental. “Experimental” means this is an early im
 ```jsx
 import {
 	__experimentalDivider as Divider,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
 } from `@wordpress/components`;
+import { Stack } from '@wordpress/ui';
 
 function Example() {
 	return (
-		<VStack spacing={4}>
-			<Text>Some text here</Text>
+		<Stack direction="column" gap="lg">
+			<span>Some text here</span>
 			<Divider />
-			<Text>Some more text here</Text>
-		</VStack>
+			<span>Some more text here</span>
+		</Stack>
 	);
 }
 ```

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

@@ -34,7 +34,7 @@ const meta: Meta< typeof Flex > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Planned for deprecation. For use cases not covered by `HStack` and `VStack`, write your own CSS.',
+			notes: 'Planned for deprecation. For use cases not covered by `Stack` from `@wordpress/ui`, write your own CSS.',
 		},
 	},
 };

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

@@ -48,7 +48,7 @@ Children are passed as children of `Button`.
 
 ### `icon`
 
- - Type: `IconType`
+ - Type: `IconType | null`
  - Required: No
 
 The icon to render in the default button.
@@ -65,7 +65,7 @@ Whether to allow multiple selection of files or not.
 
 ### `onChange`
 
- - Type: `ChangeEventHandler<HTMLInputElement>`
+ - Type: `ChangeEventHandler<HTMLInputElement> | undefined`
  - Required: Yes
 
 Callback function passed directly to the `input` file element.
@@ -95,7 +95,7 @@ an empty string in the `onClick` function.
 
 ### `render`
 
- - Type: `(arg: { openFileDialog: () => void; }) => ReactNode`
+ - Type: `((arg: { openFileDialog: () => void; }) => ReactNode)`
  - Required: No
 
 Optional callback function used to render the UI.

package/src/gradient-picker/README.md

@@ -141,7 +141,7 @@ Only used when `asButtons` is not true.
 
 ### `onChange`
 
- - Type: `(currentGradient: string) => void`
+ - Type: `(currentGradient: string | undefined) => void`
  - Required: Yes
 
 The function called when a new gradient has been defined. It is passed to
@@ -149,7 +149,7 @@ the `currentGradient` as an argument.
 
 ### `value`
 
- - Type: `string`
+ - Type: `string | null`
  - Required: No
  - Default: `'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'`
 

package/src/h-stack/README.md

@@ -11,17 +11,14 @@ This feature is still experimental. “Experimental” means this is an early im
 `HStack` can render anything inside.
 
 ```jsx
-import {
-	__experimentalHStack as HStack,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>Code</span>
+			<span>is</span>
+			<span>Poetry</span>
 		</HStack>
 	);
 }
@@ -87,17 +84,16 @@ When a `Spacer` is used within an `HStack`, the `Spacer` adaptively expands to t
 import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer>
-				<Text>is</Text>
+				<span>is</span>
 			</Spacer>
-			<Text>Poetry</Text>
+			<span>Poetry</span>
 		</HStack>
 	);
 }
@@ -109,16 +105,15 @@ function Example() {
 import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<HStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer />
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>is</span>
+			<span>Poetry</span>
 		</HStack>
 	);
 }

package/src/h-stack/stories/index.story.tsx

@@ -75,9 +75,9 @@ const meta: Meta< typeof HStack > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use `Stack` from `@wordpress/ui` instead.',
 		},
 	},
 };

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

@@ -32,7 +32,7 @@ const meta: Meta< typeof Heading > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+			notes: 'Use `Text` from `@wordpress/ui` instead, with the `render` prop set to the heading level element and the variant set to the visual heading size (e.g. `<Text render={ <h1 /> } variant="heading-2xl">`).',
 		},
 	},
 };

package/src/higher-order/with-focus-outside/index.native.js

@@ -12,26 +12,27 @@ import {
 } from '@wordpress/compose';
 
 export default createHigherOrderComponent(
-	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-		const bindFocusOutsideHandler = useCallback(
-			( node ) =>
-				setHandleFocusOutside( () =>
-					node?.handleFocusOutside
-						? node.handleFocusOutside.bind( node )
-						: undefined
-				),
-			[]
-		);
+	( WrappedComponent ) =>
+		function WithFocusOutside( props ) {
+			const [ handleFocusOutside, setHandleFocusOutside ] = useState();
+			const bindFocusOutsideHandler = useCallback(
+				( node ) =>
+					setHandleFocusOutside( () =>
+						node?.handleFocusOutside
+							? node.handleFocusOutside.bind( node )
+							: undefined
+					),
+				[]
+			);
 
-		return (
-			<View { ...useFocusOutside( handleFocusOutside ) }>
-				<WrappedComponent
-					ref={ bindFocusOutsideHandler }
-					{ ...props }
-				/>
-			</View>
-		);
-	},
+			return (
+				<View { ...useFocusOutside( handleFocusOutside ) }>
+					<WrappedComponent
+						ref={ bindFocusOutsideHandler }
+						{ ...props }
+					/>
+				</View>
+			);
+		},
 	'withFocusOutside'
 );

package/src/icon/README.md

@@ -16,7 +16,7 @@ import { wordpress } from '@wordpress/icons';
 
 ### `icon`
 
- - Type: `IconType`
+ - Type: `IconType | null`
  - Required: No
  - Default: `null`
 

package/src/menu/README.md

@@ -19,7 +19,7 @@ component, and the `Menu.Popover` component.
 
 ### `as`
 
- - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 516 more ... | ("view" & FunctionComponent<...>)`
+ - Type: `"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 517 more ...`
  - Required: No
 
 The HTML element or React component to render the component as.
@@ -57,7 +57,7 @@ override the `defaultOpen` prop.
 
 ### `onOpenChange`
 
- - Type: `(open: boolean) => void`
+ - Type: `((open: boolean) => void)`
  - Required: No
 
 A callback that gets called when the `open` state changes.

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -26,7 +26,7 @@ function parseUnit( cssUnit ) {
 function calculate( expression ) {
 	try {
 		return Function( `'use strict'; return (${ expression })` )();
-	} catch ( err ) {
+	} catch {
 		return null;
 	}
 }

package/src/sandbox/index.native.js

@@ -172,7 +172,7 @@ const style = `
 
 const EMPTY_ARRAY = [];
 
-const Sandbox = forwardRef( function Sandbox(
+const Sandbox = forwardRef( function UnforwardedSandbox(
 	{
 		containerStyle,
 		customJS,
@@ -297,7 +297,7 @@ const Sandbox = forwardRef( function Sandbox(
 
 			try {
 				data = JSON.parse( data );
-			} catch ( e ) {
+			} catch {
 				return;
 			}
 

package/src/sandbox/index.tsx

@@ -141,7 +141,7 @@ function SandBox( {
 	function isFrameAccessible() {
 		try {
 			return !! ref.current?.contentDocument?.body;
-		} catch ( e ) {
+		} catch {
 			return false;
 		}
 	}
@@ -232,7 +232,7 @@ function SandBox( {
 			if ( 'string' === typeof data ) {
 				try {
 					data = JSON.parse( data );
-				} catch ( e ) {}
+				} catch {}
 			}
 
 			// Update the state only if the message is formatted as we expect,

package/src/tabs/README.md

@@ -19,7 +19,7 @@ It is responsible for managing the state of the tabs, and rendering one instance
 
 ### `activeTabId`
 
- - Type: `string`
+ - Type: `string | null`
  - Required: No
 
 The current active tab `id`. The active tab is the tab element within the
@@ -42,7 +42,7 @@ components as there are `Tabs.Tab` components.
 
 ### `defaultTabId`
 
- - Type: `string`
+ - Type: `string | null`
  - Required: No
 
 The id of the tab whose panel is currently visible.
@@ -56,7 +56,7 @@ provided (meaning the component will be used in "controlled" mode).
 
 ### `defaultActiveTabId`
 
- - Type: `string`
+ - Type: `string | null`
  - Required: No
 
 The tab id that should be active by default when the composite widget is
@@ -69,14 +69,14 @@ provided.
 
 ### `onSelect`
 
- - Type: `(selectedId: string) => void`
+ - Type: `((selectedId: string | null) => void)`
  - Required: No
 
 The function called when the `selectedTabId` changes.
 
 ### `onActiveTabIdChange`
 
- - Type: `(activeId: string) => void`
+ - Type: `((activeId: string | null) => void)`
  - Required: No
 
 A callback that gets called when the `activeTabId` state changes.
@@ -107,7 +107,7 @@ for more info.
 
 ### `selectedTabId`
 
- - Type: `string`
+ - Type: `string | null`
  - Required: No
 
 The id of the tab whose panel is currently visible.

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

@@ -33,7 +33,7 @@ const meta: Meta< typeof Text > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Values are not aligned with the current design system. Use [typography tokens](?path=/docs/tokens-typography--page) from `@wordpress/base-styles` instead.',
+			notes: 'Use `Text` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/toolbar/toolbar-button/toolbar-button-container.native.js

@@ -3,4 +3,6 @@
  */
 import { View } from 'react-native';
 
-export default ( props ) => <View>{ props.children }</View>;
+export default function ToolbarButtonContainer( props ) {
+	return <View>{ props.children }</View>;
+}

package/src/tree-select/README.md

@@ -118,7 +118,7 @@ If this property is added, an option will be added with this label to represent
 
 ### `onChange`
 
- - Type: `(value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void`
+ - Type: `((value: string, extra?: { event?: ChangeEvent<HTMLSelectElement>; }) => void) | undefined`
  - Required: No
 
 A function that receives the value of the new option that is being selected as input.

package/src/v-stack/README.md

@@ -11,17 +11,14 @@ This feature is still experimental. “Experimental” means this is an early im
 `VStack` can render anything inside.
 
 ```jsx
-import {
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<Text>Code</Text>
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>Code</span>
+			<span>is</span>
+			<span>Poetry</span>
 		</VStack>
 	);
 }
@@ -74,18 +71,17 @@ When a `Spacer` is used within an `VStack`, the `Spacer` adaptively expands to t
 ```jsx
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer>
-				<Text>is</Text>
+				<span>is</span>
 			</Spacer>
-			<Text>Poetry</Text>
+			<span>Poetry</span>
 		</VStack>
 	);
 }
@@ -96,17 +92,16 @@ function Example() {
 ```jsx
 import {
 	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<VStack>
-			<Text>Code</Text>
+			<span>Code</span>
 			<Spacer />
-			<Text>is</Text>
-			<Text>Poetry</Text>
+			<span>is</span>
+			<span>Poetry</span>
 		</VStack>
 	);
 }

package/src/v-stack/stories/index.story.tsx

@@ -43,9 +43,9 @@ const meta: Meta< typeof VStack > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'stable',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by `Stack` in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use `Stack` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/validated-form-controls/control-with-error.tsx

@@ -21,21 +21,26 @@ function appendRequiredIndicator(
 	required: boolean | undefined,
 	markWhenOptional: boolean | undefined
 ) {
+	let suffix;
 	if ( required && ! markWhenOptional ) {
-		return (
-			<>
-				{ label } { `(${ __( 'Required' ) })` }
-			</>
-		);
+		suffix = `(${ __( 'Required' ) })`;
+	} else if ( ! required && markWhenOptional ) {
+		suffix = `(${ __( 'Optional' ) })`;
 	}
-	if ( ! required && markWhenOptional ) {
-		return (
-			<>
-				{ label } { `(${ __( 'Optional' ) })` }
-			</>
-		);
+
+	if ( ! suffix ) {
+		return label;
+	}
+
+	if ( typeof label === 'string' ) {
+		return `${ label } ${ suffix }`;
 	}
-	return label;
+
+	return (
+		<>
+			{ label } { suffix }
+		</>
+	);
 }
 
 const VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';

package/src/validated-form-controls/test/control-with-error.tsx

@@ -12,7 +12,7 @@ import { useState, useCallback, useId, useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { ValidatedInputControl } from '../components';
+import { ValidatedInputControl, ValidatedRangeControl } from '../components';
 
 describe( 'ControlWithError', () => {
 	describe( 'Async Validation', () => {
@@ -464,6 +464,33 @@ describe( 'ControlWithError', () => {
 		} );
 	} );
 
+	describe( 'ValidatedRangeControl', () => {
+		it( 'should accessibly label the internal slider and spin button', () => {
+			render(
+				<ValidatedRangeControl
+					label="Opacity"
+					required
+					min={ 0 }
+					max={ 100 }
+					onChange={ () => {} }
+				/>
+			);
+
+			// The slider is styled with `opacity: 0`, so it's not "visible"
+			// in the DOM sense, but it's still accessible.
+			expect(
+				screen.getByRole( 'slider', {
+					name: 'Opacity (Required)',
+				} )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'spinbutton', {
+					name: 'Opacity (Required)',
+				} )
+			).toBeVisible();
+		} );
+	} );
+
 	describe( 'Focus behavior', () => {
 		it( 'should focus the first error in the form', async () => {
 			const user = userEvent.setup();

package/src/view/README.md

@@ -11,15 +11,12 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import {
-	__experimentalText as Text,
-	__experimentalView as View,
-} from '@wordpress/components';
+import { __experimentalView as View } from '@wordpress/components';
 
 function Example() {
 	return (
 		<View>
-			<Text>Code is Poetry</Text>
+			<span>Code is Poetry</span>
 		</View>
 	);
 }

package/src/button/stories/style.css

@@ -1,8 +0,0 @@
-.story-buttons-container {
-	display: flex;
-}
-
-.story-buttons-container > * {
-	margin-right: 10px;
-	margin-bottom: 10px;
-}