@wordpress/components 25.8.6 → 25.9.1

package/src/color-picker/color-copy-button.tsx

@@ -10,8 +10,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { CopyButton } from './styles';
-import { Text } from '../text';
-import { Tooltip } from '../ui/tooltip';
+import Tooltip from '../tooltip';
 
 import type { ColorCopyButtonProps } from './types';
 
@@ -56,14 +55,11 @@ export const ColorCopyButton = ( props: ColorCopyButtonProps ) => {
 
 	return (
 		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
+			delay={ 0 }
+			hideOnClick={ false }
+			text={
+				copiedColor === color.toHex() ? __( 'Copied!' ) : __( 'Copy' )
 			}
-			placement="bottom"
 		>
 			<CopyButton
 				isSmall

package/src/color-picker/component.tsx

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnect } from '../ui/context';
+import { useContextSystem, contextConnect } from '../context';
 import {
 	ColorfulWrapper,
 	SelectControl,

package/src/color-picker/hex-input.tsx

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 import type { HexInputProps } from './types';

package/src/color-picker/input-with-slider.tsx

@@ -4,7 +4,7 @@
 import { HStack } from '../h-stack';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';

package/src/color-picker/styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';

package/src/color-picker/types.ts

@@ -13,7 +13,7 @@ import type { HslaColor } from 'react-colorful';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { useDeprecatedProps } from './use-deprecated-props';
 
 export type ColorType = 'rgb' | 'hsl' | 'hex';

package/src/combobox-control/README.md

@@ -17,8 +17,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
 ### Usage
 
 ```jsx
+import { useState } from 'react';
 import { ComboboxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const options = [
 	{

package/src/combobox-control/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import type { ComboboxControlProps } from './types';
 
 const deprecatedDefaultSize = ( {

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

@@ -56,7 +56,6 @@ const getOption = ( name: string ) => screen.getByRole( 'option', { name } );
 const getAllOptions = () => screen.getAllByRole( 'option' );
 const getOptionSearchString = ( option: ComboboxControlOption ) =>
 	option.label.substring( 0, 11 );
-const setupUser = () => userEvent.setup();
 
 const ControlledComboboxControl = ( {
 	value: valueProp,
@@ -112,7 +111,7 @@ describe.each( [
 	} );
 
 	it( 'should render with the correct options', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		render(
 			<Component options={ timezones } label={ defaultLabelText } />
 		);
@@ -133,7 +132,7 @@ describe.each( [
 	} );
 
 	it( 'should select the correct option via click events', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const targetOption = timezones[ 2 ];
 		const onChangeSpy = jest.fn();
 		render(
@@ -157,7 +156,7 @@ describe.each( [
 	} );
 
 	it( 'should select the correct option via keypress events', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const targetIndex = 4;
 		const targetOption = timezones[ targetIndex ];
 		const onChangeSpy = jest.fn();
@@ -187,7 +186,7 @@ describe.each( [
 	} );
 
 	it( 'should select the correct option from a search', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const targetOption = timezones[ 13 ];
 		const onChangeSpy = jest.fn();
 		render(
@@ -214,7 +213,7 @@ describe.each( [
 	} );
 
 	it( 'should render aria-live announcement upon selection', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const targetOption = timezones[ 9 ];
 		const onChangeSpy = jest.fn();
 		render(
@@ -242,7 +241,7 @@ describe.each( [
 	} );
 
 	it( 'should process multiple entries in a single session', async () => {
-		const user = setupUser();
+		const user = await userEvent.setup();
 		const unmatchedString = 'Mordor';
 		const targetOption = timezones[ 6 ];
 		const onChangeSpy = jest.fn();

package/src/confirm-dialog/README.md

@@ -43,8 +43,8 @@ Let the parent component control when the dialog is open/closed. It's activated
 -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );

package/src/confirm-dialog/component.tsx

@@ -14,8 +14,8 @@ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
  */
 import Modal from '../modal';
 import type { OwnProps, DialogInputEvent } from './types';
-import type { WordPressComponentProps } from '../ui/context';
-import { useContextSystem, contextConnect } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { useContextSystem, contextConnect } from '../context';
 import { Flex } from '../flex';
 import Button from '../button';
 import { Text } from '../text';

package/src/{ui/context → context}/context-connect.ts

@@ -99,7 +99,7 @@ function _contextConnect<
 	}
 
 	// @ts-expect-error We can't rely on inferred types here because of the
-	// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33
+	// `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/4f3a11243c365f94892e479bff0b922ccc4ccda3/packages/components/src/context/wordpress-component.ts#L32-L33
 	return Object.assign( WrappedComponent, {
 		[ CONNECT_STATIC_NAMESPACE ]: [ ...new Set( mergedNamespace ) ],
 		displayName: namespace,

package/src/{ui/context → context}/context-system-provider.js

@@ -20,7 +20,7 @@ import warn from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { useUpdateEffect } from '../../utils';
+import { useUpdateEffect } from '../utils';
 
 export const ComponentsContext = createContext(
 	/** @type {Record<string, any>} */ ( {} )

package/src/{ui/context → context}/use-context-system.js

@@ -9,7 +9,7 @@ import warn from '@wordpress/warning';
 import { useComponentsContext } from './context-system-provider';
 import { getNamespace, getConnectedNamespace } from './utils';
 import { getStyledClassNameFromKey } from './get-styled-class-name-from-key';
-import { useCx } from '../../utils/hooks/use-cx';
+import { useCx } from '../utils/hooks/use-cx';
 
 /**
  * @template TProps

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -34,7 +34,7 @@ import {
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
 } from './constants';
-import type { WordPressComponentProps } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
 import type {
 	ControlPointButtonProps,
 	ControlPointMoveState,

package/src/custom-select-control/README.md

@@ -17,11 +17,8 @@ These are the same as [the ones for `SelectControl`s](/packages/components/src/s
 ### Usage
 
 ```jsx
-/**
- * WordPress dependencies
- */
+import { useState } from 'react';
 import { CustomSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const options = [
 	{

package/src/custom-select-control/index.js

@@ -21,6 +21,7 @@ import { Select as SelectControlSelect } from '../select-control/styles/select-c
 import SelectControlChevronDown from '../select-control/chevron-down';
 import { InputBaseWithBackCompatMinWidth } from './styles';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
+import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -65,7 +66,7 @@ const stateReducer = (
 export default function CustomSelectControl( props ) {
 	const {
 		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next36pxDefaultSize = false,
+		__next40pxDefaultSize = false,
 		/** Start opting into the unconstrained width that will become the default in a future version. */
 		__nextUnconstrainedWidth = false,
 		className,
@@ -82,7 +83,11 @@ export default function CustomSelectControl( props ) {
 		onFocus,
 		onBlur,
 		__experimentalShowSelectedHint = false,
-	} = props;
+	} = useDeprecated36pxDefaultSizeProp(
+		props,
+		'wp.components.CustomSelectControl',
+		'6.4'
+	);
 
 	const {
 		getLabelProps,
@@ -180,7 +185,7 @@ export default function CustomSelectControl( props ) {
 				</StyledLabel>
 			) }
 			<InputBaseWithBackCompatMinWidth
-				__next36pxDefaultSize={ __next36pxDefaultSize }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
 				__nextUnconstrainedWidth={ __nextUnconstrainedWidth }
 				isFocused={ isOpen || isFocused }
 				__unstableInputWidth={
@@ -197,7 +202,7 @@ export default function CustomSelectControl( props ) {
 					onFocus={ handleOnFocus }
 					onBlur={ handleOnBlur }
 					selectSize={ size }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					{ ...getToggleButtonProps( {
 						// This is needed because some speech recognition software don't support `aria-labelledby`.
 						'aria-label': label,
@@ -232,8 +237,8 @@ export default function CustomSelectControl( props ) {
 										'is-highlighted':
 											index === highlightedIndex,
 										'has-hint': !! item.__experimentalHint,
-										'is-next-36px-default-size':
-											__next36pxDefaultSize,
+										'is-next-40px-default-size':
+											__next40pxDefaultSize,
 									}
 								),
 								style: item.style,

package/src/custom-select-control/stories/index.story.js

@@ -7,7 +7,7 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__next40pxDefaultSize: { control: { type: 'boolean' } },
 		__experimentalShowSelectedHint: { control: { type: 'boolean' } },
 		size: {
 			options: [ 'small', 'default', '__unstable-large' ],

package/src/custom-select-control/style.scss

@@ -44,7 +44,7 @@
 	cursor: default;
 	line-height: $icon-size + $grid-unit-05;
 
-	&:not(.is-next-36px-default-size) {
+	&:not(.is-next-40px-default-size) {
 		padding: $grid-unit-10;
 	}
 

package/src/dashicon/index.tsx

@@ -9,7 +9,7 @@
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { DashiconProps } from './types';
 
 function Dashicon( {

package/src/date-time/README.md

@@ -15,8 +15,8 @@ Date pickers should:
 Render a DateTimePicker.
 
 ```jsx
+import { useState } from 'react';
 import { DateTimePicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDateTimePicker = () => {
 	const [ date, setDate ] = useState( new Date() );

package/src/date-time/date/styles.ts

@@ -10,7 +10,7 @@ import Button from '../../button';
 import { COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;

package/src/date-time/time/index.tsx

@@ -15,6 +15,7 @@ import { __ } from '@wordpress/i18n';
 import BaseControl from '../../base-control';
 import Button from '../../button';
 import ButtonGroup from '../../button-group';
+import SelectControl from '../../select-control';
 import TimeZone from './timezone';
 import type { TimePickerProps } from '../types';
 import {
@@ -24,7 +25,6 @@ import {
 	TimeSeparator,
 	MinutesInput,
 	MonthSelectWrapper,
-	MonthSelect,
 	DayInput,
 	YearInput,
 	TimeWrapper,
@@ -181,7 +181,7 @@ export function TimePicker( {
 			className="components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility.
 			label={ __( 'Day' ) }
 			hideLabelFromVision
-			__next36pxDefaultSize
+			__next40pxDefaultSize
 			value={ day }
 			step={ 1 }
 			min={ 1 }
@@ -197,10 +197,11 @@ export function TimePicker( {
 
 	const monthField = (
 		<MonthSelectWrapper>
-			<MonthSelect
+			<SelectControl
 				className="components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility.
 				label={ __( 'Month' ) }
 				hideLabelFromVision
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				value={ month }
 				options={ [
@@ -247,7 +248,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-hours-input" // Unused, for backwards compatibility.
 							label={ __( 'Hours' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ hours }
 							step={ 1 }
 							min={ is12Hour ? 1 : 0 }
@@ -274,7 +275,7 @@ export function TimePicker( {
 							className="components-datetime__time-field-minutes-input" // Unused, for backwards compatibility.
 							label={ __( 'Minutes' ) }
 							hideLabelFromVision
-							__next36pxDefaultSize
+							__next40pxDefaultSize
 							value={ minutes }
 							step={ 1 }
 							min={ 0 }
@@ -301,6 +302,7 @@ export function TimePicker( {
 								variant={
 									am === 'AM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'AM' ) }
 							>
 								{ __( 'AM' ) }
@@ -310,6 +312,7 @@ export function TimePicker( {
 								variant={
 									am === 'PM' ? 'primary' : 'secondary'
 								}
+								__next40pxDefaultSize
 								onClick={ buildAmPmChangeCallback( 'PM' ) }
 							>
 								{ __( 'PM' ) }
@@ -345,7 +348,7 @@ export function TimePicker( {
 						className="components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility.
 						label={ __( 'Year' ) }
 						hideLabelFromVision
-						__next36pxDefaultSize
+						__next40pxDefaultSize
 						value={ year }
 						step={ 1 }
 						min={ 1 }

package/src/date-time/time/styles.ts

@@ -8,14 +8,12 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import {
 	Input,
 	BackdropUI,
 } from '../../input-control/styles/input-control-styles';
 import NumberControl from '../../number-control';
-import SelectControl from '../../select-control';
-import { Select } from '../../select-control/styles/select-control-styles';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;
@@ -92,14 +90,6 @@ export const MonthSelectWrapper = styled.div`
 	flex-grow: 1;
 `;
 
-export const MonthSelect = styled( SelectControl )`
-	height: 36px;
-
-	${ Select } {
-		line-height: 30px;
-	}
-`;
-
 export const DayInput = styled( NumberControl )`
 	${ baseInput }
 

package/src/dimension-control/README.md

@@ -9,8 +9,8 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 export default function MyCustomDimensionControl() {
 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/src/disabled/README.md

@@ -7,8 +7,8 @@ Disabled is a component which disables descendant tabbable elements and prevents
 Assuming you have a form component, you can disable all form inputs by wrapping the form with `<Disabled>`.
 
 ```jsx
+import { useState } from 'react';
 import { Button, Disabled, TextControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDisabled = () => {
 	const [ isDisabled, setIsDisabled ] = useState( true );

package/src/disabled/index.tsx

@@ -8,7 +8,7 @@ import { createContext } from '@wordpress/element';
  */
 import { disabledStyles } from './styles/disabled-styles';
 import type { DisabledProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );

package/src/divider/component.tsx

@@ -8,8 +8,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DividerView } from './styles';
 import type { DividerProps } from './types';
 

package/src/divider/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { rtl } from '../utils';
 import type { DividerProps } from './types';
 

package/src/divider/types.ts

@@ -7,7 +7,7 @@ import type { SeparatorProps } from 'reakit';
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,

package/src/drop-zone/README.md

@@ -5,8 +5,8 @@
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { DropZone } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 const MyDropZone = () => {
 	const [ hasDropped, setHasDropped ] = useState( false );

package/src/drop-zone/index.tsx

@@ -23,7 +23,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
 import type { DropType, DropZoneProps } from './types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

package/src/dropdown/dropdown-content-wrapper.tsx

@@ -6,8 +6,8 @@ import type { ForwardedRef } from 'react';
 /**
  * Internal dependencies
  */
-import type { WordPressComponentProps } from '../ui/context';
-import { contextConnect, useContextSystem } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';
 

package/src/dropdown/index.tsx

@@ -14,7 +14,7 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { contextConnect, useContextSystem } from '../ui/context';
+import { contextConnect, useContextSystem } from '../context';
 import { useControlledValue } from '../utils/hooks';
 import Popover from '../popover';
 import type { DropdownProps, DropdownInternalContext } from './types';

package/src/dropdown/styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import type { DropdownContentWrapperProps } from './types';
 
 const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {

package/src/dropdown-menu/index.tsx

@@ -11,7 +11,7 @@ import { menu } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { contextConnectWithoutRef, useContextSystem } from '../ui/context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
 import Button from '../button';
 import Dropdown from '../dropdown';
 import { NavigableMenu } from '../navigable-container';

package/src/dropdown-menu/types.ts

@@ -6,7 +6,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
 import type { DropdownProps } from '../dropdown/types';
 import type { Props as IconProps } from '../icon';
 import type { NavigableMenuProps } from '../navigable-container/types';

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

@@ -19,7 +19,7 @@ import { SVG, Circle } from '@wordpress/primitives';
 /**
  * Internal dependencies
  */
-import { useContextSystem, contextConnectWithoutRef } from '../ui/context';
+import { useContextSystem, contextConnectWithoutRef } from '../context';
 import { useSlot } from '../slot-fill';
 import Icon from '../icon';
 import { SLOT_NAME as POPOVER_DEFAULT_SLOT_NAME } from '../popover';

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

@@ -32,7 +32,7 @@ import { menu, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../../icon';
-import { ContextSystemProvider } from '../../ui/context';
+import { ContextSystemProvider } from '../../context';
 
 const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',

package/src/dropdown-menu-v2/styles.ts

@@ -9,7 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
  * Internal dependencies
  */
 import { COLORS, font, rtl, CONFIG } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import Icon from '../icon';
 import type { DropdownMenuInternalContext } from './types';
 

package/src/dropdown-menu-v2/types.ts

@@ -261,5 +261,5 @@ export type DropdownMenuPrivateContext = Pick<
 	DropdownMenuInternalContext,
 	'variant'
 > & {
-	portalContainer: HTMLElement | null;
+	portalContainer?: HTMLElement | null;
 };