@wordpress/components 24.0.0 → 25.1.0

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

@@ -0,0 +1,265 @@
+/**
+ * External dependencies
+ */
+import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+export type DropdownMenuProps = {
+	/**
+	 * The open state of the dropdown menu when it is initially rendered. Use when
+	 * you do not need to control its open state.
+	 *
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the dropdown menu. Must be used in conjunction
+	 * with `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the dropdown menu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuProps[ 'onOpenChange' ];
+	/**
+	 * The modality of the dropdown menu. When set to true, interaction with
+	 * outside elements will be disabled and only menu content will be visible to
+	 * screen readers.
+	 *
+	 * @default true
+	 */
+	modal?: DropdownMenuPrimitive.DropdownMenuProps[ 'modal' ];
+	/**
+	 * The preferred side of the trigger to render against when open.
+	 * Will be reversed when collisions occur and avoidCollisions is enabled.
+	 *
+	 * @default 'bottom'
+	 */
+	side?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'side' ];
+	/**
+	 * The distance in pixels from the trigger.
+	 *
+	 * @default 0
+	 */
+	sideOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'sideOffset' ];
+	/**
+	 * The preferred alignment against the trigger.
+	 * May change when collisions occur.
+	 *
+	 * @default 'start'
+	 */
+	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
+	/**
+	 * An offset in pixels from the "start" or "end" alignment options.
+	 *
+	 * @default 0
+	 */
+	alignOffset?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'alignOffset' ];
+	/**
+	 * The trigger button.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownSubMenuTriggerProps = {
+	/**
+	 * The contents of the item.
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix.
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix.
+	 *
+	 * @default The standard chevron icon for a submenu trigger.
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownSubMenuProps = {
+	/**
+	 * The open state of the submenu when it is initially rendered. Use when you
+	 * do not need to control its open state.
+	 */
+	defaultOpen?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'defaultOpen' ];
+	/**
+	 * The controlled open state of the submenu. Must be used in conjunction with
+	 * `onOpenChange`.
+	 */
+	open?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'open' ];
+	/**
+	 * Event handler called when the open state of the submenu changes.
+	 */
+	onOpenChange?: DropdownMenuPrimitive.DropdownMenuSubProps[ 'onOpenChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'disabled' ];
+	/**
+	 * Optional text used for typeahead purposes for the trigger. By default the typeahead
+	 * behavior will use the `.textContent` of the trigger. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuSubTriggerProps[ 'textValue' ];
+	/**
+	 * The contents rendered inside the trigger. The trigger should be
+	 * an instance of the `DropdownSubMenuTriggerProps` component.
+	 */
+	trigger: React.ReactNode;
+	/**
+	 * The contents of the dropdown sub menu
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuItemProps = {
+	/**
+	 * When true, prevents the user from interacting with the item.
+	 *
+	 * @default false
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuItemProps[ 'textValue' ];
+	/**
+	 * The contents of the item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the item's prefix
+	 */
+	prefix?: React.ReactNode;
+	/**
+	 * The contents of the item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuCheckboxItemProps = {
+	/**
+	 * The controlled checked state of the item.
+	 * Must be used in conjunction with `onCheckedChange`.
+	 *
+	 * @default false
+	 */
+	checked?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'checked' ];
+	/**
+	 * Event handler called when the checked state changes.
+	 */
+	onCheckedChange?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onCheckedChange' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * 	menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuCheckboxItemProps[ 'textValue' ];
+	/**
+	 * The contents of the checkbox item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the checkbox item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuRadioGroupProps = {
+	/**
+	 * The value of the selected item in the group.
+	 */
+	value?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'value' ];
+	/**
+	 * Event handler called when the value changes.
+	 */
+	onValueChange?: DropdownMenuPrimitive.DropdownMenuRadioGroupProps[ 'onValueChange' ];
+	/**
+	 * The contents of the radio group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuRadioItemProps = {
+	/**
+	 * The unique value of the item.
+	 */
+	value: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'value' ];
+	/**
+	 * When `true`, prevents the user from interacting with the item.
+	 */
+	disabled?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'disabled' ];
+	/**
+	 * Event handler called when the user selects an item (via mouse or keyboard).
+	 * Calling `event.preventDefault` in this handler will prevent the dropdown
+	 * menu from closing when selecting that item.
+	 */
+	onSelect?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'onSelect' ];
+	/**
+	 * Optional text used for typeahead purposes. By default the typeahead
+	 * behavior will use the `.textContent` of the item. Use this when the content
+	 * is complex, or you have non-textual content inside.
+	 */
+	textValue?: DropdownMenuPrimitive.DropdownMenuRadioItemProps[ 'textValue' ];
+	/**
+	 * The contents of the radio item
+	 */
+	children: React.ReactNode;
+	/**
+	 * The contents of the radio item's suffix
+	 */
+	suffix?: React.ReactNode;
+};
+
+export type DropdownMenuLabelProps = {
+	/**
+	 * The contents of the label
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuGroupProps = {
+	/**
+	 * The contents of the group
+	 */
+	children: React.ReactNode;
+};
+
+export type DropdownMenuSeparatorProps = {};
+
+export type DropdownMenuContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};
+
+export type DropdownMenuPrivateContext = Pick<
+	DropdownMenuContext,
+	'variant'
+> & {
+	portalContainer: HTMLElement | null;
+};

package/src/focal-point-picker/controls.tsx

@@ -54,6 +54,7 @@ export default function FocalPointPickerControls( {
 		>
 			<FocalPointUnitControl
 				label={ __( 'Left' ) }
+				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>
@@ -66,6 +67,7 @@ export default function FocalPointPickerControls( {
 			/>
 			<FocalPointUnitControl
 				label={ __( 'Top' ) }
+				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>

package/src/focal-point-picker/test/index.js

@@ -120,7 +120,9 @@ describe( 'FocalPointPicker', () => {
 			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', {
+				name: 'Focal point left position',
+			} );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
@@ -155,10 +157,14 @@ describe( 'FocalPointPicker', () => {
 			);
 
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Left' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point left position',
+				} ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Top' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point top position',
+				} ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );

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

@@ -14,7 +14,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -24,12 +23,13 @@ import {
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
-import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
 	Container,
+	Header,
 	HeaderHint,
 	HeaderLabel,
+	HeaderToggle,
 	Controls,
 	ResetButton,
 } from './styles';
@@ -127,7 +127,7 @@ const UnforwardedFontSizePicker = (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
-				<HStack className="components-font-size-picker__header">
+				<Header className="components-font-size-picker__header">
 					<HeaderLabel
 						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
 					>
@@ -139,7 +139,7 @@ const UnforwardedFontSizePicker = (
 						) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
-						<Button
+						<HeaderToggle
 							label={
 								showCustomValueControl
 									? __( 'Use size preset' )
@@ -155,7 +155,7 @@ const UnforwardedFontSizePicker = (
 							isSmall
 						/>
 					) }
-				</HStack>
+				</Header>
 			</Spacer>
 			<Controls
 				className="components-font-size-picker__controls"

package/src/font-size-picker/styles.ts

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
+import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
 import type { FontSizePickerProps } from './types';
@@ -18,6 +19,14 @@ export const Container = styled.fieldset`
 	padding: 0;
 `;
 
+export const Header = styled( HStack )`
+	height: ${ space( 4 ) };
+`;
+
+export const HeaderToggle = styled( Button )`
+	margin-top: ${ space( -1 ) };
+`;
+
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	display: flex;
 	gap: ${ space( 1 ) };

package/src/index.native.js

@@ -94,7 +94,6 @@ export { default as HTMLTextInput } from './mobile/html-text-input';
 export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view';
 export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list';
 export { default as Picker } from './mobile/picker';
-export { default as ReadableContentView } from './mobile/readable-content-view';
 export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';

package/src/input-control/styles/input-control-styles.tsx

@@ -270,9 +270,14 @@ const backdropFocusedStyles = ( {
 	let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border;
 
 	let boxShadow;
+	let outline;
+	let outlineOffset;
 
 	if ( isFocused ) {
 		boxShadow = `0 0 0 1px ${ COLORS.ui.borderFocus } inset`;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline = `2px solid transparent`;
+		outlineOffset = `-2px`;
 	}
 
 	if ( disabled ) {
@@ -284,6 +289,8 @@ const backdropFocusedStyles = ( {
 		borderColor,
 		borderStyle: 'solid',
 		borderWidth: 1,
+		outline,
+		outlineOffset,
 	} );
 };
 

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

@@ -26,6 +26,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
+import LockIcon from './lock-icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -92,6 +93,8 @@ class BottomSheetCell extends Component {
 			accessibilityHint,
 			accessibilityRole,
 			disabled = false,
+			disabledStyle = styles.cellDisabled,
+			showLockIcon = true,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -223,11 +226,22 @@ class BottomSheetCell extends Component {
 				styles.cellValue,
 				styles.cellTextDark
 			);
-			const finalStyle = {
+			const textInputStyle = {
 				...cellValueStyle,
 				...valueStyle,
 				...styleRTL,
 			};
+			const placeholderTextColor = disabled
+				? this.props.getStylesFromColorScheme(
+						styles.placeholderColorDisabled,
+						styles.placeholderColorDisabledDark
+				  ).color
+				: styles.placeholderColor.color;
+			const textStyle = {
+				...( disabled && styles.cellDisabled ),
+				...cellValueStyle,
+				...valueStyle,
+			};
 
 			// To be able to show the `middle` ellipsizeMode on editable cells
 			// we show the TextInput just when the user wants to edit the value,
@@ -238,10 +252,10 @@ class BottomSheetCell extends Component {
 				<TextInput
 					ref={ ( c ) => ( this._valueTextInput = c ) }
 					numberOfLines={ 1 }
-					style={ finalStyle }
+					style={ textInputStyle }
 					value={ value }
 					placeholder={ valuePlaceholder }
-					placeholderTextColor={ '#87a6bc' }
+					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={
@@ -251,11 +265,12 @@ class BottomSheetCell extends Component {
 					onBlur={ finishEditing }
 					onSubmitEditing={ onSubmit }
 					keyboardType={ this.typeToKeyboardType( type, step ) }
+					disabled={ disabled }
 					{ ...valueProps }
 				/>
 			) : (
 				<Text
-					style={ { ...cellValueStyle, ...valueStyle } }
+					style={ textStyle }
 					numberOfLines={ 1 }
 					ellipsizeMode={ 'middle' }
 				>
@@ -361,6 +376,7 @@ class BottomSheetCell extends Component {
 									] }
 								>
 									<Icon
+										lock
 										icon={ icon }
 										size={ 24 }
 										fill={
@@ -418,7 +434,20 @@ class BottomSheetCell extends Component {
 						/>
 					) }
 					{ showValue && getValueComponent() }
-					{ children }
+					<View
+						style={ [
+							disabled && disabledStyle,
+							styles.cellRowContainer,
+						] }
+						pointerEvents={ disabled ? 'none' : 'auto' }
+					>
+						{ children }
+					</View>
+					{ disabled && showLockIcon && (
+						<View style={ styles.cellDisabled }>
+							<LockIcon />
+						</View>
+					) }
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

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

@@ -11,7 +11,7 @@ import Cell from './cell';
 import styles from './styles.scss';
 
 export default function BottomSheetColorCell( props ) {
-	const { color, withColorIndicator = true, ...cellProps } = props;
+	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
 
 	return (
 		<Cell
@@ -22,12 +22,13 @@ export default function BottomSheetColorCell( props ) {
 				__( 'Double tap to go to color settings' )
 			}
 			editable={ false }
+			disabled={ disabled }
 			value={ withColorIndicator && ! color && __( 'Default' ) }
 		>
 			{ withColorIndicator && color && (
 				<ColorIndicator color={ color } style={ styles.colorCircle } />
 			) }
-			<Icon icon={ chevronRight }></Icon>
+			{ disabled ? null : <Icon icon={ chevronRight }></Icon> }
 		</Cell>
 	);
 }

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

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+export default function LockIcon() {
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
+	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
+}

package/src/mobile/bottom-sheet/lock-icon/styles.native.scss

@@ -0,0 +1,8 @@
+.icon {
+	color: $gray-dark;
+	margin-left: 6px;
+}
+
+.icon--dark {
+	color: $gray-light;
+}

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

@@ -10,7 +10,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-export default function BottomSheetColorCell( props ) {
+export default function BottomSheetRadioCell( props ) {
 	const { selected, ...cellProps } = props;
 
 	const selectedIconStyle = usePreferredColorSchemeStyle(
@@ -29,6 +29,7 @@ export default function BottomSheetColorCell( props ) {
 			}
 			editable={ false }
 			value={ '' }
+			showLockIcon={ selected }
 		>
 			{ selected && (
 				<Icon icon={ check } style={ selectedIconStyle }></Icon>

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

@@ -15,6 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
+import LockIcon from './lock-icon';
 import styles from './range-cell.scss';
 import RangeTextInput from './range-text-input';
 import { toFixed } from '../utils';
@@ -218,6 +219,8 @@ class BottomSheetRangeCell extends Component {
 						activeOpacity={ 1 }
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
+						disabled={ disabled }
+						showLockIcon={ false }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -225,7 +228,7 @@ class BottomSheetRangeCell extends Component {
 								testID={ `Slider ${ cellProps.label }` }
 								value={ sliderValue }
 								defaultValue={ defaultValue }
-								disabled={ disabled }
+								disabled={ disabled && ! isIOS }
 								step={ step }
 								minimumValue={ minimumValue }
 								maximumValue={ maximumValue }
@@ -259,6 +262,7 @@ class BottomSheetRangeCell extends Component {
 									{ children }
 								</RangeTextInput>
 							) }
+							{ disabled && <LockIcon /> }
 						</View>
 					</Cell>
 				</View>

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

@@ -144,6 +144,7 @@ class BottomSheetStepperCell extends Component {
 			openUnitPicker,
 			decimalNum,
 			cellContainerStyle,
+			disabled,
 		} = this.props;
 		const { inputValue } = this.state;
 		const isMinValue = value === min;
@@ -215,6 +216,7 @@ class BottomSheetStepperCell extends Component {
 						labelStyle={ labelStyle }
 						leftAlign={ true }
 						separatorType={ separatorType }
+						disabled={ disabled }
 					>
 						<View style={ preview && containerStyle }>
 							{ preview }

package/src/mobile/bottom-sheet/styles.native.scss

@@ -1,5 +1,7 @@
 //Bottom Sheet
 
+$cell-disable-opacity: 0.38;
+
 .bottomModal {
 	justify-content: flex-end;
 	margin: 0;
@@ -284,7 +286,15 @@
 
 // used in both light and dark modes
 .placeholderColor {
-	color: #87a6bc;
+	color: $gray;
+}
+
+.placeholderColorDisabled {
+	color: rgba($gray-dark, $cell-disable-opacity);
+}
+
+.placeholderColorDisabledDark {
+	color: rgba($white, $cell-disable-opacity);
 }
 
 .applyButton {
@@ -317,3 +327,7 @@
 .cellSubLabelTextDark {
 	color: $sub-heading-dark;
 }
+
+.cellDisabled {
+	opacity: $cell-disable-opacity;
+}

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

@@ -12,8 +12,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
  */
 import Cell from './cell';
 
+const EMPTY_STYLE = {};
+
 export default function BottomSheetSwitchCell( props ) {
-	const { value, onValueChange, ...cellProps } = props;
+	const { value, onValueChange, disabled, ...cellProps } = props;
 
 	const onPress = () => {
 		onValueChange( ! value );
@@ -60,8 +62,14 @@ export default function BottomSheetSwitchCell( props ) {
 			onPress={ onPress }
 			editable={ false }
 			value={ '' }
+			disabled={ disabled }
+			disabledStyle={ EMPTY_STYLE }
 		>
-			<Switch value={ value } onValueChange={ onValueChange } />
+			<Switch
+				value={ value }
+				onValueChange={ onValueChange }
+				disabled={ disabled }
+			/>
 		</Cell>
 	);
 }