@wordpress/components 27.0.0 → 27.1.0

package/src/custom-select-control-v2/types.ts

@@ -92,7 +92,6 @@ type LegacyOnChangeObject = {
 };
 
 export type LegacyCustomSelectProps = {
-	children?: never;
 	/**
 	 * Optional classname for the component.
 	 */

package/src/disabled/test/index.tsx

@@ -94,7 +94,7 @@ describe( 'Disabled', () => {
 			'This is contentEditable.'
 		);
 
-		rerender( <MaybeDisable isDisabled={ true } /> );
+		rerender( <MaybeDisable isDisabled /> );
 		expect( getInput() ).toHaveValue( 'This is input.' );
 		expect( getContentEditable() ).toHaveTextContent(
 			'This is contentEditable.'

package/src/draggable/index.native.js

@@ -63,7 +63,7 @@ const Draggable = ( {
 	useAnimatedReaction(
 		() => isDragging.value,
 		( result, previous ) => {
-			if ( result === previous || previous === null ) {
+			if ( result === previous ) {
 				return;
 			}
 
@@ -75,7 +75,7 @@ const Draggable = ( {
 						id: draggingId.value,
 					} );
 				}
-			} else if ( onDragEnd ) {
+			} else if ( previous !== null && onDragEnd ) {
 				onDragEnd( {
 					x: lastPosition.x.value,
 					y: lastPosition.y.value,

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/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/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

@@ -711,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/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/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/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
 							/>
 						) ) }
 				</>

package/src/popover/test/index.tsx

@@ -182,10 +182,7 @@ describe( 'Popover', () => {
 		describe( 'focus behavior', () => {
 			it( 'should focus the popover container when opened', async () => {
 				render(
-					<Popover
-						focusOnMount={ true }
-						data-testid="popover-element"
-					>
+					<Popover focusOnMount data-testid="popover-element">
 						Popover content
 					</Popover>
 				);

package/src/query-controls/index.native.js

@@ -69,7 +69,7 @@ const QueryControls = memo(
 						value={ `${ orderBy }/${ order }` }
 						options={ options }
 						onChange={ onChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onCategoryChange && (
@@ -79,7 +79,7 @@ const QueryControls = memo(
 						noOptionLabel={ _x( 'All', 'categories' ) }
 						selectedCategoryId={ selectedCategoryId }
 						onChange={ onCategoryChange }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 				) }
 				{ onNumberOfItemsChange && (

package/src/radio-group/stories/index.story.tsx

@@ -16,6 +16,7 @@ import { useState } from '@wordpress/element';
 
 const meta: Meta< typeof RadioGroup > = {
 	title: 'Components (Deprecated)/RadioGroup',
+	id: 'components-radiogroup',
 	component: RadioGroup,
 	// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 	subcomponents: { Radio },

package/src/range-control/index.tsx

@@ -253,7 +253,7 @@ function UnforwardedRangeControl(
 						value={ inputSliderValue ?? undefined }
 					/>
 					<RangeRail
-						aria-hidden={ true }
+						aria-hidden
 						disabled={ disabled }
 						marks={ marks }
 						max={ max }
@@ -263,7 +263,7 @@ function UnforwardedRangeControl(
 						value={ rangeFillValue }
 					/>
 					<Track
-						aria-hidden={ true }
+						aria-hidden
 						className="components-range-control__track"
 						disabled={ disabled }
 						style={ { width: fillValueOffset } }
@@ -275,7 +275,7 @@ function UnforwardedRangeControl(
 						disabled={ disabled }
 					>
 						<Thumb
-							aria-hidden={ true }
+							aria-hidden
 							isFocused={ isThumbFocused }
 							disabled={ disabled }
 						/>

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

@@ -297,7 +297,7 @@ describe( 'RangeControl', () => {
 			render(
 				<RangeControl
 					initialPosition={ 10 }
-					allowReset={ true }
+					allowReset
 					onChange={ spy }
 					resetFallbackValue={ 33 }
 				/>
@@ -320,7 +320,7 @@ describe( 'RangeControl', () => {
 					initialPosition={ undefined }
 					min={ 0 }
 					max={ 100 }
-					allowReset={ true }
+					allowReset
 					resetFallbackValue={ undefined }
 				/>
 			);

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

@@ -235,7 +235,7 @@ function SearchControl( {
 				<Text
 					onPress={ onCancel }
 					style={ cancelButtonTextStyle }
-					accessible={ true }
+					accessible
 					accessibilityRole={ 'button' }
 					accessibilityLabel={ __( 'Cancel search' ) }
 					accessibilityHint={ __( 'Cancel search' ) }

package/src/snackbar/index.tsx

@@ -138,9 +138,12 @@ function UnforwardedSnackbar(
 			className={ classes }
 			onClick={ ! explicitDismiss ? dismissMe : undefined }
 			tabIndex={ 0 }
-			role={ ! explicitDismiss ? 'button' : '' }
+			role={ ! explicitDismiss ? 'button' : undefined }
 			onKeyPress={ ! explicitDismiss ? dismissMe : undefined }
-			aria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }
+			aria-label={
+				! explicitDismiss ? __( 'Dismiss this notice' ) : undefined
+			}
+			data-testid="snackbar"
 		>
 			<div className={ snackbarContentClassnames }>
 				{ icon && (

package/src/snackbar/list.tsx

@@ -73,7 +73,12 @@ export function SnackbarList( {
 		( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
 			onRemove?.( notice.id );
 	return (
-		<div className={ className } tabIndex={ -1 } ref={ listRef }>
+		<div
+			className={ className }
+			tabIndex={ -1 }
+			ref={ listRef }
+			data-testid="snackbar-list"
+		>
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {

package/src/snackbar/stories/list.story.tsx

@@ -70,7 +70,6 @@ Default.args = {
 				},
 			],
 			content: 'Post published.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 		{
@@ -83,7 +82,6 @@ Default.args = {
 				},
 			],
 			content: 'Post updated.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 		{
@@ -91,7 +89,6 @@ Default.args = {
 			spokenMessage: 'All content copied.',
 			actions: [],
 			content: 'All content copied.',
-			isDismissible: true,
 			explicitDismiss: false,
 		},
 	],