@wordpress/components 26.0.4 → 27.1.0

package/build-types/utils/hooks/index.d.ts

@@ -2,5 +2,4 @@ export { default as useControlledState } from "./use-controlled-state";
 export { default as useUpdateEffect } from "./use-update-effect";
 export { useControlledValue } from "./use-controlled-value";
 export { useCx } from "./use-cx";
-export { useLatestRef } from "./use-latest-ref";
 //# sourceMappingURL=index.d.ts.map

package/build-types/utils/with-ignore-ime-events.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
+ *
+ * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
+ * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
+ * which are intended to control the IME and not the application.
+ * These events should be ignored by any application logic.
+ *
+ * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
+ *
+ * @return A wrapped version of the given event handler that ignores IME events.
+ */
+export declare function withIgnoreIMEEvents<E extends React.KeyboardEvent | KeyboardEvent>(keydownHandler: (event: E) => void): (event: E) => void;
+//# sourceMappingURL=with-ignore-ime-events.d.ts.map

package/build-types/utils/with-ignore-ime-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-ignore-ime-events.d.ts","sourceRoot":"","sources":["../../src/utils/with-ignore-ime-events.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAClC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,aAAa,EAC3C,cAAc,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,WACtB,CAAC,UAgBjB"}

package/build-types/v-stack/hook.d.ts

@@ -6,13 +6,11 @@ import type { WordPressComponentProps } from '../context';
 import type { VStackProps } from './types';
 export declare function useVStack(props: WordPressComponentProps<VStackProps, 'div'>): {
     className: string;
-    isColumn: boolean;
-    children: import("react").ReactNode;
-    isReversed?: boolean | undefined;
     id?: string | undefined;
     prefix?: string | undefined;
     slot?: string | undefined;
     role?: import("react").AriaRole | undefined;
+    children: import("react").ReactNode;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -231,6 +229,7 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    as?: keyof JSX.IntrinsicElements | undefined;
     key?: import("react").Key | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -264,6 +263,5 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     unselectable?: "on" | "off" | undefined;
     inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
-    as?: keyof JSX.IntrinsicElements | undefined;
 };
 //# sourceMappingURL=hook.d.ts.map

package/build-types/v-stack/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/v-stack/hook.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,SAAS,CACxB,KAAK,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBpD"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/v-stack/hook.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,SAAS,CACxB,KAAK,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBpD"}

package/build-types/v-stack/stories/index.story.d.ts

@@ -6,7 +6,7 @@ import type { Meta } from '@storybook/react';
 import { VStack } from '..';
 declare const meta: Meta<typeof VStack>;
 export default meta;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
     alignment?: "top" | "bottom" | "left" | "center" | "right" | "start" | "end" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "baseline" | "stretch" | "flex-end" | "flex-start" | "self-end" | "self-start" | "edge" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
     spacing?: import("csstype").Property.Width<string | number> | undefined;
 } & import("react").RefAttributes<any> & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "direction" | "expanded" | "spacing" | "as" | "wrap" | "justify" | keyof import("react").RefAttributes<any> | "isReversed" | "alignment"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "26.0.4",
+	"version": "27.1.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,29 +42,28 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.51.1",
-		"@wordpress/compose": "^6.28.1",
-		"@wordpress/date": "^4.51.1",
-		"@wordpress/deprecated": "^3.51.1",
-		"@wordpress/dom": "^3.51.1",
-		"@wordpress/element": "^5.28.1",
-		"@wordpress/escape-html": "^2.51.1",
-		"@wordpress/hooks": "^3.51.1",
-		"@wordpress/html-entities": "^3.51.1",
-		"@wordpress/i18n": "^4.51.1",
-		"@wordpress/icons": "^9.42.3",
-		"@wordpress/is-shallow-equal": "^4.51.1",
-		"@wordpress/keycodes": "^3.51.1",
-		"@wordpress/primitives": "^3.49.1",
-		"@wordpress/private-apis": "^0.33.1",
-		"@wordpress/rich-text": "^6.28.3",
-		"@wordpress/warning": "^2.51.1",
+		"@wordpress/a11y": "^3.53.0",
+		"@wordpress/compose": "^6.30.0",
+		"@wordpress/date": "^4.53.0",
+		"@wordpress/deprecated": "^3.53.0",
+		"@wordpress/dom": "^3.53.0",
+		"@wordpress/element": "^5.30.0",
+		"@wordpress/escape-html": "^2.53.0",
+		"@wordpress/hooks": "^3.53.0",
+		"@wordpress/html-entities": "^3.53.0",
+		"@wordpress/i18n": "^4.53.0",
+		"@wordpress/icons": "^9.44.0",
+		"@wordpress/is-shallow-equal": "^4.53.0",
+		"@wordpress/keycodes": "^3.53.0",
+		"@wordpress/primitives": "^3.51.0",
+		"@wordpress/private-apis": "^0.35.0",
+		"@wordpress/rich-text": "^6.30.0",
+		"@wordpress/warning": "^2.53.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"date-fns": "^2.28.0",
 		"deepmerge": "^4.3.0",
-		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^10.13.0",
@@ -87,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4927ea437069f9aed12f696df294a79bd8e12fd5"
+	"gitHead": "ac3c3e465a083081a86a4da6ee6fb817b41e5130"
 }

package/src/alignment-matrix-control/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { press, click } from '@ariakit/test';
+import { press, click, sleep } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -39,6 +39,7 @@ describe( 'AlignmentMatrixControl', () => {
 		it( 'should be centered by default', async () => {
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
+			await sleep();
 			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
@@ -109,6 +110,7 @@ describe( 'AlignmentMatrixControl', () => {
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
+					await sleep();
 					await press.Tab();
 					await press[ keyRef ]();
 

package/src/autocomplete/index.tsx

@@ -30,6 +30,7 @@ import { isAppleOS } from '@wordpress/keycodes';
  */
 import { getAutoCompleterUI } from './autocompleter-ui';
 import { escapeRegExp } from '../utils/strings';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import type {
 	AutocompleteProps,
 	AutocompleterUIProps,
@@ -183,15 +184,7 @@ export function useAutocomplete( {
 			return;
 		}
 
-		if (
-			event.defaultPrevented ||
-			// Ignore keydowns from IMEs
-			event.isComposing ||
-			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-			// is `isComposing=false`, even though it's technically still part of the composition.
-			// These can only be detected by keyCode.
-			event.keyCode === 229
-		) {
+		if ( event.defaultPrevented ) {
 			return;
 		}
 
@@ -390,7 +383,7 @@ export function useAutocomplete( {
 	return {
 		listBoxId,
 		activeId,
-		onKeyDown: handleKeyDown,
+		onKeyDown: withIgnoreIMEEvents( handleKeyDown ),
 		popover: hasSelection && AutocompleterUI && (
 			<AutocompleterUI
 				className={ className }

package/src/base-control/index.native.js

@@ -5,7 +5,7 @@ import { Text, View } from 'react-native';
 
 export default function BaseControl( { label, help, children } ) {
 	return (
-		<View accessible={ true } accessibilityLabel={ label }>
+		<View accessible accessibilityLabel={ label }>
 			{ label && <Text>{ label }</Text> }
 			{ children }
 			{ help && <Text>{ help }</Text> }

package/src/base-control/test/index.tsx

@@ -14,7 +14,7 @@ const MyBaseControl = ( props: Omit< BaseControlProps, 'children' > ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<textarea { ...controlProps } />
 		</BaseControl>
 	);

package/src/border-box-control/border-box-control/component.tsx

@@ -111,7 +111,7 @@ const UnconnectedBorderBoxControl = (
 						__unstablePopoverProps={ popoverProps }
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
-						withSlider={ true }
+						withSlider
 						width={
 							size === '__unstable-large' ? '116px' : '110px'
 						}

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -76,7 +76,7 @@ const BorderBoxControlSplitControls = (
 			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -84,7 +84,7 @@ const BorderBoxControlSplitControls = (
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -93,7 +93,7 @@ const BorderBoxControlSplitControls = (
 			/>
 			<BorderControl
 				className={ rightAlignedClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
 				__unstablePopoverProps={ popoverProps }
@@ -102,7 +102,7 @@ const BorderBoxControlSplitControls = (
 			/>
 			<BorderControl
 				className={ centeredClassName }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
 				__unstablePopoverProps={ popoverProps }

package/src/border-control/border-control-dropdown/component.tsx

@@ -179,7 +179,7 @@ const BorderControlDropdown = (
 			aria-label={ toggleAriaLabel }
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
-			showTooltip={ true }
+			showTooltip
 			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
 		>
 			<span className={ indicatorWrapperClassName }>

package/src/button/index.native.js

@@ -180,7 +180,7 @@ export function Button( props ) {
 	const element = (
 		<TouchableOpacity
 			activeOpacity={ 0.7 }
-			accessible={ true }
+			accessible
 			accessibilityLabel={ label }
 			accessibilityStates={ states }
 			accessibilityRole={ 'button' }

package/src/button/index.tsx

@@ -223,10 +223,10 @@ export function UnforwardedButton(
 				<Icon icon={ icon } size={ iconSize } />
 			) }
 			{ text && <>{ text }</> }
+			{ children }
 			{ icon && iconPosition === 'right' && (
 				<Icon icon={ icon } size={ iconSize } />
 			) }
-			{ children }
 		</>
 	);
 

package/src/button/style.scss

@@ -84,9 +84,7 @@
 			outline: none;
 
 			&:focus:enabled {
-				box-shadow:
-					0 0 0 $border-width $components-color-background,
-					0 0 0 3px $components-color-accent;
+				box-shadow: inset 0 0 0 1px $components-color-background, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 			}
 		}
 

package/src/circular-option-picker/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { press } from '@ariakit/test';
+import { press, sleep } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -59,9 +59,7 @@ describe( 'CircularOptionPicker', () => {
 
 	describe( 'when `asButtons` is true', () => {
 		it( 'should render as buttons', async () => {
-			render(
-				<CircularOptionPicker { ...DEFAULT_PROPS } asButtons={ true } />
-			);
+			render( <CircularOptionPicker { ...DEFAULT_PROPS } asButtons /> );
 
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
@@ -78,6 +76,7 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -93,10 +92,11 @@ describe( 'CircularOptionPicker', () => {
 				<CircularOptionPicker
 					{ ...DEFAULT_PROPS }
 					options={ MULTIPLE_OPTIONS }
-					loop={ true }
+					loop
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();
@@ -116,6 +116,7 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
+			await sleep();
 			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 			await press.ArrowRight();

package/src/color-picker/component.tsx

@@ -16,7 +16,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../context';
+import {
+	useContextSystem,
+	contextConnect,
+	ContextSystemProvider,
+} from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -39,6 +43,9 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
+// `isBorderless` is still experimental and not a public prop for InputControl yet.
+const BORDERLESS_SELECT_CONTROL_CONTEXT = { InputBase: { isBorderless: true } };
+
 const UnconnectedColorPicker = (
 	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
@@ -107,16 +114,20 @@ const UnconnectedColorPicker = (
 			/>
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
-					<SelectControl
-						__nextHasNoMarginBottom
-						options={ options }
-						value={ colorType }
-						onChange={ ( nextColorType ) =>
-							setColorType( nextColorType as ColorType )
-						}
-						label={ __( 'Color format' ) }
-						hideLabelFromVision
-					/>
+					<ContextSystemProvider
+						value={ BORDERLESS_SELECT_CONTROL_CONTEXT }
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							options={ options }
+							value={ colorType }
+							onChange={ ( nextColorType ) =>
+								setColorType( nextColorType as ColorType )
+							}
+							label={ __( 'Color format' ) }
+							hideLabelFromVision
+						/>
+					</ContextSystemProvider>
 					<ColorCopyButton
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }

package/src/color-picker/styles.ts

@@ -14,29 +14,15 @@ import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';
 import { HStack } from '../h-stack';
-import {
-	BackdropUI,
-	Container as InputControlContainer,
-} from '../input-control/styles/input-control-styles';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
-	${ InputControlContainer } {
-		width: ${ space( 24 ) };
-	}
+	width: ${ space( 24 ) };
 `;
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
 	width: 5em;
-	/*
-	 * Remove border, but preserve focus styles
-	 * TODO: this override should be removed,
-	 * see https://github.com/WordPress/gutenberg/pull/50609
-	 */
-	select:not( :focus ) ~ ${ BackdropUI }${ BackdropUI }${ BackdropUI } {
-		border-color: transparent;
-	}
 `;
 
 export const RangeControl = styled( InnerRangeControl )`

package/src/combobox-control/index.tsx

@@ -33,6 +33,7 @@ import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const noop = () => {};
 
@@ -186,51 +187,42 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		setIsExpanded( true );
 	};
 
-	const onKeyDown: React.KeyboardEventHandler< HTMLDivElement > = (
-		event
-	) => {
-		let preventDefault = false;
+	const onKeyDown: React.KeyboardEventHandler< HTMLDivElement > =
+		withIgnoreIMEEvents( ( event ) => {
+			let preventDefault = false;
 
-		if (
-			event.defaultPrevented ||
-			// Ignore keydowns from IMEs
-			event.nativeEvent.isComposing ||
-			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
-			// is `isComposing=false`, even though it's technically still part of the composition.
-			// These can only be detected by keyCode.
-			event.keyCode === 229
-		) {
-			return;
-		}
+			if ( event.defaultPrevented ) {
+				return;
+			}
 
-		switch ( event.code ) {
-			case 'Enter':
-				if ( selectedSuggestion ) {
-					onSuggestionSelected( selectedSuggestion );
+			switch ( event.code ) {
+				case 'Enter':
+					if ( selectedSuggestion ) {
+						onSuggestionSelected( selectedSuggestion );
+						preventDefault = true;
+					}
+					break;
+				case 'ArrowUp':
+					handleArrowNavigation( -1 );
 					preventDefault = true;
-				}
-				break;
-			case 'ArrowUp':
-				handleArrowNavigation( -1 );
-				preventDefault = true;
-				break;
-			case 'ArrowDown':
-				handleArrowNavigation( 1 );
-				preventDefault = true;
-				break;
-			case 'Escape':
-				setIsExpanded( false );
-				setSelectedSuggestion( null );
-				preventDefault = true;
-				break;
-			default:
-				break;
-		}
+					break;
+				case 'ArrowDown':
+					handleArrowNavigation( 1 );
+					preventDefault = true;
+					break;
+				case 'Escape':
+					setIsExpanded( false );
+					setSelectedSuggestion( null );
+					preventDefault = true;
+					break;
+				default:
+					break;
+			}
 
-		if ( preventDefault ) {
-			event.preventDefault();
-		}
-	};
+			if ( preventDefault ) {
+				event.preventDefault();
+			}
+		} );
 
 	const onBlur = () => {
 		setInputHasFocus( false );

package/src/combobox-control/test/index.tsx

@@ -98,7 +98,7 @@ describe.each( [
 			<Component
 				options={ timezones }
 				label={ defaultLabelText }
-				hideLabelFromVision={ true }
+				hideLabelFromVision
 			/>
 		);
 		const label = getLabel( defaultLabelText );