@elementor/editor-editing-panel 4.0.0-564 → 4.0.0-573

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.0.0-564",
+  "version": "4.0.0-573",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-564",
-    "@elementor/editor-canvas": "4.0.0-564",
-    "@elementor/editor-controls": "4.0.0-564",
-    "@elementor/editor-documents": "4.0.0-564",
-    "@elementor/editor-elements": "4.0.0-564",
-    "@elementor/editor-interactions": "4.0.0-564",
-    "@elementor/editor-panels": "4.0.0-564",
-    "@elementor/editor-props": "4.0.0-564",
-    "@elementor/editor-responsive": "4.0.0-564",
-    "@elementor/editor-styles": "4.0.0-564",
-    "@elementor/editor-styles-repository": "4.0.0-564",
-    "@elementor/editor-ui": "4.0.0-564",
-    "@elementor/editor-v1-adapters": "4.0.0-564",
+    "@elementor/editor": "4.0.0-573",
+    "@elementor/editor-canvas": "4.0.0-573",
+    "@elementor/editor-controls": "4.0.0-573",
+    "@elementor/editor-documents": "4.0.0-573",
+    "@elementor/editor-elements": "4.0.0-573",
+    "@elementor/editor-interactions": "4.0.0-573",
+    "@elementor/editor-panels": "4.0.0-573",
+    "@elementor/editor-props": "4.0.0-573",
+    "@elementor/editor-responsive": "4.0.0-573",
+    "@elementor/editor-styles": "4.0.0-573",
+    "@elementor/editor-styles-repository": "4.0.0-573",
+    "@elementor/editor-ui": "4.0.0-573",
+    "@elementor/editor-v1-adapters": "4.0.0-573",
     "@elementor/icons": "^1.63.0",
-    "@elementor/editor-variables": "4.0.0-564",
-    "@elementor/locations": "4.0.0-564",
-    "@elementor/menus": "4.0.0-564",
-    "@elementor/schema": "4.0.0-564",
-    "@elementor/session": "4.0.0-564",
+    "@elementor/editor-variables": "4.0.0-573",
+    "@elementor/locations": "4.0.0-573",
+    "@elementor/menus": "4.0.0-573",
+    "@elementor/schema": "4.0.0-573",
+    "@elementor/session": "4.0.0-573",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-564",
-    "@elementor/wp-media": "4.0.0-564",
+    "@elementor/utils": "4.0.0-573",
+    "@elementor/wp-media": "4.0.0-573",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/section.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { type PropsWithChildren, type ReactNode, useId, useRef } from 'react';
-import { CollapseIcon, SectionRefContext } from '@elementor/editor-ui';
+import { CollapseIcon, type CollapsibleValue, getCollapsibleValue, SectionRefContext } from '@elementor/editor-ui';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
 import { useStateByElement } from '../hooks/use-state-by-element';
-import { type CollapsibleValue, getCollapsibleValue } from './collapsible-content';
 
 type Props = PropsWithChildren< {
 	title: string;

package/src/components/style-tab-collapsible-content.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { type PropsWithChildren } from 'react';
+import { CollapsibleContent } from '@elementor/editor-ui';
 
 import { StylesInheritanceSectionIndicators } from '../styles-inheritance/components/styles-inheritance-section-indicators';
-import { CollapsibleContent } from './collapsible-content';
+
 type Props = PropsWithChildren< { fields?: string[] } >;
 
 export const StyleTabCollapsibleContent = ( { fields = [], children }: Props ) => {

package/src/controls-registry/controls-registry.tsx

@@ -2,6 +2,7 @@ import {
 	ChipsControl,
 	type ControlComponent,
 	DateTimeControl,
+	EmailFormActionControl,
 	HtmlTagControl,
 	ImageControl,
 	InlineEditingControl,
@@ -23,6 +24,7 @@ import { type ControlLayout } from '@elementor/editor-elements';
 import {
 	booleanPropTypeUtil,
 	DateTimePropTypeUtil,
+	emailPropTypeUtil,
 	htmlV2PropTypeUtil,
 	imagePropTypeUtil,
 	imageSrcPropTypeUtil,
@@ -63,6 +65,7 @@ const controlTypes = {
 	toggle: { component: ToggleControl, layout: 'full', propTypeUtil: stringPropTypeUtil },
 	'date-time': { component: DateTimeControl, layout: 'full', propTypeUtil: DateTimePropTypeUtil },
 	'inline-editing': { component: InlineEditingControl, layout: 'full', propTypeUtil: htmlV2PropTypeUtil },
+	email: { component: EmailFormActionControl, layout: 'custom', propTypeUtil: emailPropTypeUtil },
 } as const satisfies ControlRegistry;
 
 export type ControlType = keyof typeof controlTypes;

package/src/controls-registry/settings-field.tsx

@@ -11,6 +11,7 @@ import {
 } from '@elementor/editor-elements';
 import {
 	type CreateOptions,
+	isDependency,
 	isDependencyMet,
 	type PropKey,
 	type Props,
@@ -64,6 +65,17 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 
 	const isDisabled = ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, elementSettingValues ).isMet;
 
+	const propTypeToBind = propsSchema[ bind ];
+	const dependenciesResult = isDependencyMet( propTypeToBind?.dependencies, elementSettingValues );
+	const shouldHide =
+		! dependenciesResult.isMet &&
+		! isDependency( dependenciesResult.failingDependencies[ 0 ] ) &&
+		dependenciesResult.failingDependencies[ 0 ]?.effect === 'hide';
+
+	if ( shouldHide ) {
+		return null;
+	}
+
 	return (
 		<PropProvider propType={ propType } value={ value } setValue={ setValue } isDisabled={ isDisabled }>
 			<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>

package/src/utils/prop-dependency-utils.ts

@@ -160,7 +160,10 @@ function handleUnmetCondition( props: {
 	elementId: string;
 } ) {
 	const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
-	const newValue = failingDependencies.find( ( term ) => term.newValue )?.newValue ?? null;
+	const termWithNewValue = failingDependencies.find(
+		( term ): term is Dependency => 'newValue' in term && !! term.newValue
+	) as Dependency | undefined;
+	const newValue = termWithNewValue?.newValue ?? null;
 	const currentValue = extractValue( dependency.split( '.' ), elementValues ) ?? defaultValue;
 
 	savePreviousValueToStorage( {

package/src/components/collapsible-content.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { type ReactNode, useState } from 'react';
-import { CollapseIcon } from '@elementor/editor-ui';
-import { Button, Collapse, Stack, styled } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-type StaticItem< T = unknown > = T extends ( ...args: unknown[] ) => unknown ? never : T;
-
-type CallbackItem< T > = ( isOpen: boolean ) => T;
-export type CollapsibleValue< T > = CallbackItem< T > | StaticItem< T >;
-
-type CollapsibleContentProps = React.PropsWithChildren< {
-	defaultOpen?: boolean;
-	titleEnd?: CollapsibleValue< ReactNode | string > | null;
-} >;
-
-const IndicatorsWrapper = styled( 'div' )`
-	position: absolute;
-	top: 0;
-	right: ${ ( { theme } ) => theme.spacing( 3 ) };
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-`;
-
-export const CollapsibleContent = ( { children, defaultOpen = false, titleEnd = null }: CollapsibleContentProps ) => {
-	const [ open, setOpen ] = useState( defaultOpen );
-
-	const handleToggle = () => {
-		setOpen( ( prevOpen ) => ! prevOpen );
-	};
-
-	return (
-		<Stack>
-			<Stack sx={ { position: 'relative' } }>
-				<Button
-					fullWidth
-					size="small"
-					color="secondary"
-					variant="outlined"
-					onClick={ handleToggle }
-					endIcon={ <CollapseIcon open={ open } /> }
-					sx={ { my: 0.5 } }
-					aria-label={ open ? 'Show less' : 'Show more' }
-				>
-					{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
-				</Button>
-				{ titleEnd && <IndicatorsWrapper>{ getCollapsibleValue( titleEnd, open ) }</IndicatorsWrapper> }
-			</Stack>
-			<Collapse in={ open } timeout="auto" unmountOnExit>
-				{ children }
-			</Collapse>
-		</Stack>
-	);
-};
-
-export function getCollapsibleValue< T >( value: CollapsibleValue< T >, isOpen: boolean ): T {
-	if ( typeof value === 'function' ) {
-		return ( value as CallbackItem< T > )( isOpen );
-	}
-
-	return value;
-}