@wordpress/components 32.2.1-next.v.202602111440.0 → 32.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.2.1-next.v.202602111440.0+a307a2e35",
+	"version": "32.2.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -51,7 +51,7 @@
 		"src/**/*.scss"
 	],
 	"dependencies": {
-		"@ariakit/react": "^0.4.15",
+		"@ariakit/react": "^0.4.21",
 		"@date-fns/utc": "^2.1.1",
 		"@emotion/cache": "^11.14.0",
 		"@emotion/css": "^11.13.5",
@@ -64,24 +64,24 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/base-styles": "^6.15.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/compose": "^7.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/date": "^5.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/deprecated": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/dom": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/element": "^6.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/escape-html": "^3.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/hooks": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/html-entities": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/i18n": "^6.12.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/icons": "^11.6.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/is-shallow-equal": "^5.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/keycodes": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/primitives": "^4.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/private-apis": "^1.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/rich-text": "^7.39.1-next.v.202602111440.0+a307a2e35",
-		"@wordpress/warning": "^3.39.1-next.v.202602111440.0+a307a2e35",
+		"@wordpress/a11y": "^4.40.1",
+		"@wordpress/base-styles": "^6.16.1",
+		"@wordpress/compose": "^7.40.1",
+		"@wordpress/date": "^5.40.1",
+		"@wordpress/deprecated": "^4.40.1",
+		"@wordpress/dom": "^4.40.1",
+		"@wordpress/element": "^6.40.1",
+		"@wordpress/escape-html": "^3.40.1",
+		"@wordpress/hooks": "^4.40.1",
+		"@wordpress/html-entities": "^4.40.1",
+		"@wordpress/i18n": "^6.13.1",
+		"@wordpress/icons": "^11.7.1",
+		"@wordpress/is-shallow-equal": "^5.40.1",
+		"@wordpress/keycodes": "^4.40.1",
+		"@wordpress/primitives": "^4.40.1",
+		"@wordpress/private-apis": "^1.40.1",
+		"@wordpress/rich-text": "^7.40.1",
+		"@wordpress/warning": "^3.40.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -102,12 +102,12 @@
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
-		"@ariakit/test": "^0.4.7",
+		"@ariakit/test": "^0.4.13",
 		"@storybook/addon-docs": "^10.1.11",
 		"@storybook/react-vite": "^10.1.11",
-		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.39.1-next.v.202602111440.0+a307a2e35",
+		"@wordpress/jest-console": "^8.40.1",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e0a2324a9690e55f4101d61113f4bbbf240b55ed"
+	"gitHead": "adb6623c9f32490cfc73c7ac7f122578c1f10c65"
 }

package/src/alignment-matrix-control/test/index.tsx

@@ -18,7 +18,7 @@ const getCell = ( name: string ) => {
 };
 
 const renderAndInitCompositeStore = async (
-	jsx: JSX.Element,
+	jsx: React.JSX.Element,
 	focusedCell = 'center center'
 ) => {
 	const view = render( jsx );

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

@@ -29,11 +29,12 @@ function AngleCircle( {
 	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
-	const angleCircleRef = useRef< HTMLDivElement | null >( null );
-	const angleCircleCenterRef = useRef<
-		{ x: number; y: number } | undefined
-	>();
-	const previousCursorValueRef = useRef< CSSStyleDeclaration[ 'cursor' ] >();
+	const angleCircleRef = useRef< HTMLDivElement >( null );
+	const angleCircleCenterRef = useRef< { x: number; y: number } >(
+		undefined
+	);
+	const previousCursorValueRef =
+		useRef< CSSStyleDeclaration[ 'cursor' ] >( undefined );
 
 	const setAngleCircleCenter = () => {
 		if ( angleCircleRef.current === null ) {

package/src/animate/types.ts

@@ -28,5 +28,5 @@ type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
 	: never;
 
 export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
-	children: ( props: { className?: string } ) => JSX.Element;
+	children: ( props: { className?: string } ) => React.JSX.Element;
 };

package/src/autocomplete/autocompleter-ui.tsx

@@ -216,7 +216,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 }
 
 function useOnClickOutside(
-	ref: React.RefObject< HTMLElement >,
+	ref: React.RefObject< HTMLElement | null >,
 	handler: AutocompleterUIProps[ 'reset' ]
 ) {
 	useEffect( () => {

package/src/autocomplete/index.tsx

@@ -66,7 +66,7 @@ export function useAutocomplete( {
 		null
 	);
 	const [ AutocompleterUI, setAutocompleterUI ] = useState<
-		( ( props: AutocompleterUIProps ) => JSX.Element | null ) | null
+		( ( props: AutocompleterUIProps ) => React.JSX.Element | null ) | null
 	>( null );
 
 	const backspacingRef = useRef( false );
@@ -393,22 +393,47 @@ export function useAutocomplete( {
 	};
 }
 
-function useLastDifferentValue( value: UseAutocompleteProps[ 'record' ] ) {
-	const history = useRef< Set< typeof value > >( new Set() );
+/**
+ * Checks whether two records represent the same user-visible state
+ * (same text content and cursor position).
+ */
+function recordValuesMatch(
+	a: UseAutocompleteProps[ 'record' ],
+	b: UseAutocompleteProps[ 'record' ]
+) {
+	return a.text === b.text && a.start === b.start && a.end === b.end;
+}
 
-	history.current.add( value );
+/**
+ * Tracks the last record whose value differed from the current one.
+ * Used to determine whether the user has actually typed something
+ */
+export function useLastDifferentValue(
+	value: UseAutocompleteProps[ 'record' ]
+) {
+	const history = useRef< Array< typeof value > >( [] );
+
+	const lastEntry = history.current[ history.current.length - 1 ];
+
+	// Only add to history if the value is meaningfully different from
+	// the most recent entry (analogous to Set.add being a no-op for
+	// duplicate references in the original implementation).
+	if ( ! lastEntry || ! recordValuesMatch( value, lastEntry ) ) {
+		history.current.push( value );
+	}
 
 	// Keep the history size to 2.
-	if ( history.current.size > 2 ) {
-		history.current.delete( Array.from( history.current )[ 0 ] );
+	if ( history.current.length > 2 ) {
+		history.current.shift();
 	}
 
-	return Array.from( history.current )[ 0 ];
+	return history.current[ 0 ];
 }
 
 export function useAutocompleteProps( options: UseAutocompleteProps ) {
 	const ref = useRef< HTMLElement >( null );
-	const onKeyDownRef = useRef< ( event: KeyboardEvent ) => void >();
+	const onKeyDownRef =
+		useRef< ( event: KeyboardEvent ) => void >( undefined );
 	const { record } = options;
 	const previousRecord = useLastDifferentValue( record );
 	const { popover, listBoxId, activeId, onKeyDown } = useAutocomplete( {

package/src/autocomplete/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen } from '@testing-library/react';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -13,9 +13,118 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { getAutoCompleterUI } from '../autocompleter-ui';
+import { useLastDifferentValue } from '..';
 
 type FruitOption = { visual: string; name: string; id: number };
 
+function makeRecord( text: string ) {
+	return {
+		text,
+		formats: [],
+		replacements: [],
+		start: text.length,
+		end: text.length,
+	};
+}
+
+describe( 'useLastDifferentValue', () => {
+	it( 'should return the current record on first render', () => {
+		const record = makeRecord( 'Hello' );
+		const { result } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record } }
+		);
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should return the previous record when text changes', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should not update when re-rendered with a new reference but same text', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// RESET_BLOCKS creates a new record object with the same text.
+		const record3 = makeRecord( 'Hello/' );
+		rerender( { value: record3 } );
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should survive multiple same-text re-renders', () => {
+		const record1 = makeRecord( 'Hello' );
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: record1 } }
+		);
+
+		// User types "/"
+		const record2 = makeRecord( 'Hello/' );
+		rerender( { value: record2 } );
+
+		// Multiple syncs, each producing new references with the same text.
+		for ( let i = 0; i < 5; i++ ) {
+			rerender( { value: makeRecord( 'Hello/' ) } );
+		}
+
+		expect( result.current.text ).toBe( 'Hello' );
+	} );
+
+	it( 'should track consecutive text changes correctly', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'A' ) } }
+		);
+
+		rerender( { value: makeRecord( 'AB' ) } );
+		expect( result.current.text ).toBe( 'A' );
+
+		rerender( { value: makeRecord( 'ABC' ) } );
+		expect( result.current.text ).toBe( 'AB' );
+
+		rerender( { value: makeRecord( 'ABCD' ) } );
+		expect( result.current.text ).toBe( 'ABC' );
+	} );
+
+	it( 'should update when cursor position changes without text change', () => {
+		const { result, rerender } = renderHook(
+			( { value } ) => useLastDifferentValue( value ),
+			{ initialProps: { value: makeRecord( 'Hello' ) } }
+		);
+
+		// User types "/"
+		rerender( { value: makeRecord( 'Hello/' ) } );
+		expect( result.current.text ).toBe( 'Hello' );
+
+		// User moves cursor left (same text, different position).
+		rerender( {
+			value: { ...makeRecord( 'Hello/' ), start: 0, end: 0 },
+		} );
+
+		// The returned record should now match the current text,
+		// so that didUserInput evaluates to false.
+		expect( result.current.text ).toBe( 'Hello/' );
+	} );
+} );
+
 describe( 'AutocompleterUI', () => {
 	describe( 'click outside behavior', () => {
 		it( 'should call reset function when a click on another element occurs', async () => {

package/src/autocomplete/types.ts

@@ -106,7 +106,7 @@ export type WPCompleter< TCompleterOption = any > = {
 	className?: string;
 };
 
-type ContentRef = React.RefObject< HTMLElement >;
+type ContentRef = React.RefObject< HTMLElement | null >;
 
 export type AutocompleterUIProps = {
 	/**

package/src/button/style.scss

@@ -48,11 +48,6 @@
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
-	// Windows High Contrast mode will show this outline, but not the box-shadow.
-	&:focus {
-		outline: 3px solid transparent;
-	}
-
 	/**
 	 * Primary button style.
 	 */
@@ -276,6 +271,14 @@
 		}
 	}
 
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	// This rule is placed after variant outline declarations (e.g. is-primary,
+	// is-secondary, is-tertiary) to ensure it wins by source order at the same
+	// specificity, while not using `:not(:active)` to avoid outline flicker.
+	&:focus {
+		outline: 3px solid transparent;
+	}
+
 	&:not(:disabled, [aria-disabled="true"]):active {
 		color: $components-color-foreground;
 	}

package/src/calendar/style.scss

@@ -4,7 +4,8 @@
 
 /* Root of the component. */
 // Internal variables
-$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
+$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus)
+	solid $components-color-accent;
 $wp-components-calendar-button-height: $grid-unit-40;
 $wp-components-calendar-button-width: $grid-unit-40;
 $wp-components-calendar-nav-height: $grid-unit-40;
@@ -39,7 +40,8 @@ $wp-components-calendar-preview-border-color: color-mix(in srgb, $components-col
 	// date follows the same color as the button's text, since the button
 	// inherits its text color.
 	&:has(.components-calendar__day-button:disabled) {
-		color: $components-color-disabled;
+		// Use a lighter shade of gray for less visual prominence.
+		color: $components-color-gray-400;
 	}
 	&:has(.components-calendar__day-button:hover:not(:disabled)),
 	&:has(.components-calendar__day-button:focus-visible) {

package/src/clipboard-button/index.tsx

@@ -32,7 +32,7 @@ export default function ClipboardButton( {
 		alternative: 'wp.compose.useCopyToClipboard',
 	} );
 
-	const timeoutIdRef = useRef< NodeJS.Timeout >();
+	const timeoutIdRef = useRef< NodeJS.Timeout >( undefined );
 	const ref = useCopyToClipboard( text, () => {
 		onCopy();
 		if ( timeoutIdRef.current ) {

package/src/color-palette/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 /**
  * WordPress dependencies
@@ -33,11 +33,13 @@ const meta: Meta< typeof ColorPalette > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof ColorPalette > = ( {
+type ColorPaletteStory = StoryObj< typeof ColorPalette >;
+
+const Template = ( {
 	onChange,
 	value,
 	...args
-} ) => {
+}: React.ComponentProps< typeof ColorPalette > ) => {
 	const [ color, setColor ] = useState< string | undefined >( value );
 
 	return (
@@ -52,49 +54,55 @@ const Template: StoryFn< typeof ColorPalette > = ( {
 	);
 };
 
-export const Default = Template.bind( {} );
-Default.args = {
-	colors: [
-		{ name: 'Red', color: '#f00' },
-		{ name: 'White', color: '#fff' },
-		{ name: 'Blue', color: '#00f' },
-	],
+export const Default: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{ name: 'Red', color: '#f00' },
+			{ name: 'White', color: '#fff' },
+			{ name: 'Blue', color: '#00f' },
+		],
+	},
 };
 
-export const InitialValue = Template.bind( {} );
-InitialValue.args = {
-	colors: [
-		{ name: 'Red', color: '#f00' },
-		{ name: 'White', color: '#fff' },
-		{ name: 'Blue', color: '#00f' },
-	],
-	value: '#00f',
+export const InitialValue: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{ name: 'Red', color: '#f00' },
+			{ name: 'White', color: '#fff' },
+			{ name: 'Blue', color: '#00f' },
+		],
+		value: '#00f',
+	},
 };
 
-export const MultipleOrigins = Template.bind( {} );
-MultipleOrigins.args = {
-	colors: [
-		{
-			name: 'Primary colors',
-			colors: [
-				{ name: 'Red', color: '#f00' },
-				{ name: 'Yellow', color: '#ff0' },
-				{ name: 'Blue', color: '#00f' },
-			],
-		},
-		{
-			name: 'Secondary colors',
-			colors: [
-				{ name: 'Orange', color: '#f60' },
-				{ name: 'Green', color: '#0f0' },
-				{ name: 'Purple', color: '#60f' },
-			],
-		},
-	],
+export const MultipleOrigins: ColorPaletteStory = {
+	render: Template,
+	args: {
+		colors: [
+			{
+				name: 'Primary colors',
+				colors: [
+					{ name: 'Red', color: '#f00' },
+					{ name: 'Yellow', color: '#ff0' },
+					{ name: 'Blue', color: '#00f' },
+				],
+			},
+			{
+				name: 'Secondary colors',
+				colors: [
+					{ name: 'Orange', color: '#f60' },
+					{ name: 'Green', color: '#0f0' },
+					{ name: 'Purple', color: '#60f' },
+				],
+			},
+		],
+	},
 };
 
-export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
-	return (
+export const CSSVariables: ColorPaletteStory = {
+	render: ( args ) => (
 		<div
 			style={ {
 				'--red': '#f00',
@@ -104,12 +112,12 @@ export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 		>
 			<Template { ...args } />
 		</div>
-	);
-};
-CSSVariables.args = {
-	colors: [
-		{ name: 'Red', color: 'var(--red)' },
-		{ name: 'Yellow', color: 'var(--yellow)' },
-		{ name: 'Blue', color: 'var(--blue)' },
-	],
+	),
+	args: {
+		colors: [
+			{ name: 'Red', color: 'var(--red)' },
+			{ name: 'Yellow', color: 'var(--yellow)' },
+			{ name: 'Blue', color: 'var(--blue)' },
+		],
+	},
 };

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

@@ -17,9 +17,7 @@ import type { ColorCopyButtonProps } from './types';
 export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 	const { color, colorType } = props;
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimerRef = useRef<
-		ReturnType< typeof setTimeout > | undefined
-	>();
+	const copyTimerRef = useRef< ReturnType< typeof setTimeout > >( undefined );
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {

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

@@ -239,7 +239,7 @@ const Fill = ( { children }: { children: React.ReactNode } ) => {
 
 				// Render all context providers forwarded by the Slot via fillProps.
 				return forwardedContext.reduce(
-					( inner: JSX.Element, [ Provider, props ] ) => (
+					( inner: React.JSX.Element, [ Provider, props ] ) => (
 						<Provider { ...props }>{ inner }</Provider>
 					),
 					innerMarkup

package/src/confirm-dialog/component.tsx

@@ -35,8 +35,8 @@ const UnconnectedConfirmDialog = (
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
-	const cancelButtonRef = useRef();
-	const confirmButtonRef = useRef();
+	const cancelButtonRef = useRef< HTMLButtonElement >( null );
+	const confirmButtonRef = useRef< HTMLButtonElement >( null );
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();

package/src/context/context-connect.ts

@@ -34,7 +34,7 @@ type ContextConnectOptions = {
  * @return The connected WordPressComponent
  */
 export function contextConnect<
-	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
+	C extends ( props: any, ref: ForwardedRef< any > ) => ReactNode,
 >(
 	Component: C &
 		AcceptsTwoArgs<
@@ -55,7 +55,7 @@ export function contextConnect<
  * @return The connected WordPressComponent
  */
 export function contextConnectWithoutRef< P >(
-	Component: ( props: P ) => JSX.Element | null,
+	Component: ( props: P ) => ReactNode,
 	namespace: string
 ) {
 	return _contextConnect( Component, namespace );
@@ -65,7 +65,7 @@ export function contextConnectWithoutRef< P >(
 // The hope is that we can improve render performance by removing functional
 // component wrappers.
 function _contextConnect<
-	C extends ( props: any, ref: ForwardedRef< any > ) => JSX.Element | null,
+	C extends ( props: any, ref: ForwardedRef< any > ) => ReactNode,
 	O extends ContextConnectOptions,
 >(
 	Component: C,

package/src/context/context-system-provider.js

@@ -89,10 +89,10 @@ function useContextSystemBridge( { value } ) {
  * ```
  *
  * @template {Record<string, any>} T
- * @param {Object}                    options
- * @param {import('react').ReactNode} options.children Children to render.
- * @param {T}                         options.value    Props to render into connected components.
- * @return {JSX.Element} A Provider wrapped component.
+ * @param {Object}          options
+ * @param {React.ReactNode} options.children Children to render.
+ * @param {T}               options.value    Props to render into connected components.
+ * @return {React.JSX.Element} A Provider wrapped component.
  */
 const BaseContextSystemProvider = ( { children, value } ) => {
 	const contextValue = useContextSystemBridge( { value } );

package/src/context/wordpress-component.ts

@@ -24,7 +24,7 @@ export type WordPressComponentProps<
 	( IsPolymorphic extends true
 		? {
 				/** The HTML element or React component to render the component as. */
-				as?: T | keyof JSX.IntrinsicElements;
+				as?: T | keyof React.JSX.IntrinsicElements;
 		  }
 		: {} );
 
@@ -36,10 +36,8 @@ export type WordPressComponent<
 	< TT extends React.ElementType >(
 		props: WordPressComponentProps< O, TT, IsPolymorphic > &
 			( IsPolymorphic extends true ? { as: TT } : {} )
-	): JSX.Element | null;
-	(
-		props: WordPressComponentProps< O, T, IsPolymorphic >
-	): JSX.Element | null;
+	): React.ReactNode;
+	( props: WordPressComponentProps< O, T, IsPolymorphic > ): React.ReactNode;
 	displayName?: string;
 	/**
 	 * A CSS selector used to fake component interpolation in styled components

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -129,7 +129,8 @@ function ControlPoints( {
 	onStopControlPointChange,
 	__experimentalIsRenderedInSidebar,
 }: ControlPointsProps ) {
-	const controlPointMoveStateRef = useRef< ControlPointMoveState >();
+	const controlPointMoveStateRef =
+		useRef< ControlPointMoveState >( undefined );
 
 	const onMouseMove = ( event: MouseEvent ) => {
 		if (
@@ -177,7 +178,7 @@ function ControlPoints( {
 	// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
 	// This memoization would prevent the event listeners from being properly cleaned.
 	// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
-	const cleanEventListenersRef = useRef< () => void >();
+	const cleanEventListenersRef = useRef< () => void >( undefined );
 	cleanEventListenersRef.current = cleanEventListeners;
 
 	useEffect( () => {

package/src/custom-gradient-picker/types.ts

@@ -100,7 +100,7 @@ export type ControlPointButtonProps = {
 export type ControlPointsProps = {
 	disableRemove: boolean;
 	disableAlpha: boolean;
-	gradientPickerDomRef: React.RefObject< HTMLDivElement >;
+	gradientPickerDomRef: React.RefObject< HTMLDivElement | null >;
 	ignoreMarkerPosition?: number;
 	value: ControlPoint[];
 	onChange: ( controlPoints: ControlPoint[] ) => void;