@elementor/editor-editing-panel 4.2.0-872 → 4.2.0-873

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "4.2.0-872",
+  "version": "4.2.0-873",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-872",
-    "@elementor/editor-canvas": "4.2.0-872",
-    "@elementor/editor-controls": "4.2.0-872",
-    "@elementor/editor-documents": "4.2.0-872",
-    "@elementor/editor-elements": "4.2.0-872",
-    "@elementor/editor-interactions": "4.2.0-872",
-    "@elementor/editor-notifications": "4.2.0-872",
-    "@elementor/editor-panels": "4.2.0-872",
-    "@elementor/editor-props": "4.2.0-872",
-    "@elementor/editor-responsive": "4.2.0-872",
-    "@elementor/editor-styles": "4.2.0-872",
-    "@elementor/editor-styles-repository": "4.2.0-872",
-    "@elementor/editor-ui": "4.2.0-872",
-    "@elementor/editor-v1-adapters": "4.2.0-872",
-    "@elementor/http-client": "4.2.0-872",
+    "@elementor/editor": "4.2.0-873",
+    "@elementor/editor-canvas": "4.2.0-873",
+    "@elementor/editor-controls": "4.2.0-873",
+    "@elementor/editor-documents": "4.2.0-873",
+    "@elementor/editor-elements": "4.2.0-873",
+    "@elementor/editor-interactions": "4.2.0-873",
+    "@elementor/editor-notifications": "4.2.0-873",
+    "@elementor/editor-panels": "4.2.0-873",
+    "@elementor/editor-props": "4.2.0-873",
+    "@elementor/editor-responsive": "4.2.0-873",
+    "@elementor/editor-styles": "4.2.0-873",
+    "@elementor/editor-styles-repository": "4.2.0-873",
+    "@elementor/editor-ui": "4.2.0-873",
+    "@elementor/editor-v1-adapters": "4.2.0-873",
+    "@elementor/http-client": "4.2.0-873",
     "@elementor/icons": "~1.75.1",
-    "@elementor/editor-variables": "4.2.0-872",
-    "@elementor/locations": "4.2.0-872",
-    "@elementor/menus": "4.2.0-872",
-    "@elementor/query": "4.2.0-872",
-    "@elementor/schema": "4.2.0-872",
-    "@elementor/session": "4.2.0-872",
+    "@elementor/editor-variables": "4.2.0-873",
+    "@elementor/locations": "4.2.0-873",
+    "@elementor/menus": "4.2.0-873",
+    "@elementor/query": "4.2.0-873",
+    "@elementor/schema": "4.2.0-873",
+    "@elementor/session": "4.2.0-873",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-872",
-    "@elementor/wp-media": "4.2.0-872",
+    "@elementor/utils": "4.2.0-873",
+    "@elementor/wp-media": "4.2.0-873",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/settings-tab.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { type Control, type ControlItem, type Element, type ElementControl } from '@elementor/editor-elements';
+import { type Props, type PropsSchema } from '@elementor/editor-props';
 import { SessionStorageProvider } from '@elementor/session';
 
 import { useElement } from '../contexts/element-context';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
+import { extractDependencyEffect } from '../utils/prop-dependency-utils';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
 import { SettingsControl } from './settings-control';
 
 export const SettingsTab = () => {
-	const { elementType, element } = useElement();
+	const { elementType, element, settings } = useElement();
 	const settingsDefault = useDefaultPanelSettings();
+	const currentSettings = settings as Props;
 
 	const isDefaultExpanded = ( sectionId: string ) =>
 		settingsDefault.defaultSectionsExpanded.settings?.includes( sectionId );
@@ -26,20 +29,24 @@ export const SettingsTab = () => {
 					const { type, value } = control;
 
 					if ( type === 'section' ) {
+						const sectionItems = renderSectionItems( {
+							items: value.items,
+							element,
+							propsSchema: elementType.propsSchema,
+							settings: currentSettings,
+						} );
+
+						if ( ! sectionItems.length ) {
+							return null;
+						}
+
 						return (
 							<Section
 								title={ value.label }
 								key={ type + '.' + index }
 								defaultExpanded={ isDefaultExpanded( value.label ) }
 							>
-								{ value.items?.map( ( item ) => {
-									if ( isControl( item ) ) {
-										return <SettingsControl key={ getKey( item, element ) } control={ item } />;
-									}
-
-									// TODO: Handle 2nd level sections
-									return null;
-								} ) }
+								{ sectionItems }
 							</Section>
 						);
 					}
@@ -62,3 +69,36 @@ function getKey( control: Control | ElementControl, element: Element ) {
 function isControl( control: ControlItem ): control is Control | ElementControl {
 	return control.type === 'control' || control.type === 'element-control';
 }
+
+function renderSectionItems( {
+	items,
+	element,
+	propsSchema,
+	settings,
+}: {
+	items?: ControlItem[];
+	element: Element;
+	propsSchema: PropsSchema;
+	settings: Props;
+} ) {
+	return (
+		items?.flatMap( ( item ) => {
+			if ( ! isControl( item ) ) {
+				// TODO: Handle 2nd level sections
+				return [];
+			}
+
+			if ( item.type === 'control' && isControlHiddenByDependencies( item, propsSchema, settings ) ) {
+				return [];
+			}
+
+			return [ <SettingsControl key={ getKey( item, element ) } control={ item } /> ];
+		} ) ?? []
+	);
+}
+
+function isControlHiddenByDependencies( control: Control, propsSchema: PropsSchema, settings: Props ) {
+	const { isHidden } = extractDependencyEffect( control.value.bind, propsSchema, settings );
+
+	return isHidden;
+}