@elementor/editor-controls 1.5.0 → 3.32.0-21

package/src/controls/transition-control/transition-repeater-control.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { selectionSizePropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { createControl } from '../../create-control';
+import { RepeatableControl } from '../repeatable-control';
+import { SelectionSizeControl } from '../selection-size-control';
+import { initialTransitionValue, transitionProperties } from './data';
+import { TransitionSelector } from './transition-selector';
+
+const DURATION_CONFIG = {
+	variant: 'time',
+	units: [ 's', 'ms' ],
+	defaultUnit: 'ms',
+};
+
+// this config needs to be loaded at runtime/render since it's the transitionProperties object will be mutated by the pro plugin.
+// See: https://elementor.atlassian.net/browse/ED-20285
+const getSelectionSizeProps = () => {
+	return {
+		selectionLabel: __( 'Type', 'elementor' ),
+		sizeLabel: __( 'Duration', 'elementor' ),
+		selectionConfig: {
+			component: TransitionSelector,
+			props: {},
+		},
+		sizeConfigMap: {
+			...transitionProperties.reduce(
+				( acc, category ) => {
+					category.properties.forEach( ( property ) => {
+						acc[ property.value ] = DURATION_CONFIG;
+					} );
+					return acc;
+				},
+				{} as Record< string, typeof DURATION_CONFIG >
+			),
+		},
+	};
+};
+
+function getChildControlConfig() {
+	return {
+		propTypeUtil: selectionSizePropTypeUtil,
+		component: SelectionSizeControl as unknown as React.ComponentType< Record< string, unknown > >,
+		props: getSelectionSizeProps(),
+	};
+}
+
+export const TransitionRepeaterControl = createControl( () => {
+	return (
+		<RepeatableControl
+			label={ __( 'Transitions', 'elementor' ) }
+			repeaterLabel={ __( 'Transitions', 'elementor' ) }
+			patternLabel="${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}"
+			placeholder={ __( 'Empty Transition', 'elementor' ) }
+			showDuplicate={ false }
+			showToggle={ true }
+			initialValues={ initialTransitionValue }
+			childControlConfig={ getChildControlConfig() }
+			propKey="transition"
+		/>
+	);
+} );

package/src/controls/transition-control/transition-selector.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { ChevronDownIcon, VariationsIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, UnstableTag, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../../bound-prop-context';
+import { ItemSelector } from '../../components/item-selector';
+import { transitionProperties, transitionsItemsList } from './data';
+
+const toTransitionSelectorValue = ( label: string ) => {
+	for ( const category of transitionProperties ) {
+		const property = category.properties.find( ( prop ) => prop.label === label );
+		if ( property ) {
+			return {
+				key: { value: property.label, $$type: 'string' },
+				value: { value: property.value, $$type: 'string' },
+			};
+		}
+	}
+
+	return null;
+};
+
+export const TransitionSelector = () => {
+	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
+	const {
+		value: { value: transitionValue },
+		key: { value: transitionLabel },
+	} = value;
+	const defaultRef = useRef< HTMLDivElement >( null );
+	const popoverState = usePopupState( { variant: 'popover' } );
+
+	const handleTransitionPropertyChange = ( newLabel: string ) => {
+		const newValue = toTransitionSelectorValue( newLabel );
+
+		if ( ! newValue ) {
+			return;
+		}
+
+		setValue( newValue );
+		popoverState.close();
+	};
+
+	const getAnchorPosition = () => {
+		if ( ! defaultRef.current ) {
+			return undefined;
+		}
+
+		const rect = defaultRef.current.getBoundingClientRect();
+		return {
+			top: rect.top,
+			left: rect.right + 36,
+		};
+	};
+
+	return (
+		<Box ref={ defaultRef }>
+			<UnstableTag
+				variant="outlined"
+				label={ transitionLabel }
+				endIcon={ <ChevronDownIcon fontSize="tiny" /> }
+				{ ...bindTrigger( popoverState ) }
+				fullWidth
+			/>
+			<Popover
+				disablePortal
+				disableScrollLock
+				{ ...bindPopover( popoverState ) }
+				anchorReference="anchorPosition"
+				anchorPosition={ getAnchorPosition() }
+				anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'left' } }
+			>
+				<ItemSelector
+					itemsList={ transitionsItemsList }
+					selectedItem={ transitionValue }
+					onItemChange={ handleTransitionPropertyChange }
+					onClose={ popoverState.close }
+					sectionWidth={ 268 }
+					title={ __( 'Transition Property', 'elementor' ) }
+					icon={ VariationsIcon as React.ElementType< { fontSize: string } > }
+				/>
+			</Popover>
+		</Box>
+	);
+};

package/src/controls/unstable-transform-control/unstable-transform-repeater-control.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { transformPropTypeUtil } from '@elementor/editor-props';
+import { __ } from '@wordpress/i18n';
+
+import { PropProvider, useBoundProp } from '../../bound-prop-context';
+import { AddItemAction, Header, Item, ItemsContainer, UnstableRepeater } from '../../components/unstable-repeater';
+import { DisableItemAction } from '../../components/unstable-repeater/actions/disable-item-action';
+import { RemoveItemAction } from '../../components/unstable-repeater/actions/remove-item-action';
+import { createControl } from '../../create-control';
+import { TransformContent } from '../transform-control/transform-content';
+import { TransformIcon } from '../transform-control/transform-icon';
+import { TransformLabel } from '../transform-control/transform-label';
+import { initialTransformValue } from '../transform-control/types';
+
+export const UnstableTransformRepeaterControl = createControl( () => {
+	const { propType, value: transformValues, setValue } = useBoundProp( transformPropTypeUtil );
+
+	return (
+		<PropProvider propType={ propType } value={ transformValues } setValue={ setValue }>
+			<UnstableRepeater initial={ initialTransformValue } propTypeUtil={ transformPropTypeUtil }>
+				<Header label={ __( 'Transform', 'elementor' ) }>
+					<AddItemAction />
+				</Header>
+				<ItemsContainer
+					itemTemplate={
+						<Item Icon={ TransformIcon } Label={ TransformLabel } Content={ TransformContent } />
+					}
+				>
+					<DisableItemAction />
+					<RemoveItemAction />
+				</ItemsContainer>
+			</UnstableRepeater>
+		</PropProvider>
+	);
+} );

package/src/hooks/use-filtered-items-list.ts

@@ -0,0 +1,24 @@
+import { type Category } from '../components/item-selector';
+
+export type SelectableItem = {
+	type: 'item' | 'category';
+	value: string;
+};
+
+export const useFilteredItemsList = ( itemsList: Category[], searchValue: string ) => {
+	return itemsList.reduce< SelectableItem[] >( ( acc, category ) => {
+		const filteredItems = category.items.filter( ( item ) =>
+			item.toLowerCase().includes( searchValue.toLowerCase() )
+		);
+
+		if ( filteredItems.length ) {
+			acc.push( { type: 'category', value: category.label } );
+
+			filteredItems.forEach( ( item ) => {
+				acc.push( { type: 'item', value: item } );
+			} );
+		}
+
+		return acc;
+	}, [] );
+};

package/src/hooks/use-size-extended-options.ts

@@ -1,16 +1,11 @@
 import { useMemo } from 'react';
 import { type ExtendedOption } from '@elementor/editor-controls';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-
-const EXPERIMENT_ID = 'e_v_3_30';
 
 export function useSizeExtendedOptions( options: ExtendedOption[], disableCustom: boolean ) {
 	return useMemo( () => {
-		const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
-		const shouldDisableCustom = ! isVersion330Active || disableCustom;
 		const extendedOptions = [ ...options ];
 
-		if ( ! shouldDisableCustom && ! extendedOptions.includes( 'custom' ) ) {
+		if ( ! disableCustom && ! extendedOptions.includes( 'custom' ) ) {
 			extendedOptions.push( 'custom' );
 		} else if ( options.includes( 'custom' ) ) {
 			extendedOptions.splice( extendedOptions.indexOf( 'custom' ), 1 );

package/src/index.ts

@@ -13,6 +13,7 @@ export { NumberControl } from './controls/number-control';
 export { EqualUnequalSizesControl } from './controls/equal-unequal-sizes-control';
 export { LinkedDimensionsControl } from './controls/linked-dimensions-control';
 export { FontFamilyControl } from './controls/font-family-control/font-family-control';
+export { ItemSelector } from './components/item-selector';
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
@@ -24,12 +25,15 @@ export { RepeatableControl } from './controls/repeatable-control';
 export { KeyValueControl } from './controls/key-value-control';
 export { PositionControl } from './controls/position-control';
 export { TransformRepeaterControl } from './controls/transform-control/transform-repeater-control';
+export { TransitionRepeaterControl } from './controls/transition-control/transition-repeater-control';
 export { PopoverContent } from './components/popover-content';
+export { enqueueFont } from './controls/font-family-control/enqueue-font';
+export { UnstableTransformRepeaterControl } from './controls/unstable-transform-control/unstable-transform-repeater-control';
+export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
 export { ControlToggleButtonGroup } from './components/control-toggle-button-group';
-export { FontFamilySelector } from './components/font-family-selector';
 
 // types
 export type { ControlComponent } from './create-control';
@@ -38,18 +42,24 @@ export type { EqualUnequalItems } from './controls/equal-unequal-sizes-control';
 export type { ControlActionsItems } from './control-actions/control-actions-context';
 export type { PropProviderProps } from './bound-prop-context';
 export type { SetValue } from './bound-prop-context/prop-context';
-export type { ExtendedOption, Unit } from './utils/size-control';
+export type { ExtendedOption, Unit, LengthUnit, AngleUnit, TimeUnit } from './utils/size-control';
 export type { ToggleControlProps } from './controls/toggle-control';
 export type { FontCategory } from './controls/font-family-control/font-family-control';
 
 // providers
 export { createControlReplacementsRegistry, ControlReplacementsProvider } from './control-replacements';
 export { ControlActionsProvider, useControlActions } from './control-actions/control-actions-context';
+export { useFloatingActionsBar } from './components/floating-bar';
 export { useBoundProp, PropProvider, PropKeyProvider } from './bound-prop-context';
 export { ControlAdornmentsProvider } from './control-adornments/control-adornments-context';
 export { ControlAdornments } from './control-adornments/control-adornments';
 
-export { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from './locations';
+export {
+	injectIntoRepeaterItemIcon,
+	injectIntoRepeaterItemLabel,
+	injectIntoRepeaterHeaderActions,
+	injectIntoRepeaterItemActions,
+} from './components/unstable-repeater/locations';
 
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';

package/src/utils/size-control.ts

@@ -1,12 +1,18 @@
-export const defaultUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ] as const;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const degreeUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const;
+export const lengthUnits = [ 'px', '%', 'em', 'rem', 'vw', 'vh' ] as const;
+export const angleUnits = [ 'deg', 'rad', 'grad', 'turn' ] as const;
+export const timeUnits = [ 's', 'ms' ] as const;
 const defaultExtendedOptions = [ 'auto', 'custom' ] as const;
 
-export type Unit = ( typeof defaultUnits )[ number ];
-export type DegreeUnit = ( typeof degreeUnits )[ number ];
+export const DEFAULT_UNIT = 'px';
+export const DEFAULT_SIZE = NaN;
+
+export type LengthUnit = ( typeof lengthUnits )[ number ];
+export type AngleUnit = ( typeof angleUnits )[ number ];
+export type TimeUnit = ( typeof timeUnits )[ number ];
 export type ExtendedOption = ( typeof defaultExtendedOptions )[ number ];
 
-export function isUnitExtendedOption( unit: Unit | DegreeUnit | ExtendedOption ): unit is ExtendedOption {
+export type Unit = LengthUnit | AngleUnit | TimeUnit;
+
+export function isUnitExtendedOption( unit: Unit | ExtendedOption ): unit is ExtendedOption {
 	return defaultExtendedOptions.includes( unit as ExtendedOption );
 }

package/src/hooks/use-filtered-font-families.ts

@@ -1,24 +0,0 @@
-import { type FontCategory } from '@elementor/editor-controls';
-
-export type FontListItem = {
-	type: 'font' | 'category';
-	value: string;
-};
-
-export const useFilteredFontFamilies = ( fontFamilies: FontCategory[], searchValue: string ) => {
-	return fontFamilies.reduce< FontListItem[] >( ( acc, category ) => {
-		const filteredFonts = category.fonts.filter( ( font ) =>
-			font.toLowerCase().includes( searchValue.toLowerCase() )
-		);
-
-		if ( filteredFonts.length ) {
-			acc.push( { type: 'category', value: category.label } );
-
-			filteredFonts.forEach( ( font ) => {
-				acc.push( { type: 'font', value: font } );
-			} );
-		}
-
-		return acc;
-	}, [] );
-};