@wordpress/components 25.12.0 → 25.13.0

package/build-types/tabs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.tsx"],"names":[],"mappings":";AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,iBAAS,IAAI,CAAE,EACd,YAAmB,EACnB,YAAY,EACZ,WAA0B,EAC1B,QAAQ,EACR,QAAQ,EACR,aAAa,GACb,EAAE,SAAS,eAqIX;kBA5IQ,IAAI;;;;;AAiJb,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tabs/index.tsx"],"names":[],"mappings":";AAYA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMzC,iBAAS,IAAI,CAAE,EACd,YAAmB,EACnB,YAAY,EACZ,WAA0B,EAC1B,QAAQ,EACR,QAAQ,EACR,aAAa,GACb,EAAE,SAAS,eA6IX;kBApJQ,IAAI;;;;;;AA2Jb,eAAe,IAAI,CAAC"}

package/build-types/tabs/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAKtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAQ5B,CAAC;AACF,eAAe,IAAI,CAAC;AA+BpB,eAAO,MAAM,OAAO,6HAAsB,CAAC;AAwB3C,eAAO,MAAM,WAAW,6HAAiC,CAAC;AAqC1D,eAAO,MAAM,uBAAuB,6HAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,6HAAsB,CAAC;AA0CpD,eAAO,MAAM,aAAa,6HAAmC,CAAC;AA6D9D,eAAO,MAAM,oBAAoB,6HAAiC,CAAC;AA+DnE,eAAO,MAAM,cAAc,6HAAoC,CAAC;AAqChE,eAAO,MAAM,kBAAkB,6HAAwC,CAAC;AAgCxE,eAAO,MAAM,cAAc,6HAAoC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/tabs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAKtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAgB5B,CAAC;AACF,eAAe,IAAI,CAAC;AA+BpB,eAAO,MAAM,OAAO,6HAAsB,CAAC;AAwB3C,eAAO,MAAM,WAAW,6HAAiC,CAAC;AAqC1D,eAAO,MAAM,uBAAuB,6HAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,6HAAsB,CAAC;AA0CpD,eAAO,MAAM,aAAa,6HAAmC,CAAC;AA6D9D,eAAO,MAAM,oBAAoB,6HAAiC,CAAC;AA+DnE,eAAO,MAAM,cAAc,6HAAoC,CAAC;AAqChE,eAAO,MAAM,kBAAkB,6HAAwC,CAAC;AAgCxE,eAAO,MAAM,cAAc,6HAAoC,CAAC"}

package/build-types/text/types.d.ts

@@ -35,10 +35,14 @@ export interface Props extends TruncateProps {
     isDestructive?: boolean;
     /**
      * Escape characters in `highlightWords` which are meaningful in regular expressions.
+     *
+     * @default false
      */
     highlightEscape?: boolean;
     /**
      * Determines if `highlightWords` should be case sensitive.
+     *
+     * @default false
      */
     highlightCaseSensitive?: boolean;
     /**
@@ -46,7 +50,10 @@ export interface Props extends TruncateProps {
      */
     highlightSanitize?: FindAllArgs['sanitize'];
     /**
-     * Sets `Text` to have `display: block`.
+     * Sets `Text` to have `display: block`. Note: text truncation only works
+     * when `isBlock` is `false`.
+     *
+     * @default false
      */
     isBlock?: boolean;
     /**
@@ -62,11 +69,15 @@ export interface Props extends TruncateProps {
      */
     size?: CSSProperties['fontSize'] | TextSize;
     /**
-     * Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways.
+     * Enables text truncation. When `truncate` is set, we are able to truncate the long text in a variety of ways. Note: text truncation won't work if the `isBlock` property is set to `true`
+     *
+     * @default false
      */
     truncate?: boolean;
     /**
      * Uppercases the text content.
+     *
+     * @default false
      */
     upperCase?: boolean;
     /**
@@ -75,6 +86,8 @@ export interface Props extends TruncateProps {
     variant?: TextVariant;
     /**
      * Adjusts font-weight of the text.
+     *
+     * @default 'normal'
      */
     weight?: CSSProperties['fontWeight'] | TextWeight;
     /**

package/build-types/text/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,QAAQ,GACjB,MAAM,GACN,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,OAAO,CAAC;AAEX,KAAK,WAAW,GAAG,OAAO,CAAC;AAE3B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;IACrC;;OAEG;IACH,gCAAgC,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAE,UAAU,CAAE,CAAC;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IAC3C;;OAEG;IACH,sBAAsB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,GAAG,QAAQ,CAAC;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,GAAG,UAAU,CAAC;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,QAAQ,GACjB,MAAM,GACN,SAAS,GACT,UAAU,GACV,YAAY,GACZ,aAAa,GACb,OAAO,CAAC;AAEX,KAAK,WAAW,GAAG,OAAO,CAAC;AAE3B,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,MAAM,WAAW,KAAM,SAAQ,aAAa;IAC3C;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;IACrC;;OAEG;IACH,gCAAgC,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,iBAAiB,CAAC,EAAE,WAAW,CAAE,UAAU,CAAE,CAAC;IAC9C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;IAC3C;;OAEG;IACH,sBAAsB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAClD;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,GAAG,QAAQ,CAAC;IAC9C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,GAAG,UAAU,CAAC;IACpD;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B"}

package/build-types/tools-panel/tools-panel-item/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8L5D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkM5D"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.12.0",
+	"version": "25.13.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.2.24",
-		"@wordpress/a11y": "^3.46.0",
-		"@wordpress/compose": "^6.23.0",
-		"@wordpress/date": "^4.46.0",
-		"@wordpress/deprecated": "^3.46.0",
-		"@wordpress/dom": "^3.46.0",
-		"@wordpress/element": "^5.23.0",
-		"@wordpress/escape-html": "^2.46.0",
-		"@wordpress/hooks": "^3.46.0",
-		"@wordpress/html-entities": "^3.46.0",
-		"@wordpress/i18n": "^4.46.0",
-		"@wordpress/icons": "^9.37.0",
-		"@wordpress/is-shallow-equal": "^4.46.0",
-		"@wordpress/keycodes": "^3.46.0",
-		"@wordpress/primitives": "^3.44.0",
-		"@wordpress/private-apis": "^0.28.0",
-		"@wordpress/rich-text": "^6.23.0",
-		"@wordpress/warning": "^2.46.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/date": "^4.47.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/escape-html": "^2.47.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/html-entities": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/is-shallow-equal": "^4.47.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/primitives": "^3.45.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/rich-text": "^6.24.0",
+		"@wordpress/warning": "^2.47.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -89,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

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

@@ -41,7 +41,6 @@ function UnforwardedAnglePickerControl(
 			'Bottom margin styles for wp.components.AnglePickerControl',
 			{
 				since: '6.1',
-				version: '6.4',
 				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
 			}
 		);

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BoxControl from '../';
+
+const meta: Meta< typeof BoxControl > = {
+	title: 'Components (Experimental)/BoxControl',
+	component: BoxControl,
+	argTypes: {
+		values: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: { canvas: { sourceState: 'shown' } },
+	},
+};
+export default meta;
+
+const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => {
+	return <BoxControl { ...props } />;
+};
+
+const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => {
+	const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >();
+
+	return (
+		<BoxControl
+			values={ values }
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValues( nextValue );
+				props.onChange?.( nextValue );
+			} }
+		/>
+	);
+};
+
+export const Default = TemplateUncontrolled.bind( {} );
+Default.args = {
+	label: 'Label',
+};
+
+export const Controlled = TemplateControlled.bind( {} );
+Controlled.args = {
+	...Default.args,
+};
+
+export const ArbitrarySides = TemplateControlled.bind( {} );
+ArbitrarySides.args = {
+	...Default.args,
+	sides: [ 'top', 'bottom' ],
+};
+
+export const SingleSide = TemplateControlled.bind( {} );
+SingleSide.args = {
+	...Default.args,
+	sides: [ 'bottom' ],
+};
+
+export const AxialControls = TemplateControlled.bind( {} );
+AxialControls.args = {
+	...Default.args,
+	splitOnAxis: true,
+};
+
+export const AxialControlsWithSingleSide = TemplateControlled.bind( {} );
+AxialControlsWithSingleSide.args = {
+	...Default.args,
+	sides: [ 'horizontal' ],
+	splitOnAxis: true,
+};

package/src/button/style.scss

@@ -129,8 +129,11 @@
 			background: transparent;
 			transform: none;
 			opacity: 1;
-			box-shadow: none;
-			outline: none;
+
+			&:not(:focus) {
+				box-shadow: none;
+				outline: none;
+			}
 		}
 	}
 
@@ -242,6 +245,11 @@
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
 		animation: components-button__busy-animation 2500ms infinite linear;
+		// This should be refactored to use the reduce-motion("animation") mixin
+		// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 0s;
+		}
 		opacity: 1;
 		background-size: 100px 100%;
 		// Disable reason: This function call looks nicer when each argument is on its own line.

package/src/combobox-control/README.md

@@ -47,9 +47,7 @@ function MyComboboxControl() {
 			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
 					options.filter( ( option ) =>
-						option.label
-							.toLowerCase()
-							.startsWith( inputValue.toLowerCase() )
+						option.value === inputValue
 					)
 				)
 			}

package/src/custom-select-control-v2/README.md

@@ -0,0 +1,73 @@
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+### `CustomSelect`
+
+Used to render a customizable select control component.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The child elements. This should be composed of CustomSelect.Item components.
+
+-   Required: yes
+
+##### `defaultValue`: `string`
+
+An optional default value for the control. If left `undefined`, the first non-disabled item will be used.
+
+-   Required: no
+
+##### `label`: `string`
+
+Label for the control.
+
+-   Required: yes
+
+##### `onChange`: `( newValue: string ) => void`
+
+A function that receives the new value of the input.
+
+-   Required: no
+
+##### `renderSelectedValue`: `( selectValue: string ) => React.ReactNode`
+
+Can be used to render select UI with custom styled values.
+
+-   Required: no
+
+##### `size`: `'default' | 'large'`
+
+The size of the control.
+
+-   Required: no
+
+##### `value`: `string`
+
+Can be used to externally control the value of the control.
+
+-   Required: no
+
+### `CustomSelectItem`
+
+Used to render a select item.
+
+#### Props
+
+The component accepts the following props:
+
+##### `value`: `string`
+
+The value of the select item. This will be used as the children if children are left `undefined`.
+
+-   Required: yes
+
+##### `children`: `React.ReactNode`
+
+The children to display for each select item. The `value` will be used if left `undefined`.
+
+-   Required: no

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

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as Styled from './styles';
+import type {
+	CustomSelectProps,
+	CustomSelectItemProps,
+	CustomSelectContext as CustomSelectContextType,
+} from './types';
+
+export const CustomSelectContext =
+	createContext< CustomSelectContextType >( undefined );
+
+function defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {
+	const isValueEmpty = Array.isArray( value )
+		? value.length === 0
+		: value === undefined || value === null;
+
+	if ( isValueEmpty ) {
+		return __( 'Select an item' );
+	}
+
+	if ( Array.isArray( value ) ) {
+		return value.length === 1
+			? value[ 0 ]
+			: // translators: %s: number of items selected (it will always be 2 or more items)
+			  sprintf( __( '%s items selected' ), value.length );
+	}
+
+	return value;
+}
+
+export function CustomSelect( props: CustomSelectProps ) {
+	const {
+		children,
+		defaultValue,
+		label,
+		onChange,
+		size = 'default',
+		value,
+		renderSelectedValue = defaultRenderSelectedValue,
+	} = props;
+
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	const { value: currentValue } = store.useState();
+
+	return (
+		<>
+			<Styled.CustomSelectLabel store={ store }>
+				{ label }
+			</Styled.CustomSelectLabel>
+			<Styled.CustomSelectButton
+				size={ size }
+				hasCustomRenderProp={ !! renderSelectedValue }
+				store={ store }
+			>
+				{ renderSelectedValue( currentValue ) }
+				<Ariakit.SelectArrow />
+			</Styled.CustomSelectButton>
+			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>
+				<CustomSelectContext.Provider value={ { store } }>
+					{ children }
+				</CustomSelectContext.Provider>
+			</Styled.CustomSelectPopover>
+		</>
+	);
+}
+
+export function CustomSelectItem( {
+	children,
+	...props
+}: CustomSelectItemProps ) {
+	const customSelectContext = useContext( CustomSelectContext );
+	return (
+		<Styled.CustomSelectItem
+			store={ customSelectContext?.store }
+			{ ...props }
+		>
+			{ children ?? props.value }
+			<Ariakit.SelectItemCheck />
+		</Styled.CustomSelectItem>
+	);
+}

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

@@ -0,0 +1,149 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CustomSelect, CustomSelectItem } from '..';
+
+const meta: Meta< typeof CustomSelect > = {
+	title: 'Components (Experimental)/CustomSelectControl v2',
+	component: CustomSelect,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CustomSelectItem,
+	},
+	argTypes: {
+		children: { control: { type: null } },
+		renderSelectedValue: { control: { type: null } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: { expanded: true },
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { excludeDecorators: true },
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<div
+				style={ {
+					minHeight: '150px',
+				} }
+			>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+	return <CustomSelect { ...props } />;
+};
+
+const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Label',
+	children: (
+		<>
+			<CustomSelectItem value="Small">
+				<span style={ { fontSize: '75%' } }>Small</span>
+			</CustomSelectItem>
+			<CustomSelectItem value="Something bigger">
+				<span style={ { fontSize: '200%' } }>Something bigger</span>
+			</CustomSelectItem>
+		</>
+	),
+};
+
+/**
+ * Multiple selection can be enabled by using an array for the `value` and
+ * `defaultValue` props. The argument of the `onChange` function will also
+ * change accordingly.
+ */
+export const MultiSelect = Template.bind( {} );
+MultiSelect.args = {
+	defaultValue: [ 'lavender', 'tangerine' ],
+	label: 'Select Colors',
+	renderSelectedValue: ( currentValue: string | string[] ) => {
+		if ( ! Array.isArray( currentValue ) ) {
+			return currentValue;
+		}
+		if ( currentValue.length === 0 ) return 'No colors selected';
+		if ( currentValue.length === 1 ) return currentValue[ 0 ];
+		return `${ currentValue.length } colors selected`;
+	},
+	children: (
+		<>
+			{ [
+				'amber',
+				'aquamarine',
+				'flamingo pink',
+				'lavender',
+				'maroon',
+				'tangerine',
+			].map( ( item ) => (
+				<CustomSelectItem key={ item } value={ item }>
+					{ item }
+				</CustomSelectItem>
+			) ) }
+		</>
+	),
+};
+
+const renderControlledValue = ( gravatar: string | string[] ) => {
+	const avatar = `https://gravatar.com/avatar?d=${ gravatar }`;
+	return (
+		<div style={ { display: 'flex', alignItems: 'center' } }>
+			<img
+				style={ { maxHeight: '75px', marginRight: '10px' } }
+				key={ avatar }
+				src={ avatar }
+				alt=""
+				aria-hidden="true"
+			/>
+			<span>{ gravatar }</span>
+		</div>
+	);
+};
+
+export const Controlled = ControlledTemplate.bind( {} );
+Controlled.args = {
+	label: 'Default Gravatars',
+	renderSelectedValue: renderControlledValue,
+	children: (
+		<>
+			{ [ 'mystery-person', 'identicon', 'wavatar', 'retro' ].map(
+				( option ) => (
+					<CustomSelectItem key={ option } value={ option }>
+						{ renderControlledValue( option ) }
+					</CustomSelectItem>
+				)
+			) }
+		</>
+	),
+};

package/src/custom-select-control-v2/styles.ts

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../utils';
+import { space } from '../utils/space';
+import type { CustomSelectProps } from './types';
+
+export const CustomSelectLabel = styled( Ariakit.SelectLabel )`
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	text-transform: uppercase;
+	margin-bottom: ${ space( 2 ) };
+`;
+
+const inputHeights = {
+	default: 40,
+	small: 24,
+};
+
+export const CustomSelectButton = styled( Ariakit.Select, {
+	// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+	shouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',
+} )( ( {
+	size,
+	hasCustomRenderProp,
+}: {
+	size: NonNullable< CustomSelectProps[ 'size' ] >;
+	hasCustomRenderProp: boolean;
+} ) => {
+	const isSmallSize = size === 'small' && ! hasCustomRenderProp;
+	const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
+
+	return {
+		display: 'flex',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		backgroundColor: COLORS.white,
+		border: `1px solid ${ COLORS.gray[ 600 ] }`,
+		borderRadius: space( 0.5 ),
+		cursor: 'pointer',
+		width: '100%',
+		[ heightProperty ]: `${ inputHeights[ size ] }px`,
+		padding: isSmallSize ? space( 2 ) : space( 4 ),
+		fontSize: isSmallSize ? '11px' : '13px',
+		'&[data-focus-visible]': {
+			outlineStyle: 'solid',
+		},
+		'&[aria-expanded="true"]': {
+			outlineStyle: `1.5px solid ${ COLORS.theme.accent }`,
+		},
+	};
+} );
+
+export const CustomSelectPopover = styled( Ariakit.SelectPopover )`
+	border-radius: ${ space( 0.5 ) };
+	background: ${ COLORS.white };
+	border: 1px solid ${ COLORS.gray[ 900 ] };
+`;
+
+export const CustomSelectItem = styled( Ariakit.SelectItem )`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: ${ space( 2 ) };
+	&[data-active-item] {
+		background-color: ${ COLORS.gray[ 300 ] };
+	}
+`;