@wordpress/components 32.1.1-next.v.0 → 32.2.0

package/src/private-apis.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { useDrag } from '@use-gesture/react';
+
 /**
  * Internal dependencies
  */
@@ -9,6 +14,8 @@ import { Tabs } from './tabs';
 import { kebabCase, normalizeTextString } from './utils/strings';
 import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
+import Avatar from './avatar';
+import AvatarGroup from './avatar-group';
 import Badge from './badge';
 
 import { DateCalendar, DateRangeCalendar, TZDate } from './calendar';
@@ -25,11 +32,12 @@ import {
 	ValidatedToggleGroupControl,
 } from './validated-form-controls';
 import { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';
-import { Picker } from './color-picker/picker';
 
 export const privateApis = {};
 lock( privateApis, {
 	__experimentalPopoverLegacyPositionToPlacement,
+	Avatar,
+	AvatarGroup,
 	ComponentsContext,
 	Tabs,
 	Theme,
@@ -41,7 +49,7 @@ lock( privateApis, {
 	DateCalendar,
 	DateRangeCalendar,
 	TZDate,
-	Picker,
+	useDrag,
 	ValidatedInputControl,
 	ValidatedCheckboxControl,
 	ValidatedComboboxControl,

package/src/progress-bar/stories/index.story.tsx

@@ -20,6 +20,10 @@ const meta: Meta< typeof ProgressBar > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/query-controls/stories/index.story.tsx

@@ -40,6 +40,10 @@ const meta: Meta< typeof QueryControls > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'editor',
+		},
 	},
 };
 export default meta;

package/src/radio-control/stories/index.story.tsx

@@ -36,6 +36,11 @@ const meta: Meta< typeof RadioControl > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `RadioGroupControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/radio-control/test/index.tsx

@@ -238,7 +238,8 @@ describe.each( [
 					name: defaultProps.options[ 1 ].label,
 				} )
 			).toHaveFocus();
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 1 ].value
 			);
@@ -253,8 +254,8 @@ describe.each( [
 					name: defaultProps.options[ 0 ].label,
 				} )
 			).toHaveFocus();
-			// TODO: why called twice for every interaction?
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 6 );
+
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 0 ].value
 			);
@@ -268,7 +269,7 @@ describe.each( [
 				} )
 			).toHaveFocus();
 
-			expect( onChangeSpy ).toHaveBeenCalledTimes( 8 );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 4 );
 			expect( onChangeSpy ).toHaveBeenLastCalledWith(
 				defaultProps.options[ 2 ].value
 			);

package/src/range-control/index.tsx

@@ -122,7 +122,7 @@ function UnforwardedRangeControl(
 	const [ showTooltip, setShowTooltip ] = useState( hasTooltip );
 	const [ isFocused, setIsFocused ] = useState( false );
 
-	const inputRef = useRef< HTMLInputElement >();
+	const inputRef = useRef< HTMLInputElement >( null );
 	const isCurrentlyFocused = inputRef.current?.matches( ':focus' );
 	const isThumbFocused = ! disabled && isFocused;
 

package/src/range-control/stories/index.story.tsx

@@ -57,6 +57,11 @@ const meta: Meta< typeof RangeControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SliderControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/range-control/styles/range-control-styles.ts

@@ -78,17 +78,18 @@ export const AfterIconWrapper = styled.span`
 `;
 
 const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
-	let background = railColor || '';
-
-	if ( disabled ) {
-		background = COLORS.ui.backgroundDisabled;
-	}
+	return css`
+		background: ${ disabled
+			? COLORS.ui.backgroundDisabled
+			: railColor || COLORS.theme.gray[ 300 ] };
 
-	return css( { background } );
+		@media ( forced-colors: active ) {
+			background: GrayText;
+		}
+	`;
 };
 
 export const Rail = styled.span`
-	background-color: ${ COLORS.gray[ 300 ] };
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -103,17 +104,18 @@ export const Rail = styled.span`
 `;
 
 const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
-	let background = trackColor || 'currentColor';
-
-	if ( disabled ) {
-		background = COLORS.gray[ 400 ];
-	}
+	return css`
+		background: ${ disabled
+			? COLORS.theme.gray[ 400 ]
+			: trackColor || 'currentColor' };
 
-	return css( { background } );
+		@media ( forced-colors: active ) {
+			background: ${ disabled ? 'GrayText' : 'CanvasText' };
+		}
+	`;
 };
 
 export const Track = styled.span`
-	background-color: currentColor;
 	border-radius: ${ CONFIG.radiusFull };
 	height: ${ railHeight }px;
 	pointer-events: none;
@@ -153,12 +155,12 @@ export const Mark = styled.span`
 
 const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 	return css( {
-		color: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],
+		color: isFilled ? COLORS.theme.gray[ 700 ] : COLORS.theme.gray[ 300 ],
 	} );
 };
 
 export const MarkLabel = styled.span`
-	color: ${ COLORS.gray[ 300 ] };
+	color: ${ COLORS.theme.gray[ 300 ] };
 	font-size: 11px;
 	position: absolute;
 	top: 8px;
@@ -173,14 +175,17 @@ export const MarkLabel = styled.span`
 	${ markLabelFill };
 `;
 
-const thumbColor = ( { disabled }: ThumbProps ) =>
-	disabled
-		? css`
-				background-color: ${ COLORS.gray[ 400 ] };
-		  `
-		: css`
-				background-color: ${ COLORS.theme.accent };
-		  `;
+const thumbColor = ( { disabled }: ThumbProps ) => {
+	return css`
+		background: ${ disabled
+			? COLORS.theme.gray[ 400 ]
+			: COLORS.theme.accent };
+
+		@media ( forced-colors: active ) {
+			background: ${ disabled ? 'GrayText' : 'CanvasText' };
+		}
+	`;
+};
 
 export const ThumbWrapper = styled.span`
 	align-items: center;
@@ -224,6 +229,10 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 					width: ${ thumbSize + 8 }px;
 					top: -4px;
 					left: -4px;
+
+					@media ( forced-colors: active ) {
+						background: GrayText;
+					}
 				}
 		  `
 		: '';

package/src/range-control/types.ts

@@ -5,7 +5,7 @@ import type {
 	CSSProperties,
 	FocusEventHandler,
 	MouseEventHandler,
-	MutableRefObject,
+	RefObject,
 } from 'react';
 
 /**
@@ -267,7 +267,7 @@ export type ThumbProps = {
 export type TooltipProps = {
 	show?: boolean;
 	placement?: string;
-	inputRef?: MutableRefObject< HTMLElement | undefined >;
+	inputRef?: RefObject< HTMLElement | null >;
 	tooltipPlacement?: string;
 	value?: ControlledRangeValue;
 	renderTooltipContent?: (

package/src/resizable-box/index.tsx

@@ -104,7 +104,7 @@ function UnforwardedResizableBox(
 		...props
 	}: ResizableBoxProps,
 	ref: ForwardedRef< Resizable >
-): JSX.Element {
+) {
 	return (
 		<Resizable
 			className={ clsx(

package/src/resizable-box/resize-tooltip/index.tsx

@@ -46,7 +46,7 @@ function ResizeTooltip(
 		...props
 	}: ResizeTooltipProps,
 	ref: ForwardedRef< HTMLDivElement >
-): JSX.Element | null {
+) {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
 		fadeTimeout,

package/src/resizable-box/resize-tooltip/label.tsx

@@ -35,7 +35,7 @@ type LabelProps = React.DetailedHTMLProps<
 function Label(
 	{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,
 	ref: ForwardedRef< HTMLDivElement >
-): JSX.Element | null {
+) {
 	const showLabel = !! label;
 
 	const isBottom = position === POSITIONS.bottom;

package/src/resizable-box/resize-tooltip/utils.ts

@@ -19,7 +19,7 @@ interface UseResizeLabelProps {
 	/** The label value. */
 	label?: string;
 	/** Element to be rendered for resize listening events. */
-	resizeListener: JSX.Element;
+	resizeListener: React.JSX.Element;
 }
 
 interface UseResizeLabelArgs {
@@ -82,7 +82,7 @@ export function useResizeLabel( {
 	 * This timeout is used with setMoveX and setMoveY to determine of
 	 * both width and height values have changed at (roughly) the same time.
 	 */
-	const moveTimeoutRef = useRef< number >();
+	const moveTimeoutRef = useRef< number >( undefined );
 
 	const debounceUnsetMoveXY = useCallback( () => {
 		const unsetMoveXY = () => {

package/src/resizable-box/stories/index.story.tsx

@@ -25,6 +25,10 @@ const meta: Meta< typeof ResizableBox > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/responsive-wrapper/stories/index.story.tsx

@@ -18,6 +18,11 @@ const meta: Meta< typeof ResponsiveWrapper > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/sandbox/index.tsx

@@ -134,7 +134,7 @@ function SandBox( {
 	onFocus,
 	tabIndex,
 }: SandBoxProps ) {
-	const ref = useRef< HTMLIFrameElement >();
+	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
 	const [ height, setHeight ] = useState( 0 );
 

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

@@ -22,6 +22,10 @@ const meta: Meta< typeof SandBox > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/scroll-lock/stories/index.story.tsx

@@ -22,6 +22,10 @@ const meta: Meta< typeof ScrollLock > = {
 	parameters: {
 		controls: { hideNoControlsWarning: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -31,6 +31,11 @@ const meta: Meta< typeof Scrollable > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

package/src/search-control/stories/index.story.tsx

@@ -24,6 +24,11 @@ const meta: Meta< typeof SearchControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SearchControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

package/src/search-control/types.ts

@@ -72,5 +72,5 @@ export type SuffixItemProps = Pick<
 	SearchControlProps,
 	'value' | 'onChange' | 'onClose'
 > & {
-	searchRef: React.RefObject< HTMLInputElement >;
+	searchRef: React.RefObject< HTMLInputElement | null >;
 };

package/src/select-control/stories/index.story.tsx

@@ -32,6 +32,11 @@ const meta: Meta< typeof SelectControl > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+			notes: 'Will be superseded by `SelectControl` in `@wordpress/ui`, but continue using for now.',
+		},
 	},
 };
 export default meta;

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

@@ -17,6 +17,10 @@ const meta: Meta< typeof Shortcut > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/slot-fill/index.tsx

@@ -64,9 +64,18 @@ export function createSlotFill( key: SlotKey ) {
 	);
 	FillComponent.displayName = `${ baseName }Fill`;
 
-	const SlotComponent = (
-		props: DistributiveOmit< SlotComponentProps, 'name' >
-	) => <Slot name={ key } { ...props } />;
+	// Wrap SlotComponent with forwardRef to support ref forwarding
+	const SlotComponent = forwardRef(
+		(
+			props: DistributiveOmit< SlotComponentProps, 'name' >,
+			ref: ForwardedRef< any >
+		) => <Slot name={ key } ref={ ref } { ...props } />
+	) as React.ForwardRefExoticComponent<
+		DistributiveOmit< SlotComponentProps, 'name' > &
+			React.RefAttributes< any >
+	> & {
+		__unstableName: SlotKey;
+	};
 	SlotComponent.displayName = `${ baseName }Slot`;
 	/**
 	 * @deprecated 6.8.0

package/src/slot-fill/stories/index.story.tsx

@@ -26,6 +26,10 @@ const meta: Meta< typeof Slot > = {
 	parameters: {
 		controls: { expanded: true },
 		docs: { source: { state: 'open' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 

package/src/slot-fill/test/__snapshots__/slot.js.snap

@@ -43,14 +43,14 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
     data-position="first"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     />
   </div>
   <div
     data-position="second"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     >
       Content
     </div>
@@ -67,7 +67,7 @@ exports[`Slot bubblesVirtually true should subsume another slot by the same name
     data-position="second"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     >
       Content
     </div>
@@ -208,7 +208,7 @@ exports[`Slot should warn without a Provider 1`] = `
 <div>
   <div>
     <div
-      class="emotion-0 emotion-1"
+      class="css-1ragr82-PolymorphicDiv emotion-0"
     />
   </div>
 </div>

package/src/slot-fill/test/index.js

@@ -3,6 +3,11 @@
  */
 import { render, screen, within } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { createRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -82,4 +87,37 @@ describe( 'createSlotFill', () => {
 			within( pageSidebar ).queryByText( 'Post Section' )
 		).not.toBeInTheDocument();
 	} );
+
+	test( 'should forward ref to the slot when using bubblesVirtually', () => {
+		const TestSlotFill = createSlotFill( 'TestRefSlot' );
+		const ref = createRef();
+
+		render(
+			<SlotFillProvider>
+				<TestSlotFill.Fill>
+					<p>Content</p>
+				</TestSlotFill.Fill>
+				<TestSlotFill.Slot bubblesVirtually ref={ ref } />
+			</SlotFillProvider>
+		);
+
+		expect( ref.current ).not.toBeNull();
+		expect( ref.current.tagName ).toBe( 'DIV' );
+	} );
+
+	test( 'should forward ref without bubblesVirtually (ref stays null for fragment-based slot)', () => {
+		const TestSlotFill = createSlotFill( 'TestRefSlotBase' );
+		const ref = createRef();
+
+		render(
+			<SlotFillProvider>
+				<TestSlotFill.Fill>
+					<p>Content</p>
+				</TestSlotFill.Fill>
+				<TestSlotFill.Slot ref={ ref } />
+			</SlotFillProvider>
+		);
+
+		expect( ref.current ).toBeNull();
+	} );
 } );

package/src/slot-fill/types.ts

@@ -113,7 +113,7 @@ export type SlotFillProviderProps = {
 };
 
 export type SlotFillInstance = {};
-export type SlotRef = RefObject< HTMLElement >;
+export type SlotRef = RefObject< HTMLElement | null >;
 export type SlotRecord = { instance: SlotFillInstance } & (
 	| { type: 'children' }
 	| { type: 'portal'; ref: SlotRef; fillProps: FillProps }

package/src/snackbar/list.tsx

@@ -66,7 +66,7 @@ export function SnackbarList( {
 	children,
 	onRemove,
 }: WordPressComponentProps< SnackbarListProps, 'div' > ) {
-	const listRef = useRef< HTMLDivElement | null >( null );
+	const listRef = useRef< HTMLDivElement >( null );
 	const isReducedMotion = useReducedMotion();
 	className = clsx( 'components-snackbar-list', className );
 	const removeNotice =

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

@@ -37,6 +37,10 @@ const meta: Meta< typeof Snackbar > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

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

@@ -45,6 +45,11 @@ const meta: Meta< typeof Spacer > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;

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

@@ -18,6 +18,10 @@ const meta: Meta< typeof Spinner > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'stable',
+			whereUsed: 'global',
+		},
 	},
 };
 export default meta;

package/src/style.scss

@@ -1,6 +1,8 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "./animate/style.scss" as *;
 @use "./autocomplete/style.scss" as *;
+@use "./avatar/styles.scss" as *;
+@use "./avatar-group/styles.scss" as *;
 @use "./badge/styles.scss" as *;
 @use "./button-group/style.scss" as *;
 @use "./button/style.scss" as *;

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

@@ -22,6 +22,11 @@ const meta: Meta< typeof Surface > = {
 			expanded: true,
 		},
 		docs: { canvas: { sourceState: 'shown' } },
+		componentStatus: {
+			status: 'not-recommended',
+			whereUsed: 'global',
+			notes: 'Planned for deprecation.',
+		},
 	},
 };
 export default meta;