@elementor/editor-editing-panel 4.0.0-609 → 4.0.0-621

package/dist/index.mjs

@@ -24,8 +24,8 @@ function useClassesProp() {
 import * as React2 from "react";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var Context2 = createContext2(null);
-function ElementProvider({ children, element, elementType }) {
-  return /* @__PURE__ */ React2.createElement(Context2.Provider, { value: { element, elementType } }, children);
+function ElementProvider({ children, element, elementType, settings }) {
+  return /* @__PURE__ */ React2.createElement(Context2.Provider, { value: { element, elementType, settings } }, children);
 }
 function useElement() {
   const context = useContext2(Context2);
@@ -34,6 +34,13 @@ function useElement() {
   }
   return context;
 }
+function usePanelElementSetting(propKey) {
+  const context = useContext2(Context2);
+  if (!context) {
+    throw new Error("usePanelElementSetting must be used within a ElementProvider");
+  }
+  return context.settings[propKey] ?? null;
+}
 
 // src/contexts/style-context.tsx
 import * as React3 from "react";
@@ -140,7 +147,6 @@ var onConvert = (opts) => {
 // src/components/css-classes/css-class-selector.tsx
 import * as React10 from "react";
 import { useRef, useState as useState4 } from "react";
-import { useElementSetting } from "@elementor/editor-elements";
 import {
   isElementsStylesProvider as isElementsStylesProvider4,
   stylesRepository as stylesRepository5,
@@ -1320,9 +1326,8 @@ function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
 }
 function useAppliedOptions(options12) {
-  const { element } = useElement();
   const currentClassesProp = useClassesProp();
-  const appliedIds = useElementSetting(element.id, currentClassesProp)?.value || [];
+  const appliedIds = usePanelElementSetting(currentClassesProp)?.value ?? [];
   const appliedOptions = options12.filter((option) => option.value && appliedIds.includes(option.value));
   const hasElementsProviderStyleApplied = appliedOptions.some(
     (option) => option.provider && isElementsStylesProvider4(option.provider)
@@ -1712,7 +1717,7 @@ import {
   ControlReplacementsProvider,
   getControlReplacements
 } from "@elementor/editor-controls";
-import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-elements";
+import { useSelectedElementSettings } from "@elementor/editor-elements";
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { ThemeProvider as ThemeProvider3 } from "@elementor/editor-ui";
 import { AtomIcon } from "@elementor/icons";
@@ -1940,7 +1945,8 @@ import {
   TextAreaControl,
   TextControl,
   ToggleControl,
-  UrlControl
+  UrlControl,
+  VideoMediaControl
 } from "@elementor/editor-controls";
 import {
   booleanPropTypeUtil,
@@ -1955,7 +1961,8 @@ import {
   queryPropTypeUtil,
   sizePropTypeUtil,
   stringArrayPropTypeUtil,
-  stringPropTypeUtil as stringPropTypeUtil2
+  stringPropTypeUtil as stringPropTypeUtil2,
+  videoSrcPropTypeUtil
 } from "@elementor/editor-props";
 var controlTypes = {
   image: { component: ImageControl, layout: "custom", propTypeUtil: imagePropTypeUtil },
@@ -1975,6 +1982,7 @@ var controlTypes = {
   "html-tag": { component: HtmlTagControl, layout: "two-columns", propTypeUtil: stringPropTypeUtil2 },
   toggle: { component: ToggleControl, layout: "full", propTypeUtil: stringPropTypeUtil2 },
   "date-time": { component: DateTimeControl, layout: "full", propTypeUtil: DateTimePropTypeUtil },
+  video: { component: VideoMediaControl, layout: "full", propTypeUtil: videoSrcPropTypeUtil },
   "inline-editing": { component: InlineEditingControl, layout: "full", propTypeUtil: htmlV3PropTypeUtil },
   email: { component: EmailFormActionControl, layout: "custom", propTypeUtil: emailPropTypeUtil }
 };
@@ -2061,12 +2069,7 @@ import * as React19 from "react";
 import { useMemo as useMemo7 } from "react";
 import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
-import {
-  getElementLabel as getElementLabel3,
-  getElementSettings,
-  updateElementSettings as updateElementSettings3,
-  useElementSettings
-} from "@elementor/editor-elements";
+import { getElementLabel as getElementLabel3, getElementSettings, updateElementSettings as updateElementSettings3 } from "@elementor/editor-elements";
 import {
   isDependency,
   isDependencyMet as isDependencyMet2
@@ -2225,35 +2228,61 @@ var createTopLevelObjectType = ({ schema }) => {
 
 // src/controls-registry/settings-field.tsx
 var HISTORY_DEBOUNCE_WAIT2 = 800;
+var getElementSettigsWithDefaults = (propsSchema, elementSettings) => {
+  const elementSettingsWithDefaults = { ...elementSettings };
+  Object.keys(propsSchema).forEach((key) => {
+    if (!(key in elementSettingsWithDefaults)) {
+      if (propsSchema[key].default !== null) {
+        elementSettingsWithDefaults[key] = propsSchema[key].default;
+      }
+    }
+  });
+  return elementSettingsWithDefaults;
+};
+var extractDependencyEffect = (bind, propsSchema, currentElementSettings) => {
+  const elementSettingsForDepCheck = getElementSettigsWithDefaults(propsSchema, currentElementSettings);
+  const propType = propsSchema[bind];
+  const depCheck = isDependencyMet2(propType?.dependencies, elementSettingsForDepCheck);
+  const isHidden = !depCheck.isMet && !isDependency(depCheck.failingDependencies[0]) && depCheck.failingDependencies[0]?.effect === "hide";
+  return {
+    isDisabled: (prop) => {
+      const result = !isDependencyMet2(prop?.dependencies, elementSettingsForDepCheck).isMet;
+      return result;
+    },
+    isHidden,
+    settingsWithDefaults: elementSettingsForDepCheck
+  };
+};
 var SettingsField = ({ bind, children, propDisplayName }) => {
   const {
     element: { id: elementId },
-    elementType: { propsSchema, dependenciesPerTargetMapping = {} }
+    elementType: { propsSchema, dependenciesPerTargetMapping = {} },
+    settings: currentElementSettings
   } = useElement();
-  const elementSettingValues = useElementSettings(elementId, Object.keys(propsSchema));
-  const value = { [bind]: elementSettingValues?.[bind] ?? null };
+  const value = { [bind]: currentElementSettings?.[bind] ?? null };
   const propType = createTopLevelObjectType({ schema: propsSchema });
   const undoableUpdateElementProp = useUndoableUpdateElementProp({
     elementId,
     propDisplayName
   });
+  const { isDisabled, isHidden, settingsWithDefaults } = extractDependencyEffect(
+    bind,
+    propsSchema,
+    currentElementSettings
+  );
+  if (isHidden) {
+    return null;
+  }
   const setValue = (newValue, _ = {}, meta) => {
     const { withHistory = true } = meta ?? {};
     const dependents = extractOrderedDependencies(dependenciesPerTargetMapping);
-    const settings = getUpdatedValues(newValue, dependents, propsSchema, elementSettingValues, elementId);
+    const settings = getUpdatedValues(newValue, dependents, propsSchema, settingsWithDefaults, elementId);
     if (withHistory) {
       undoableUpdateElementProp(settings);
     } else {
       updateElementSettings3({ id: elementId, props: settings, withHistory: false });
     }
   };
-  const isDisabled = (prop) => !isDependencyMet2(prop?.dependencies, elementSettingValues).isMet;
-  const propTypeToBind = propsSchema[bind];
-  const dependenciesResult = isDependencyMet2(propTypeToBind?.dependencies, elementSettingValues);
-  const shouldHide = !dependenciesResult.isMet && !isDependency(dependenciesResult.failingDependencies[0]) && dependenciesResult.failingDependencies[0]?.effect === "hide";
-  if (shouldHide) {
-    return null;
-  }
   return /* @__PURE__ */ React19.createElement(PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React19.createElement(PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
@@ -2405,7 +2434,7 @@ import { __ as __53 } from "@wordpress/i18n";
 // src/contexts/styles-inheritance-context.tsx
 import * as React23 from "react";
 import { createContext as createContext7, useContext as useContext7 } from "react";
-import { getWidgetsCache, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
+import { getWidgetsCache } 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";
@@ -2671,11 +2700,10 @@ function useStylesInheritanceChain(path) {
   return context.getInheritanceChain(snapshot, path, topLevelPropType);
 }
 var useAppliedStyles = () => {
-  const { element } = useElement();
   const currentClassesProp = useClassesProp();
   const baseStyles = useBaseStyles();
   useStylesRerender();
-  const classesProp = useElementSetting2(element.id, currentClassesProp);
+  const classesProp = usePanelElementSetting(currentClassesProp);
   const appliedStyles = classesPropTypeUtil3.extract(classesProp) ?? [];
   return stylesRepository6.all().filter((style) => [...baseStyles, ...appliedStyles].includes(style.id));
 };
@@ -2687,13 +2715,13 @@ var useBaseStyles = () => {
 };
 
 // src/hooks/use-active-style-def-id.ts
-import { getElementStyles, useElementSetting as useElementSetting3 } from "@elementor/editor-elements";
+import { getElementStyles } from "@elementor/editor-elements";
 function useActiveStyleDefId(classProp) {
   const [activeStyledDefId, setActiveStyledDefId] = useStateByElement(
     "active-style-id",
     null
   );
-  const appliedClassesIds = useAppliedClassesIds(classProp)?.value || [];
+  const appliedClassesIds = usePanelElementSetting(classProp)?.value || [];
   const fallback = useFirstAppliedClass(appliedClassesIds);
   const activeAndAppliedClassId = useActiveAndAppliedClassId(activeStyledDefId, appliedClassesIds);
   return [activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId];
@@ -2703,10 +2731,6 @@ function useFirstAppliedClass(appliedClassesIds) {
   const stylesDefs = getElementStyles(element.id) ?? {};
   return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id));
 }
-function useAppliedClassesIds(classProp) {
-  const { element } = useElement();
-  return useElementSetting3(element.id, classProp);
-}
 function useActiveAndAppliedClassId(id, appliedClassesIds) {
   const isClassApplied = !!id && appliedClassesIds.includes(id);
   return isClassApplied ? id : null;
@@ -3003,9 +3027,18 @@ import {
   TransformRepeaterControl,
   TransitionRepeaterControl
 } from "@elementor/editor-controls";
-import { useSelectedElement } from "@elementor/editor-elements";
 import { __ as __15 } from "@wordpress/i18n";
 
+// src/utils/can-element-have-children.ts
+import { getContainer } from "@elementor/editor-elements";
+var canElementHaveChildren = (elementId) => {
+  const container = getContainer(elementId);
+  if (!container) {
+    return false;
+  }
+  return container.model.get("elType") !== "widget";
+};
+
 // src/utils/get-recently-used-styles.ts
 import { createPropsResolver, styleTransformersRegistry } from "@elementor/editor-canvas";
 import { getElementStyles as getElementStyles2 } from "@elementor/editor-elements";
@@ -3084,9 +3117,10 @@ var TRANSFORM_LABEL = __15("Transform", "elementor");
 var BACKDROP_FILTER_LABEL = __15("Backdrop filters", "elementor");
 var TRANSITIONS_LABEL = __15("Transitions", "elementor");
 var EffectsSection = () => {
-  const { element } = useSelectedElement();
+  const { element } = useElement();
   const { meta } = useStyle();
-  return /* @__PURE__ */ React37.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ React37.createElement(BlendModeField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(OpacityControlField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React37.createElement(BoxShadowRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React37.createElement(TransformRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React37.createElement(
+  const canHaveChildren = canElementHaveChildren(element?.id ?? "");
+  return /* @__PURE__ */ React37.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ React37.createElement(BlendModeField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(OpacityControlField, null), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React37.createElement(BoxShadowRepeaterControl, null)), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React37.createElement(TransformRepeaterControl, { showChildrenPerspective: canHaveChildren })), /* @__PURE__ */ React37.createElement(PanelDivider, null), /* @__PURE__ */ React37.createElement(StylesField, { bind: "transition", propDisplayName: TRANSITIONS_LABEL }, /* @__PURE__ */ React37.createElement(
     TransitionRepeaterControl,
     {
       currentStyleState: meta.state,
@@ -4772,7 +4806,7 @@ var PanelTabContent = () => {
 var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = createLocation4();
 var { useMenuItems } = controlActionsMenu;
 var EditingPanel = () => {
-  const { element, elementType } = useSelectedElement2();
+  const { element, elementType, settings } = useSelectedElementSettings();
   const controlReplacements = getControlReplacements();
   const menuItems = useMenuItems().default;
   if (!element || !elementType) {
@@ -4784,7 +4818,7 @@ var EditingPanel = () => {
   if (ReplacementComponent) {
     panelContent = /* @__PURE__ */ React81.createElement(ReplacementComponent, null);
   }
-  return /* @__PURE__ */ React81.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React81.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React81.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React81.createElement(ThemeProvider3, null, /* @__PURE__ */ React81.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React81.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React81.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React81.createElement(Panel, null, /* @__PURE__ */ React81.createElement(PanelHeaderTopSlot, null), panelContent)))))));
+  return /* @__PURE__ */ React81.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React81.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React81.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React81.createElement(ThemeProvider3, null, /* @__PURE__ */ React81.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React81.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React81.createElement(ElementProvider, { element, elementType, settings }, /* @__PURE__ */ React81.createElement(Panel, null, /* @__PURE__ */ React81.createElement(PanelHeaderTopSlot, null), panelContent)))))));
 };
 
 // src/init.ts
@@ -4888,9 +4922,9 @@ import { Alert as Alert2, Chip as Chip4, Infotip, Stack as Stack14, Switch, Text
 import { __ as __58 } from "@wordpress/i18n";
 
 // src/controls-registry/element-controls/get-element-by-type.ts
-import { getContainer } from "@elementor/editor-elements";
+import { getContainer as getContainer2 } from "@elementor/editor-elements";
 var getElementByType = (elementId, type) => {
-  const currentElement = getContainer(elementId);
+  const currentElement = getContainer2(elementId);
   if (!currentElement) {
     return null;
   }
@@ -4905,7 +4939,7 @@ import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import {
   createElements,
   duplicateElements,
-  getContainer as getContainer2,
+  getContainer as getContainer3,
   moveElements,
   removeElements
 } from "@elementor/editor-elements";
@@ -4926,7 +4960,7 @@ var useActions = () => {
     });
     items3.forEach(({ item, index }) => {
       const tabId = item.id;
-      const tabContentAreaContainer = getContainer2(tabContentAreaId);
+      const tabContentAreaContainer = getContainer3(tabContentAreaId);
       const tabContentId = tabContentAreaContainer?.children?.[index]?.id;
       if (!tabContentId) {
         throw new Error("Original content ID is required for duplication");
@@ -4954,10 +4988,10 @@ var useActions = () => {
     movedElementId,
     movedElementIndex
   }) => {
-    const tabContentContainer = getContainer2(tabContentAreaId);
+    const tabContentContainer = getContainer3(tabContentAreaId);
     const tabContent = tabContentContainer?.children?.[movedElementIndex];
-    const movedElement = getContainer2(movedElementId);
-    const tabsMenu = getContainer2(tabsMenuId);
+    const movedElement = getContainer3(movedElementId);
+    const tabsMenu = getContainer3(tabsMenuId);
     if (!tabContent) {
       throw new Error("Content element is required");
     }
@@ -5007,7 +5041,7 @@ var useActions = () => {
       title: __57("Tabs", "elementor"),
       elementIds: items3.flatMap(({ item, index }) => {
         const tabId = item.id;
-        const tabContentContainer = getContainer2(tabContentAreaId);
+        const tabContentContainer = getContainer3(tabContentAreaId);
         const tabContentId = tabContentContainer?.children?.[index]?.id;
         if (!tabContentId) {
           throw new Error("Content ID is required");
@@ -5031,8 +5065,8 @@ var useActions = () => {
     tabsMenuId,
     items: items3
   }) => {
-    const tabContentArea = getContainer2(tabContentAreaId);
-    const tabsMenu = getContainer2(tabsMenuId);
+    const tabContentArea = getContainer3(tabContentAreaId);
+    const tabsMenu = getContainer3(tabsMenuId);
     if (!tabContentArea || !tabsMenu) {
       throw new Error("Tab containers not found");
     }