@wordpress/components 26.0.4 → 27.1.0

package/src/draggable/test/index.native.js

@@ -28,10 +28,12 @@ const TouchEventType = {
 // For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
 let requestAnimationFrameCopy;
 beforeEach( () => {
+	jest.useFakeTimers();
 	requestAnimationFrameCopy = global.requestAnimationFrame;
 	global.requestAnimationFrame = ( callback ) => callback();
 } );
 afterEach( () => {
+	jest.useRealTimers();
 	global.requestAnimationFrame = requestAnimationFrameCopy;
 } );
 
@@ -43,7 +45,7 @@ describe( 'Draggable', () => {
 			<Draggable>
 				<DraggableTrigger
 					id={ triggerId }
-					enabled={ true }
+					enabled
 					minDuration={ 500 }
 					onLongPress={ onLongPress }
 					testID="draggableTrigger"
@@ -58,6 +60,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 
 		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
 		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
@@ -93,6 +96,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 		fireGestureHandler( draggable, [
 			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
 			{ oldState: State.BEGAN, state: State.ACTIVE },
@@ -112,7 +116,7 @@ describe( 'Draggable', () => {
 		] );
 		// TODO(jest-console): Fix the warning and remove the expect below.
 		expect( console ).toHaveWarnedWith(
-			'[Reanimated] You can not use setGestureState in non-worklet function.'
+			'[Reanimated] setGestureState() cannot be used with Jest.'
 		);
 
 		expect( onDragStart ).toHaveBeenCalledTimes( 1 );

package/src/dropdown-menu/index.native.js

@@ -108,7 +108,7 @@ function DropdownMenu( {
 			renderContent={ ( { isOpen, onClose, ...props } ) => {
 				return (
 					<BottomSheet
-						hideHeader={ true }
+						hideHeader
 						isVisible={ isOpen }
 						onClose={ onClose }
 					>
@@ -135,7 +135,7 @@ function DropdownMenu( {
 												} }
 												editable={ false }
 												icon={ control.icon }
-												leftAlign={ true }
+												leftAlign
 												isSelected={ control.isActive }
 												separatorType={
 													Platform.OS === 'android'

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -56,6 +56,7 @@ const meta: Meta< typeof DropdownMenu > = {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
 	},
+	tags: [ 'status-private' ],
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
 		badges: [ 'private' ],

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, type } from '@ariakit/test';
+import { press, click, hover, sleep, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -123,6 +123,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -153,6 +154,7 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
+			await sleep();
 			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
@@ -908,6 +910,7 @@ describe( 'DropdownMenu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the DropdownMenu to close.
+			await sleep();
 			await press.Tab();
 			expect( outerButton ).toBeInTheDocument();
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();

package/src/flex/flex/hook.ts

@@ -22,7 +22,7 @@ import type { FlexProps } from '../types';
 
 function useDeprecatedProps(
 	props: WordPressComponentProps< FlexProps, 'div' >
-): WordPressComponentProps< FlexProps, 'div' > {
+): Omit< typeof props, 'isReversed' > {
 	const { isReversed, ...otherProps } = props;
 
 	if ( typeof isReversed !== 'undefined' ) {

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

@@ -69,7 +69,6 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextUnconstrainedWidth
 			className="components-font-size-picker__select"
 			label={ __( 'Font size' ) }
 			hideLabelFromVision

package/src/font-size-picker/index.native.js

@@ -111,7 +111,7 @@ function FontSizePicker( {
 						separatorType="none"
 						label={ __( 'Default' ) }
 						onPress={ onChangeValue( undefined ) }
-						leftAlign={ true }
+						leftAlign
 						key={ 'default' }
 						accessibilityRole={ 'button' }
 						accessibilityLabel={ __( 'Selected: Default' ) }
@@ -137,7 +137,7 @@ function FontSizePicker( {
 								label={ item.name }
 								subLabel={ item.sizePx }
 								onPress={ onChangeValue( item.sizePx ) }
-								leftAlign={ true }
+								leftAlign
 								key={ index }
 								accessibilityRole={ 'button' }
 								accessibilityLabel={

package/src/form-token-field/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '../base-control/styles/base-control-styles';
 import { Spacer } from '../spacer';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const identity = ( value: string ) => value;
 
@@ -194,15 +195,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		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
-		) {
+		if ( event.defaultPrevented ) {
 			return;
 		}
 		switch ( event.key ) {
@@ -689,7 +682,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	if ( ! disabled ) {
 		tokenFieldProps = Object.assign( {}, tokenFieldProps, {
-			onKeyDown,
+			onKeyDown: withIgnoreIMEEvents( onKeyDown ),
 			onKeyPress,
 			onFocus: onFocusHandler,
 		} );
@@ -718,7 +711,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					justify="flex-start"
 					align="center"
 					gap={ 1 }
-					wrap={ true }
+					wrap
 					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>

package/src/form-token-field/suggestions-list.tsx

@@ -1,14 +1,12 @@
 /**
  * External dependencies
  */
-import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
 import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -32,8 +30,6 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	instanceId,
 	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
-	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
-
 	const listRef = useRefEffect< HTMLUListElement >(
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
@@ -44,16 +40,10 @@ export function SuggestionsList< T extends string | { value: string } >( {
 				scrollIntoView &&
 				listNode.children[ selectedIndex ]
 			) {
-				setScrollingIntoView( true );
-				scrollView(
-					listNode.children[ selectedIndex ] as HTMLLIElement,
-					listNode,
-					{
-						onlyScrollIfNeeded: true,
-					}
-				);
-				rafId = requestAnimationFrame( () => {
-					setScrollingIntoView( false );
+				listNode.children[ selectedIndex ].scrollIntoView( {
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest',
 				} );
 			}
 
@@ -68,9 +58,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 
 	const handleHover = ( suggestion: T ) => {
 		return () => {
-			if ( ! scrollingIntoView ) {
-				onHover?.( suggestion );
-			}
+			onHover?.( suggestion );
 		};
 	};
 

package/src/h-stack/hook.tsx

@@ -47,7 +47,8 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 		gap: spacing,
 	};
 
-	const flexProps = useFlex( propsForFlex );
+	// Omit `isColumn` because it's not used in HStack.
+	const { isColumn, ...flexProps } = useFlex( propsForFlex );
 
 	return flexProps;
 }

package/src/h-stack/test/index.tsx

@@ -39,4 +39,14 @@ describe( 'props', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	test( 'should not pass through invalid props to the `as` component', () => {
+		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+			return <div { ...props } />;
+		};
+
+		render( <HStack as={ AsComponent }>foobar</HStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );

package/src/item-group/test/index.js

@@ -29,7 +29,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: withBorders } = render(
-				<ItemGroup isBordered={ true }>
+				<ItemGroup isBordered>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
@@ -63,7 +63,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: separatedItems } = render(
-				<ItemGroup isSeparated={ true }>
+				<ItemGroup isSeparated>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -2,12 +2,7 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import {
-	render,
-	fireEvent,
-	withReanimatedTimer,
-	advanceAnimationByTime,
-} from 'test/helpers';
+import { act, render, fireEvent, withReanimatedTimer } from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -63,7 +58,7 @@ it( 'animates height transitioning from non-full-screen to non-full-screen', asy
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
@@ -75,7 +70,7 @@ it( 'animates height transitioning from non-full-screen to non-full-screen', asy
 		);
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen2Layout );
 	} ) );
 
@@ -105,14 +100,14 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
@@ -144,14 +139,14 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 			screen.getByTestId( 'navigation-screen-test-screen-1' ),
 			screen1Layout
 		);
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
@@ -160,7 +155,7 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 		fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 		// The animation takes 300 ms, so we wait that time plus 1 ms
 		// to the completion.
-		advanceAnimationByTime( 301 );
+		act( () => jest.advanceTimersByTime( 301 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
 	} ) );
 
@@ -187,7 +182,7 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 
 		// First height value should be set without animation, but we need
 		// to wait for a frame to let animated styles be updated.
-		advanceAnimationByTime( 1 );
+		act( () => jest.advanceTimersByTime( 1 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );
@@ -195,7 +190,7 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 		// Navigate to screen 2
 		fireEvent.press( screen.getByText( /test-screen-1/ ) );
 		// We wait some milliseconds to check if height has changed.
-		advanceAnimationByTime( 10 );
+		act( () => jest.advanceTimersByTime( 10 ) );
 		expect( navigationContainer ).toHaveAnimatedStyle( {
 			height: WINDOW_HEIGHT,
 		} );

package/src/mobile/bottom-sheet/button.native.js

@@ -9,11 +9,7 @@ import { TouchableOpacity, View, Text } from 'react-native';
 import styles from './styles.scss';
 
 const BottomSheetButton = ( { onPress, disabled, text, color } ) => (
-	<TouchableOpacity
-		accessible={ true }
-		onPress={ onPress }
-		disabled={ disabled }
-	>
+	<TouchableOpacity accessible onPress={ onPress } disabled={ disabled }>
 		<View style={ { flexDirection: 'row', justifyContent: 'center' } }>
 			<Text style={ { ...styles.buttonText, color } }>{ text }</Text>
 		</View>

package/src/mobile/bottom-sheet/index.native.js

@@ -540,8 +540,8 @@ class BottomSheet extends Component {
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
 				testID="bottom-sheet"
-				hardwareAccelerated={ true }
-				useNativeDriverForBackdrop={ true }
+				hardwareAccelerated
+				useNativeDriverForBackdrop
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -181,7 +181,7 @@ class BottomSheetRangeCell extends Component {
 
 		return (
 			<View
-				accessible={ true }
+				accessible
 				accessibilityRole="adjustable"
 				accessibilityActions={ [
 					{ name: 'increment' },

package/src/mobile/bottom-sheet/stepper-cell/index.native.js

@@ -174,7 +174,7 @@ class BottomSheetStepperCell extends Component {
 
 		return (
 			<View
-				accessible={ true }
+				accessible
 				accessibilityRole="adjustable"
 				accessibilityLabel={ accessibilityLabel }
 				accessibilityHint={ getAccessibilityHint() }
@@ -214,7 +214,7 @@ class BottomSheetStepperCell extends Component {
 						icon={ icon }
 						label={ label }
 						labelStyle={ labelStyle }
-						leftAlign={ true }
+						leftAlign
 						separatorType={ separatorType }
 						disabled={ disabled }
 					>

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -91,7 +91,7 @@ const BottomSheetSelectControl = ( {
 							label={ item.label }
 							icon={ item.icon }
 							onPress={ onChangeValue( item.value ) }
-							leftAlign={ true }
+							leftAlign
 							key={ index }
 							accessibilityRole={ 'button' }
 							accessibilityLabel={

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -82,7 +82,7 @@ const BottomSheetTextControl = ( {
 						label={ label }
 						onChangeText={ ( text ) => onChange( text ) }
 						defaultValue={ initialValue }
-						multiline={ true }
+						multiline
 						placeholder={ placeholder }
 						placeholderTextColor={ '#87a6bc' }
 						style={ textEditorStyle }

package/src/mobile/gradient/index.native.js

@@ -135,7 +135,7 @@ function Gradient( {
 		return (
 			<RNLinearGradient
 				colors={ colors }
-				useAngle={ true }
+				useAngle
 				angle={ getGradientAngle( gradientValue ) }
 				locations={ locations }
 				angleCenter={ angleCenter }

package/src/mobile/image/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Animated, Image as RNImage, Text, View } from 'react-native';
+import { Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, useRef, Platform } from '@wordpress/element';
+import { useEffect, useState, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -218,19 +218,8 @@ const ImageComponent = ( {
 		focalPoint && styles.focalPointContainer,
 	];
 
-	const opacityValue = useRef( new Animated.Value( 1 ) ).current;
-
-	useEffect( () => {
-		Animated.timing( opacityValue, {
-			toValue: isUploadInProgress ? 0.3 : 1,
-			duration: 100,
-			useNativeDriver: true,
-		} ).start();
-	}, [ isUploadInProgress, opacityValue ] );
-
 	const imageStyles = [
 		{
-			opacity: opacityValue,
 			height: containerSize?.height,
 		},
 		! resizeMode && {
@@ -300,13 +289,9 @@ const ImageComponent = ( {
 				key={ url }
 				style={ imageContainerStyles }
 			>
-				{ isSelected &&
-					highlightSelected &&
-					! (
-						isUploadInProgress ||
-						isUploadFailed ||
-						isUploadPaused
-					) && <View style={ imageSelectedStyles } /> }
+				{ isSelected && highlightSelected && (
+					<View style={ imageSelectedStyles } />
+				) }
 
 				{ ! imageData ? (
 					<View style={ placeholderStyles }>
@@ -319,7 +304,7 @@ const ImageComponent = ( {
 						{ Platform.isAndroid && (
 							<>
 								{ networkImageLoaded && networkURL && (
-									<Animated.Image
+									<Image
 										style={ imageStyles }
 										fadeDuration={ 0 }
 										source={ { uri: networkURL } }
@@ -331,7 +316,7 @@ const ImageComponent = ( {
 									/>
 								) }
 								{ ! networkImageLoaded && ! networkURL && (
-									<Animated.Image
+									<Image
 										style={ imageStyles }
 										fadeDuration={ 0 }
 										source={ { uri: localURL } }
@@ -345,7 +330,7 @@ const ImageComponent = ( {
 						) }
 						{ Platform.isIOS && (
 							<>
-								<Animated.Image
+								<Image
 									style={ imageStyles }
 									source={ {
 										uri:

package/src/mobile/keyboard-aware-flat-list/use-scroll-to-section.native.js

@@ -45,7 +45,7 @@ export default function useScrollToSection(
 			if (
 				! scrollViewRef.current ||
 				! scrollEnabled ||
-				! scrollViewMeasurements
+				! scrollViewMeasurements.current
 			) {
 				return;
 			}

package/src/mobile/media-edit/index.native.js

@@ -103,7 +103,7 @@ export class MediaEdit extends Component {
 				hideCancelButton
 				ref={ ( instance ) => ( this.picker = instance ) }
 				options={ this.getMediaOptionsItems() }
-				leftAlign={ true }
+				leftAlign
 				onChange={ this.onPickerSelect }
 				// translators: %s: block title e.g: "Paragraph".
 				title={ __( 'Media options' ) }

package/src/modal/index.tsx

@@ -41,6 +41,7 @@ import * as ariaHelper from './aria-helper';
 import Button from '../button';
 import StyleProvider from '../style-provider';
 import type { ModalProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 // Used to track and dismiss the prior modal when another opens unless nested.
 const ModalContext = createContext<
@@ -196,17 +197,6 @@ function UnforwardedModal(
 	}, [ isContentScrollable, childrenContainerRef ] );
 
 	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
-		if (
-			// 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 (
 			shouldCloseOnEsc &&
 			( event.code === 'Escape' || event.key === 'Escape' ) &&
@@ -265,7 +255,7 @@ function UnforwardedModal(
 				'components-modal__screen-overlay',
 				overlayClassName
 			) }
-			onKeyDown={ handleEscapeKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleEscapeKeyDown ) }
 			{ ...( shouldCloseOnClickOutside ? overlayPressHandlers : {} ) }
 		>
 			<StyleProvider document={ document }>

package/src/modal/style.scss

@@ -15,6 +15,7 @@
 
 // The modal window element.
 .components-modal__frame {
+	@include reset;
 	// Use the entire viewport on smaller screens.
 	margin: $grid-unit-50 0 0 0;
 	width: 100%;

package/src/modal/test/index.tsx

@@ -335,7 +335,7 @@ describe( 'Modal', () => {
 		it( 'should focus the Modal dialog when `true` passed as value for `focusOnMount` prop', async () => {
 			const user = userEvent.setup();
 
-			render( <FocusMountDemo focusOnMount={ true } /> );
+			render( <FocusMountDemo focusOnMount /> );
 
 			const opener = screen.getByRole( 'button', {
 				name: 'Toggle Modal',

package/src/navigation/stories/utils/hide-if-empty.tsx

@@ -42,11 +42,7 @@ export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
 					/>
 				</NavigationMenu>
 
-				<NavigationMenu
-					menu="root-sub-1"
-					parentMenu="root"
-					isEmpty={ true }
-				/>
+				<NavigationMenu menu="root-sub-1" parentMenu="root" isEmpty />
 				<NavigationMenu
 					menu="root-sub-2"
 					parentMenu="root"
@@ -57,7 +53,7 @@ export const HideIfEmptyStory: StoryFn< typeof Navigation > = ( {
 				<NavigationMenu
 					menu="root-sub-1-sub-1"
 					parentMenu="root-sub-1"
-					isEmpty={ true }
+					isEmpty
 				/>
 			</Navigation>
 

package/src/palette-edit/index.tsx

@@ -592,14 +592,14 @@ export function PaletteEdit( {
 								gradients={ gradients }
 								onChange={ onSelectPaletteItem }
 								clearable={ false }
-								disableCustomGradients={ true }
+								disableCustomGradients
 							/>
 						) : (
 							<ColorPalette
 								colors={ colors }
 								onChange={ onSelectPaletteItem }
 								clearable={ false }
-								disableCustomColors={ true }
+								disableCustomColors
 							/>
 						) ) }
 				</>