@wordpress/components 28.1.0 → 28.2.0

package/build-style/style.css

@@ -530,8 +530,7 @@ p + .components-button.is-tertiary {
   vertical-align: top;
   width: var(--checkbox-input-size);
   height: var(--checkbox-input-size);
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   transition: 0.1s border-color ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1179,8 +1178,7 @@ body.is-dragging-components-draggable {
   opacity: 1;
   visibility: visible;
 }
-
-.components-drop-zone__content {
+.components-drop-zone .components-drop-zone__content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1195,6 +1193,31 @@ body.is-dragging-components-draggable {
   z-index: 50;
   text-align: center;
   color: #fff;
+  opacity: 0;
+  pointer-events: none;
+}
+.components-drop-zone .components-drop-zone__content-inner {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content {
+    transition: none;
+  }
+}
+.components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
+}
+@media (prefers-reduced-motion) {
+  .components-drop-zone.is-active:not(.has-dragged-out) .components-drop-zone__content-inner {
+    transition: none;
+  }
 }
 
 .components-drop-zone__content-icon,
@@ -2656,8 +2679,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: inline-flex;
   margin: 0 8px 0 0;
   padding: 0;
-  -webkit-appearance: none;
-          appearance: none;
+  appearance: none;
   cursor: pointer;
 }
 @media (prefers-reduced-motion: reduce) {

package/build-types/custom-select-control/stories/index.story.d.ts

@@ -26,6 +26,21 @@ declare const _default: {
                 type: string;
             };
         };
+        onChange: {
+            control: {
+                type: null;
+            };
+        };
+        value: {
+            control: {
+                type: null;
+            };
+        };
+    };
+    parameters: {
+        actions: {
+            argTypesRegex: string;
+        };
     };
 };
 export default _default;

package/build-types/custom-select-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;GAEG;AACH,OAAO,mBAAmB,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAErC,wBAaE;AAEF,eAAO,MAAM,OAAO,EAAE,OAAwC,CAAC;AA4B/D,eAAO,MAAM,cAAc,EAAE,OAAwC,CAAC;AAmBtE,eAAO,MAAM,SAAS,EAAE,OAAwC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOhD;;GAEG;AACH,OAAO,mBAAmB,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAErC,wBAkBE;AAqBF,eAAO,MAAM,OAAO,EAAE,OAA6B,CAAC;AA4BpD,eAAO,MAAM,cAAc,EAAE,OAA6B,CAAC;AAmB3D,eAAO,MAAM,SAAS,EAAE,OAA6B,CAAC"}

package/build-types/custom-select-control-v2/legacy-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control-v2/legacy-component/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGxD,iBAAS,mBAAmB,CAAE,KAAK,EAAE,uBAAuB,+BA2G3D;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom-select-control-v2/legacy-component/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGxD,iBAAS,mBAAmB,CAAE,KAAK,EAAE,uBAAuB,+BAmH3D;AAED,eAAe,mBAAmB,CAAC"}

package/build-types/custom-select-control-v2/styles.d.ts

@@ -8,6 +8,10 @@ export declare const WithHintWrapper: import("@emotion/styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SelectedExperimentalHintWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SelectedExperimentalHintItem: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/build-types/custom-select-control-v2/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/styles.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAQ1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;2GAGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;2GAIhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;UAMvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;UAOZ,YAAa,sBAAsB,CAAE,MAAM,CAAE,CAAE;yBAChC,OAAO;UA2C1B,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;UAQzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;UAUtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;UAK7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/styles.ts"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAS1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAUtD,eAAO,MAAM,eAAe;;;yGAI3B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;yGAE3C,CAAC;AAEF,eAAO,MAAM,4BAA4B;;;2GAGxC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;2GAIhC,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;UAMvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;UAOZ,YAAa,sBAAsB,CAAE,MAAM,CAAE,CAAE;yBAChC,OAAO;UA4C1B,CAAC;AAEJ,eAAO,MAAM,aAAa;;;;;;;;;UAQzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;UAUtB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;UAK7B,CAAC"}

package/build-types/custom-select-control-v2/types.d.ts

@@ -64,6 +64,7 @@ type LegacyOption = {
     style?: React.CSSProperties;
     className?: string;
     __experimentalHint?: string;
+    [key: string]: any;
 };
 /**
  * The legacy object returned from the onChange event.

package/build-types/custom-select-control-v2/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/custom-select-control-v2/types.ts"],"names":[],"mappings":"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"}

package/build-types/drop-zone/index.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * Internal dependencies
+ */
 import type { DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 /**

package/build-types/drop-zone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":";AAwBA,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAmE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BA6ExD;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/drop-zone/index.tsx"],"names":[],"mappings":";AAcA;;GAEG;AACH,OAAO,KAAK,EAAY,aAAa,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,iBAAiB,CAAE,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EACN,GAAG,SAAS,EACZ,EAAE,uBAAuB,CAAE,aAAa,EAAE,KAAK,EAAE,KAAK,CAAE,+BA0FxD;AAED,eAAe,iBAAiB,CAAC"}

package/build-types/palette-edit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":";AAmDA,OAAO,KAAK,EAOX,gBAAgB,EAChB,cAAc,EACd,MAAM,SAAS,CAAC;AAejB;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACxC,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,MAAM;;;EAwBlB;AAwOD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAE,EAC5B,SAAS,EACT,MAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,wBAA4B,EAC5B,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,UAAe,EACf,YAAY,GACZ,EAAE,gBAAgB,+BA4OlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/palette-edit/index.tsx"],"names":[],"mappings":";AAgDA,OAAO,KAAK,EAOX,gBAAgB,EAChB,cAAc,EACd,MAAM,SAAS,CAAC;AAejB;;;;;;;;;;GAUG;AACH,wBAAgB,yBAAyB,CACxC,QAAQ,EAAE,cAAc,EAAE,EAC1B,UAAU,EAAE,MAAM;;;EAwBlB;AA6ND;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAE,EAC5B,SAAS,EACT,MAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,wBAA4B,EAC5B,YAAY,EACZ,mBAAmB,EACnB,QAAQ,EACR,UAAe,EACf,YAAY,GACZ,EAAE,gBAAgB,+BA8OlB;AAED,eAAe,WAAW,CAAC"}

package/build-types/palette-edit/types.d.ts

@@ -100,11 +100,8 @@ export type OptionProps<T extends Color | Gradient> = {
     onChange: (newElement: T) => void;
     isGradient: T extends Gradient ? true : false;
     canOnlyChangeValues: PaletteEditProps['canOnlyChangeValues'];
-    isEditing: boolean;
     key: Key;
     onRemove: MouseEventHandler<HTMLButtonElement>;
-    onStartEditing: () => void;
-    onStopEditing: () => void;
     popoverProps?: PaletteEditProps['popoverProps'];
     slugPrefix: string;
 };
@@ -113,6 +110,7 @@ export type PaletteEditListViewProps<T extends Color | Gradient> = {
     onChange: (newElements?: T[]) => void;
     isGradient: T extends Gradient ? true : false;
     canOnlyChangeValues: PaletteEditProps['canOnlyChangeValues'];
+    addColorRef: React.RefObject<HTMLButtonElement>;
     editingElement?: EditingElement;
     popoverProps?: PaletteEditProps['popoverProps'];
     setEditingElement: (newEditingElement?: EditingElement) => void;

package/build-types/palette-edit/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/palette-edit/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/palette-edit/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.1.0",
+	"version": "28.2.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.1.0",
-		"@wordpress/compose": "^7.1.0",
-		"@wordpress/date": "^5.1.0",
-		"@wordpress/deprecated": "^4.1.0",
-		"@wordpress/dom": "^4.1.0",
-		"@wordpress/element": "^6.1.0",
-		"@wordpress/escape-html": "^3.1.0",
-		"@wordpress/hooks": "^4.1.0",
-		"@wordpress/html-entities": "^4.1.0",
-		"@wordpress/i18n": "^5.1.0",
-		"@wordpress/icons": "^10.1.0",
-		"@wordpress/is-shallow-equal": "^5.1.0",
-		"@wordpress/keycodes": "^4.1.0",
-		"@wordpress/primitives": "^4.1.0",
-		"@wordpress/private-apis": "^1.1.0",
-		"@wordpress/rich-text": "^7.1.0",
-		"@wordpress/warning": "^3.1.0",
+		"@wordpress/a11y": "^4.2.0",
+		"@wordpress/compose": "^7.2.0",
+		"@wordpress/date": "^5.2.0",
+		"@wordpress/deprecated": "^4.2.0",
+		"@wordpress/dom": "^4.2.0",
+		"@wordpress/element": "^6.2.0",
+		"@wordpress/escape-html": "^3.2.0",
+		"@wordpress/hooks": "^4.2.0",
+		"@wordpress/html-entities": "^4.2.0",
+		"@wordpress/i18n": "^5.2.0",
+		"@wordpress/icons": "^10.2.0",
+		"@wordpress/is-shallow-equal": "^5.2.0",
+		"@wordpress/keycodes": "^4.2.0",
+		"@wordpress/primitives": "^4.2.0",
+		"@wordpress/private-apis": "^1.2.0",
+		"@wordpress/rich-text": "^7.2.0",
+		"@wordpress/warning": "^3.2.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
+	"gitHead": "aa5b14bb5bdbb8d8a02914e154c3bc1c2f18ace6"
 }

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

@@ -3,6 +3,11 @@
  */
 import type { StoryFn } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -20,10 +25,34 @@ export default {
 				type: 'radio',
 			},
 		},
+		onChange: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 	},
 };
 
-export const Default: StoryFn = CustomSelectControl.bind( {} );
+const Template: StoryFn< typeof CustomSelectControl > = ( props ) => {
+	const [ value, setValue ] = useState( props.options[ 0 ] );
+
+	const onChange: React.ComponentProps<
+		typeof CustomSelectControl
+	>[ 'onChange' ] = ( changeObject: { selectedItem: any } ) => {
+		setValue( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelectControl
+			{ ...props }
+			onChange={ onChange }
+			value={ value }
+		/>
+	);
+};
+
+export const Default: StoryFn = Template.bind( {} );
 Default.args = {
 	label: 'Label',
 	options: [
@@ -51,7 +80,7 @@ Default.args = {
 	],
 };
 
-export const WithLongLabels: StoryFn = CustomSelectControl.bind( {} );
+export const WithLongLabels: StoryFn = Template.bind( {} );
 WithLongLabels.args = {
 	...Default.args,
 	options: [
@@ -70,7 +99,7 @@ WithLongLabels.args = {
 	],
 };
 
-export const WithHints: StoryFn = CustomSelectControl.bind( {} );
+export const WithHints: StoryFn = Template.bind( {} );
 WithHints.args = {
 	...Default.args,
 	options: [

package/src/custom-select-control/test/index.js

@@ -14,7 +14,11 @@ import { useState } from '@wordpress/element';
  */
 import UncontrolledCustomSelectControl from '..';
 
-const customClass = 'amber-skies';
+const customClassName = 'amber-skies';
+const customStyles = {
+	backgroundColor: 'rgb(127, 255, 212)',
+	rotate: '13deg',
+};
 
 const props = {
 	label: 'label!',
@@ -26,7 +30,7 @@ const props = {
 		{
 			key: 'flower2',
 			name: 'crimson clover',
-			className: customClass,
+			className: customClassName,
 		},
 		{
 			key: 'flower3',
@@ -35,37 +39,114 @@ const props = {
 		{
 			key: 'color1',
 			name: 'amber',
-			className: customClass,
+			className: customClassName,
 		},
 		{
 			key: 'color2',
 			name: 'aquamarine',
-			style: {
-				backgroundColor: 'rgb(127, 255, 212)',
-				rotate: '13deg',
-			},
+			style: customStyles,
+		},
+		{
+			key: 'color3',
+			name: 'tomato (with custom props)',
+			className: customClassName,
+			style: customStyles,
+			// try passing a valid HTML attribute
+			'aria-label': 'test label',
+			// try adding a custom prop
+			customPropFoo: 'foo',
 		},
 	],
 };
 
-const ControlledCustomSelectControl = ( { options, ...restProps } ) => {
-	const [ value, setValue ] = useState( options[ 0 ] );
+const ControlledCustomSelectControl = ( {
+	options,
+	onChange: onChangeProp,
+	...restProps
+} ) => {
+	const [ value, setValue ] = useState( restProps.value ?? options[ 0 ] );
+
+	const onChange = ( changeObject ) => {
+		onChangeProp?.( changeObject );
+		setValue( changeObject.selectedItem );
+	};
+
 	return (
 		<UncontrolledCustomSelectControl
 			{ ...restProps }
 			options={ options }
-			onChange={ ( { selectedItem } ) => setValue( selectedItem ) }
+			onChange={ onChange }
 			value={ options.find( ( option ) => option.key === value.key ) }
 		/>
 	);
 };
 
+it( 'Should apply external controlled updates', async () => {
+	const mockOnChange = jest.fn();
+	const { rerender } = render(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 0 ] }
+			onChange={ mockOnChange }
+		/>
+	);
+
+	const currentSelectedItem = screen.getByRole( 'button', {
+		expanded: false,
+	} );
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 0 ].name );
+
+	rerender(
+		<UncontrolledCustomSelectControl
+			{ ...props }
+			value={ props.options[ 1 ] }
+		/>
+	);
+
+	expect( currentSelectedItem ).toHaveTextContent( props.options[ 1 ].name );
+
+	expect( mockOnChange ).not.toHaveBeenCalled();
+} );
+
 describe.each( [
-	[ 'uncontrolled', UncontrolledCustomSelectControl ],
-	[ 'controlled', ControlledCustomSelectControl ],
+	[ 'Uncontrolled', UncontrolledCustomSelectControl ],
+	[ 'Controlled', ControlledCustomSelectControl ],
 ] )( 'CustomSelectControl %s', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
+	it( 'Should select the first option when no explicit initial value is passed without firing onChange', () => {
+		const mockOnChange = jest.fn();
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 0 ].name );
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'Should pick the initially selected option if the value prop is passed without firing onChange', async () => {
+		const mockOnChange = jest.fn();
+		render(
+			<Component
+				{ ...props }
+				onChange={ mockOnChange }
+				value={ props.options[ 3 ] }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveTextContent( props.options[ 3 ].name );
+
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
 	it( 'Should replace the initial selection when a new item is selected', async () => {
 		const user = userEvent.setup();
 
@@ -144,7 +225,7 @@ describe.each( [
 		// assert against filtered array
 		itemsWithClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).toHaveClass(
-				customClass
+				customClassName
 			)
 		);
 
@@ -156,15 +237,13 @@ describe.each( [
 		// assert against filtered array
 		itemsWithoutClass.map( ( { name } ) =>
 			expect( screen.getByRole( 'option', { name } ) ).not.toHaveClass(
-				customClass
+				customClassName
 			)
 		);
 	} );
 
 	it( 'Should apply styles only to options that have styles defined', async () => {
 		const user = userEvent.setup();
-		const customStyles =
-			'background-color: rgb(127, 255, 212); rotate: 13deg;';
 
 		render( <Component { ...props } /> );
 
@@ -262,6 +341,105 @@ describe.each( [
 		expect( screen.getByRole( 'option', { name: /hint/i } ) ).toBeVisible();
 	} );
 
+	it( 'Should return object onChange', async () => {
+		const user = userEvent.setup();
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		);
+
+		await user.click(
+			screen.getByRole( 'option', {
+				name: 'aquamarine',
+			} )
+		);
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				inputValue: '',
+				isOpen: false,
+				selectedItem: expect.objectContaining( {
+					name: 'aquamarine',
+				} ),
+				type: expect.any( String ),
+			} )
+		);
+	} );
+
+	it( 'Should return selectedItem object when specified onChange', async () => {
+		const user = userEvent.setup();
+		const mockOnChange = jest.fn();
+
+		render( <Component { ...props } onChange={ mockOnChange } /> );
+
+		await user.tab();
+		expect(
+			screen.getByRole( 'button', {
+				expanded: false,
+			} )
+		).toHaveFocus();
+
+		await user.keyboard( 'p' );
+		await user.keyboard( '{enter}' );
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'flower3',
+					name: 'poppy',
+				} ),
+			} )
+		);
+	} );
+
+	it( "Should pass arbitrary props to onChange's selectedItem, but apply only style and className to DOM elements", async () => {
+		const user = userEvent.setup();
+		const onChangeMock = jest.fn();
+
+		render( <Component { ...props } onChange={ onChangeMock } /> );
+
+		const currentSelectedItem = screen.getByRole( 'button', {
+			expanded: false,
+		} );
+
+		await user.click( currentSelectedItem );
+
+		const optionWithCustomAttributes = screen.getByRole( 'option', {
+			name: 'tomato (with custom props)',
+		} );
+
+		// Assert that the option element does not have the custom attributes
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'customPropFoo'
+		);
+		expect( optionWithCustomAttributes ).not.toHaveAttribute(
+			'aria-label'
+		);
+
+		await user.click( optionWithCustomAttributes );
+
+		expect( onChangeMock ).toHaveBeenCalledTimes( 1 );
+		expect( onChangeMock ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				selectedItem: expect.objectContaining( {
+					key: 'color3',
+					name: 'tomato (with custom props)',
+					className: customClassName,
+					style: customStyles,
+					'aria-label': 'test label',
+					customPropFoo: 'foo',
+				} ),
+			} )
+		);
+	} );
+
 	describe( 'Keyboard behavior and accessibility', () => {
 		it( 'Captures the keypress event and does not let it propagate', async () => {
 			const user = userEvent.setup();
@@ -311,7 +489,9 @@ describe.each( [
 			await user.keyboard( '{arrowdown}' );
 			await user.keyboard( '{enter}' );
 
-			expect( currentSelectedItem ).toHaveTextContent( 'crimson clover' );
+			expect( currentSelectedItem ).toHaveTextContent(
+				props.options[ 1 ].name
+			);
 		} );
 
 		it( 'Should be able to type characters to select matching options', async () => {
@@ -422,11 +602,14 @@ describe.each( [
 			const onBlurMock = jest.fn();
 
 			render(
-				<Component
-					{ ...props }
-					onFocus={ onFocusMock }
-					onBlur={ onBlurMock }
-				/>
+				<>
+					<Component
+						{ ...props }
+						onFocus={ onFocusMock }
+						onBlur={ onBlurMock }
+					/>
+					<button>Focus stop</button>
+				</>
 			);
 
 			const currentSelectedItem = screen.getByRole( 'button', {

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

@@ -74,7 +74,7 @@ const CustomSelectButton = ( {
 			// move selection rather than open the popover
 			showOnKeyDown={ false }
 		>
-			<div>{ computedRenderSelectedValue( currentValue ) }</div>
+			{ computedRenderSelectedValue( currentValue ) }
 		</Styled.Select>
 	);
 };