@elementor/editor-controls 4.1.0-821 → 4.1.0-823

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-821",
+  "version": "4.1.0-823",
   "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-821",
-    "@elementor/editor-elements": "4.1.0-821",
-    "@elementor/editor-props": "4.1.0-821",
-    "@elementor/editor-responsive": "4.1.0-821",
-    "@elementor/editor-ui": "4.1.0-821",
-    "@elementor/editor-v1-adapters": "4.1.0-821",
-    "@elementor/env": "4.1.0-821",
-    "@elementor/events": "4.1.0-821",
-    "@elementor/http-client": "4.1.0-821",
+    "@elementor/editor-current-user": "4.1.0-823",
+    "@elementor/editor-elements": "4.1.0-823",
+    "@elementor/editor-props": "4.1.0-823",
+    "@elementor/editor-responsive": "4.1.0-823",
+    "@elementor/editor-ui": "4.1.0-823",
+    "@elementor/editor-v1-adapters": "4.1.0-823",
+    "@elementor/env": "4.1.0-823",
+    "@elementor/events": "4.1.0-823",
+    "@elementor/http-client": "4.1.0-823",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.1.0-821",
-    "@elementor/query": "4.1.0-821",
-    "@elementor/session": "4.1.0-821",
+    "@elementor/locations": "4.1.0-823",
+    "@elementor/query": "4.1.0-823",
+    "@elementor/session": "4.1.0-823",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.1.0-821",
-    "@elementor/wp-media": "4.1.0-821",
+    "@elementor/utils": "4.1.0-823",
+    "@elementor/wp-media": "4.1.0-823",
     "@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

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { dateRangePropTypeUtil, dateStringPropTypeUtil, type PropKey } from '@elementor/editor-props';
+import { FormHelperText, 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 { DateStringControl } from './date-string-control';
+
+const RANGE_LABELS = {
+	min: __( 'Min date', 'elementor' ),
+	max: __( 'Max date', 'elementor' ),
+};
+
+const isMaxBeforeMin = ( minIso?: string | null, maxIso?: string | null ): boolean => {
+	if ( ! minIso || ! maxIso || [ minIso, maxIso ].some( ( v ) => v === 'Invalid Date' ) ) {
+		return false;
+	}
+
+	return maxIso < minIso;
+};
+
+const RANGE_ERROR_MESSAGE = __( 'Max date must be on or after Min date', 'elementor' );
+
+export const DateRangeControl = createControl( () => {
+	const { value, setValue, ...propContext } = useBoundProp( dateRangePropTypeUtil );
+
+	const minString = dateStringPropTypeUtil.extract( value?.min );
+	const maxString = dateStringPropTypeUtil.extract( value?.max );
+
+	const hasInvalidRange = isMaxBeforeMin( minString, maxString );
+
+	return (
+		<PropProvider { ...propContext } value={ value } setValue={ setValue }>
+			<Stack gap={ 0.75 }>
+				<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 }>
+							<BoundDateStringControl
+								bind={ 'min' }
+								ariaLabel={ RANGE_LABELS.min }
+								error={ hasInvalidRange }
+							/>
+						</Grid>
+					</Grid>
+					<Grid container gap={ 0.75 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ControlFormLabel>{ RANGE_LABELS.max }</ControlFormLabel>
+						</Grid>
+						<Grid item xs={ 12 }>
+							<BoundDateStringControl
+								bind={ 'max' }
+								ariaLabel={ RANGE_LABELS.max }
+								error={ hasInvalidRange }
+							/>
+						</Grid>
+					</Grid>
+				</Stack>
+				{ hasInvalidRange && <FormHelperText error>{ RANGE_ERROR_MESSAGE }</FormHelperText> }
+			</Stack>
+		</PropProvider>
+	);
+} );
+
+const BoundDateStringControl = ( {
+	bind,
+	ariaLabel,
+	error,
+}: {
+	bind: PropKey;
+	ariaLabel?: string;
+	error?: boolean;
+} ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<DateStringControl ariaLabel={ ariaLabel } error={ error } />
+		</PropKeyProvider>
+	);
+};

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

@@ -0,0 +1,70 @@
+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';
+
+type DateStringControlProps = {
+	inputDisabled?: boolean;
+	ariaLabel?: string;
+	error?: 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;
+	}
+
+	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/index.ts

@@ -37,6 +37,7 @@ 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 { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
 export { UnstableSizeControl } from './controls/size-control/unstable-size-control';