@elementor/editor-components 3.33.0-299 → 3.33.0-300

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.33.0-299",
+  "version": "3.33.0-300",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,25 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-299",
-    "@elementor/editor-canvas": "3.33.0-299",
-    "@elementor/editor-documents": "3.33.0-299",
-    "@elementor/editor-elements": "3.33.0-299",
-    "@elementor/editor-elements-panel": "3.33.0-299",
-    "@elementor/editor-props": "3.33.0-299",
-    "@elementor/editor-styles-repository": "3.33.0-299",
-    "@elementor/editor-ui": "3.33.0-299",
-    "@elementor/editor-v1-adapters": "3.33.0-299",
-    "@elementor/http-client": "3.33.0-299",
+    "@elementor/editor": "3.33.0-300",
+    "@elementor/editor-canvas": "3.33.0-300",
+    "@elementor/editor-controls": "3.33.0-300",
+    "@elementor/editor-documents": "3.33.0-300",
+    "@elementor/editor-editing-panel": "3.33.0-300",
+    "@elementor/editor-elements": "3.33.0-300",
+    "@elementor/editor-elements-panel": "3.33.0-300",
+    "@elementor/editor-props": "3.33.0-300",
+    "@elementor/editor-styles-repository": "3.33.0-300",
+    "@elementor/editor-ui": "3.33.0-300",
+    "@elementor/editor-v1-adapters": "3.33.0-300",
+    "@elementor/http-client": "3.33.0-300",
     "@elementor/icons": "^1.61.0",
-    "@elementor/mixpanel": "3.33.0-299",
-    "@elementor/query": "3.33.0-299",
-    "@elementor/schema": "3.33.0-299",
-    "@elementor/store": "3.33.0-299",
+    "@elementor/mixpanel": "3.33.0-300",
+    "@elementor/query": "3.33.0-300",
+    "@elementor/schema": "3.33.0-300",
+    "@elementor/store": "3.33.0-300",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.33.0-299",
+    "@elementor/utils": "3.33.0-300",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/overridable-props/indicator.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { CheckIcon, PlusIcon } from '@elementor/icons';
+import { type bindTrigger, Box, styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+const SIZE = 'tiny';
+
+const IconContainer = styled( Box )`
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+
+	& > svg {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		width: 10px;
+		height: 10px;
+		fill: ${ ( { theme } ) => theme.palette.primary.contrastText };
+		stroke: ${ ( { theme } ) => theme.palette.primary.contrastText };
+		stroke-width: 2px;
+	}
+`;
+
+const Content = styled( Box )`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	margin-inline: ${ ( { theme } ) => theme.spacing( 0.5 ) };
+
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% ) rotate( 45deg );
+		width: 5px;
+		height: 5px;
+		border-radius: 1px;
+		background-color: ${ ( { theme } ) => theme.palette.primary.main };
+		transition: all 0.1s ease-in-out;
+	}
+
+	&:hover,
+	&.enlarged {
+		&:before {
+			width: 12px;
+			height: 12px;
+			border-radius: 2px;
+		}
+
+		.icon {
+			opacity: 1;
+		}
+	}
+`;
+
+type Props = {
+	isOverridable: boolean;
+	triggerProps: ReturnType< typeof bindTrigger >;
+	isOpen: boolean;
+};
+export const Indicator = forwardRef< HTMLDivElement, Props >( ( { triggerProps, isOpen, isOverridable }, ref ) => (
+	<Content ref={ ref } { ...triggerProps } className={ isOpen || isOverridable ? 'enlarged' : '' }>
+		<IconContainer
+			className="icon"
+			aria-label={
+				isOverridable ? __( 'Overridable property', 'elementor' ) : __( 'Make prop overridable', 'elementor' )
+			}
+		>
+			{ isOverridable ? <CheckIcon fontSize={ SIZE } /> : <PlusIcon fontSize={ SIZE } /> }
+		</IconContainer>
+	</Content>
+) );

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { useElement } from '@elementor/editor-editing-panel';
+import { __getState as getState } from '@elementor/store';
+import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { selectOverridableProps } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { COMPONENT_DOCUMENT_TYPE } from '../consts';
+import { Indicator } from './indicator';
+
+const FORBIDDEN_KEYS = [ '_cssid', 'attributes' ];
+
+export function OverridablePropIndicator() {
+	const { bind, value } = useBoundProp();
+	const currentDocument = getV1CurrentDocument();
+
+	if ( currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || ! currentDocument.id ) {
+		return null;
+	}
+
+	if ( ! isPropAllowed( bind ) ) {
+		return null;
+	}
+
+	const overridableProps = selectOverridableProps( getState(), currentDocument.id );
+	const isOverridable = componentOverridablePropTypeUtil.isValid( value );
+
+	return (
+		<Content
+			componentId={ currentDocument.id }
+			isOverridable={ isOverridable }
+			overridableProps={ overridableProps }
+		/>
+	);
+}
+
+type Props = {
+	componentId: number;
+	isOverridable: boolean;
+	overridableProps?: OverridableProps;
+};
+export function Content( { isOverridable, overridableProps }: Props ) {
+	const {
+		element: { id: elementId },
+	} = useElement();
+	const { bind } = useBoundProp();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+	} );
+
+	const triggerProps = bindTrigger( popupState );
+	const popoverProps = bindPopover( popupState );
+
+	const overridableConfig = Object.values( overridableProps?.props ?? {} ).find(
+		( prop ) => prop.elementId === elementId && prop.propKey === bind
+	);
+
+	return (
+		<>
+			<Tooltip placement="top" title={ __( 'Override Property', 'elementor' ) }>
+				<Indicator
+					triggerProps={ triggerProps }
+					isOpen={ !! popoverProps.open }
+					isOverridable={ isOverridable }
+				/>
+			</Tooltip>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
+				} }
+				{ ...popoverProps }
+			>
+				{ JSON.stringify( overridableConfig ) /** TODO: replace with actual form */ }
+			</Popover>
+		</>
+	);
+}
+
+function isPropAllowed( bind: string ) {
+	return ! FORBIDDEN_KEYS.includes( bind );
+}

package/src/init.ts

@@ -5,6 +5,7 @@ import {
 	settingsTransformersRegistry,
 } from '@elementor/editor-canvas';
 import { getV1CurrentDocument } from '@elementor/editor-documents';
+import { FIELD_TYPE, registerFieldIndicator } from '@elementor/editor-editing-panel';
 import { type V1ElementData } from '@elementor/editor-elements';
 import { injectTab } from '@elementor/editor-elements-panel';
 import { stylesRepository } from '@elementor/editor-styles-repository';
@@ -18,6 +19,7 @@ import { Components } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
 import { openEditModeDialog } from './components/in-edit-mode';
+import { OverridablePropIndicator } from './components/overridable-props/overridable-prop-indicator';
 import { createComponentType, TYPE } from './create-component-type';
 import { PopulateStore } from './populate-store';
 import { componentsStylesProvider } from './store/components-styles-provider';
@@ -82,6 +84,13 @@ export function init() {
 		loadComponentsStyles( ( config?.elements as V1ElementData[] ) ?? [] );
 	} );
 
+	registerFieldIndicator( {
+		fieldType: FIELD_TYPE.SETTINGS,
+		id: 'component-overridable-prop',
+		priority: 1,
+		indicator: OverridablePropIndicator,
+	} );
+
 	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
 }

package/src/prop-types/component-overridable-prop-type.ts

@@ -0,0 +1,15 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const componentOverridablePropTypeUtil = createPropUtils(
+	'overridable',
+	z.object( {
+		override_key: z.string(),
+		default_value: z
+			.object( {
+				$$type: z.string(),
+				value: z.unknown(),
+			} )
+			.nullable(),
+	} )
+);

package/src/store/store.ts

@@ -88,6 +88,8 @@ const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadS
 const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
 const selectUnpublishedData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].unpublishedData;
 const getCreatedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createdThisSession;
+const selectComponent = ( state: ComponentsSlice, componentId: ComponentId ) =>
+	state[ SLICE_NAME ].data.find( ( component ) => component.id === componentId );
 
 export const selectComponents = createSelector(
 	selectData,
@@ -109,3 +111,7 @@ export const selectCreatedThisSession = createSelector(
 	getCreatedThisSession,
 	( createdThisSession ) => createdThisSession
 );
+export const selectOverridableProps = createSelector(
+	selectComponent,
+	( component: PublishedComponent | undefined ) => component?.overridableProps
+);

package/src/types.ts

@@ -1,5 +1,5 @@
 import { type V1ElementData } from '@elementor/editor-elements';
-import { type TransformablePropValue } from '@elementor/editor-props';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 import type { StyleDefinition } from '@elementor/editor-styles';
 
 export type ComponentFormValues = {
@@ -20,9 +20,35 @@ export type UnpublishedComponent = BaseComponent & {
 	elements: V1ElementData[];
 };
 
+export type OverridableProp = {
+	overrideKey: string;
+	label: string;
+	elementId: string;
+	propKey: string;
+	elType: string;
+	widgetType: string;
+	defaultValue: PropValue;
+	groupId: string;
+};
+
+export type OverridablePropGroup = {
+	id: string;
+	label: string;
+	props: string[];
+};
+
+export type OverridableProps = {
+	props: Record< string, OverridableProp >;
+	groups: {
+		items: Record< string, OverridablePropGroup >;
+		order: string[];
+	};
+};
+
 type BaseComponent = {
 	uid: string;
 	name: string;
+	overridableProps?: OverridableProps;
 };
 
 export type DocumentStatus = 'publish' | 'draft';