CustomSelectControl: switch to ariakit-based implementation

packages/block-editor/src/components/date-format-picker/index.js

@@ -10,18 +10,9 @@ import {
 	VisuallyHidden,
 	ToggleControl,
 	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
+	CustomSelectControl,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
-
 // So that we illustrate the different formats in the dropdown properly, show a date that is
 // somwhat recent, has a day greater than 12, and a month with more than three letters.
 const exampleDate = new Date();

packages/block-editor/src/components/font-appearance-control/index.js

@@ -1,19 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
-import { unlock } from '../../lock-unlock';
 
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
 /**
  * Adjusts font appearance field label in case either font styles or weights
  * are disabled.

packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -303,9 +303,11 @@ export default function SpacingInputControl( {
 				<CustomSelectControl
 					className="spacing-sizes-control__custom-select-control"
 					value={
+						// passing empty string as a fallback to continue using the
+						// component in controlled mode
 						options.find(
 							( option ) => option.key === currentValue
-						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
+						) || ''
 					}
 					onChange={ ( selection ) => {
 						onChange(

packages/block-editor/src/hooks/position.js

@@ -8,10 +8,7 @@ import clsx from 'clsx';
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import {
-	BaseControl,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo, Platform } from '@wordpress/element';
@@ -23,13 +20,8 @@ import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject, useStyleOverride } from './utils';
-import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
-
 const POSITION_SUPPORT_KEY = 'position';
 
 const DEFAULT_OPTION = {

packages/components/CHANGELOG.md

@@ -4,7 +4,8 @@
 
 ### Internal
 
--   `CustomSelectControlV2`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343))
+-   `CustomSelectControl`: switch to ariakit-based implementation ([#63258](https://github.com/WordPress/gutenberg/pull/63258)).
+-   `CustomSelectControl`: animate select popover appearance. ([#63343](https://github.com/WordPress/gutenberg/pull/63343))
 
 ### Enhancements
 

packages/components/package.json

@@ -65,7 +65,6 @@
 		"colord": "^2.7.0",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
-		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",

packages/components/src/custom-select-control-v2/index.tsx

@@ -1,4 +1,29 @@
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 /**
  * Internal dependencies
  */
-export { default } from './default-component';
+import _CustomSelect from './custom-select';
+import type { CustomSelectProps } from './types';
+import type { WordPressComponentProps } from '../context';
+import Item from './item';
+
+function CustomSelectControlV2(
+	props: WordPressComponentProps< CustomSelectProps, 'button', false >
+) {
+	const { defaultValue, onChange, value, ...restProps } = props;
+	// Forward props + store from v2 implementation
+	const store = Ariakit.useSelectStore( {
+		setValue: ( nextValue ) => onChange?.( nextValue ),
+		defaultValue,
+		value,
+	} );
+
+	return <_CustomSelect { ...restProps } store={ store } />;
+}
+
+CustomSelectControlV2.Item = Item;
+
+export default CustomSelectControlV2;

packages/components/src/custom-select-control-v2/stories/default.story.tsx → packages/components/src/custom-select-control-v2/stories/index.story.tsx

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170