@elementor/editor-editing-panel 4.4.0-1148 → 4.4.0-beta1

package/dist/index.mjs

@@ -1976,7 +1976,7 @@ var EditingPanelStickyPromotion = () => {
 import { Fragment as Fragment10 } from "react";
 import * as React92 from "react";
 import { useHasContentOnlyAccess } from "@elementor/editor-current-user";
-import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
+import { getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
 import { Divider as Divider6, Stack as Stack14, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __65 } from "@wordpress/i18n";
 
@@ -2129,6 +2129,9 @@ var InteractionsTab = () => {
 import * as React26 from "react";
 import { SessionStorageProvider } from "@elementor/session";
 
+// src/utils/ancestor-dependency-utils.ts
+import { findClosestContainer, getContainer, getWidgetsCache } from "@elementor/editor-elements";
+
 // src/utils/prop-dependency-utils.ts
 import {
   extractValue,
@@ -2148,14 +2151,16 @@ function getElementSettingsWithDefaults(propsSchema, elementSettings) {
   });
   return elementSettingsWithDefaults;
 }
+function isHiddenByDependency(dependency, values) {
+  const depCheck = isDependencyMet(dependency, values);
+  const failingTerm = !depCheck.isMet ? depCheck.failingDependencies[0] : void 0;
+  return !!failingTerm && !isDependency(failingTerm) && failingTerm.effect === "hide";
+}
 function extractDependencyEffect(bind, propsSchema, settings) {
   const settingsWithDefaults = getElementSettingsWithDefaults(propsSchema, settings);
   const propType = propsSchema[bind];
-  const depCheck = isDependencyMet(propType?.dependencies, settingsWithDefaults);
-  const failingTerm = !depCheck.isMet ? depCheck.failingDependencies[0] : void 0;
-  const isHidden = !!failingTerm && !isDependency(failingTerm) && failingTerm?.effect === "hide";
   return {
-    isHidden,
+    isHidden: isHiddenByDependency(propType?.dependencies, settingsWithDefaults),
     isDisabled: (prop) => !isDependencyMet(prop?.dependencies, settingsWithDefaults).isMet
   };
 }
@@ -2342,6 +2347,32 @@ function removePreviousValueFromStorage({ path, elementId }) {
   removeSessionStorageItem(key);
 }
 
+// src/utils/ancestor-dependency-utils.ts
+function getSettingsWithDefaults(ancestor, elementType) {
+  const schema = getWidgetsCache()?.[elementType]?.atomic_props_schema ?? {};
+  const settings = Object.fromEntries(
+    Object.keys(schema).map((key) => [key, ancestor.settings.get(key) ?? null])
+  );
+  return getElementSettingsWithDefaults(schema, settings);
+}
+function isHiddenByAncestor(elementId, propType) {
+  const ancestorDependency = propType?.meta?.ancestor_dependency;
+  if (!Array.isArray(ancestorDependency?.dependency?.terms)) {
+    return false;
+  }
+  const ancestor = findClosestContainer(
+    getContainer(elementId)?.parent,
+    (container) => container.model.get("elType") === ancestorDependency.element_type
+  );
+  if (!ancestor) {
+    return false;
+  }
+  return isHiddenByDependency(
+    ancestorDependency.dependency,
+    getSettingsWithDefaults(ancestor, ancestorDependency.element_type)
+  );
+}
+
 // src/components/section.tsx
 import * as React21 from "react";
 import { useId as useId2, useRef as useRef3 } from "react";
@@ -2592,6 +2623,27 @@ import { useActiveBreakpoint, useBreakpoints } from "@elementor/editor-responsiv
 import { undoable as undoable4 } from "@elementor/editor-v1-adapters";
 import { __ as __11 } from "@wordpress/i18n";
 
+// src/hooks/use-is-hidden-by-ancestor.ts
+import { __privateUseListenTo as useListenTo, commandEndEvent, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+function useIsHiddenByAncestor(bind) {
+  const {
+    element: { id: elementId },
+    elementType: { propsSchema }
+  } = useElement();
+  const propType = propsSchema[bind];
+  return useListenTo(
+    [
+      v1ReadyEvent(),
+      commandEndEvent("document/elements/set-settings"),
+      commandEndEvent("document/elements/create"),
+      commandEndEvent("document/elements/delete"),
+      commandEndEvent("document/elements/move")
+    ],
+    () => isHiddenByAncestor(elementId, propType),
+    [elementId, propType]
+  );
+}
+
 // src/utils/is-responsive-prop-type.ts
 function isResponsivePropType(propType) {
   if (!propType) {
@@ -2636,8 +2688,9 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
     elementId,
     propDisplayName
   });
+  const isHiddenByAncestor2 = useIsHiddenByAncestor(bind);
   const { isDisabled, isHidden } = extractDependencyEffect(bind, propsSchema, currentElementSettings);
-  if (isHidden) {
+  if (isHidden || isHiddenByAncestor2) {
     return null;
   }
   const setValue = (newValue, _ = {}, meta) => {
@@ -2812,15 +2865,16 @@ function renderSectionItems({
     if (!isControl(item)) {
       return [];
     }
-    if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings)) {
+    if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings, element.id)) {
       return [];
     }
     return [/* @__PURE__ */ React26.createElement(SettingsControl, { key: getKey(item, element), control: item })];
   }) ?? [];
 }
-function isControlHiddenByDependencies(control, propsSchema, settings) {
-  const { isHidden } = extractDependencyEffect(control.value.bind, propsSchema, settings);
-  return isHidden;
+function isControlHiddenByDependencies(control, propsSchema, settings, elementId) {
+  const { bind } = control.value;
+  const { isHidden } = extractDependencyEffect(bind, propsSchema, settings);
+  return isHidden || isHiddenByAncestor(elementId, propsSchema[bind]);
 }
 
 // src/components/style-tab.tsx
@@ -2835,7 +2889,7 @@ import { Box as Box8, Divider as Divider5, Stack as Stack13 } from "@elementor/u
 // src/contexts/styles-inheritance-context.tsx
 import * as React27 from "react";
 import { createContext as createContext6, useContext as useContext6, useMemo as useMemo8 } from "react";
-import { getWidgetsCache } from "@elementor/editor-elements";
+import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil as classesPropTypeUtil3 } from "@elementor/editor-props";
 import { getBreakpointsTree as getBreakpointsTree2 } from "@elementor/editor-responsive";
 import { getStylesSchema } from "@elementor/editor-styles";
@@ -2843,14 +2897,14 @@ import { stylesRepository as stylesRepository8 } from "@elementor/editor-styles-
 
 // src/hooks/use-default-style-tag-from-preview.ts
 import { getDefaultStyleTagFromPreviewElement } from "@elementor/editor-elements";
-import { __privateUseListenTo as useListenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, windowEvent } from "@elementor/editor-v1-adapters";
 function useDefaultStyleTagFromPreview(elementId) {
-  return useListenTo(
+  return useListenTo2(
     [
       windowEvent("elementor/preview/atomic-widget/render"),
-      commandEndEvent("document/elements/settings"),
-      commandEndEvent("document/elements/set-settings"),
-      commandEndEvent("document/elements/select")
+      commandEndEvent2("document/elements/settings"),
+      commandEndEvent2("document/elements/set-settings"),
+      commandEndEvent2("document/elements/select")
     ],
     () => getDefaultStyleTagFromPreviewElement(elementId)
   );
@@ -3143,7 +3197,7 @@ var useAppliedStyles = () => {
 };
 var useBaseStyles = () => {
   const { elementType } = useElement();
-  const widgetsCache = getWidgetsCache();
+  const widgetsCache = getWidgetsCache2();
   const widgetCache = widgetsCache?.[elementType.key];
   return Object.keys(widgetCache?.base_styles ?? {});
 };
@@ -3575,9 +3629,9 @@ import {
 import { __ as __19 } from "@wordpress/i18n";
 
 // src/utils/can-element-have-children.ts
-import { getContainer } from "@elementor/editor-elements";
+import { getContainer as getContainer2 } from "@elementor/editor-elements";
 var canElementHaveChildren = (elementId) => {
-  const container = getContainer(elementId);
+  const container = getContainer2(elementId);
   if (!container) {
     return false;
   }
@@ -3682,14 +3736,14 @@ import { createLocation as createLocation3 } from "@elementor/locations";
 import { __ as __39 } from "@wordpress/i18n";
 
 // src/hooks/use-computed-style.ts
-import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
+import { __privateUseListenTo as useListenTo3, commandEndEvent as commandEndEvent3, windowEvent as windowEvent2 } from "@elementor/editor-v1-adapters";
 function useComputedStyle(elementId) {
-  return useListenTo2(
+  return useListenTo3(
     [
       windowEvent2("elementor/device-mode/change"),
-      commandEndEvent2("document/elements/reset-style"),
-      commandEndEvent2("document/elements/settings"),
-      commandEndEvent2("document/elements/paste-style")
+      commandEndEvent3("document/elements/reset-style"),
+      commandEndEvent3("document/elements/settings"),
+      commandEndEvent3("document/elements/paste-style")
     ],
     () => {
       if (!elementId) {
@@ -5806,7 +5860,7 @@ var PanelTabContent = () => {
   const { element } = useElement();
   const editorDefaults = useDefaultPanelSettings();
   const defaultComponentTab = editorDefaults.defaultTab;
-  const elementMeta = getWidgetsCache2()?.[element.type]?.meta;
+  const elementMeta = getWidgetsCache3()?.[element.type]?.meta;
   const isPromotedElement = !!elementMeta?.is_pro_promotion;
   const hasDesignTabs = !elementMeta?.hide_design_tabs;
   const hasContentOnlyAccess = useHasContentOnlyAccess();
@@ -5935,10 +5989,10 @@ var { panel, usePanelActions, usePanelStatus } = createPanel({
 });
 
 // src/sync/is-atomic-widget-selected.ts
-import { getSelectedElements, getWidgetsCache as getWidgetsCache3 } from "@elementor/editor-elements";
+import { getSelectedElements, getWidgetsCache as getWidgetsCache4 } from "@elementor/editor-elements";
 var isAtomicWidgetSelected = () => {
   const selectedElements = getSelectedElements();
-  const widgetCache = getWidgetsCache3();
+  const widgetCache = getWidgetsCache4();
   if (selectedElements.length !== 1) {
     return false;
   }
@@ -6015,7 +6069,7 @@ import {
   createElements,
   duplicateElements,
   generateElementId,
-  getContainer as getContainer2,
+  getContainer as getContainer3,
   moveElements,
   removeElements
 } from "@elementor/editor-elements";
@@ -6113,7 +6167,7 @@ var useActions = () => {
     showIcon,
     differentOpenIcon = false
   }) => {
-    const accordion = getContainer2(accordionId);
+    const accordion = getContainer3(accordionId);
     if (!accordion) {
       throw new Error("Accordion container not found");
     }
@@ -6161,8 +6215,8 @@ var useActions = () => {
     movedElementId,
     toIndex
   }) => {
-    const accordion = getContainer2(accordionId);
-    const movedElement = getContainer2(movedElementId);
+    const accordion = getContainer3(accordionId);
+    const movedElement = getContainer3(movedElementId);
     if (!accordion || !movedElement) {
       throw new Error("Accordion item or container not found");
     }
@@ -6187,7 +6241,7 @@ var useActions = () => {
 
 // src/controls-registry/element-controls/accordion-items-control/use-show-icon-write-through.ts
 import { useEffect as useEffect9, useRef as useRef20 } from "react";
-import { getContainer as getContainer3, getElementSettings as getElementSettings2, updateElementSettings as updateElementSettings4 } from "@elementor/editor-elements";
+import { getContainer as getContainer4, getElementSettings as getElementSettings2, updateElementSettings as updateElementSettings4 } from "@elementor/editor-elements";
 import { booleanPropTypeUtil as booleanPropTypeUtil3 } from "@elementor/editor-props";
 import { undoable as undoable5 } from "@elementor/editor-v1-adapters";
 import { __ as __70 } from "@wordpress/i18n";
@@ -6243,7 +6297,7 @@ var cascadeShowIconToHeaders = undoable5(
   }
 );
 function getAccordionHeaderIds(accordionId) {
-  const accordion = getContainer3(accordionId);
+  const accordion = getContainer4(accordionId);
   const itemContainers = (accordion?.children ?? []).filter(
     (child) => child.model.get("elType") === ACCORDION_ITEM_ELEMENT_TYPE
   );
@@ -6425,7 +6479,7 @@ import {
   createElements as createElements2,
   duplicateElements as duplicateElements2,
   generateElementId as generateElementId2,
-  getContainer as getContainer4,
+  getContainer as getContainer5,
   moveElements as moveElements2,
   removeElements as removeElements2
 } from "@elementor/editor-elements";
@@ -6504,8 +6558,8 @@ var moveItem = ({
   listContainerId,
   movedElementId
 }) => {
-  const movedElement = getContainer4(movedElementId);
-  const listContainer = getContainer4(listContainerId);
+  const movedElement = getContainer5(movedElementId);
+  const listContainer = getContainer5(listContainerId);
   if (!movedElement || !listContainer) {
     throw new Error("List item or list container not found");
   }
@@ -6532,7 +6586,7 @@ var addItem = ({
   items: items3,
   showMarkers
 }) => {
-  const listContainer = getContainer4(listContainerId);
+  const listContainer = getContainer5(listContainerId);
   if (!listContainer) {
     throw new Error("List container not found");
   }
@@ -6555,7 +6609,7 @@ var addItem = ({
 
 // src/controls-registry/element-controls/list-items-control/use-show-markers-write-through.ts
 import { useEffect as useEffect10, useRef as useRef21 } from "react";
-import { getContainer as getContainer5, getElementSettings as getElementSettings3, updateElementSettings as updateElementSettings5 } from "@elementor/editor-elements";
+import { getContainer as getContainer6, getElementSettings as getElementSettings3, updateElementSettings as updateElementSettings5 } from "@elementor/editor-elements";
 import { booleanPropTypeUtil as booleanPropTypeUtil6 } from "@elementor/editor-props";
 import { undoable as undoable6 } from "@elementor/editor-v1-adapters";
 import { __ as __73 } from "@wordpress/i18n";
@@ -6599,7 +6653,7 @@ var cascadeShowMarkersToItems = undoable6(
   }
 );
 function getListItemIds(listId) {
-  const list = getContainer5(listId);
+  const list = getContainer6(listId);
   const itemContainers = (list?.children ?? []).filter(
     (child) => child.model.get("elType") === LIST_ITEM_ELEMENT_TYPE
   );
@@ -6736,9 +6790,9 @@ import { Alert as Alert5, Chip as Chip4, Infotip as Infotip3, Stack as Stack17,
 import { __ as __76 } from "@wordpress/i18n";
 
 // src/controls-registry/element-controls/get-element-by-type.ts
-import { getContainer as getContainer6 } from "@elementor/editor-elements";
+import { getContainer as getContainer7 } from "@elementor/editor-elements";
 var getElementByType = (elementId, type) => {
-  const currentElement = getContainer6(elementId);
+  const currentElement = getContainer7(elementId);
   if (!currentElement) {
     return null;
   }
@@ -6753,7 +6807,7 @@ import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import {
   createElements as createElements3,
   duplicateElements as duplicateElements3,
-  getContainer as getContainer7,
+  getContainer as getContainer8,
   moveElements as moveElements3,
   removeElements as removeElements3
 } from "@elementor/editor-elements";
@@ -6774,7 +6828,7 @@ var useActions2 = () => {
     });
     items3.forEach(({ item, index }) => {
       const tabId = item.id;
-      const tabContentAreaContainer = getContainer7(tabContentAreaId);
+      const tabContentAreaContainer = getContainer8(tabContentAreaId);
       const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
       if (!tabContentId) {
         throw new Error("Original content ID is required for duplication");
@@ -6802,10 +6856,10 @@ var useActions2 = () => {
     movedElementId,
     movedElementIndex
   }) => {
-    const tabContentContainer = getContainer7(tabContentAreaId);
+    const tabContentContainer = getContainer8(tabContentAreaId);
     const tabContent = tabContentContainer?.children?.[movedElementIndex];
-    const movedElement = getContainer7(movedElementId);
-    const tabsMenu = getContainer7(tabsMenuId);
+    const movedElement = getContainer8(movedElementId);
+    const tabsMenu = getContainer8(tabsMenuId);
     if (!tabContent) {
       throw new Error("Content element is required");
     }
@@ -6855,7 +6909,7 @@ var useActions2 = () => {
       title: __75("Tabs", "elementor"),
       elementIds: items3.flatMap(({ item, index }) => {
         const tabId = item.id;
-        const tabContentContainer = getContainer7(tabContentAreaId);
+        const tabContentContainer = getContainer8(tabContentAreaId);
         const tabContentId = tabContentContainer?.children?.[index]?.id;
         if (!tabContentId) {
           throw new Error("Content ID is required");
@@ -6879,8 +6933,8 @@ var useActions2 = () => {
     tabsMenuId,
     items: items3
   }) => {
-    const tabContentArea = getContainer7(tabContentAreaId);
-    const tabsMenu = getContainer7(tabsMenuId);
+    const tabContentArea = getContainer8(tabContentAreaId);
+    const tabsMenu = getContainer8(tabsMenuId);
     if (!tabContentArea || !tabsMenu) {
       throw new Error("Tab containers not found");
     }