@wordpress/components 29.3.0 → 29.4.0

package/build-types/combobox-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/combobox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAqBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAYvC,CAAC;AACF,eAAe,IAAI,CAAC;AA6BpB,eAAO,MAAM,OAAO;;;UAlDE,MAAO,SAC3B;;;;;;;;;;;;;EAiDwC,CAAC;AAS3C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;UAhEX,MAAO,SAC3B;;;;;;;;;;;;;EA+DqD,CAAC;AAqCxD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;UA1GV,MAAO,SAC3B;;;;;;;;;;;;;EAyGoD,CAAC;AAWvD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;UA1HP,MAAO,SAC3B;;;;;;;;;;;;;EAyHiD,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/combobox-control/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAOtD;;GAEG;AACH,OAAO,eAAe,MAAM,IAAI,CAAC;AACjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAqBrD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,eAAe,CAYvC,CAAC;AACF,eAAe,IAAI,CAAC;AA6BpB,eAAO,MAAM,OAAO;;;UAlDE,MAAO,SAC3B;;;;;;;;;;;;;;EAiDwC,CAAC;AAS3C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;UAhEX,MAAO,SAC3B;;;;;;;;;;;;;;EA+DqD,CAAC;AAqCxD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;UA1GV,MAAO,SAC3B;;;;;;;;;;;;;;EAyGoD,CAAC;AAWvD;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;UA1HP,MAAO,SAC3B;;;;;;;;;;;;;;EAyHiD,CAAC"}

package/build-types/combobox-control/types.d.ts

@@ -77,5 +77,12 @@ export type ComboboxControlProps = Pick<BaseControlProps, '__nextHasNoMarginBott
      * If passed, the combobox input will show a placeholder string if no values are present.
      */
     placeholder?: string;
+    /**
+     * Show a spinner (and hide the suggestions dropdown) while data
+     * about the matching suggestions (ie the `options` prop) is loading
+     *
+     * @default false
+     */
+    isLoading?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/combobox-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/combobox-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,gBAAgB,EACd,yBAAyB,GACzB,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,MAAM,CACR,GAAG;IACH;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAE,IAAI,EAAE;QAClC,IAAI,EAAE,qBAAqB,CAAC;KAC5B,KAAM,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACV;;;;WAIG;QACH,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,oBAAoB,CAAE,OAAO,CAAE,KAAM,IAAI,CAAC;IAC9D;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/combobox-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,qBAAqB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACtC,gBAAgB,EACd,yBAAyB,GACzB,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,MAAM,CACR,GAAG;IACH;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAE,IAAI,EAAE;QAClC,IAAI,EAAE,qBAAqB,CAAC;KAC5B,KAAM,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE;QACV;;;;WAIG;QACH,QAAQ,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,oBAAoB,CAAE,OAAO,CAAE,KAAM,IAAI,CAAC;IAC9D;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAChD;;OAEG;IACH,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/build-types/font-size-picker/font-size-picker-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AAcjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCAsE9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AASjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCAwD9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.3.0",
+	"version": "29.4.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.17.0",
-		"@wordpress/compose": "^7.17.0",
-		"@wordpress/date": "^5.17.0",
-		"@wordpress/deprecated": "^4.17.0",
-		"@wordpress/dom": "^4.17.0",
-		"@wordpress/element": "^6.17.0",
-		"@wordpress/escape-html": "^3.17.0",
-		"@wordpress/hooks": "^4.17.0",
-		"@wordpress/html-entities": "^4.17.0",
-		"@wordpress/i18n": "^5.17.0",
-		"@wordpress/icons": "^10.17.0",
-		"@wordpress/is-shallow-equal": "^5.17.0",
-		"@wordpress/keycodes": "^4.17.0",
-		"@wordpress/primitives": "^4.17.0",
-		"@wordpress/private-apis": "^1.17.0",
-		"@wordpress/rich-text": "^7.17.0",
-		"@wordpress/warning": "^3.17.0",
+		"@wordpress/a11y": "^4.18.0",
+		"@wordpress/compose": "^7.18.0",
+		"@wordpress/date": "^5.18.0",
+		"@wordpress/deprecated": "^4.18.0",
+		"@wordpress/dom": "^4.18.0",
+		"@wordpress/element": "^6.18.0",
+		"@wordpress/escape-html": "^3.18.0",
+		"@wordpress/hooks": "^4.18.0",
+		"@wordpress/html-entities": "^4.18.0",
+		"@wordpress/i18n": "^5.18.0",
+		"@wordpress/icons": "^10.18.0",
+		"@wordpress/is-shallow-equal": "^5.18.0",
+		"@wordpress/keycodes": "^4.18.0",
+		"@wordpress/primitives": "^4.18.0",
+		"@wordpress/private-apis": "^1.18.0",
+		"@wordpress/rich-text": "^7.18.0",
+		"@wordpress/warning": "^3.18.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
+	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
 }

package/src/combobox-control/README.md

@@ -39,6 +39,7 @@ function MyComboboxControl() {
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
+			isLoading={ isLoading }
 			options={ filteredOptions }
 			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
@@ -112,13 +113,20 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
-### placeholder
+#### placeholder
 
 If passed, the combobox input will show a placeholder string if no values are present.
 
 -   Type: `string`
 -   Required: No
 
+#### isLoading
+
+Show a spinner (and hide the suggestions dropdown) while data about the matching suggestions (ie the `options` prop) is loading
+
+-   Type: `Boolean`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).

package/src/combobox-control/index.tsx

@@ -35,6 +35,7 @@ import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+import Spinner from '../spinner';
 
 const noop = () => {};
 
@@ -126,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		help,
 		allowReset = true,
 		className,
+		isLoading = false,
 		messages = {
 			selected: __( 'Item selected.' ),
 		},
@@ -362,6 +364,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								onChange={ onInputChange }
 							/>
 						</FlexBlock>
+						{ isLoading && <Spinner /> }
 						{ allowReset && (
 							<Button
 								size="small"
@@ -375,7 +378,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						) }
 					</InputWrapperFlex>
-					{ isExpanded && (
+					{ isExpanded && ! isLoading && (
 						<SuggestionsList
 							instanceId={ instanceId }
 							// The empty string for `value` here is not actually used, but is

package/src/combobox-control/style.scss

@@ -36,5 +36,8 @@ input.components-combobox-control__input[type="text"] {
 	&:focus-within {
 		@include input-style__focus();
 	}
-}
 
+	.components-spinner {
+		margin: 0;
+	}
+}

package/src/combobox-control/types.ts

@@ -86,4 +86,11 @@ export type ComboboxControlProps = Pick<
 	 * If passed, the combobox input will show a placeholder string if no values are present.
 	 */
 	placeholder?: string;
+	/**
+	 * Show a spinner (and hide the suggestions dropdown) while data
+	 * about the matching suggestions (ie the `options` prop) is loading
+	 *
+	 * @default false
+	 */
+	isLoading?: boolean;
 };

package/src/font-size-picker/font-size-picker-select.tsx

@@ -20,21 +20,8 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	value: undefined,
 };
 
-const CUSTOM_OPTION: FontSizePickerSelectOption = {
-	key: 'custom',
-	name: __( 'Custom' ),
-};
-
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const {
-		__next40pxDefaultSize,
-		fontSizes,
-		value,
-		disableCustomFontSizes,
-		size,
-		onChange,
-		onSelectCustom,
-	} = props;
+	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
 
 	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
 
@@ -59,12 +46,10 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				hint,
 			};
 		} ),
-		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
 	];
 
-	const selectedOption = value
-		? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION
-		: DEFAULT_OPTION;
+	const selectedOption =
+		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
 
 	return (
 		<CustomSelectControl
@@ -86,11 +71,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				if ( selectedItem === CUSTOM_OPTION ) {
-					onSelectCustom();
-				} else {
-					onChange( selectedItem.value );
-				}
+				onChange( selectedItem.value );
 			} }
 			size={ size }
 		/>

package/src/font-size-picker/test/index.tsx

@@ -127,7 +127,7 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
 			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
@@ -135,7 +135,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
-			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -186,7 +185,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -231,7 +229,7 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
 			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1em' );
@@ -239,7 +237,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
-			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -327,7 +324,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -523,24 +519,6 @@ describe( 'FontSizePicker', () => {
 		);
 	}
 
-	function commonSelectTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when Custom is selected', async () => {
-			const user = userEvent.setup();
-			const onChange = jest.fn();
-			await render(
-				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
-			);
-			await user.click(
-				screen.getByRole( 'combobox', { name: 'Font size' } )
-			);
-			await user.click(
-				screen.getByRole( 'option', { name: 'Custom' } )
-			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
-			expect( onChange ).not.toHaveBeenCalled();
-		} );
-	}
-
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', async () => {
 			await render(