@wordpress/components 28.6.0 → 28.8.1-next.1f6eadc42.0

package/src/alignment-matrix-control/types.ts

@@ -44,11 +44,22 @@ export type AlignmentMatrixControlIconProps = Pick<
 	AlignmentMatrixControlProps,
 	'value'
 > & {
+	/**
+	 * If `true`, disables pointer events on the icon.
+	 * @default true
+	 */
 	disablePointerEvents?: boolean;
+	/**
+	 * _Note: this prop is deprecated. Use the `size` prop on the parent `Icon`
+	 * component instead_
+	 *
+	 * The size of the icon.
+	 * @ignore
+	 * @default 24
+	 */
 	size?: number;
 };
 
 export type AlignmentMatrixControlCellProps = {
-	isActive?: boolean;
 	value: NonNullable< AlignmentMatrixControlProps[ 'value' ] >;
 };

package/src/angle-picker-control/angle-circle.tsx

@@ -28,8 +28,10 @@ function AngleCircle( {
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
-	const angleCircleCenter = useRef< { x: number; y: number } | undefined >();
-	const previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+	const angleCircleCenterRef = useRef<
+		{ x: number; y: number } | undefined
+	>();
+	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
 
 	const setAngleCircleCenter = () => {
 		if ( angleCircleRef.current === null ) {
@@ -37,7 +39,7 @@ function AngleCircle( {
 		}
 
 		const rect = angleCircleRef.current.getBoundingClientRect();
-		angleCircleCenter.current = {
+		angleCircleCenterRef.current = {
 			x: rect.x + rect.width / 2,
 			y: rect.y + rect.height / 2,
 		};
@@ -55,10 +57,10 @@ function AngleCircle( {
 		( event.target as HTMLDivElement | null )?.focus();
 
 		if (
-			angleCircleCenter.current !== undefined &&
+			angleCircleCenterRef.current !== undefined &&
 			onChange !== undefined
 		) {
-			const { x: centerX, y: centerY } = angleCircleCenter.current;
+			const { x: centerX, y: centerY } = angleCircleCenterRef.current;
 			onChange(
 				getAngle( centerX, centerY, event.clientX, event.clientY )
 			);
@@ -76,13 +78,13 @@ function AngleCircle( {
 
 	useEffect( () => {
 		if ( isDragging ) {
-			if ( previousCursorValue.current === undefined ) {
-				previousCursorValue.current = document.body.style.cursor;
+			if ( previousCursorValueRef.current === undefined ) {
+				previousCursorValueRef.current = document.body.style.cursor;
 			}
 			document.body.style.cursor = 'grabbing';
 		} else {
-			document.body.style.cursor = previousCursorValue.current || '';
-			previousCursorValue.current = undefined;
+			document.body.style.cursor = previousCursorValueRef.current || '';
+			previousCursorValueRef.current = undefined;
 		}
 	}, [ isDragging ] );
 

package/src/border-control/border-control/component.tsx

@@ -18,6 +18,7 @@ import { contextConnect } from '../../context';
 import { useBorderControl } from './hook';
 
 import type { BorderControlProps, LabelProps } from '../types';
+import { Spacer } from '../../spacer';
 
 const BorderLabel = ( props: LabelProps ) => {
 	const { label, hideLabelFromVision } = props;
@@ -75,22 +76,28 @@ const UnconnectedBorderControl = (
 			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
 					prefix={
-						<BorderControlDropdown
-							border={ border }
-							colors={ colors }
-							__unstablePopoverProps={ __unstablePopoverProps }
-							disableCustomColors={ disableCustomColors }
-							enableAlpha={ enableAlpha }
-							enableStyle={ enableStyle }
-							isStyleSettable={ isStyleSettable }
-							onChange={ onBorderChange }
-							previousStyleSelection={ previousStyleSelection }
-							showDropdownHeader={ showDropdownHeader }
-							__experimentalIsRenderedInSidebar={
-								__experimentalIsRenderedInSidebar
-							}
-							size={ size }
-						/>
+						<Spacer marginRight={ 1 } marginBottom={ 0 }>
+							<BorderControlDropdown
+								border={ border }
+								colors={ colors }
+								__unstablePopoverProps={
+									__unstablePopoverProps
+								}
+								disableCustomColors={ disableCustomColors }
+								enableAlpha={ enableAlpha }
+								enableStyle={ enableStyle }
+								isStyleSettable={ isStyleSettable }
+								onChange={ onBorderChange }
+								previousStyleSelection={
+									previousStyleSelection
+								}
+								showDropdownHeader={ showDropdownHeader }
+								__experimentalIsRenderedInSidebar={
+									__experimentalIsRenderedInSidebar
+								}
+								size={ size }
+							/>
+						</Spacer>
 					}
 					label={ __( 'Border width' ) }
 					hideLabelFromVision

package/src/box-control/utils.ts

@@ -179,7 +179,7 @@ export function isValuesMixed(
  */
 export function isValuesDefined( values?: BoxControlValue ) {
 	return (
-		values !== undefined &&
+		values &&
 		Object.values( values ).filter(
 			// Switching units when input is empty causes values only
 			// containing units. This gives false positive on mixed values

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -2,14 +2,13 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { useStoreState } from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef, useContext, useEffect } from '@wordpress/element';
 import { Icon, check } from '@wordpress/icons';
 
 /**
@@ -46,18 +45,21 @@ function UnforwardedOptionAsOption(
 		id: string;
 		className?: string;
 		isSelected?: boolean;
-		compositeStore: NonNullable<
-			React.ComponentProps< typeof Composite >[ 'store' ]
-		>;
 	},
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { id, isSelected, compositeStore, ...additionalProps } = props;
-	const activeId = useStoreState( compositeStore, 'activeId' );
+	const { id, isSelected, ...additionalProps } = props;
 
-	if ( isSelected && ! activeId ) {
-		compositeStore.setActiveId( id );
-	}
+	const { setActiveId, activeId } = useContext( CircularOptionPickerContext );
+
+	useEffect( () => {
+		if ( isSelected && ! activeId ) {
+			// The setTimeout call is necessary to make sure that this update
+			// doesn't get overridden by `Composite`'s internal logic, which picks
+			// an initial active item if one is not specifically set.
+			window.setTimeout( () => setActiveId?.( id ), 0 );
+		}
+	}, [ isSelected, setActiveId, activeId, id ] );
 
 	return (
 		<Composite.Item
@@ -83,9 +85,7 @@ export function Option( {
 	tooltipText,
 	...additionalProps
 }: OptionProps ) {
-	const { baseId, compositeStore } = useContext(
-		CircularOptionPickerContext
-	);
+	const { baseId, setActiveId } = useContext( CircularOptionPickerContext );
 	const id = useInstanceId(
 		Option,
 		baseId || 'components-circular-option-picker__option'
@@ -97,12 +97,9 @@ export function Option( {
 		...additionalProps,
 	};
 
-	const optionControl = compositeStore ? (
-		<OptionAsOption
-			{ ...commonProps }
-			compositeStore={ compositeStore }
-			isSelected={ isSelected }
-		/>
+	const isListbox = setActiveId !== undefined;
+	const optionControl = isListbox ? (
+		<OptionAsOption { ...commonProps } isSelected={ isSelected } />
 	) : (
 		<OptionAsButton { ...commonProps } isPressed={ isSelected } />
 	);

package/src/circular-option-picker/circular-option-picker.tsx

@@ -8,12 +8,13 @@ import clsx from 'clsx';
  */
 import { useInstanceId } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { CircularOptionPickerContext } from './circular-option-picker-context';
-import { Composite, useCompositeStore } from '../composite';
+import { Composite } from '../composite';
 import type {
 	CircularOptionPickerProps,
 	ListboxCircularOptionPickerProps,
@@ -85,24 +86,30 @@ function ListboxCircularOptionPicker(
 		...additionalProps
 	} = props;
 
-	const compositeStore = useCompositeStore( {
-		focusLoop: loop,
-		rtl: isRTL(),
-	} );
+	const [ activeId, setActiveId ] = useState< string | null | undefined >(
+		undefined
+	);
 
-	const compositeContext = {
-		baseId,
-		compositeStore,
-	};
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+			activeId,
+			setActiveId,
+		} ),
+		[ baseId, activeId, setActiveId ]
+	);
 
 	return (
 		<div className={ className }>
-			<CircularOptionPickerContext.Provider value={ compositeContext }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
 				<Composite
 					{ ...additionalProps }
 					id={ baseId }
-					store={ compositeStore }
+					focusLoop={ loop }
+					rtl={ isRTL() }
 					role="listbox"
+					activeId={ activeId }
+					setActiveId={ setActiveId }
 				>
 					{ options }
 				</Composite>
@@ -118,9 +125,16 @@ function ButtonsCircularOptionPicker(
 ) {
 	const { actions, options, children, baseId, ...additionalProps } = props;
 
+	const contextValue = useMemo(
+		() => ( {
+			baseId,
+		} ),
+		[ baseId ]
+	);
+
 	return (
 		<div { ...additionalProps } id={ baseId }>
-			<CircularOptionPickerContext.Provider value={ { baseId } }>
+			<CircularOptionPickerContext.Provider value={ contextValue }>
 				{ options }
 				{ children }
 				{ actions }

package/src/circular-option-picker/types.ts

@@ -14,7 +14,6 @@ import type { Icon } from '@wordpress/icons';
 import type { ButtonAsButtonProps } from '../button/types';
 import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../context';
-import type { Composite } from '../composite';
 
 type CommonCircularOptionPickerProps = {
 	/**
@@ -125,5 +124,6 @@ export type OptionProps = Omit<
 
 export type CircularOptionPickerContextProps = {
 	baseId?: string;
-	compositeStore?: React.ComponentProps< typeof Composite >[ 'store' ];
+	activeId?: string | null | undefined;
+	setActiveId?: ( newId: string | null | undefined ) => void;
 };

package/src/clipboard-button/index.tsx

@@ -32,21 +32,21 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	const timeoutId = useRef< NodeJS.Timeout >();
+	const timeoutIdRef = useRef< NodeJS.Timeout >();
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
-		if ( timeoutId.current ) {
-			clearTimeout( timeoutId.current );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
 		}
 
 		if ( onFinishCopy ) {
-			timeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );
+			timeoutIdRef.current = setTimeout( () => onFinishCopy(), TIMEOUT );
 		}
 	} );
 
 	useEffect( () => {
-		if ( timeoutId.current ) {
-			clearTimeout( timeoutId.current );
+		if ( timeoutIdRef.current ) {
+			clearTimeout( timeoutIdRef.current );
 		}
 	}, [] );
 

package/src/color-palette/test/utils.ts

@@ -26,18 +26,37 @@ describe( 'ColorPalette: Utils', () => {
 	} );
 
 	describe( 'normalizeColorValue', () => {
-		test( 'should return the value as is if the color value is not a CSS variable', () => {
+		test( 'should return the value if the value argument is not a CSS variable', () => {
 			const element = document.createElement( 'div' );
 			expect( normalizeColorValue( '#ff0000', element ) ).toBe(
 				'#ff0000'
 			);
 		} );
-		test( 'should return the background color computed from a element if the color value is a CSS variable', () => {
+		test( 'should return the background color computed from an element if the value argument is a CSS variable', () => {
 			const element = document.createElement( 'div' );
 			element.style.backgroundColor = '#ff0000';
 			expect( normalizeColorValue( 'var(--red)', element ) ).toBe(
 				'#ff0000'
 			);
 		} );
+		test( 'should return the background color computed from an element if the value argument is a color mix', () => {
+			const element = document.createElement( 'div' );
+			element.style.backgroundColor = '#ff0000';
+			expect(
+				normalizeColorValue(
+					'color-mix(in oklab, #a71e14, white)',
+					element
+				)
+			).toBe( '#ff0000' );
+		} );
+		test( 'should return the value if the value argument is undefined', () => {
+			const element = document.createElement( 'div' );
+			expect( normalizeColorValue( undefined, element ) ).toBe(
+				undefined
+			);
+		} );
+		test( 'should return the value if the element argument is null', () => {
+			expect( normalizeColorValue( '#ff0000', null ) ).toBe( '#ff0000' );
+		} );
 	} );
 } );

package/src/color-palette/utils.ts

@@ -92,9 +92,7 @@ export const normalizeColorValue = (
 	value: string | undefined,
 	element: HTMLElement | null
 ) => {
-	const valueIsSimpleColor = value ? isSimpleCSSColor( value ) : false;
-
-	if ( valueIsSimpleColor || element === null ) {
+	if ( ! value || ! element || isSimpleCSSColor( value ) ) {
 		return value;
 	}
 

package/src/color-picker/color-copy-button.tsx

@@ -17,7 +17,9 @@ import type { ColorCopyButtonProps } from './types';
 export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	const { color, colorType } = props;
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
+	const copyTimerRef = useRef<
+		ReturnType< typeof setTimeout > | undefined
+	>();
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {
@@ -34,21 +36,21 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 			}
 		},
 		() => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
+			if ( copyTimerRef.current ) {
+				clearTimeout( copyTimerRef.current );
 			}
 			setCopiedColor( color.toHex() );
-			copyTimer.current = setTimeout( () => {
+			copyTimerRef.current = setTimeout( () => {
 				setCopiedColor( null );
-				copyTimer.current = undefined;
+				copyTimerRef.current = undefined;
 			}, 3000 );
 		}
 	);
 	useEffect( () => {
-		// Clear copyTimer on component unmount.
+		// Clear copyTimerRef on component unmount.
 		return () => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
+			if ( copyTimerRef.current ) {
+				clearTimeout( copyTimerRef.current );
 			}
 		};
 	}, [] );

package/src/color-picker/hex-input.tsx

@@ -13,11 +13,10 @@ import { __ } from '@wordpress/i18n';
  */
 import { InputControl } from '../input-control';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 import type { HexInputProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {
@@ -48,14 +47,11 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	return (
 		<InputControl
 			prefix={
-				<Spacer
-					as={ Text }
-					marginLeft={ space( 4 ) }
-					color={ COLORS.theme.accent }
-					lineHeight={ 1 }
-				>
-					#
-				</Spacer>
+				<InputControlPrefixWrapper>
+					<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+						#
+					</Text>
+				</InputControlPrefixWrapper>
 			}
 			value={ color.toHex().slice( 1 ).toUpperCase() }
 			onChange={ handleChange }

package/src/color-picker/input-with-slider.tsx

@@ -3,11 +3,10 @@
  */
 import { HStack } from '../h-stack';
 import { Text } from '../text';
-import { Spacer } from '../spacer';
-import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
 
 export const InputWithSlider = ( {
 	min,
@@ -39,14 +38,11 @@ export const InputWithSlider = ( {
 				value={ value }
 				onChange={ onNumberControlChange }
 				prefix={
-					<Spacer
-						as={ Text }
-						paddingLeft={ space( 4 ) }
-						color={ COLORS.theme.accent }
-						lineHeight={ 1 }
-					>
-						{ abbreviation }
-					</Spacer>
+					<InputControlPrefixWrapper>
+						<Text color={ COLORS.theme.accent } lineHeight={ 1 }>
+							{ abbreviation }
+						</Text>
+					</InputControlPrefixWrapper>
 				}
 				spinControls="none"
 				size="__unstable-large"

package/src/color-picker/styles.ts

@@ -81,7 +81,7 @@ export const ColorfulWrapper = styled.div`
 	.react-colorful__alpha {
 		width: 184px;
 		height: 16px;
-		border-radius: 16px;
+		border-radius: ${ CONFIG.radiusFull };
 		margin-bottom: ${ space( 2 ) };
 	}
 

package/src/combobox-control/types.ts

@@ -31,6 +31,7 @@ export type ComboboxControlProps = Pick<
 	 *
 	 * @default false
 	 * @deprecated
+	 * @ignore
 	 */
 	__next36pxDefaultSize?: boolean;
 	/**

package/src/composite/README.md

@@ -1,18 +1,13 @@
 # `Composite`
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Composite` provides a single tab stop on the page and allows navigation through the focusable descendants with arrow keys. This abstract component is based on the [WAI-ARIA Composite Role⁠](https://w3c.github.io/aria/#composite).
 
 ## Usage
 
 ```jsx
-import { Composite, useCompositeStore } from '@wordpress/components';
+import { Composite } from '@wordpress/components';
 
-const store = useCompositeStore();
-<Composite store={store}>
+<Composite>
   <Composite.Group>
     <Composite.GroupLabel>Label</Composite.GroupLabel>
     <Composite.Item>Item 1</Composite.Item>
@@ -21,11 +16,11 @@ const store = useCompositeStore();
 </Composite>
 ```
 
-## Hooks
+## Components
 
-### `useCompositeStore`
+### `Composite`
 
-Creates a composite store.
+Renders a composite widget.
 
 #### Props
 
@@ -131,20 +126,6 @@ This only affects the composite widget behavior. You still need to set `dir="rtl
 -   Required: no
 -   Default: `false`
 
-## Components
-
-### `Composite`
-
-Renders a composite widget.
-
-#### Props
-
-##### `store`: `CompositeStore<CompositeStoreItem>`
-
-Object returned by the `useCompositeStore` hook.
-
--   Required: yes
-
 ##### `render`: `RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>>`
 
 Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.

package/src/composite/{context.ts → context.tsx}

@@ -8,7 +8,6 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import type { CompositeContextProps } from './types';
 
-export const CompositeContext =
-	createContext< CompositeContextProps >( undefined );
+export const CompositeContext = createContext< CompositeContextProps >( {} );
 
 export const useCompositeContext = () => useContext( CompositeContext );

package/src/composite/group-label.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeGroupLabelProps } from './types';
+
+export const CompositeGroupLabel = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupLabelProps, 'div', false >
+>( function CompositeGroupLabel( props, ref ) {
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeGroupLabel
+			store={ context.store as Ariakit.CompositeStore }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+} );

package/src/composite/group.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeGroupProps } from './types';
+
+export const CompositeGroup = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeGroupProps, 'div', false >
+>( function CompositeGroup( props, ref ) {
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeGroup
+			store={ context.store as Ariakit.CompositeStore }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+} );

package/src/composite/hover.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../context';
+import { useCompositeContext } from './context';
+import type { CompositeHoverProps } from './types';
+
+export const CompositeHover = forwardRef<
+	HTMLDivElement,
+	WordPressComponentProps< CompositeHoverProps, 'div', false >
+>( function CompositeHover( props, ref ) {
+	const context = useCompositeContext();
+	return (
+		<Ariakit.CompositeHover
+			store={ context.store as Ariakit.CompositeStore }
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+} );