@elementor/editor-controls 4.1.0-manual → 4.2.0-839

package/src/controls/time-string-control.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { Dayjs } from 'dayjs';
+import { timeStringPropTypeUtil } from '@elementor/editor-props';
+import { LocalizationProvider, TimePicker } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { isValidDayjs, parseTimeString, TIME_FORMAT } from '../utils/date-time';
+
+type TimeStringControlProps = {
+	inputDisabled?: boolean;
+	ariaLabel?: string;
+	error?: boolean;
+	coerceInvalidToNull?: boolean;
+};
+
+export const TimeStringControl = createControl(
+	( { inputDisabled, ariaLabel, error, coerceInvalidToNull = false }: TimeStringControlProps ) => {
+		const { value, setValue, disabled } = useBoundProp( timeStringPropTypeUtil );
+
+		const isDisabled = inputDisabled ?? disabled;
+
+		const slotProps = {
+			textField: {
+				size: 'tiny' as const,
+				fullWidth: true,
+				error,
+				inputProps: ariaLabel ? { 'aria-label': ariaLabel } : undefined,
+			},
+			openPickerButton: { size: 'tiny' as const },
+			openPickerIcon: { fontSize: 'tiny' as const },
+		};
+
+		const handleChange = ( newValue: Dayjs | null, format: string ) => {
+			if ( ! newValue ) {
+				setValue( null );
+				return;
+			}
+
+			if ( coerceInvalidToNull && ! isValidDayjs( newValue ) ) {
+				setValue( null );
+				return;
+			}
+
+			setValue( newValue.format( format ) );
+		};
+
+		return (
+			<LocalizationProvider>
+				<ControlActions>
+					<TimePicker
+						value={ parseTimeString( value ?? '' ) }
+						onChange={ ( newValue: Dayjs | null ) => handleChange( newValue, TIME_FORMAT ) }
+						disabled={ isDisabled }
+						slotProps={ slotProps }
+					/>
+				</ControlActions>
+			</LocalizationProvider>
+		);
+	}
+);

package/src/controls/transform-control/transform-base-controls/transform-origin-control.tsx

@@ -54,7 +54,7 @@ const ControlFields = ( { control }: { control: ( typeof TRANSFORM_ORIGIN_FIELDS
 						<ControlFormLabel>{ control.label }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 6 }>
-						<SizeControl variant="length" units={ control.units } anchorRef={ rowRef } disableCustom />
+						<SizeControl variant="length" units={ control.units } anchorRef={ rowRef } />
 					</Grid>
 				</PopoverGridContainer>
 			</PropKeyProvider>

package/src/hooks/use-form-field-suggestions.ts

@@ -7,9 +7,21 @@ export type Suggestion = {
 	value: string;
 };
 
-const FORM_FIELD_WIDGET_TYPES = [ 'e-form-input', 'e-form-textarea', 'e-form-checkbox' ];
+const FORM_FIELD_WIDGET_TYPES = [
+	'e-form-input',
+	'e-form-textarea',
+	'e-form-checkbox',
+	'e-form-radio-button',
+	'e-form-select',
+	'e-form-date-picker',
+	'e-form-time-picker',
+];
 
-export function useFormFieldSuggestions(): Suggestion[] {
+type Options = {
+	inputType?: string;
+};
+
+export function useFormFieldSuggestions( options?: Options ): Suggestion[] {
 	return useListenTo(
 		[
 			v1ReadyEvent(),
@@ -40,6 +52,15 @@ export function useFormFieldSuggestions(): Suggestion[] {
 					return;
 				}
 
+				if ( options?.inputType ) {
+					const typeProp = child.settings.get( 'type' );
+					const typeValue = isTransformable( typeProp ) ? typeProp.value : typeProp;
+
+					if ( typeValue !== options.inputType ) {
+						return;
+					}
+				}
+
 				const cssIdProp = child.settings.get( '_cssid' );
 				const fieldId = isTransformable( cssIdProp ) ? cssIdProp.value : cssIdProp;
 

package/src/hooks/use-repeater-popover-dismiss.ts

@@ -0,0 +1,53 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { type Breakpoint, useActiveBreakpoint, useBreakpoints } from '@elementor/editor-responsive';
+
+const serializeBreakpoints = ( breakpoints: Breakpoint[] ) =>
+	breakpoints.map( ( b ) => [ b.id, b.width ?? '', b.type ?? '' ].join( ':' ) ).join( '|' );
+
+export const usePopoverDismiss = ( { isOpen, onClose }: { isOpen: boolean; onClose: () => void } ) => {
+	const onCloseRef = useRef( onClose );
+	onCloseRef.current = onClose;
+
+	const activeBreakpoint = useActiveBreakpoint();
+	const breakpoints = useBreakpoints();
+	const breakpointsSignature = useMemo( () => serializeBreakpoints( breakpoints ), [ breakpoints ] );
+
+	const prevActiveBreakpointRef = useRef< typeof activeBreakpoint >( undefined );
+	const prevBreakpointsSignatureRef = useRef< string | null >( null );
+
+	useEffect( () => {
+		if ( ! isOpen ) {
+			prevActiveBreakpointRef.current = activeBreakpoint;
+			prevBreakpointsSignatureRef.current = breakpointsSignature;
+			return;
+		}
+
+		const previousBreakpoint = prevActiveBreakpointRef.current;
+		const previousSignature = prevBreakpointsSignatureRef.current;
+
+		const breakpointChanged = previousBreakpoint !== undefined && previousBreakpoint !== activeBreakpoint;
+		const breakpointsChanged = previousSignature !== null && previousSignature !== breakpointsSignature;
+
+		if ( breakpointChanged || breakpointsChanged ) {
+			onCloseRef.current();
+		}
+
+		prevActiveBreakpointRef.current = activeBreakpoint;
+		prevBreakpointsSignatureRef.current = breakpointsSignature;
+	}, [ activeBreakpoint, breakpointsSignature, isOpen ] );
+
+	useEffect( () => {
+		if ( ! isOpen ) {
+			return;
+		}
+		const onKeyDown = ( event: KeyboardEvent ) => {
+			if ( event.key === 'Escape' && ! event.defaultPrevented ) {
+				onCloseRef.current();
+			}
+		};
+		document.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			document.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [ isOpen ] );
+};

package/src/index.ts

@@ -37,8 +37,12 @@ export { PopoverContent } from './components/popover-content';
 export { enqueueFont } from './controls/font-family-control/enqueue-font';
 export { transitionProperties, transitionsItemsList } from './controls/transition-control/data';
 export { DateTimeControl } from './controls/date-time-control';
+export { DateRangeControl } from './controls/date-range-control';
+export { TimeStringControl } from './controls/time-string-control';
+export { TimeRangeControl } from './controls/time-range-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
+export { AttachmentTypeControl } from './controls/attachment-type-control';
 export { UnstableSizeControl } from './controls/size-control/unstable-size-control';
 
 // components

package/src/utils/date-time.ts

@@ -0,0 +1,41 @@
+import type { Dayjs } from 'dayjs';
+import * as dayjs from 'dayjs';
+
+export const DATE_FORMAT = 'YYYY-MM-DD';
+export const TIME_FORMAT = 'HH:mm';
+
+export function isValidDayjs( value: Dayjs | null ): value is Dayjs {
+	return !! value && typeof value.isValid === 'function' && value.isValid();
+}
+
+export function parseDateString( raw: string ): Dayjs | null {
+	if ( ! raw ) {
+		return null;
+	}
+
+	const parsed = ( dayjs as unknown as { default: ( s?: string | number | Date ) => Dayjs } ).default( raw );
+
+	return isValidDayjs( parsed ) ? parsed : null;
+}
+
+export function parseTimeString( raw: string ): Dayjs | null {
+	if ( ! raw ) {
+		return null;
+	}
+
+	const [ hours, minutes, seconds ] = raw.split( ':' );
+	const h = Number.parseInt( hours ?? '', 10 );
+	const m = Number.parseInt( minutes ?? '', 10 );
+	const s = Number.parseInt( seconds ?? '0', 10 );
+
+	if ( Number.isNaN( h ) || Number.isNaN( m ) ) {
+		return null;
+	}
+
+	const base = ( dayjs as unknown as { default: () => Dayjs } ).default();
+	return base
+		.hour( h )
+		.minute( m )
+		.second( Number.isNaN( s ) ? 0 : s )
+		.millisecond( 0 );
+}