@wordpress/components 25.11.1-next.f8d8eceb.0 → 25.13.0

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 ] };
+	}
+`;

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

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type * as Ariakit from '@ariakit/react';
+
+export type CustomSelectContext =
+	| {
+			/**
+			 * The store object returned by Ariakit's `useSelectStore` hook.
+			 */
+			store: Ariakit.SelectStore;
+	  }
+	| undefined;
+
+export type CustomSelectProps = {
+	/**
+	 * The child elements. This should be composed of CustomSelectItem components.
+	 */
+	children: React.ReactNode;
+	/**
+	 * An optional default value for the control. If left `undefined`, the first
+	 * non-disabled item will be used.
+	 */
+	defaultValue?: string | string[];
+	/**
+	 * Label for the control.
+	 */
+	label: string;
+	/**
+	 * A function that receives the new value of the input.
+	 */
+	onChange?: ( newValue: string | string[] ) => void;
+	/**
+	 * Can be used to render select UI with custom styled values.
+	 */
+	renderSelectedValue?: (
+		selectedValue: string | string[]
+	) => React.ReactNode;
+	/**
+	 * The size of the control.
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'small';
+	/**
+	 * Can be used to externally control the value of the control.
+	 */
+	value?: string | string[];
+};
+
+export type CustomSelectItemProps = {
+	/**
+	 * The value of the select item. This will be used as the children if
+	 * children are left `undefined`.
+	 */
+	value: string;
+	/**
+	 * The children to display for each select item. The `value` will be
+	 * used if left `undefined`.
+	 */
+	children?: React.ReactNode;
+};

package/src/disclosure/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DisclosureContentProps } from './types';
+import type { WordPressComponentProps } from '../context';
+
+/**
+ * Accessible Disclosure component that controls visibility of a section of
+ * content. It follows the WAI-ARIA Disclosure Pattern.
+ */
+const UnforwardedDisclosureContent = (
+	{
+		visible,
+		children,
+		...props
+	}: WordPressComponentProps< DisclosureContentProps, 'div', false >,
+	ref: React.ForwardedRef< any >
+) => {
+	const disclosure = Ariakit.useDisclosureStore( { open: visible } );
+
+	return (
+		<Ariakit.DisclosureContent
+			store={ disclosure }
+			ref={ ref }
+			{ ...props }
+		>
+			{ children }
+		</Ariakit.DisclosureContent>
+	);
+};
+
+export const DisclosureContent = forwardRef( UnforwardedDisclosureContent );
+export default DisclosureContent;

package/src/disclosure/types.tsx

@@ -0,0 +1,10 @@
+export type DisclosureContentProps = {
+	/**
+	 * If set to `true` the content will be shown, otherwise it's hidden.
+	 */
+	visible?: boolean;
+	/**
+	 * The content to display within the component.
+	 */
+	children: React.ReactNode;
+};

package/src/divider/component.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { Separator } from 'reakit';
+import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -20,8 +20,8 @@ function UnconnectedDivider(
 	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
-		<Separator
-			as={ DividerView }
+		<Ariakit.Separator
+			render={ <DividerView /> }
 			{ ...contextProps }
 			ref={ forwardedRef }
 		/>

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

@@ -23,6 +23,14 @@ const meta: Meta< typeof Divider > = {
 		marginEnd: {
 			control: { type: 'text' },
 		},
+		wrapElement: {
+			control: { type: null },
+		},
+		ref: {
+			table: {
+				disable: true,
+			},
+		},
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/divider/types.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { SeparatorProps } from 'reakit';
+import type { SeparatorProps } from '@ariakit/react';
 
 /**
  * Internal dependencies
@@ -11,7 +11,7 @@ import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,
-	'children' | 'unstable_system' | 'orientation'
+	'children' | 'unstable_system' | 'orientation' | 'as' | 'render'
 > & {
 	/**
 	 * Adjusts all margins on the inline dimension.

package/src/dropdown-menu/style.scss

@@ -1,3 +1,7 @@
+.components-dropdown-menu__toggle {
+	vertical-align: top;
+}
+
 .components-dropdown-menu__menu {
 	width: 100%;
 	font-family: $default-font;

package/src/dropdown-menu-v2-ariakit/README.md

@@ -113,13 +113,6 @@ The skidding of the popover along the anchor element. Can be set to negative val
 - Required: no
 - Default: `0` for root-level menus, `-8` for nested menus
 
-##### `hideOnEscape`: `boolean | ( ( event: KeyboardEvent | React.KeyboardEvent< Element > ) => boolean )`
-
-Determines whether the menu popover will be hidden when the user presses the Escape key.
-
-- Required: no
-- Default: `true`
-
 ### `DropdownMenuItem`
 
 Used to render a menu item.
@@ -291,9 +284,9 @@ Event handler called when the checked radio menu item changes.
 
 - Required: no
 
-### `DropdownMenuGroup`
+### `DropdownMenuItemLabel`
 
-Used to group menu items.
+Used to render the menu item's label.
 
 #### Props
 
@@ -301,13 +294,27 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group.
+The label contents.
 
 - Required: yes
 
-### `DropdownMenuGroupLabel`
+### `DropdownMenuItemHelpText`
+
+Used to render the menu item's help text.
+
+#### Props
 
-Used to render a group label.
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The help text contents.
+
+- Required: yes
+
+### `DropdownMenuGroup`
+
+Used to group menu items.
 
 #### Props