@wordpress/components 25.12.0 → 25.13.0

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/dropdown-menu-v2-ariakit/README.md

@@ -284,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
 
@@ -294,13 +294,27 @@ The component accepts the following props:
 
 ##### `children`: `React.ReactNode`
 
-The contents of the group.
+The label contents.
+
+- Required: yes
+
+### `DropdownMenuItemHelpText`
+
+Used to render the menu item's help text.
+
+#### Props
+
+The component accepts the following props:
+
+##### `children`: `React.ReactNode`
+
+The help text contents.
 
 - Required: yes
 
-### `DropdownMenuGroupLabel`
+### `DropdownMenuGroup`
 
-Used to render a group label.
+Used to group menu items.
 
 #### Props
 

package/src/dropdown-menu-v2-ariakit/index.tsx

@@ -30,7 +30,6 @@ import type {
 	DropdownMenuContext as DropdownMenuContextType,
 	DropdownMenuProps,
 	DropdownMenuGroupProps,
-	DropdownMenuGroupLabelProps,
 	DropdownMenuItemProps,
 	DropdownMenuCheckboxItemProps,
 	DropdownMenuRadioItemProps,
@@ -55,16 +54,23 @@ export const DropdownMenuItem = forwardRef<
 		<Styled.DropdownMenuItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
-			{ prefix && (
-				<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
-			) }
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.ItemPrefixWrapper>{ prefix }</Styled.ItemPrefixWrapper>
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuItem>
 	);
 } );
@@ -82,20 +88,30 @@ export const DropdownMenuCheckboxItem = forwardRef<
 		<Styled.DropdownMenuCheckboxItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ check } size={ 24 } />
 			</Ariakit.MenuItemCheck>
 
-			{ children }
-			{ suffix && (
-				<Styled.ItemSuffixWrapper>{ suffix }</Styled.ItemSuffixWrapper>
-			) }
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuCheckboxItem>
 	);
 } );
@@ -119,17 +135,30 @@ export const DropdownMenuRadioItem = forwardRef<
 		<Styled.DropdownMenuRadioItem
 			ref={ ref }
 			{ ...props }
+			accessibleWhenDisabled
 			hideOnClick={ hideOnClick }
 			store={ dropdownMenuContext?.store }
 		>
 			<Ariakit.MenuItemCheck
 				store={ dropdownMenuContext?.store }
 				render={ <Styled.ItemPrefixWrapper /> }
+				// Override some ariakit inline styles
+				style={ { width: 'auto', height: 'auto' } }
 			>
 				<Icon icon={ radioCheck } size={ 24 } />
 			</Ariakit.MenuItemCheck>
-			{ children }
-			{ suffix }
+
+			<Styled.DropdownMenuItemContentWrapper>
+				<Styled.DropdownMenuItemChildrenWrapper>
+					{ children }
+				</Styled.DropdownMenuItemChildrenWrapper>
+
+				{ suffix && (
+					<Styled.ItemSuffixWrapper>
+						{ suffix }
+					</Styled.ItemSuffixWrapper>
+				) }
+			</Styled.DropdownMenuItemContentWrapper>
 		</Styled.DropdownMenuRadioItem>
 	);
 } );
@@ -148,20 +177,6 @@ export const DropdownMenuGroup = forwardRef<
 	);
 } );
 
-export const DropdownMenuGroupLabel = forwardRef<
-	HTMLDivElement,
-	WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false >
->( function DropdownMenuGroupLabel( props, ref ) {
-	const dropdownMenuContext = useContext( DropdownMenuContext );
-	return (
-		<Styled.DropdownMenuGroupLabel
-			ref={ ref }
-			{ ...props }
-			store={ dropdownMenuContext?.store }
-		/>
-	);
-} );
-
 const UnconnectedDropdownMenu = (
 	props: WordPressComponentProps< DropdownMenuProps, 'div', false >,
 	ref: React.ForwardedRef< HTMLDivElement >
@@ -280,12 +295,16 @@ const UnconnectedDropdownMenu = (
 					dropdownMenuStore.parent
 						? cloneElement( trigger, {
 								// Add submenu arrow, unless a `suffix` is explicitly specified
-								suffix: trigger.props.suffix ?? (
-									<Styled.SubmenuChevronIcon
-										aria-hidden="true"
-										icon={ chevronRightSmall }
-										size={ 24 }
-									/>
+								suffix: (
+									<>
+										{ trigger.props.suffix }
+										<Styled.SubmenuChevronIcon
+											aria-hidden="true"
+											icon={ chevronRightSmall }
+											size={ 24 }
+											preserveAspectRatio="xMidYMid slice"
+										/>
+									</>
 								),
 						  } )
 						: trigger
@@ -297,8 +316,12 @@ const UnconnectedDropdownMenu = (
 				{ ...otherProps }
 				modal={ modal }
 				store={ dropdownMenuStore }
-				gutter={ gutter ?? ( dropdownMenuStore.parent ? 16 : 8 ) }
-				shift={ shift ?? ( dropdownMenuStore.parent ? -8 : 0 ) }
+				// Root menu has an 8px distance from its trigger,
+				// otherwise 0 (which causes the submenu to slightly overlap)
+				gutter={ gutter ?? ( dropdownMenuStore.parent ? 0 : 8 ) }
+				// Align nested menu by the same (but opposite) amount
+				// as the menu container's padding.
+				shift={ shift ?? ( dropdownMenuStore.parent ? -4 : 0 ) }
 				hideOnHoverOutside={ false }
 				data-side={ appliedPlacementSide }
 				variant={ variant }
@@ -332,3 +355,29 @@ export const DropdownMenuSeparator = forwardRef<
 		/>
 	);
 } );
+
+export const DropdownMenuItemLabel = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemLabel( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemLabel
+			numberOfLines={ 1 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );
+
+export const DropdownMenuItemHelpText = forwardRef<
+	HTMLSpanElement,
+	WordPressComponentProps< { children: React.ReactNode }, 'span', true >
+>( function DropdownMenuItemHelpText( props, ref ) {
+	return (
+		<Styled.DropdownMenuItemHelpText
+			numberOfLines={ 2 }
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+} );