@wordpress/components 40.0.0 → 40.1.1-next.v.202609031004.0

package/src/border-box-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,6 +1,7 @@
 import type { ComponentProps } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useId } from '@wordpress/element';
 import { BorderBoxControl } from '..';
 
 const colors = [
@@ -50,6 +51,102 @@ function TestBorderBoxControl(
 }
 
 describe( 'BorderBoxControl', () => {
+	describe( 'Labelling', () => {
+		it( 'should give the group of controls an accessible name from the label', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should name the group of controls even when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-label` take precedence over the label', () => {
+			render(
+				<TestBorderBoxControl { ...props } aria-label="Outer borders" />
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should let a consumer-provided `aria-labelledby` take precedence over the label', () => {
+			const ExternallyLabelledControl = () => {
+				const id = useId();
+				return (
+					<>
+						<span id={ id }>Outer borders</span>
+						<TestBorderBoxControl
+							{ ...props }
+							aria-labelledby={ id }
+						/>
+					</>
+				);
+			};
+
+			render( <ExternallyLabelledControl /> );
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+
+			// With an external name in play, the internal label is no longer
+			// referenced, so it shouldn't carry a generated ID either.
+			expect( screen.getByText( props.label ) ).not.toHaveAttribute(
+				'id'
+			);
+		} );
+
+		it( 'should form a group when named only by `aria-label`', () => {
+			render(
+				<TestBorderBoxControl
+					{ ...props }
+					label={ undefined }
+					aria-label="Outer borders"
+				/>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'Outer borders' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should fall back to the label when an ARIA naming prop is empty', () => {
+			// An empty `aria-label` is skipped by the accessible name
+			// computation, so it shouldn't suppress the label association and
+			// leave the group unnamed.
+			render( <TestBorderBoxControl { ...props } aria-label="" /> );
+
+			expect(
+				screen.getByRole( 'group', { name: props.label } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should give each instance its own label association', () => {
+			render(
+				<>
+					<TestBorderBoxControl { ...props } label="First" />
+					<TestBorderBoxControl { ...props } label="Second" />
+				</>
+			);
+
+			expect(
+				screen.getByRole( 'group', { name: 'First' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'group', { name: 'Second' } )
+			).toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'Linked view rendering', () => {
 		it( 'should render correctly when no value provided', () => {
 			render( <TestBorderBoxControl { ...props } /> );
@@ -76,6 +173,42 @@ describe( 'BorderBoxControl', () => {
 			expect( linkedButton ).toBeInTheDocument();
 		} );
 
+		// `getAllByRole` returns document order, so the sign of this offset is
+		// which side of the border inputs the linked button sits on. The color
+		// button is the first of those inputs.
+		const getLinkedButtonOffsetFromColorButton = () => {
+			const buttons = screen.getAllByRole( 'button' );
+			const linkedButtonIndex = buttons.indexOf(
+				screen.getByLabelText( 'Unlink sides' )
+			);
+			const colorButtonIndex = buttons.indexOf(
+				screen.getByLabelText( toggleLabelRegex )
+			);
+
+			// Both queries throw when absent, and `indexOf` gives -1 for a
+			// button outside the list, which would read as "earlier than".
+			expect( linkedButtonIndex ).toBeGreaterThanOrEqual( 0 );
+			expect( colorButtonIndex ).toBeGreaterThanOrEqual( 0 );
+
+			return linkedButtonIndex - colorButtonIndex;
+		};
+
+		it( 'should place the linked button before the border inputs when the label is visible', () => {
+			render( <TestBorderBoxControl { ...props } /> );
+
+			// Sharing the label's row is what lines it up with the equivalent
+			// button on sibling controls such as border radius.
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeLessThan( 0 );
+		} );
+
+		it( 'should place the linked button after the border inputs when the label is hidden', () => {
+			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
+
+			expect( getLinkedButtonOffsetFromColorButton() ).toBeGreaterThan(
+				0
+			);
+		} );
+
 		it( 'should hide label', () => {
 			render( <TestBorderBoxControl { ...props } hideLabelFromVision /> );
 

package/src/border-box-control/test/utils.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	getBorderDiff,
 	getCommonBorder,
@@ -44,12 +45,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isEmptyBorder', () => {
 		it( 'should determine a undefined, null, and {} to be empty', () => {
 			expect( isEmptyBorder( undefined ) ).toBe( true );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isEmptyBorder( null ) ).toBe( true );
 			expect( isEmptyBorder( {} ) ).toBe( true );
 		} );
 
 		it( 'should determine object missing all border props to be empty', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isEmptyBorder( nonBorder ) ).toBe( true );
 		} );
@@ -109,12 +112,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'isCompleteBorder', () => {
 		it( 'should determine a undefined, null, and {} to be incomplete', () => {
 			expect( isCompleteBorder( undefined ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( isCompleteBorder( null ) ).toBe( false );
 			expect( isCompleteBorder( {} ) ).toBe( false );
 		} );
 
 		it( 'should determine objects missing border props to be incomplete', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( isCompleteBorder( nonBorder ) ).toBe( false );
 			expect( isCompleteBorder( partialBorder ) ).toBe( false );
@@ -150,6 +155,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should determine undefined, non-border or empty object as not being mixed', () => {
 			expect( hasMixedBorders( undefined ) ).toBe( false );
 			expect( hasMixedBorders( {} ) ).toBe( false );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` is not assignable to `AnyBorder`; resilience is tested.
 			expect( hasMixedBorders( nonBorder ) ).toBe( false );
 		} );
@@ -170,12 +176,14 @@ describe( 'BorderBoxControl Utils', () => {
 	describe( 'getSplitBorders', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getSplitBorders( undefined ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `null` is outside the declared `Border | undefined` input; resilience is tested.
 			expect( getSplitBorders( null ) ).toEqual( undefined );
 		} );
 
 		it( 'should return undefined when supplied border is empty', () => {
 			expect( getSplitBorders( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getSplitBorders( nonBorder ) ).toEqual( undefined );
 		} );
@@ -197,6 +205,7 @@ describe( 'BorderBoxControl Utils', () => {
 		} );
 
 		it( 'should only return differences for border related properties', () => {
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			const diff = getBorderDiff( nonBorder, { caffeine: 'coffee' } );
 			expect( diff ).toEqual( {} );
@@ -206,6 +215,7 @@ describe( 'BorderBoxControl Utils', () => {
 			const diff = getBorderDiff( completeBorder, {
 				...completeBorder,
 				color: '#21759b',
+				// Checking for extra resilience, even if not a valid type.
 				// @ts-expect-error `caffeine` is not a declared `Border` property; the test checks it is ignored.
 				caffeine: 'cola',
 			} );
@@ -304,6 +314,7 @@ describe( 'BorderBoxControl Utils', () => {
 		it( 'should return undefined when no border provided', () => {
 			expect( getShorthandBorderStyle( undefined ) ).toEqual( undefined );
 			expect( getShorthandBorderStyle( {} ) ).toEqual( undefined );
+			// Checking for extra resilience, even if not a valid type.
 			// @ts-expect-error `nonBorder` has no properties in common with `Border`; resilience is tested.
 			expect( getShorthandBorderStyle( nonBorder ) ).toEqual( undefined );
 		} );

package/src/border-box-control/types.ts

@@ -34,7 +34,9 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**
@@ -83,7 +85,9 @@ export type SplitControlsProps = ColorProps &
 		 */
 		popoverPlacement?: PopoverProps[ 'placement' ];
 		/**
-		 * The space between the popover and the control wrapper.
+		 * The space between the popover and the control wrapper. A number
+		 * displaces the popover along its main axis; pass an object to also
+		 * displace it along its cross axis.
 		 */
 		popoverOffset?: PopoverProps[ 'offset' ];
 		/**

package/src/border-control/test/{index.js → index.jsdom.test.tsx}

@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { BorderControl } from '../';
+import type { Border, BorderControlProps } from '../types';
 import { COLORS } from '../../utils';
 
 const colors = [
@@ -23,11 +24,13 @@ const defaultBorder = {
 	width: '1px',
 };
 
-function createProps( customProps ) {
-	const props = {
+function createProps(
+	customProps: Partial< BorderControlProps > = {}
+): BorderControlProps {
+	const props: BorderControlProps = {
 		colors,
 		label: 'Border',
-		onChange: jest.fn().mockImplementation( ( newValue ) => {
+		onChange: jest.fn().mockImplementation( ( newValue?: Border ) => {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
@@ -38,7 +41,7 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const openPopover = async ( user ) => {
+const openPopover = async ( user: ReturnType< typeof userEvent.setup > ) => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	await user.click( toggleButton );
 
@@ -50,27 +53,31 @@ const openPopover = async ( user ) => {
 	await waitFor( () => expect( pickerButton ).toBePositionedPopover() );
 };
 
-const getButton = ( name ) => {
+const getButton = ( name: string | RegExp ) => {
 	return screen.getByRole( 'button', { name } );
 };
 
-const getColorOption = ( color ) => {
+const getColorOption = ( color: string ) => {
 	return screen.getByRole( 'option', { name: `${ color }` } );
 };
 
-const queryButton = ( name ) => {
+const queryButton = ( name: string | RegExp ) => {
 	return screen.queryByRole( 'button', { name } );
 };
 
 const getSliderInput = () => {
-	return screen.getByRole( 'slider', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'slider', {
+		name: 'Border width',
+	} );
 };
 
 const getWidthInput = () => {
-	return screen.getByRole( 'spinbutton', { name: 'Border width' } );
+	return screen.getByRole< HTMLInputElement >( 'spinbutton', {
+		name: 'Border width',
+	} );
 };
 
-function TestBorderControl( restProps ) {
+function TestBorderControl( restProps: BorderControlProps ) {
 	return <BorderControl { ...restProps } />;
 }
 
@@ -80,7 +87,7 @@ describe( 'BorderControl', () => {
 			const props = createProps();
 			render( <TestBorderControl { ...props } /> );
 
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
 			const widthInput = getWidthInput();
 			const unitSelect = screen.getByRole( 'combobox', {
@@ -100,7 +107,7 @@ describe( 'BorderControl', () => {
 		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
 			render( <TestBorderControl { ...props } /> );
-			const label = screen.getByText( props.label );
+			const label = screen.getByText( props.label! );
 
 			// As visually hidden labels are still included in the document
 			// and do not have `display: none` styling, we can't rely on
@@ -128,7 +135,7 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'color indicator inline styles', () => {
-			const getIndicatorWrapper = ( border ) => {
+			const getIndicatorWrapper = ( border: Border ) => {
 				render(
 					<TestBorderControl
 						{ ...createProps( { value: border } ) }

package/src/checkbox-control/style.scss

@@ -77,7 +77,7 @@ svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
 	--checkmark-size: var(--checkbox-input-size);
 
-	fill: $white;
+	color: $white;
 	cursor: var(--wpds-cursor-control);
 	position: absolute;
 	left: 50%;
@@ -96,7 +96,7 @@ svg.components-checkbox-control__indeterminate {
 .components-checkbox-control:has(:disabled) {
 	svg.components-checkbox-control__checked,
 	svg.components-checkbox-control__indeterminate {
-		fill: $components-color-gray-400;
+		color: $components-color-gray-400;
 	}
 }
 

package/src/checkbox-control/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -5,7 +5,7 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -14,14 +14,29 @@
+@@ -14,14 +14,32 @@
           <span
             class="components-checkbox-control__input-container"
           >
@@ -15,21 +15,24 @@ Snapshot Diff:
 +             id="inspector-checkbox-control-7"
               type="checkbox"
               value="1"
-            />
++           />
 +           <svg
 +             aria-hidden="true"
 +             class="components-checkbox-control__indeterminate"
-+             fill="currentColor"
 +             focusable="false"
 +             height="24"
 +             role="presentation"
++             stroke="currentColor"
++             stroke-width="1.5"
++             style="fill: none;"
 +             viewBox="0 0 24 24"
 +             width="24"
 +             xmlns="http://www.w3.org/2000/svg"
 +           >
 +             <path
-+               d="M7 11.5h10V13H7z"
-+             />
++               d="M7 12H17"
++               vector-effect="non-scaling-stroke"
+              />
 +           </svg>
           </span>
         </div>

package/src/color-palette/index.tsx

@@ -65,7 +65,7 @@ function SinglePalette( {
 					selectedIconProps={
 						isSelected
 							? {
-									fill:
+									color:
 										colordColor.contrast() >
 										colordColor.contrast( '#000' )
 											? '#fff'

package/src/composite/README.md

@@ -136,7 +136,7 @@ Allows the component to be rendered as a different HTML element or React compone
 
 Makes the component a focusable element. When this element gains keyboard focus, it gets a `data-focus-visible` attribute and triggers the `onFocusVisible` prop.
 
-The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the the `accessibleWhenDisabled` prop.
+The component supports the `disabled` prop even for those elements not supporting the native `disabled` attribute. Disabled elements may be still accessible via keyboard by using the `accessibleWhenDisabled` prop.
 
 Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability.
 

package/src/composite/types.ts

@@ -141,7 +141,7 @@ export type CompositeProps = CompositeStoreProps & {
 	 * `onFocusVisible` prop.
 	 * The component supports the `disabled` prop even for those elements not
 	 * supporting the native `disabled` attribute. Disabled elements may be
-	 * still accessible via keyboard by using the the `accessibleWhenDisabled`
+	 * still accessible via keyboard by using the `accessibleWhenDisabled`
 	 * prop.
 	 * Non-native focusable elements will lose their focusability entirely.
 	 * However, native focusable elements will retain their inherent focusability.

package/src/context/{context-system-provider.js → context-system-provider.tsx}

@@ -1,6 +1,7 @@
 import deepmerge from 'deepmerge';
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 import { isPlainObject } from 'is-plain-object';
+import type { ReactNode } from 'react';
 import {
 	createContext,
 	useContext,
@@ -11,9 +12,12 @@ import {
 import warn from '@wordpress/warning';
 import { useUpdateEffect } from '../utils';
 
-export const ComponentsContext = createContext(
-	/** @type {Record<string, any>} */ ( {} )
-);
+type ContextSystemValue = Record<
+	string,
+	Record< string, unknown > | undefined
+>;
+
+export const ComponentsContext = createContext< ContextSystemValue >( {} );
 ComponentsContext.displayName = 'ComponentsContext';
 
 export const useComponentsContext = () => useContext( ComponentsContext );
@@ -27,7 +31,11 @@ export const useComponentsContext = () => useContext( ComponentsContext );
  * @param {Record<string, any>} props.value
  * @return {Record<string, any>} The consolidated value.
  */
-function useContextSystemBridge( { value } ) {
+function useContextSystemBridge( {
+	value,
+}: {
+	value?: ContextSystemValue;
+} ): ContextSystemValue {
 	const parentContext = useComponentsContext();
 
 	const valueRef = useRef( value );
@@ -82,7 +90,13 @@ function useContextSystemBridge( { value } ) {
  * @param {T}               options.value    Props to render into connected components.
  * @return {React.JSX.Element} A Provider wrapped component.
  */
-const BaseContextSystemProvider = ( { children, value } ) => {
+const BaseContextSystemProvider = ( {
+	children,
+	value,
+}: {
+	children: ReactNode;
+	value?: ContextSystemValue;
+} ) => {
 	const contextValue = useContextSystemBridge( { value } );
 
 	return (

package/src/context/stories/{ComponentsProvider.stories.jsx → ComponentsProvider.stories.tsx}

@@ -4,7 +4,7 @@ import { View } from '../../view';
 import { Text } from '../../text';
 import { ContextSystemProvider } from '../index';
 
-const SomeContext = createContext();
+const SomeContext = createContext< number | undefined >( undefined );
 const useSomeContext = () => useContext( SomeContext );
 
 export default {
@@ -39,7 +39,7 @@ const innerContext = {
 
 const InnerContent = memo( () => {
 	const state = useSomeContext();
-	const isEven = state % 2 === 0;
+	const isEven = state !== undefined && state % 2 === 0;
 	return (
 		<View style={ { background: isEven ? 'red' : 'initial' } }>
 			<Text>Card (inside innerContext)</Text>

package/src/context/test/__snapshots__/{context-system-provider.js.snap → context-system-provider.jsdom.test.tsx.snap}

@@ -3,7 +3,7 @@
 exports[`props should render _override props 1`] = `
 <div>
   <div
-    class="components-component test-component css-16wk7jz-View emotion-0"
+    class="components-component test-component css-1j9m8ga-View emotion-0"
     data-wp-c16t="true"
     data-wp-component="Component"
   >
@@ -15,7 +15,7 @@ exports[`props should render _override props 1`] = `
 exports[`props should render context props 1`] = `
 <div>
   <div
-    class="components-component css-16wk7jz-View emotion-0"
+    class="components-component css-1j9m8ga-View emotion-0"
     data-wp-c16t="true"
     data-wp-component="Component"
   >
@@ -27,7 +27,7 @@ exports[`props should render context props 1`] = `
 exports[`props should render correctly 1`] = `
 <div>
   <div
-    class="components-component css-16wk7jz-View emotion-0"
+    class="components-component css-1j9m8ga-View emotion-0"
     data-wp-c16t="true"
     data-wp-component="Component"
   />

package/src/context/test/context-connect.tsx

@@ -1,9 +1,9 @@
+import { describe, it } from 'vitest';
 import type { ForwardedRef } from 'react';
 import { contextConnect, contextConnectWithoutRef } from '../context-connect';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript tests
-/* eslint-disable jest/expect-expect */
 describe( 'ref forwarding', () => {
 	const ComponentWithRef = (
 		props: WordPressComponentProps< {}, 'div' >,
@@ -47,4 +47,3 @@ describe( 'ref forwarding', () => {
 		<NoRef foo={ null } />;
 	} );
 } );
-/* eslint-enable jest/expect-expect */