CustomSelectControl: refactor using ariakit

docs/manifest.json

@@ -737,6 +737,42 @@
 		"markdown_source": "../packages/components/src/confirm-dialog/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CustomSelectControlArrow",
+		"slug": "custom-select-control-arrow",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CustomSelectControlGroupLabel",
+		"slug": "custom-select-control-group-label",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CustomSelectControlGroup",
+		"slug": "custom-select-control-group",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-group/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CustomSelectControlItem",
+		"slug": "custom-select-control-item",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-item/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CustomSelectControlSeparator",
+		"slug": "custom-select-control-separator",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-separator/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "CustomSelectControl",
+		"slug": "custom-select-control",
+		"markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "CustomSelectControl",
 		"slug": "custom-select-control",

packages/components/package.json

@@ -53,6 +53,7 @@
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
+		"ariakit": "2.0.0-next.36",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",

packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md

@@ -0,0 +1,3 @@
+# CustomSelectControlArrow
+
+TODO

packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import { SelectArrow } from 'ariakit/select';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelectControlArrow } from './hook';
+import { WordPressComponentProps } from '../../ui/context';
+import type { SelectControlArrowProps } from '../types';
+
+const UnforwardedSelectControlArrow = (
+	props: WordPressComponentProps< SelectControlArrowProps, 'span', false >,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const allProps = useSelectControlArrow( props );
+
+	// TODO: investigate incompatibility with the "as" prop.
+	return <SelectArrow { ...allProps } ref={ forwardedRef } />;
+};
+
+// TODO: JSDocs
+export const SelectControlArrow = forwardRef( UnforwardedSelectControlArrow );
+
+export default SelectControlArrow;

packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { SelectControlArrowProps } from '../types';
+
+// TODO:
+// - should we allow polymorphism ?
+export const useSelectControlArrow = ( {
+	className,
+	...props
+}: WordPressComponentProps< SelectControlArrowProps, 'span', false > ) => {
+	const cx = useCx();
+	const arrowClassName = useMemo(
+		() => cx( styles.arrow, className ),
+		[ className, cx ]
+	);
+
+	return {
+		...props,
+		className: arrowClassName,
+	};
+};

packages/components/src/custom-select-control-new/custom-select-control-arrow/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useSelectControlArrow } from './hook';

packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md

@@ -0,0 +1,3 @@
+# CustomSelectControlGroupLabel
+
+TODO

packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import { SelectGroupLabel } from 'ariakit/select';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelectControlGroupLabel } from './hook';
+import { WordPressComponentProps } from '../../ui/context';
+import type { SelectControlGroupLabelProps } from '../types';
+
+const UnforwardedSelectControlGroupLabel = (
+	props: WordPressComponentProps<
+		SelectControlGroupLabelProps,
+		'div',
+		false
+	>,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const allProps = useSelectControlGroupLabel( props );
+
+	// TODO: investigate incompatibility with the "as" prop.
+	return <SelectGroupLabel { ...allProps } ref={ forwardedRef } />;
+};
+
+// TODO: JSDocs
+export const SelectControlGroupLabel = forwardRef(
+	UnforwardedSelectControlGroupLabel
+);
+
+export default SelectControlGroupLabel;

packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { SelectControlGroupLabelProps } from '../types';
+
+// TODO:
+// - should we use 'option' instead of `div` for props inheritance?
+// - should we allow polymorphism ?
+export const useSelectControlGroupLabel = ( {
+	className,
+	...props
+}: WordPressComponentProps< SelectControlGroupLabelProps, 'div', false > ) => {
+	const cx = useCx();
+	const groupLabelClassName = useMemo(
+		() => cx( styles.groupLabel, className ),
+		[ className, cx ]
+	);
+
+	return {
+		...props,
+		className: groupLabelClassName,
+	};
+};

packages/components/src/custom-select-control-new/custom-select-control-group-label/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useSelectControlGroupLabel } from './hook';

packages/components/src/custom-select-control-new/custom-select-control-group/README.md

@@ -0,0 +1,3 @@
+# CustomSelectControlGroup
+
+TODO

packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import { SelectGroup } from 'ariakit/select';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelectControlGroup } from './hook';
+import { WordPressComponentProps } from '../../ui/context';
+import type { SelectControlGroupProps } from '../types';
+
+const UnforwardedSelectControlGroup = (
+	props: WordPressComponentProps< SelectControlGroupProps, 'div', false >,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const allProps = useSelectControlGroup( props );
+
+	// TODO: investigate incompatibility with the "as" prop.
+	return <SelectGroup { ...allProps } ref={ forwardedRef } />;
+};
+
+// TODO: JSDocs
+export const SelectControlGroup = forwardRef( UnforwardedSelectControlGroup );
+
+export default SelectControlGroup;

packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { SelectControlGroupProps } from '../types';
+
+// TODO:
+// - should we allow polymorphism ?
+export const useSelectControlGroup = ( {
+	className,
+	...props
+}: WordPressComponentProps< SelectControlGroupProps, 'div', false > ) => {
+	const cx = useCx();
+	const groupClassName = useMemo(
+		() => cx( styles.group, className ),
+		[ className, cx ]
+	);
+
+	return {
+		...props,
+		className: groupClassName,
+	};
+};

packages/components/src/custom-select-control-new/custom-select-control-group/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useSelectControlGroup } from './hook';

packages/components/src/custom-select-control-new/custom-select-control-item/README.md

@@ -0,0 +1,3 @@
+# CustomSelectControlItem
+
+TODO

packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+import { SelectItem } from 'ariakit/select';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useSelectControlItem } from './hook';
+import { WordPressComponentProps } from '../../ui/context';
+import type { SelectControlItemProps } from '../types';
+
+const UnforwardedSelectControlItem = (
+	props: WordPressComponentProps< SelectControlItemProps, 'div', false >,
+	forwardedRef: ForwardedRef< any >
+) => {
+	const allProps = useSelectControlItem( props );
+
+	// TODO: investigate incompatibility with the "as" prop.
+	return <SelectItem { ...allProps } ref={ forwardedRef } />;
+};
+
+// TODO: JSDocs
+export const SelectControlItem = forwardRef( UnforwardedSelectControlItem );
+
+export default SelectControlItem;

packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from '../styles';
+import type { WordPressComponentProps } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
+import { SelectControlItemProps } from '../types';
+
+// TODO:
+// - should we use 'option' instead of `div` for props inheritance?
+// - should we allow polymorphism ?
+export const useSelectControlItem = ( {
+	className,
+	...props
+}: WordPressComponentProps< SelectControlItemProps, 'div', false > ) => {
+	const cx = useCx();
+	const itemClassName = useMemo(
+		() => cx( styles.item, className ),
+		[ className, cx ]
+	);
+
+	return {
+		...props,
+		className: itemClassName,
+	};
+};

packages/components/src/custom-select-control-new/custom-select-control-item/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export { useSelectControlItem } from './hook';

packages/components/src/custom-select-control-new/custom-select-control-separator/README.md

@@ -0,0 +1,3 @@
+# CustomSelectControlSeparator
+
+TODO