@elementor/editor-editing-panel 4.1.0-747 → 4.1.0-749

package/package.json

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

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

@@ -3,20 +3,13 @@ import { useMemo } from 'react';
 import { PropKeyProvider, PropProvider, type SetValueMeta } from '@elementor/editor-controls';
 import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { type ElementID, getElementLabel, getElementSettings, updateElementSettings } from '@elementor/editor-elements';
-import {
-	type CreateOptions,
-	isDependency,
-	isDependencyMet,
-	type PropKey,
-	type Props,
-	type PropsSchema,
-	type PropType,
-} from '@elementor/editor-props';
+import { type CreateOptions, type PropKey, type Props } from '@elementor/editor-props';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../contexts/element-context';
 import {
+	extractDependencyEffect,
 	extractOrderedDependencies,
 	getElementSettingsWithDefaults,
 	getUpdatedValues,
@@ -32,24 +25,6 @@ type SettingsFieldProps = {
 
 const HISTORY_DEBOUNCE_WAIT = 800;
 
-const extractDependencyEffect = ( bind: string, propsSchema: PropsSchema, currentElementSettings: Props ) => {
-	const elementSettingsForDepCheck = getElementSettingsWithDefaults( propsSchema, currentElementSettings );
-	const propType = propsSchema[ bind ];
-	const depCheck = isDependencyMet( propType?.dependencies, elementSettingsForDepCheck );
-	const isHidden =
-		! depCheck.isMet &&
-		! isDependency( depCheck.failingDependencies[ 0 ] ) &&
-		depCheck.failingDependencies[ 0 ]?.effect === 'hide';
-	return {
-		isDisabled: ( prop: PropType ) => {
-			const result = ! isDependencyMet( prop?.dependencies, elementSettingsForDepCheck ).isMet;
-			return result;
-		},
-		isHidden,
-		settingsWithDefaults: elementSettingsForDepCheck as Values,
-	};
-};
-
 export const SettingsField = ( { bind, children, propDisplayName }: SettingsFieldProps ) => {
 	const {
 		element: { id: elementId },
@@ -58,18 +33,15 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 	} = useElement();
 
 	const value = { [ bind ]: currentElementSettings?.[ bind ] ?? null };
-
 	const propType = createTopLevelObjectType( { schema: propsSchema } );
 
 	const undoableUpdateElementProp = useUndoableUpdateElementProp( {
 		elementId,
 		propDisplayName,
 	} );
-	const { isDisabled, isHidden, settingsWithDefaults } = extractDependencyEffect(
-		bind,
-		propsSchema,
-		currentElementSettings
-	);
+
+	const { isDisabled, isHidden } = extractDependencyEffect( bind, propsSchema, currentElementSettings );
+
 	if ( isHidden ) {
 		return null;
 	}
@@ -79,6 +51,7 @@ export const SettingsField = ( { bind, children, propDisplayName }: SettingsFiel
 		const { withHistory = true } = meta ?? {};
 		const dependents = extractOrderedDependencies( dependenciesPerTargetMapping );
 
+		const settingsWithDefaults = getElementSettingsWithDefaults( propsSchema, currentElementSettings );
 		const settings = getUpdatedValues( newValue, dependents, propsSchema, settingsWithDefaults, elementId );
 		if ( withHistory ) {
 			undoableUpdateElementProp( settings );

package/src/index.ts

@@ -31,3 +31,10 @@ export { doApplyClasses, doGetAppliedClasses, doUnapplyClass } from './apply-una
 export { setLicenseConfig } from './hooks/use-license-config';
 export { type DynamicTag, type DynamicTags, type DynamicTagsManager } from './dynamics/types';
 export { isDynamicPropValue } from './dynamics/utils';
+export {
+	extractDependencyEffect,
+	type DependencyEffect,
+	getElementSettingsWithDefaults,
+	getUpdatedValues,
+	extractOrderedDependencies,
+} from './utils/prop-dependency-utils';

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

@@ -2,6 +2,7 @@ import {
 	type Dependency,
 	type DependencyTerm,
 	extractValue,
+	isDependency,
 	isDependencyMet,
 	type Props,
 	type PropsSchema,
@@ -14,6 +15,11 @@ type Value = TransformablePropValue< string > | null;
 
 export type Values = Record< string, Value >;
 
+export type DependencyEffect = {
+	isHidden: boolean;
+	isDisabled: ( propType: PropType ) => boolean;
+};
+
 export function getElementSettingsWithDefaults( propsSchema: PropsSchema, elementSettings?: Props ): Values {
 	const elementSettingsWithDefaults = { ...elementSettings };
 	Object.keys( propsSchema ).forEach( ( key ) => {
@@ -25,6 +31,20 @@ export function getElementSettingsWithDefaults( propsSchema: PropsSchema, elemen
 	return elementSettingsWithDefaults as Values;
 }
 
+export function extractDependencyEffect( bind: string, propsSchema: PropsSchema, settings: Props ): DependencyEffect {
+	const settingsWithDefaults = getElementSettingsWithDefaults( propsSchema, settings );
+	const propType = propsSchema[ bind ];
+	const depCheck = isDependencyMet( propType?.dependencies, settingsWithDefaults );
+
+	const failingTerm = ! depCheck.isMet ? depCheck.failingDependencies[ 0 ] : undefined;
+	const isHidden = !! failingTerm && ! isDependency( failingTerm ) && failingTerm?.effect === 'hide';
+
+	return {
+		isHidden,
+		isDisabled: ( prop: PropType ) => ! isDependencyMet( prop?.dependencies, settingsWithDefaults ).isMet,
+	};
+}
+
 export function extractOrderedDependencies( dependenciesPerTargetMapping: Record< string, string[] > ): string[] {
 	return Object.values( dependenciesPerTargetMapping )
 		.flat()