UI: Rename Popup popupWidth prop to width

packages/ui/CHANGELOG.md

@@ -4,12 +4,12 @@
 
 ### Breaking Changes
 
--   `Autocomplete.Popup`, `Combobox.Popup`, `Select.Popup`, `SearchableChipSelect`, and `SearchableChipSelectControl`: The popup now defaults to a fixed anchor width. Use `popupWidth="content"` to restore content-sized width between the anchor and available viewport bounds ([#82087](https://github.com/WordPress/gutenberg/pull/82087)).
+-   `Autocomplete.Popup`, `Combobox.Popup`, `Select.Popup`, `SearchableChipSelect`, and `SearchableChipSelectControl`: The popup now defaults to a fixed anchor width. Use `width="content"` on Popups, or `popupWidth="content"` on composites, to restore content-sized width between the anchor and available viewport bounds ([#82087](https://github.com/WordPress/gutenberg/pull/82087), [#82193](https://github.com/WordPress/gutenberg/pull/82193)).
 -   Portaled overlays (`AlertDialog`, `Autocomplete`, `Combobox`, `Dialog`, `Drawer`, `Menu`, `Popover`, and `Select`) now inherit the theme from their portal destination instead of re-emitting the trigger's nearest contextual theme. Default portals use the document root theme; custom portal containers use their DOM ancestry ([#82038](https://github.com/WordPress/gutenberg/pull/82038)).
 
 ### Enhancements
 
--   `Autocomplete.Popup`, `Combobox.Popup`, `SearchableChipSelect`, `SearchableChipSelectControl`, `Select.Popup`, and `SelectControl`: Add `popupWidth` prop with preset width constraints (`anchor`, `content`, `sm`, `md`, `lg`, and `available`) for the item popup. `SelectControl` defaults to `content` to preserve prior popup sizing ([#82087](https://github.com/WordPress/gutenberg/pull/82087)).
+-   `Autocomplete.Popup`, `Combobox.Popup`, `SearchableChipSelect`, `SearchableChipSelectControl`, `Select.Popup`, and `SelectControl`: Add `width` on Popups and `popupWidth` on composites, with preset width constraints (`anchor`, `content`, `sm`, `md`, `lg`, and `available`) for the item popup. `SelectControl` defaults to `content` to preserve prior popup sizing ([#82087](https://github.com/WordPress/gutenberg/pull/82087), [#82193](https://github.com/WordPress/gutenberg/pull/82193)).
 -   `Menu`: Use `Text` for item labels and descriptions to share typography and apply `text-wrap: pretty`. ([#82237](https://github.com/WordPress/gutenberg/pull/82237))
 -   `Text`: Apply `text-wrap: pretty` by default to improve line wrapping. ([#82133](https://github.com/WordPress/gutenberg/pull/82133))
 

packages/ui/src/form/primitives/autocomplete/popup.tsx

@@ -10,15 +10,15 @@ import type { AutocompletePopupProps } from './types';
 
 export const Popup = forwardRef< HTMLDivElement, AutocompletePopupProps >(
 	function Popup(
-		{ className, portal, positioner, popupWidth, ...restProps },
+		{ className, portal, positioner, width, ...restProps },
 		ref
 	) {
 		const popupContent = (
 			<_Autocomplete.Popup
 				ref={ ref }
 				className={ clsx(
 					itemPopupStyles.popup,
-					getItemPopupWidthClassName( popupWidth ),
+					getItemPopupWidthClassName( width ),
 					className
 				) }
 				{ ...restProps }

packages/ui/src/form/primitives/combobox/popup.tsx

@@ -10,15 +10,15 @@ import type { ComboboxPopupProps } from './types';
 
 export const Popup = forwardRef< HTMLDivElement, ComboboxPopupProps >(
 	function Popup(
-		{ className, portal, positioner, popupWidth, ...restProps },
+		{ className, portal, positioner, width, ...restProps },
 		ref
 	) {
 		const popupContent = (
 			<_Combobox.Popup
 				ref={ ref }
 				className={ clsx(
 					itemPopupStyles.popup,
-					getItemPopupWidthClassName( popupWidth ),
+					getItemPopupWidthClassName( width ),
 					className
 				) }
 				{ ...restProps }

packages/ui/src/form/primitives/searchable-chip-select/searchable-chip-select.tsx

@@ -121,7 +121,7 @@ export const SearchableChipSelect = forwardRef<
 				</Combobox.Chips>
 			</Combobox.InputGroup>
 
-			<Combobox.Popup popupWidth={ popupWidth }>
+			<Combobox.Popup width={ popupWidth }>
 				<Combobox.Empty>{ emptyContent }</Combobox.Empty>
 				<Combobox.List>
 					<Combobox.ListBody>

packages/ui/src/form/primitives/searchable-chip-select/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ItemPopupWidthProps } from '../../../utils/css/item-popup';
+import type { ItemPopupWidth } from '../../../utils/css/item-popup';
 import type {
 	ComboboxCollectionProps,
 	ComboboxEmptyProps,
@@ -149,13 +149,28 @@ export type SearchableChipSelectProps = Omit<
 	ComboboxRootProps< Item, true >,
 	'children' | 'items' | 'multiple'
 > &
-	ItemPopupWidthProps &
 	Partial<
 		Pick<
 			ComboboxInputProps,
 			'aria-label' | 'aria-labelledby' | 'aria-describedby'
 		>
 	> & {
+		/**
+		 * Controls how the popup width is constrained relative to its anchor.
+		 *
+		 * For all presets, the popup is never narrower than its anchor.
+		 *
+		 * - `'anchor'`: Fixed width matching the anchor width.
+		 * - `'content'`: Width grows with item labels between the anchor and available
+		 *   viewport bounds.
+		 * - `'sm'`: Fixed width at the small surface width token (`--wpds-dimension-surface-width-sm`).
+		 * - `'md'`: Fixed width at the medium surface width token (`--wpds-dimension-surface-width-md`).
+		 * - `'lg'`: Fixed width at the large surface width token (`--wpds-dimension-surface-width-lg`).
+		 * - `'available'`: Fixed width at the available viewport width (`--available-width`).
+		 *
+		 * @default 'anchor'
+		 */
+		popupWidth?: ItemPopupWidth;
 		/**
 		 * The array of option items.
 		 *

packages/ui/src/form/primitives/select/popup.tsx

@@ -10,15 +10,15 @@ import type { SelectPopupProps } from './types';
 
 export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >(
 	function Popup(
-		{ className, portal, positioner, popupWidth, children, ...restProps },
+		{ className, portal, positioner, width, children, ...restProps },
 		ref
 	) {
 		const popupContent = (
 			<_Select.Popup
 				ref={ ref }
 				className={ clsx(
 					itemPopupStyles.popup,
-					getItemPopupWidthClassName( popupWidth ),
+					getItemPopupWidthClassName( width ),
 					className
 				) }
 				{ ...restProps }

packages/ui/src/form/select-control/select-control.tsx

@@ -39,7 +39,7 @@ export const SelectControl = forwardRef<
 				>
 					{ triggerContent }
 				</Select.Trigger>
-				<Select.Popup popupWidth={ popupWidth }>
+				<Select.Popup width={ popupWidth }>
 					{ children !== undefined
 						? children
 						: items?.map( ( item ) => (

packages/ui/src/utils/css/item-popup.ts

@@ -27,13 +27,13 @@ export type ItemPopupWidthProps = {
 	 *
 	 * @default 'anchor'
 	 */
-	popupWidth?: ItemPopupWidth;
+	width?: ItemPopupWidth;
 };
 
 export function getItemPopupWidthClassName(
-	popupWidth: ItemPopupWidth | undefined = 'anchor'
+	width: ItemPopupWidth | undefined = 'anchor'
 ): string | false {
-	switch ( popupWidth ) {
+	switch ( width ) {
 		case 'available':
 			return itemPopupStyles[ 'is-width-available' ];
 		case 'content':

storybook/components-manifest.yml

@@ -110,11 +110,11 @@
             - className
             - finalFocus
             - initialFocus
-            - popupWidth
             - portal
             - positioner
             - render
             - style
+            - width
       - name: Autocomplete.Portal
         props:
             - className