@elementor/editor-editing-panel 1.45.0 → 1.47.0

package/src/dynamics/components/dynamic-selection.tsx

@@ -1,21 +1,12 @@
-import * as React from 'react';
 import { Fragment, useState } from 'react';
+import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { DatabaseIcon, SearchIcon } from '@elementor/icons';
-import {
-	Box,
-	Divider,
-	InputAdornment,
-	Link,
-	MenuItem,
-	MenuList,
-	MenuSubheader,
-	Stack,
-	TextField,
-	Typography,
-} from '@elementor/ui';
+import { PopoverHeader, PopoverMenuList, PopoverSearch } from '@elementor/editor-ui';
+import { DatabaseIcon } from '@elementor/icons';
+import { Box, Divider, Link, Stack, Typography, useTheme } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { PopoverScrollableContent } from '../../components/popover-scrollable-content';
 import { usePersistDynamicValue } from '../../hooks/use-persist-dynamic-value';
 import { usePropDynamicTags } from '../hooks/use-prop-dynamic-tags';
 import { getAtomicDynamicTags } from '../sync/get-atomic-dynamic-tags';
@@ -31,7 +22,7 @@ type OptionEntry = [ string, Option[] ];
 const SIZE = 'tiny';
 
 type DynamicSelectionProps = {
-	onSelect?: () => void;
+	close: () => void;
 };
 
 type NoResultsProps = {
@@ -39,9 +30,10 @@ type NoResultsProps = {
 	onClear?: () => void;
 };
 
-export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
+export const DynamicSelection = ( { close: closePopover }: DynamicSelectionProps ) => {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
+	const theme = useTheme();
 
 	const { value: anyValue } = useBoundProp();
 	const { bind, value: dynamicValue, setValue } = useBoundProp( dynamicPropTypeUtil );
@@ -54,79 +46,73 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 
 	const hasNoDynamicTags = ! options.length && ! searchValue.trim();
 
-	const handleSearch = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		setSearchValue( event.target.value );
+	const handleSearch = ( value: string ) => {
+		setSearchValue( value );
 	};
 
-	const handleSetDynamicTag = ( value: string, label: string ) => {
+	const handleSetDynamicTag = ( value: string ) => {
 		if ( ! isCurrentValueDynamic ) {
 			updatePropValueHistory( anyValue );
 		}
 
-		setValue( { name: value, settings: { label } } );
+		const selectedOption = options.flatMap( ( [ , items ] ) => items ).find( ( item ) => item.value === value );
+
+		setValue( { name: value, settings: { label: selectedOption?.label } } );
 
-		onSelect?.();
+		closePopover();
 	};
 
+	const virtualizedItems = options.flatMap( ( [ category, items ] ) => [
+		{
+			type: 'category' as const,
+			value: category,
+			label: dynamicGroups?.[ category ]?.title || category,
+		},
+		...items.map( ( item ) => ( {
+			type: 'item' as const,
+			value: item.value,
+			label: item.label,
+		} ) ),
+	] );
+
 	return (
-		<Stack>
-			{ hasNoDynamicTags ? (
-				<NoDynamicTags />
-			) : (
-				<Fragment>
-					<Box px={ 1.5 } pb={ 1 }>
-						<TextField
-							fullWidth
-							size={ SIZE }
+		<>
+			<PopoverHeader
+				title={ __( 'Dynamic tags', 'elementor' ) }
+				onClose={ closePopover }
+				icon={ <DatabaseIcon fontSize={ SIZE } /> }
+			/>
+			<Stack>
+				{ hasNoDynamicTags ? (
+					<NoDynamicTags />
+				) : (
+					<Fragment>
+						<PopoverSearch
 							value={ searchValue }
-							onChange={ handleSearch }
+							onSearch={ handleSearch }
 							placeholder={ __( 'Search dynamic tags…', 'elementor' ) }
-							InputProps={ {
-								startAdornment: (
-									<InputAdornment position="start">
-										<SearchIcon fontSize={ SIZE } />
-									</InputAdornment>
-								),
-							} }
 						/>
-					</Box>
-					<Divider />
-					<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-						{ options.length > 0 ? (
-							<MenuList role="listbox" tabIndex={ 0 }>
-								{ options.map( ( [ category, items ], index ) => (
-									<Fragment key={ index }>
-										<MenuSubheader
-											sx={ { px: 1.5, typography: 'caption', color: 'text.tertiary' } }
-										>
-											{ dynamicGroups?.[ category ]?.title || category }
-										</MenuSubheader>
-										{ items.map( ( { value, label: tagLabel } ) => {
-											const isSelected = isCurrentValueDynamic && value === dynamicValue?.name;
-
-											return (
-												<MenuItem
-													key={ value }
-													selected={ isSelected }
-													// eslint-disable-next-line jsx-a11y/no-autofocus
-													autoFocus={ isSelected }
-													sx={ { px: 3.5, typography: 'caption' } }
-													onClick={ () => handleSetDynamicTag( value, tagLabel ) }
-												>
-													{ tagLabel }
-												</MenuItem>
-											);
-										} ) }
-									</Fragment>
-								) ) }
-							</MenuList>
-						) : (
-							<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
-						) }
-					</Box>
-				</Fragment>
-			) }
-		</Stack>
+
+						<Divider />
+
+						<PopoverScrollableContent>
+							<PopoverMenuList
+								items={ virtualizedItems }
+								onSelect={ handleSetDynamicTag }
+								onClose={ closePopover }
+								selectedValue={ dynamicValue?.name }
+								itemStyle={ ( item ) =>
+									item.type === 'item' ? { paddingInlineStart: theme.spacing( 3.5 ) } : {}
+								}
+								noResultsComponent={
+									<NoResults searchValue={ searchValue } onClear={ () => setSearchValue( '' ) } />
+								}
+							/>
+						</PopoverScrollableContent>
+					</Fragment>
+				) }
+			</Stack>
+		</>
 	);
 };
 
@@ -146,9 +132,8 @@ const NoResults = ( { searchValue, onClear }: NoResultsProps ) => (
 			<br />
 			&ldquo;{ searchValue }&rdquo;.
 		</Typography>
-		<Typography align="center" variant="caption">
+		<Typography align="center" variant="caption" sx={ { display: 'flex', flexDirection: 'column' } }>
 			{ __( 'Try something else.', 'elementor' ) }
-			&nbsp;
 			<Link color="text.secondary" variant="caption" component="button" onClick={ onClear }>
 				{ __( 'Clear & try again', 'elementor' ) }
 			</Link>
@@ -173,7 +158,7 @@ const NoDynamicTags = () => (
 				{ __( 'Streamline your workflow with dynamic tags', 'elementor' ) }
 			</Typography>
 			<Typography align="center" variant="caption">
-				{ __( 'You’ll need Elementor Pro to use this feature.', 'elementor' ) }
+				{ __( "You'll need Elementor Pro to use this feature.", 'elementor' ) }
 			</Typography>
 		</Stack>
 	</Box>

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -16,6 +16,6 @@ export const usePropDynamicAction = (): PopoverActionProps => {
 		visible,
 		icon: DatabaseIcon,
 		title: __( 'Dynamic tags', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+		content: ( { close } ) => <DynamicSelection close={ close } />,
 	};
 };

package/src/hooks/use-default-panel-settings.ts

@@ -24,6 +24,10 @@ const defaultPanelSettingsContext = createContext< Record< string, Defaults | un
 		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
 		defaultTab: 'style',
 	},
+	'e-divider': {
+		defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded,
+		defaultTab: 'style',
+	},
 } );
 
 export const useDefaultPanelSettings = () => {

package/src/hooks/use-styles-field.ts

@@ -2,8 +2,14 @@ import type { PropKey, PropValue } from '@elementor/editor-props';
 
 import { useStylesFields } from './use-styles-fields';
 
-export function useStylesField< T extends PropValue >( propName: PropKey ): [ T | null, ( newValue: T ) => void ] {
-	const [ values, setValues ] = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
+export function useStylesField< T extends PropValue >(
+	propName: PropKey
+): {
+	value: T;
+	setValue: ( newValue: T ) => void;
+	canEdit?: boolean;
+} {
+	const { values, setValues, canEdit } = useStylesFields< { [ k: typeof propName ]: T } >( [ propName ] );
 
 	const value = values?.[ propName ] ?? null;
 
@@ -13,5 +19,5 @@ export function useStylesField< T extends PropValue >( propName: PropKey ): [ T
 		} );
 	};
 
-	return [ value, setValue ];
+	return { value: value as T, setValue, canEdit };
 }

package/src/hooks/use-styles-fields.ts

@@ -21,7 +21,7 @@ import { useStylesRerender } from './use-styles-rerender';
 
 export function useStylesFields< T extends Props >( propNames: ( keyof T & string )[] ) {
 	const { element } = useElement();
-	const { id, meta, provider } = useStyle();
+	const { id, meta, provider, canEdit } = useStyle();
 	const classesProp = useClassesProp();
 
 	const undoableUpdateStyle = useUndoableUpdateStyle();
@@ -29,7 +29,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 
 	useStylesRerender();
 
-	const value = getProps< T >( {
+	const values = getProps< T >( {
 		elementId: element.id,
 		styleId: id,
 		provider,
@@ -37,7 +37,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		propNames,
 	} );
 
-	const setValue = ( props: T ) => {
+	const setValues = ( props: T ) => {
 		if ( id === null ) {
 			undoableCreateElementStyle( {
 				elementId: element.id,
@@ -58,7 +58,7 @@ export function useStylesFields< T extends Props >( propNames: ( keyof T & strin
 		} );
 	};
 
-	return [ value, setValue ] as const;
+	return { values, setValues, canEdit };
 }
 
 type GetPropsArgs = {

package/src/index.ts

@@ -1,10 +1,15 @@
+export { EXPERIMENTAL_FEATURES } from './sync/experiments-flags';
+
 export { useBoundProp } from '@elementor/editor-controls';
 export type { PopoverActionProps } from './popover-action';
 export { registerControlReplacement } from './control-replacement';
+export { registerStyleProviderToColors } from './provider-colors-registry';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 export { type ValidationResult, type ValidationEvent } from './components/creatable-autocomplete';
 export { controlActionsMenu } from './controls-actions';
 export { useFontFamilies } from './components/style-sections/typography-section/hooks/use-font-families';
+export { PopoverScrollableContent } from './components/popover-scrollable-content';
+export { useSectionWidth } from './contexts/section-context';
 
 export { init } from './init';

package/src/popover-action.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { type ComponentType, type ElementType as ReactElementType, useId } from 'react';
-import { PopoverHeader } from '@elementor/editor-ui';
 import { bindPopover, bindToggle, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
 
 const SIZE = 'tiny';
@@ -9,14 +8,14 @@ export type PopoverActionProps = {
 	title: string;
 	visible?: boolean;
 	icon: ReactElementType;
-	popoverContent: ComponentType< { closePopover: () => void } >;
+	content: ComponentType< { close: () => void } >;
 };
 
 export default function PopoverAction( {
 	title,
 	visible = true,
 	icon: Icon,
-	popoverContent: PopoverContent,
+	content: PopoverContent,
 }: PopoverActionProps ) {
 	const id = useId();
 	const popupState = usePopupState( {
@@ -40,12 +39,18 @@ export default function PopoverAction( {
 				disableScrollLock
 				anchorOrigin={ {
 					vertical: 'bottom',
-					horizontal: 'center',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
 				} }
 				{ ...bindPopover( popupState ) }
 			>
-				<PopoverHeader title={ title } onClose={ popupState.close } icon={ <Icon fontSize={ SIZE } /> } />
-				<PopoverContent closePopover={ popupState.close } />
+				<PopoverContent close={ popupState.close } />
 			</Popover>
 		</>
 	);

package/src/provider-colors-registry.ts

@@ -0,0 +1,20 @@
+import { type ChipProps, type Theme } from '@elementor/ui';
+
+type Colors = {
+	name: ChipProps[ 'color' ];
+	getThemeColor: ( ( theme: Theme ) => string ) | null;
+};
+
+const DEFAULT_COLORS: Colors = {
+	name: 'default',
+	getThemeColor: null,
+};
+
+const providerColorsRegistry = new Map< string, Colors >();
+
+export const registerStyleProviderToColors = ( provider: string, colors: Colors ) => {
+	providerColorsRegistry.set( provider, colors );
+};
+
+export const getStyleProviderColors = ( provider: string ): Colors =>
+	providerColorsRegistry.get( provider ) ?? DEFAULT_COLORS;

package/src/styles-inheritance/components/infotip/label-chip.tsx

@@ -4,17 +4,16 @@ import { InfoCircleIcon } from '@elementor/icons';
 import { Chip, type Theme, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type ChipColors } from '../../types';
+import { getStylesProviderColorName } from '../../../utils/get-styles-provider-color';
 
 type Props = {
 	displayLabel: string;
-	provider?: string;
-	chipColor: ChipColors;
+	provider: string;
 };
 
 const SIZE = 'tiny';
 
-export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
+export const LabelChip = ( { displayLabel, provider }: Props ) => {
 	const isBaseStyle = provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY;
 
 	const chipIcon = isBaseStyle ? (
@@ -27,7 +26,7 @@ export const LabelChip = ( { displayLabel, provider, chipColor }: Props ) => {
 		<Chip
 			label={ displayLabel }
 			size={ SIZE }
-			color={ chipColor }
+			color={ getStylesProviderColorName( provider ) }
 			variant="standard"
 			state="enabled"
 			icon={ chipIcon }

package/src/styles-inheritance/components/styles-inheritance-indicator.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { type ComponentProps } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
-import { isEmpty } from '@elementor/editor-props';
-import { ELEMENTS_BASE_STYLES_PROVIDER_KEY, isElementsStylesProvider } from '@elementor/editor-styles-repository';
+import { isEmpty, type PropType } from '@elementor/editor-props';
+import { ELEMENTS_BASE_STYLES_PROVIDER_KEY } from '@elementor/editor-styles-repository';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -10,12 +11,14 @@ import { StyleIndicator } from '../../components/style-indicator';
 import { useStyle } from '../../contexts/style-context';
 import { useStylesInheritanceChain } from '../../contexts/styles-inheritance-context';
 import { EXPERIMENTAL_FEATURES } from '../../sync/experiments-flags';
+import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { isUsingIndicatorPopover } from '../consts';
+import { type SnapshotPropValue } from '../types';
+import { getValueFromInheritanceChain } from '../utils';
 import { StylesInheritanceInfotip } from './styles-inheritance-infotip';
 
 export const StylesInheritanceIndicator = () => {
 	const { path, propType } = useBoundProp();
-	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
 
 	const isUsingNestedProps = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_30 );
 
@@ -27,35 +30,49 @@ export const StylesInheritanceIndicator = () => {
 		return null;
 	}
 
-	const currentItem = inheritanceChain.find(
-		( {
-			style,
-			variant: {
-				meta: { breakpoint, state },
-			},
-		} ) =>
-			style.id === currentStyleId &&
-			breakpoint === currentStyleMeta.breakpoint &&
-			state === currentStyleMeta.state
-	);
+	return <Indicator inheritanceChain={ inheritanceChain } path={ finalPath } propType={ propType } />;
+};
+
+type IndicatorProps = {
+	inheritanceChain: SnapshotPropValue[];
+	path: string[];
+	propType: PropType;
+};
+
+const Indicator = ( { inheritanceChain, path, propType }: IndicatorProps ) => {
+	const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle();
+
+	const currentItem = currentStyleId
+		? getValueFromInheritanceChain( inheritanceChain, currentStyleId, currentStyleMeta )
+		: null;
 
 	const hasValue = ! isEmpty( currentItem?.value );
 
 	const [ actualStyle ] = inheritanceChain;
 
-	if ( actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY ) {
+	if (
+		! isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 ) &&
+		actualStyle.provider === ELEMENTS_BASE_STYLES_PROVIDER_KEY
+	) {
 		return null;
 	}
 
 	const isFinalValue = currentItem === actualStyle;
 
 	const label = getLabel( { isFinalValue, hasValue } );
-	const variantType = getVariant( { isFinalValue, hasValue, currentStyleProvider } );
+
+	const styleIndicatorProps: ComponentProps< typeof StyleIndicator > = {
+		getColor:
+			isFinalValue && currentStyleProvider
+				? getStylesProviderThemeColor( currentStyleProvider.getKey() )
+				: undefined,
+		isOverridden: hasValue && ! isFinalValue ? true : undefined,
+	};
 
 	if ( ! isUsingIndicatorPopover() ) {
 		return (
 			<Tooltip title={ __( 'Style origin', 'elementor' ) } placement="top">
-				<StyleIndicator variant={ variantType } aria-label={ label } />
+				<StyleIndicator { ...styleIndicatorProps } aria-label={ label } />
 			</Tooltip>
 		);
 	}
@@ -63,11 +80,11 @@ export const StylesInheritanceIndicator = () => {
 	return (
 		<StylesInheritanceInfotip
 			inheritanceChain={ inheritanceChain }
-			path={ finalPath }
+			path={ path }
 			propType={ propType }
 			label={ label }
 		>
-			<StyleIndicator variant={ variantType } />
+			<StyleIndicator { ...styleIndicatorProps } />
 		</StylesInheritanceInfotip>
 	);
 };
@@ -83,25 +100,3 @@ const getLabel = ( { isFinalValue, hasValue }: { isFinalValue: boolean; hasValue
 
 	return __( 'This has value from another style', 'elementor' );
 };
-
-const getVariant = ( {
-	isFinalValue,
-	hasValue,
-	currentStyleProvider,
-}: {
-	isFinalValue: boolean;
-	hasValue: boolean;
-	currentStyleProvider: object | null;
-} ): 'local' | 'global' | 'overridden' | undefined => {
-	if ( isFinalValue ) {
-		return isElementsStylesProvider( ( currentStyleProvider as { getKey: () => string } )?.getKey?.() )
-			? 'local'
-			: 'global';
-	}
-
-	if ( hasValue ) {
-		return 'overridden';
-	}
-
-	return undefined;
-};

package/src/styles-inheritance/components/styles-inheritance-infotip.tsx

@@ -2,29 +2,30 @@ import * as React from 'react';
 import { useMemo, useState } from 'react';
 import { createPropsResolver, type PropsResolver } from '@elementor/editor-canvas';
 import { type PropKey, type PropType } from '@elementor/editor-props';
+import { PopoverHeader } from '@elementor/editor-ui';
 import {
 	Backdrop,
 	Box,
 	Card,
 	CardContent,
 	ClickAwayListener,
-	CloseButton,
 	IconButton,
 	Infotip,
 	Stack,
 	type Theme,
 	Tooltip,
-	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useSectionContentRef } from '../../components/section-content';
+import { useSectionWidth } from '../../contexts/section-context';
 import { useDirection } from '../../hooks/use-direction';
 import { useNormalizedInheritanceChainItems } from '../hooks/use-normalized-inheritance-chain-items';
 import { stylesInheritanceTransformersRegistry } from '../styles-inheritance-transformers-registry';
 import { type SnapshotPropValue } from '../types';
 import { ActionIcons, BreakpointIcon, LabelChip, ValueComponent } from './infotip';
 
+const SECTION_PADDING_INLINE = 32;
+
 type Props = {
 	inheritanceChain: SnapshotPropValue[];
 	propType: PropType;
@@ -33,8 +34,6 @@ type Props = {
 	children: React.ReactNode;
 };
 
-const SIZE = 'tiny';
-
 export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, label, children }: Props ) => {
 	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
 	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
@@ -42,8 +41,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 
 	const key = path.join( '.' );
 
-	const sectionContentRef = useSectionContentRef();
-	const sectionContentWidth = sectionContentRef?.current?.offsetWidth ?? 320;
+	const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
 
 	const resolve = useMemo< PropsResolver >( () => {
 		return createPropsResolver( {
@@ -59,8 +57,8 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 			<Card
 				elevation={ 0 }
 				sx={ {
-					width: `${ sectionContentWidth }px`,
-					maxWidth: 500,
+					width: `${ sectionWidth - SECTION_PADDING_INLINE }px`,
+					maxWidth: 496,
 					overflowX: 'hidden',
 				} }
 			>
@@ -75,16 +73,8 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 						},
 					} }
 				>
-					<Stack direction="row" alignItems="center" sx={ { pl: 1.5, pr: 0.5, minHeight: 36, py: 0.5 } }>
-						<Typography variant="subtitle2" color="secondary" sx={ { fontSize: 12, fontWeight: '500' } }>
-							{ __( 'Style origin', 'elementor' ) }
-						</Typography>
-						<CloseButton
-							slotProps={ { icon: { fontSize: SIZE } } }
-							sx={ { ml: 'auto' } }
-							onClick={ closeInfotip }
-						/>
-					</Stack>
+					<PopoverHeader title={ __( 'Style origin', 'elementor' ) } onClose={ closeInfotip } />
+
 					<Stack
 						gap={ 1.5 }
 						sx={ { pl: 2, pr: 1, pb: 2, overflowX: 'hidden', overflowY: 'auto' } }
@@ -105,11 +95,7 @@ export const StylesInheritanceInfotip = ( { inheritanceChain, propType, path, la
 								>
 									<Box display="flex" gap={ 0.5 } sx={ { flexWrap: 'wrap', width: '100%' } }>
 										<BreakpointIcon breakpoint={ item.breakpoint } />
-										<LabelChip
-											displayLabel={ item.displayLabel }
-											provider={ item.provider }
-											chipColor={ item.chipColor }
-										/>
+										<LabelChip displayLabel={ item.displayLabel } provider={ item.provider } />
 										<ValueComponent index={ index } value={ item.value } />
 									</Box>
 									<ActionIcons />