@elementor/editor-controls 3.35.0-492 → 3.35.0

package/src/components/promotions/display-conditions-control.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
+import { SitemapIcon } from '@elementor/icons';
+import { Box, IconButton, Stack, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { createControl } from '../../create-control';
+
+const ARIA_LABEL = __( 'Display Conditions', 'elementor' );
+
+function getDisplayConditionPromotion() {
+	return window.elementor?.config?.v4Promotions?.displayConditions;
+}
+
+export const DisplayConditionsControl = createControl( () => {
+	const [ isInfotipOpen, setIsInfotipOpen ] = useState( false );
+	const promotion = getDisplayConditionPromotion();
+
+	return (
+		<Stack
+			direction="row"
+			spacing={ 2 }
+			sx={ {
+				justifyContent: 'flex-end',
+				alignItems: 'center',
+			} }
+		>
+			<PromotionInfotip
+				title={ promotion?.title ?? '' }
+				content={ promotion?.content ?? '' }
+				assetUrl={ promotion?.image ?? '' }
+				ctaUrl={ promotion?.ctaUrl ?? '' }
+				open={ isInfotipOpen }
+				onClose={ () => setIsInfotipOpen( false ) }
+			>
+				<Box
+					onClick={ () => setIsInfotipOpen( ( prev ) => ! prev ) }
+					sx={ { cursor: 'pointer', display: 'inline-flex' } }
+				>
+					<PromotionChip />
+				</Box>
+			</PromotionInfotip>
+			<Tooltip title={ ARIA_LABEL } placement="top">
+				<IconButton
+					size="tiny"
+					aria-label={ ARIA_LABEL }
+					data-behavior="display-conditions"
+					onClick={ () => setIsInfotipOpen( ( prev ) => ! prev ) }
+					sx={ {
+						border: '1px solid',
+						borderColor: 'divider',
+						borderRadius: 1,
+					} }
+				>
+					<SitemapIcon fontSize="tiny" color="disabled" />
+				</IconButton>
+			</Tooltip>
+		</Stack>
+	);
+} );

package/src/controls/inline-editing-control.tsx

@@ -19,7 +19,7 @@ export const InlineEditingControl = createControl(
 		props?: ComponentProps< 'div' >;
 	} ) => {
 		const { value, setValue } = useBoundProp( htmlPropTypeUtil );
-		const handleChange = ( newValue: unknown ) => setValue( newValue as string );
+		const handleChange = ( newValue: unknown ) => setValue( ( newValue ?? '' ) as string );
 
 		return (
 			<ControlActions>

package/src/index.ts

@@ -35,6 +35,7 @@ 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 { InlineEditingControl } from './controls/inline-editing-control';
+export { DisplayConditionsControl } from './components/promotions/display-conditions-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -63,6 +64,7 @@ export type { SetValue, SetValueMeta } from './bound-prop-context/prop-context';
 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';
+export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
 
 // providers
 export {