@elementor/editor-controls 0.36.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.36.0",
+  "version": "1.1.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,9 +41,10 @@
   },
   "dependencies": {
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-elements": "0.8.4",
-    "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.11.0",
+    "@elementor/editor-elements": "0.8.6",
+    "@elementor/editor-props": "0.14.0",
+    "@elementor/editor-responsive": "0.13.5",
+    "@elementor/editor-ui": "0.12.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
@@ -51,16 +52,16 @@
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.5",
+    "@elementor/ui": "1.35.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
-    "@tanstack/react-virtual": "3.13.3",
     "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/src/bound-prop-context/use-bound-prop.ts

@@ -22,7 +22,10 @@ type UseBoundProp< TValue extends PropValue > = {
 	disabled?: boolean;
 };
 
-export function useBoundProp< T extends PropValue = PropValue >(): PropKeyContextValue< T, PropType >;
+export function useBoundProp< T extends PropValue = PropValue, P extends PropType = PropType >(): PropKeyContextValue<
+	T,
+	P
+>;
 
 export function useBoundProp< TKey extends string, TValue extends PropValue >(
 	propTypeUtil: PropTypeUtil< TKey, TValue >

package/src/components/font-family-selector.tsx

@@ -1,21 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
 import * as React from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
-import { SearchIcon, TextIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	styled,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { useEffect, useState } from 'react';
+import { PopoverHeader, PopoverMenuList, PopoverScrollableContent, PopoverSearch } from '@elementor/editor-ui';
+import { TextIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography } from '@elementor/ui';
 import { debounce } from '@elementor/utils';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { __ } from '@wordpress/i18n';
 
 import { enqueueFont } from '../controls/font-family-control/enqueue-font';
@@ -41,8 +29,8 @@ export const FontFamilySelector = ( {
 
 	const filteredFontFamilies = useFilteredFontFamilies( fontFamilies, searchValue );
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
 	const handleClose = () => {
@@ -57,25 +45,11 @@ export const FontFamilySelector = ( {
 				onClose={ handleClose }
 				icon={ <TextIcon fontSize={ SIZE } /> }
 			/>
-
-			<Box px={ 1.5 } pb={ 1 }>
-				<TextField
-					// eslint-disable-next-line jsx-a11y/no-autofocus
-					autoFocus
-					fullWidth
-					size={ SIZE }
-					value={ searchValue }
-					placeholder={ __( 'Search', 'elementor' ) }
-					onChange={ handleSearch }
-					InputProps={ {
-						startAdornment: (
-							<InputAdornment position="start">
-								<SearchIcon fontSize={ SIZE } />
-							</InputAdornment>
-						),
-					} }
-				/>
-			</Box>
+			<PopoverSearch
+				value={ searchValue }
+				onSearch={ handleSearch }
+				placeholder={ __( 'Search', 'elementor' ) }
+			/>
 			<Divider />
 			{ filteredFontFamilies.length > 0 ? (
 				<FontList
@@ -85,7 +59,7 @@ export const FontFamilySelector = ( {
 					fontFamily={ fontFamily }
 				/>
 			) : (
-				<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
+				<PopoverScrollableContent>
 					<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
 						<TextIcon fontSize="large" />
 						<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
@@ -120,7 +94,7 @@ export const FontFamilySelector = ( {
 							</Link>
 						</Typography>
 					</Stack>
-				</Box>
+				</PopoverScrollableContent>
 			) }
 		</Stack>
 	);
@@ -133,11 +107,7 @@ type FontListProps = {
 	fontFamily: string | null;
 };
 
-const LIST_ITEM_HEIGHT = 36;
-const LIST_ITEMS_BUFFER = 6;
-
 const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: FontListProps ) => {
-	const containerRef = useRef< HTMLDivElement >( null );
 	const selectedItem = fontListItems.find( ( item ) => item.value === fontFamily );
 
 	const debouncedVirtualizeChange = useDebounce( ( { getVirtualIndexes }: { getVirtualIndexes: () => number[] } ) => {
@@ -149,131 +119,20 @@ const FontList = ( { fontListItems, setFontFamily, handleClose, fontFamily }: Fo
 		} );
 	}, 100 );
 
-	const virtualizer = useVirtualizer( {
-		count: fontListItems.length,
-		getScrollElement: () => containerRef.current,
-		estimateSize: () => LIST_ITEM_HEIGHT,
-		overscan: LIST_ITEMS_BUFFER,
-		onChange: debouncedVirtualizeChange,
-	} );
-
-	useEffect(
-		() => {
-			virtualizer.scrollToIndex( fontListItems.findIndex( ( item ) => item.value === fontFamily ) );
-		},
-		// eslint-disable-next-line react-compiler/react-compiler
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ fontFamily ]
-	);
-
 	return (
-		<Box
-			ref={ containerRef }
-			sx={ {
-				overflowY: 'auto',
-				height: 260,
-				width: 220,
-			} }
-		>
-			<StyledMenuList
-				role="listbox"
-				style={ {
-					height: `${ virtualizer.getTotalSize() }px`,
-				} }
-				data-testid="font-list"
-			>
-				{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
-					const item = fontListItems[ virtualRow.index ];
-					const isLast = virtualRow.index === fontListItems.length - 1;
-					// Ignore the first item, which is a category, and use the second item instead.
-					const isFirst = virtualRow.index === 1;
-					const isSelected = selectedItem?.value === item.value;
-
-					// If no item is selected, the first item should be focused.
-					const tabIndexFallback = ! selectedItem ? 0 : -1;
-
-					if ( item.type === 'category' ) {
-						return (
-							<MenuSubheader
-								key={ virtualRow.key }
-								style={ {
-									transform: `translateY(${ virtualRow.start }px)`,
-								} }
-							>
-								{ item.value }
-							</MenuSubheader>
-						);
-					}
-
-					return (
-						<li
-							key={ virtualRow.key }
-							role="option"
-							aria-selected={ isSelected }
-							onClick={ () => {
-								setFontFamily( item.value );
-								handleClose();
-							} }
-							onKeyDown={ ( event ) => {
-								if ( event.key === 'Enter' ) {
-									setFontFamily( item.value );
-									handleClose();
-								}
-
-								if ( event.key === 'ArrowDown' && isLast ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-
-								if ( event.key === 'ArrowUp' && isFirst ) {
-									event.preventDefault();
-									event.stopPropagation();
-								}
-							} }
-							tabIndex={ isSelected ? 0 : tabIndexFallback }
-							style={ {
-								transform: `translateY(${ virtualRow.start }px)`,
-								fontFamily: item.value,
-							} }
-						>
-							{ item.value }
-						</li>
-					);
-				} ) }
-			</StyledMenuList>
-		</Box>
+		<PopoverMenuList
+			items={ fontListItems }
+			selectedValue={ selectedItem?.value }
+			onChange={ debouncedVirtualizeChange }
+			onSelect={ setFontFamily }
+			onClose={ handleClose }
+			itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
+			data-testid="font-list"
+		/>
 	);
 };
 
-const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
-	'& > li': {
-		height: LIST_ITEM_HEIGHT,
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		width: '100%',
-		display: 'flex',
-		alignItems: 'center',
-	},
-	'& > [role="option"]': {
-		...theme.typography.caption,
-		lineHeight: 'inherit',
-		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
-		'&:hover, &:focus': {
-			backgroundColor: theme.palette.action.hover,
-		},
-		'&[aria-selected="true"]': {
-			backgroundColor: theme.palette.action.selected,
-		},
-		cursor: 'pointer',
-		textOverflow: 'ellipsis',
-	},
-	width: '100%',
-	position: 'relative',
-} ) );
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const useDebounce = < TArgs extends any[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
+const useDebounce = < TArgs extends unknown[] >( fn: ( ...args: TArgs ) => void, delay: number ) => {
 	const [ debouncedFn ] = useState( () => debounce( fn, delay ) );
 
 	useEffect( () => () => debouncedFn.cancel(), [ debouncedFn ] );

package/src/components/popover-grid-container.tsx

@@ -1,4 +1,4 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { forwardRef, type PropsWithChildren } from 'react';
 import * as React from 'react';
 import { Grid } from '@elementor/ui';
 
@@ -8,13 +8,10 @@ type PopoverGridContainerProps = PropsWithChildren< {
 	flexWrap?: React.ComponentProps< typeof Grid >[ 'flexWrap' ];
 } >;
 
-export const PopoverGridContainer: FC< PopoverGridContainerProps > = ( {
-	gap = 1.5,
-	alignItems = 'center',
-	flexWrap = 'nowrap',
-	children,
-} ) => (
-	<Grid container gap={ gap } alignItems={ alignItems } flexWrap={ flexWrap }>
-		{ children }
-	</Grid>
+export const PopoverGridContainer = forwardRef(
+	( { gap = 1.5, alignItems = 'center', flexWrap = 'nowrap', children }: PopoverGridContainerProps, ref ) => (
+		<Grid container gap={ gap } alignItems={ alignItems } flexWrap={ flexWrap } ref={ ref }>
+			{ children }
+		</Grid>
+	)
 );

package/src/components/repeater.tsx

@@ -48,6 +48,8 @@ type RepeaterProps< T > = {
 			value: T;
 		} >;
 	};
+	showDuplicate?: boolean;
+	showToggle?: boolean;
 };
 
 const EMPTY_OPEN_ITEM = -1;
@@ -60,6 +62,8 @@ export const Repeater = < T, >( {
 	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
+	showDuplicate = true,
+	showToggle = true,
 }: RepeaterProps< Item< T > > ) => {
 	const [ openItem, setOpenItem ] = useState( EMPTY_OPEN_ITEM );
 
@@ -195,6 +199,8 @@ export const Repeater = < T, >( {
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
 									openOnMount={ openOnAdd && openItem === key }
 									onOpen={ () => setOpenItem( EMPTY_OPEN_ITEM ) }
+									showDuplicate={ showDuplicate }
+									showToggle={ showToggle }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -219,6 +225,8 @@ type RepeaterItemProps = {
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
 	openOnMount: boolean;
 	onOpen: () => void;
+	showDuplicate: boolean;
+	showToggle: boolean;
 	disabled?: boolean;
 };
 
@@ -232,6 +240,8 @@ const RepeaterItem = ( {
 	toggleDisableItem,
 	openOnMount,
 	onOpen,
+	showDuplicate,
+	showToggle,
 	disabled,
 }: RepeaterItemProps ) => {
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
@@ -255,16 +265,20 @@ const RepeaterItem = ( {
 				startIcon={ startIcon }
 				actions={
 					<>
-						<Tooltip title={ duplicateLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
-								<CopyIcon fontSize={ SIZE } />
-							</IconButton>
-						</Tooltip>
-						<Tooltip title={ toggleLabel } placement="top">
-							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
-								{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-							</IconButton>
-						</Tooltip>
+						{ showDuplicate && (
+							<Tooltip title={ duplicateLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
+									<CopyIcon fontSize={ SIZE } />
+								</IconButton>
+							</Tooltip>
+						) }
+						{ showToggle && (
+							<Tooltip title={ toggleLabel } placement="top">
+								<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
+									{ propDisabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+								</IconButton>
+							</Tooltip>
+						) }
 						<Tooltip title={ removeLabel } placement="top">
 							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
 								<XIcon fontSize={ SIZE } />

package/src/components/size-control/size-input.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { PencilIcon } from '@elementor/icons';
+import { Box, InputAdornment, type PopupState } from '@elementor/ui';
+
+import ControlActions from '../../control-actions/control-actions';
+import { type ExtendedOption, isUnitExtendedOption, type Unit } from '../../utils/size-control';
+import { SelectionEndAdornment, TextFieldInnerSelection } from '../size-control/text-field-inner-selection';
+
+type SizeInputProps = {
+	unit: Unit | ExtendedOption;
+	size: number | string;
+	placeholder?: string;
+	startIcon?: React.ReactNode;
+	units: ( Unit | ExtendedOption )[];
+	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onFocus?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
+	onClick?: ( event: React.MouseEvent< HTMLInputElement > ) => void;
+	handleUnitChange: ( unit: Unit | ExtendedOption ) => void;
+	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	popupState: PopupState;
+	disabled?: boolean;
+};
+
+const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
+
+export const SizeInput = ( {
+	units,
+	handleUnitChange,
+	handleSizeChange,
+	placeholder,
+	startIcon,
+	onBlur,
+	onFocus,
+	onClick,
+	size,
+	unit,
+	popupState,
+	disabled,
+}: SizeInputProps ) => {
+	const unitInputBufferRef = useRef( '' );
+	const inputType = isUnitExtendedOption( unit ) ? 'text' : 'number';
+	const inputValue = ! isUnitExtendedOption( unit ) && Number.isNaN( size ) ? '' : size ?? '';
+
+	const handleKeyUp = ( event: React.KeyboardEvent< HTMLInputElement > ) => {
+		const { key } = event;
+
+		if ( ! /^[a-zA-Z%]$/.test( key ) ) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const newChar = key.toLowerCase();
+		const updatedBuffer = ( unitInputBufferRef.current + newChar ).slice( -3 );
+		unitInputBufferRef.current = updatedBuffer;
+
+		const matchedUnit =
+			units.find( ( u ) => u.includes( updatedBuffer ) ) ||
+			units.find( ( u ) => u.startsWith( newChar ) ) ||
+			units.find( ( u ) => u.includes( newChar ) );
+
+		if ( matchedUnit ) {
+			handleUnitChange( matchedUnit );
+		}
+	};
+
+	const popupAttributes = {
+		'aria-controls': popupState.isOpen ? popupState.popupId : undefined,
+		'aria-haspopup': true,
+	};
+
+	const inputProps = {
+		...popupAttributes,
+		autoComplete: 'off',
+		onClick,
+		onFocus,
+		startAdornment: startIcon ? (
+			<InputAdornment position="start" disabled={ disabled }>
+				{ startIcon }
+			</InputAdornment>
+		) : undefined,
+		endAdornment: (
+			<SelectionEndAdornment
+				disabled={ disabled }
+				options={ units }
+				onClick={ handleUnitChange }
+				value={ unit }
+				alternativeOptionLabels={ {
+					custom: <PencilIcon fontSize="small" />,
+				} }
+				menuItemsAttributes={
+					units.includes( 'custom' )
+						? {
+								custom: popupAttributes,
+						  }
+						: undefined
+				}
+			/>
+		),
+	};
+
+	return (
+		<ControlActions>
+			<Box>
+				<TextFieldInnerSelection
+					disabled={ disabled }
+					placeholder={ placeholder }
+					type={ inputType }
+					value={ inputValue }
+					onChange={ handleSizeChange }
+					onKeyDown={ ( event ) => {
+						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+							event.preventDefault();
+						}
+					} }
+					onKeyUp={ handleKeyUp }
+					onBlur={ onBlur }
+					shouldBlockInput={ isUnitExtendedOption( unit ) }
+					inputProps={ inputProps }
+				/>
+			</Box>
+		</ControlActions>
+	);
+};

package/src/components/{text-field-inner-selection.tsx → size-control/text-field-inner-selection.tsx}

@@ -2,7 +2,16 @@ import * as React from 'react';
 import { forwardRef, useId } from 'react';
 import { type PropValue } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
-import { bindMenu, bindTrigger, Button, InputAdornment, Menu, TextField, usePopupState } from '@elementor/ui';
+import {
+	bindMenu,
+	bindTrigger,
+	Button,
+	InputAdornment,
+	Menu,
+	TextField,
+	type TextFieldProps,
+	usePopupState,
+} from '@elementor/ui';
 
 type TextFieldInnerSelectionProps = {
 	placeholder?: string;
@@ -12,8 +21,10 @@ type TextFieldInnerSelectionProps = {
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	onKeyDown?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
 	onKeyUp?: ( event: React.KeyboardEvent< HTMLInputElement > ) => void;
-	endAdornment: React.ReactNode;
-	startAdornment?: React.ReactNode;
+	shouldBlockInput?: boolean;
+	inputProps: TextFieldProps[ 'InputProps' ] & {
+		endAdornment: React.JSX.Element;
+	};
 	disabled?: boolean;
 };
 
@@ -27,8 +38,8 @@ export const TextFieldInnerSelection = forwardRef(
 			onBlur,
 			onKeyDown,
 			onKeyUp,
-			endAdornment,
-			startAdornment,
+			shouldBlockInput = false,
+			inputProps,
 			disabled,
 		}: TextFieldInnerSelectionProps,
 		ref
@@ -36,20 +47,18 @@ export const TextFieldInnerSelection = forwardRef(
 		return (
 			<TextField
 				ref={ ref }
+				sx={ { input: { cursor: shouldBlockInput ? 'default !important' : undefined } } }
 				size="tiny"
 				fullWidth
-				type={ type }
+				type={ shouldBlockInput ? undefined : type }
 				value={ value }
+				onChange={ shouldBlockInput ? undefined : onChange }
+				onKeyDown={ shouldBlockInput ? undefined : onKeyDown }
+				onKeyUp={ shouldBlockInput ? undefined : onKeyUp }
 				disabled={ disabled }
-				onChange={ onChange }
-				onKeyDown={ onKeyDown }
-				onKeyUp={ onKeyUp }
 				onBlur={ onBlur }
 				placeholder={ placeholder }
-				InputProps={ {
-					endAdornment,
-					startAdornment,
-				} }
+				InputProps={ inputProps }
 			/>
 		);
 	}
@@ -59,13 +68,17 @@ type SelectionEndAdornmentProps< T extends string > = {
 	options: T[];
 	onClick: ( value: T ) => void;
 	value: T;
+	alternativeOptionLabels?: { [ key in T ]?: React.ReactNode };
+	menuItemsAttributes?: { [ key in T ]?: Record< string, unknown > };
 	disabled?: boolean;
 };
 
 export const SelectionEndAdornment = < T extends string >( {
 	options,
+	alternativeOptionLabels = {} as Record< T, React.ReactNode >,
 	onClick,
 	value,
+	menuItemsAttributes = {},
 	disabled,
 }: SelectionEndAdornmentProps< T > ) => {
 	const popupState = usePopupState( {
@@ -87,13 +100,17 @@ export const SelectionEndAdornment = < T extends string >( {
 				sx={ { font: 'inherit', minWidth: 'initial', textTransform: 'uppercase' } }
 				{ ...bindTrigger( popupState ) }
 			>
-				{ value }
+				{ alternativeOptionLabels[ value ] ?? value }
 			</Button>
 
 			<Menu MenuListProps={ { dense: true } } { ...bindMenu( popupState ) }>
 				{ options.map( ( option, index ) => (
-					<MenuListItem key={ option } onClick={ () => handleMenuItemClick( index ) }>
-						{ option.toUpperCase() }
+					<MenuListItem
+						key={ option }
+						onClick={ () => handleMenuItemClick( index ) }
+						{ ...menuItemsAttributes?.[ option ] }
+					>
+						{ alternativeOptionLabels[ option ] ?? option.toUpperCase() }
 					</MenuListItem>
 				) ) }
 			</Menu>

package/src/components/text-field-popover.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type MutableRefObject } from 'react';
+import { bindPopover, Paper, Popover, type PopupState, TextField } from '@elementor/ui';
+
+type Props = {
+	popupState: PopupState;
+	anchorRef: MutableRefObject< HTMLElement >;
+	restoreValue: () => void;
+	value: string;
+	onChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+};
+
+export const TextFieldPopover = ( props: Props ) => {
+	const { popupState, restoreValue, anchorRef, value, onChange } = props;
+
+	return (
+		<Popover
+			disablePortal
+			{ ...bindPopover( popupState ) }
+			anchorOrigin={ { vertical: 'bottom', horizontal: 'center' } }
+			transformOrigin={ { vertical: 'top', horizontal: 'center' } }
+			onClose={ () => {
+				restoreValue();
+				popupState.close();
+			} }
+		>
+			<Paper
+				sx={ {
+					width: anchorRef.current.offsetWidth + 'px',
+					borderRadius: 2,
+					p: 1.5,
+				} }
+			>
+				<TextField
+					value={ value }
+					onChange={ onChange }
+					size="tiny"
+					type="text"
+					fullWidth
+					inputProps={ {
+						autoFocus: true,
+					} }
+				/>
+			</Paper>
+		</Popover>
+	);
+};