@elementor/editor-controls 4.1.0-832 → 4.1.0-833

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": "4.1.0-832",
+  "version": "4.1.0-833",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.1.0-832",
-    "@elementor/editor-elements": "4.1.0-832",
-    "@elementor/editor-props": "4.1.0-832",
-    "@elementor/editor-responsive": "4.1.0-832",
-    "@elementor/editor-ui": "4.1.0-832",
-    "@elementor/editor-v1-adapters": "4.1.0-832",
-    "@elementor/env": "4.1.0-832",
-    "@elementor/events": "4.1.0-832",
-    "@elementor/http-client": "4.1.0-832",
+    "@elementor/editor-current-user": "4.1.0-833",
+    "@elementor/editor-elements": "4.1.0-833",
+    "@elementor/editor-props": "4.1.0-833",
+    "@elementor/editor-responsive": "4.1.0-833",
+    "@elementor/editor-ui": "4.1.0-833",
+    "@elementor/editor-v1-adapters": "4.1.0-833",
+    "@elementor/env": "4.1.0-833",
+    "@elementor/events": "4.1.0-833",
+    "@elementor/http-client": "4.1.0-833",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-832",
-    "@elementor/query": "4.1.0-832",
-    "@elementor/session": "4.1.0-832",
+    "@elementor/locations": "4.1.0-833",
+    "@elementor/query": "4.1.0-833",
+    "@elementor/session": "4.1.0-833",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-832",
-    "@elementor/wp-media": "4.1.0-832",
+    "@elementor/utils": "4.1.0-833",
+    "@elementor/wp-media": "4.1.0-833",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-bold": "^3.11.1",
     "@tiptap/extension-document": "^3.11.1",

package/src/controls/date-range-control.tsx

@@ -14,7 +14,7 @@ const RANGE_LABELS = {
 };
 
 const isMaxBeforeMin = ( minIso?: string | null, maxIso?: string | null ): boolean => {
-	if ( ! minIso || ! maxIso || [ minIso, maxIso ].some( ( v ) => v === 'Invalid Date' ) ) {
+	if ( ! minIso || ! maxIso ) {
 		return false;
 	}
 
@@ -77,7 +77,7 @@ const BoundDateStringControl = ( {
 } ) => {
 	return (
 		<PropKeyProvider bind={ bind }>
-			<DateStringControl ariaLabel={ ariaLabel } error={ error } />
+			<DateStringControl ariaLabel={ ariaLabel } error={ error } coerceInvalidToNull />
 		</PropKeyProvider>
 	);
 };

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

@@ -1,70 +1,62 @@
 import * as React from 'react';
 import type { Dayjs } from 'dayjs';
-import * as dayjs from 'dayjs';
 import { dateStringPropTypeUtil } from '@elementor/editor-props';
 import { DatePicker, LocalizationProvider } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
+import { DATE_FORMAT, isValidDayjs, parseDateString } from '../utils/date-time';
 
 type DateStringControlProps = {
 	inputDisabled?: boolean;
 	ariaLabel?: string;
 	error?: boolean;
+	coerceInvalidToNull?: boolean;
 };
 
-const DATE_FORMAT = 'YYYY-MM-DD';
-
-export const DateStringControl = createControl( ( { inputDisabled, ariaLabel, error }: DateStringControlProps ) => {
-	const { value, setValue, disabled } = useBoundProp( dateStringPropTypeUtil );
-
-	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;
-		}
-
-		setValue( newValue.format( format ) );
-	};
-
-	return (
-		<LocalizationProvider>
-			<ControlActions>
-				<DatePicker
-					value={ parseDateString( value ?? '' ) }
-					onChange={ ( newValue: Dayjs | null ) => handleChange( newValue, DATE_FORMAT ) }
-					disabled={ isDisabled }
-					slotProps={ slotProps }
-				/>
-			</ControlActions>
-		</LocalizationProvider>
-	);
-} );
-
-function parseDateString( raw: string ): Dayjs | null {
-	if ( ! raw ) {
-		return null;
+export const DateStringControl = createControl(
+	( { inputDisabled, ariaLabel, error, coerceInvalidToNull = false }: DateStringControlProps ) => {
+		const { value, setValue, disabled } = useBoundProp( dateStringPropTypeUtil );
+
+		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>
+					<DatePicker
+						value={ parseDateString( value ?? '' ) }
+						onChange={ ( newValue: Dayjs | null ) => handleChange( newValue, DATE_FORMAT ) }
+						disabled={ isDisabled }
+						slotProps={ slotProps }
+					/>
+				</ControlActions>
+			</LocalizationProvider>
+		);
 	}
-
-	const parsed = ( dayjs as unknown as { default: ( s?: string | number | Date ) => Dayjs } ).default( raw );
-
-	return isValidDayjs( parsed ) ? parsed : null;
-}
-
-function isValidDayjs( value: Dayjs | null ): value is Dayjs {
-	return !! value && typeof value.isValid === 'function' && value.isValid();
-}
+);

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type PropKey, timeRangePropTypeUtil } from '@elementor/editor-props';
+import { Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
+import { ControlFormLabel } from '../components/control-form-label';
+import { createControl } from '../create-control';
+import { TimeStringControl } from './time-string-control';
+
+const RANGE_LABELS = {
+	min: __( 'Start time', 'elementor' ),
+	max: __( 'End time', 'elementor' ),
+};
+
+export const TimeRangeControl = createControl( () => {
+	const { value, setValue, ...propContext } = useBoundProp( timeRangePropTypeUtil );
+
+	return (
+		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlFormLabel>{ RANGE_LABELS.min }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<BoundTimeStringControl bind={ 'min' } ariaLabel={ RANGE_LABELS.min } />
+					</Grid>
+				</Grid>
+				<Grid container gap={ 0.75 } alignItems="center">
+					<Grid item xs={ 12 }>
+						<ControlFormLabel>{ RANGE_LABELS.max }</ControlFormLabel>
+					</Grid>
+					<Grid item xs={ 12 }>
+						<BoundTimeStringControl bind={ 'max' } ariaLabel={ RANGE_LABELS.max } />
+					</Grid>
+				</Grid>
+			</Stack>
+		</PropProvider>
+	);
+} );
+
+const BoundTimeStringControl = ( { bind, ariaLabel }: { bind: PropKey; ariaLabel?: string } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<TimeStringControl ariaLabel={ ariaLabel } coerceInvalidToNull />
+		</PropKeyProvider>
+	);
+};

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/hooks/use-form-field-suggestions.ts

@@ -13,6 +13,8 @@ const FORM_FIELD_WIDGET_TYPES = [
 	'e-form-checkbox',
 	'e-form-radio-button',
 	'e-form-select',
+	'e-form-date-picker',
+	'e-form-time-picker',
 ];
 
 type Options = {

package/src/index.ts

@@ -38,6 +38,8 @@ 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';

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 );
+}