@elementor/editor-editing-panel 3.33.0-149 → 3.33.0-151

package/dist/index.d.mts

@@ -1035,6 +1035,41 @@ declare const controlTypes: {
             key: "key-value";
         };
     };
+    readonly 'html-tag': {
+        readonly component: ControlComponent<({ options, onChange, fallbackLabels }: {
+            options: {
+                label: string;
+                value: _elementor_editor_props.StringPropValue["value"];
+                disabled?: boolean;
+            }[];
+            onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
+            fallbackLabels?: Record<string, string>;
+        }) => react.JSX.Element>;
+        readonly layout: "two-columns";
+        readonly propTypeUtil: {
+            extract: (prop: unknown) => string | null;
+            isValid: (prop: unknown) => prop is _elementor_editor_props.TransformablePropValue<"string", string | null>;
+            create: {
+                (value: string | null): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+                (value: string | null, createOptions?: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+                (value: (prev?: string | null | undefined) => string | null, createOptions: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+            };
+            schema: zod.ZodObject<{
+                $$type: zod.ZodLiteral<"string">;
+                value: zod.ZodType<string | null, zod.ZodTypeDef, string | null>;
+                disabled: zod.ZodOptional<zod.ZodBoolean>;
+            }, "strict", zod.ZodTypeAny, {
+                $$type: "string";
+                value: string | null;
+                disabled?: boolean | undefined;
+            }, {
+                $$type: "string";
+                value: string | null;
+                disabled?: boolean | undefined;
+            }>;
+            key: "string";
+        };
+    };
 };
 type ControlType = keyof typeof controlTypes;
 declare class ControlsRegistry {

package/dist/index.d.ts

@@ -1035,6 +1035,41 @@ declare const controlTypes: {
             key: "key-value";
         };
     };
+    readonly 'html-tag': {
+        readonly component: ControlComponent<({ options, onChange, fallbackLabels }: {
+            options: {
+                label: string;
+                value: _elementor_editor_props.StringPropValue["value"];
+                disabled?: boolean;
+            }[];
+            onChange?: (newValue: string | null, previousValue: string | null | undefined) => void;
+            fallbackLabels?: Record<string, string>;
+        }) => react.JSX.Element>;
+        readonly layout: "two-columns";
+        readonly propTypeUtil: {
+            extract: (prop: unknown) => string | null;
+            isValid: (prop: unknown) => prop is _elementor_editor_props.TransformablePropValue<"string", string | null>;
+            create: {
+                (value: string | null): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+                (value: string | null, createOptions?: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+                (value: (prev?: string | null | undefined) => string | null, createOptions: _elementor_editor_props.CreateOptions): _elementor_editor_props.TransformablePropValue<"string", string | null>;
+            };
+            schema: zod.ZodObject<{
+                $$type: zod.ZodLiteral<"string">;
+                value: zod.ZodType<string | null, zod.ZodTypeDef, string | null>;
+                disabled: zod.ZodOptional<zod.ZodBoolean>;
+            }, "strict", zod.ZodTypeAny, {
+                $$type: "string";
+                value: string | null;
+                disabled?: boolean | undefined;
+            }, {
+                $$type: "string";
+                value: string | null;
+                disabled?: boolean | undefined;
+            }>;
+            key: "string";
+        };
+    };
 };
 type ControlType = keyof typeof controlTypes;
 declare class ControlsRegistry {

package/dist/index.js

@@ -1716,7 +1716,7 @@ var import_editor_elements12 = require("@elementor/editor-elements");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
-var import_session7 = require("@elementor/session");
+var import_session8 = require("@elementor/session");
 var import_ui45 = require("@elementor/ui");
 var import_i18n62 = require("@wordpress/i18n");
 
@@ -1819,7 +1819,7 @@ var useStateByElement = (key, initialValue) => {
 // src/components/settings-tab.tsx
 var React23 = __toESM(require("react"));
 var import_editor_controls5 = require("@elementor/editor-controls");
-var import_session4 = require("@elementor/session");
+var import_session5 = require("@elementor/session");
 var import_ui18 = require("@elementor/ui");
 
 // src/controls-registry/control.tsx
@@ -1841,7 +1841,8 @@ var controlTypes = {
   switch: { component: import_editor_controls3.SwitchControl, layout: "two-columns", propTypeUtil: import_editor_props4.booleanPropTypeUtil },
   number: { component: import_editor_controls3.NumberControl, layout: "two-columns", propTypeUtil: import_editor_props4.numberPropTypeUtil },
   repeatable: { component: import_editor_controls3.RepeatableControl, layout: "full", propTypeUtil: void 0 },
-  "key-value": { component: import_editor_controls3.KeyValueControl, layout: "full", propTypeUtil: import_editor_props4.keyValuePropTypeUtil }
+  "key-value": { component: import_editor_controls3.KeyValueControl, layout: "full", propTypeUtil: import_editor_props4.keyValuePropTypeUtil },
+  "html-tag": { component: import_editor_controls3.HtmlTagControl, layout: "two-columns", propTypeUtil: import_editor_props4.stringPropTypeUtil }
 };
 var ControlsRegistry = class {
   constructor(controlsRegistry2 = controlTypes) {
@@ -1923,6 +1924,7 @@ var import_i18n8 = require("@wordpress/i18n");
 
 // src/utils/prop-dependency-utils.ts
 var import_editor_props5 = require("@elementor/editor-props");
+var import_session4 = require("@elementor/session");
 function extractOrderedDependencies(bind, propsSchema, elementValues, dependenciesPerTargetMapping) {
   const prop = getPropType(propsSchema, elementValues, bind.split("."));
   if (!prop) {
@@ -1957,7 +1959,7 @@ function extractPropOrderedDependencies(bind, dependenciesPerTargetMapping) {
     []
   );
 }
-function updateValues(values, dependencies, propsSchema, elementValues) {
+function getUpdatedValues(values, dependencies, propsSchema, elementValues, elementId) {
   if (!dependencies.length) {
     return values;
   }
@@ -1969,10 +1971,29 @@ function updateValues(values, dependencies, propsSchema, elementValues) {
       if (!propType) {
         return newValues;
       }
-      if (!(0, import_editor_props5.isDependencyMet)(propType?.dependencies, combinedValues)) {
+      const testDependencies = {
+        previousValues: (0, import_editor_props5.isDependencyMet)(propType.dependencies, elementValues),
+        newValues: (0, import_editor_props5.isDependencyMet)(propType.dependencies, combinedValues)
+      };
+      if (!testDependencies.newValues.isMet) {
+        const newValue = handleUnmetCondition({
+          failingDependencies: testDependencies.newValues.failingDependencies,
+          dependency,
+          elementValues: combinedValues,
+          defaultValue: propType.default,
+          elementId
+        });
         return {
           ...newValues,
-          ...updateValue(path, null, combinedValues)
+          ...updateValue(path, newValue, combinedValues)
+        };
+      }
+      if (!testDependencies.previousValues.isMet) {
+        const savedValue = retrievePreviousValueFromStorage({ path: dependency, elementId });
+        removePreviousValueFromStorage({ path: dependency, elementId });
+        return {
+          ...newValues,
+          ...updateValue(path, savedValue ?? propType.default, combinedValues)
         };
       }
       return newValues;
@@ -1989,11 +2010,19 @@ function getPropType(schema, elementValues, path) {
   if (!baseProp) {
     return null;
   }
-  return keys.reduce((prop, key, index) => {
-    if (!prop?.kind) {
-      return null;
-    }
-    if ("union" === prop.kind) {
+  return keys.reduce(
+    (prop, key, index) => evaluatePropType({ prop, key, index, path, elementValues, basePropKey }),
+    baseProp
+  );
+}
+function evaluatePropType(props) {
+  const { prop } = props;
+  if (!prop?.kind) {
+    return null;
+  }
+  const { key, index, path, elementValues, basePropKey } = props;
+  switch (prop.kind) {
+    case "union":
       const value = (0, import_editor_props5.extractValue)(path.slice(0, index + 1), elementValues);
       const type = value?.$$type ?? null;
       return getPropType(
@@ -2001,15 +2030,12 @@ function getPropType(schema, elementValues, path) {
         elementValues,
         path.slice(0, index + 2)
       );
-    }
-    if ("array" === prop.kind) {
+    case "array":
       return prop.item_prop_type;
-    }
-    if ("object" === prop.kind) {
+    case "object":
       return prop.shape[key];
-    }
-    return prop[key];
-  }, baseProp);
+  }
+  return prop[key];
 }
 function updateValue(path, value, values) {
   const topPropKey = path[0];
@@ -2019,13 +2045,43 @@ function updateValue(path, value, values) {
       return null;
     }
     if (index === path.length - 1) {
-      carry[key] = value !== null ? { ...carry[key] ?? {}, value } : null;
+      carry[key] = value ?? null;
       return carry[key]?.value ?? carry.value;
     }
     return carry[key]?.value ?? carry.value;
   }, newValue);
   return { [topPropKey]: newValue[topPropKey] ?? null };
 }
+function handleUnmetCondition(props) {
+  const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
+  const newValue = failingDependencies.find((term) => term.newValue)?.newValue ?? null;
+  const currentValue = (0, import_editor_props5.extractValue)(dependency.split("."), elementValues) ?? defaultValue;
+  savePreviousValueToStorage({
+    path: dependency,
+    elementId,
+    value: currentValue
+  });
+  return newValue;
+}
+function savePreviousValueToStorage({ path, elementId, value }) {
+  const prefix = `elementor/${elementId}`;
+  const savedValue = retrievePreviousValueFromStorage({ path, elementId });
+  if (savedValue) {
+    return;
+  }
+  const key = `${prefix}:${path}`;
+  (0, import_session4.setSessionStorageItem)(key, value);
+}
+function retrievePreviousValueFromStorage({ path, elementId }) {
+  const prefix = `elementor/${elementId}`;
+  const key = `${prefix}:${path}`;
+  return (0, import_session4.getSessionStorageItem)(key) ?? null;
+}
+function removePreviousValueFromStorage({ path, elementId }) {
+  const prefix = `elementor/${elementId}`;
+  const key = `${prefix}:${path}`;
+  (0, import_session4.removeSessionStorageItem)(key);
+}
 
 // src/controls-registry/create-top-level-object-type.ts
 var createTopLevelObjectType = ({ schema }) => {
@@ -2061,10 +2117,10 @@ var SettingsField = ({ bind, children, propDisplayName }) => {
       elementSettingValues,
       dependenciesPerTargetMapping
     );
-    const settings = updateValues(newValue, dependents, propsSchema, elementSettingValues);
+    const settings = getUpdatedValues(newValue, dependents, propsSchema, elementSettingValues, elementId);
     undoableUpdateElementProp(settings);
   };
-  const isDisabled = (prop) => !(0, import_editor_props6.isDependencyMet)(prop?.dependencies, elementSettingValues);
+  const isDisabled = (prop) => !(0, import_editor_props6.isDependencyMet)(prop?.dependencies, elementSettingValues).isMet;
   return /* @__PURE__ */ React19.createElement(import_editor_controls4.PropProvider, { propType, value, setValue, isDisabled }, /* @__PURE__ */ React19.createElement(import_editor_controls4.PropKeyProvider, { bind }, children));
 };
 function useUndoableUpdateElementProp({
@@ -2204,7 +2260,7 @@ var SettingsTab = () => {
   const { elementType, element } = useElement();
   const settingsDefault = useDefaultPanelSettings();
   const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
-  return /* @__PURE__ */ React23.createElement(import_session4.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React23.createElement(SectionsList, null, elementType.controls.map(({ type, value }, index) => {
+  return /* @__PURE__ */ React23.createElement(import_session5.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React23.createElement(SectionsList, null, elementType.controls.map(({ type, value }, index) => {
     if (type === "control") {
       return /* @__PURE__ */ React23.createElement(Control2, { key: value.bind, control: value });
     }
@@ -2260,7 +2316,7 @@ var import_react37 = require("react");
 var import_editor_props15 = require("@elementor/editor-props");
 var import_editor_responsive3 = require("@elementor/editor-responsive");
 var import_locations3 = require("@elementor/locations");
-var import_session6 = require("@elementor/session");
+var import_session7 = require("@elementor/session");
 var import_ui43 = require("@elementor/ui");
 var import_i18n60 = require("@wordpress/i18n");
 
@@ -2986,7 +3042,7 @@ var ConditionalField = ({ children }) => {
   const { propType } = (0, import_editor_controls7.useBoundProp)();
   const depList = getDependencies(propType);
   const { values: depValues } = useStylesFields(depList);
-  const isHidden = !(0, import_editor_props11.isDependencyMet)(propType?.dependencies, depValues);
+  const isHidden = !(0, import_editor_props11.isDependencyMet)(propType?.dependencies, depValues).isMet;
   return isHidden ? null : children;
 };
 function getDependencies(propType) {
@@ -4110,7 +4166,7 @@ var shouldDisplayFlexFields = (display, local) => {
 
 // src/components/style-sections/position-section/position-section.tsx
 var React63 = __toESM(require("react"));
-var import_session5 = require("@elementor/session");
+var import_session6 = require("@elementor/session");
 var import_i18n39 = require("@wordpress/i18n");
 
 // src/components/style-sections/position-section/dimensions-field.tsx
@@ -4243,7 +4299,7 @@ var usePersistDimensions = () => {
   const { id: styleDefID, meta } = useStyle();
   const styleVariantPath = `styles/${styleDefID}/${meta.breakpoint || "desktop"}/${meta.state || "null"}`;
   const dimensionsPath = `${styleVariantPath}/dimensions`;
-  return (0, import_session5.useSessionStorage)(dimensionsPath);
+  return (0, import_session6.useSessionStorage)(dimensionsPath);
 };
 
 // src/components/style-sections/size-section/size-section.tsx
@@ -4830,7 +4886,7 @@ var StyleTab = () => {
       },
       setMetaState: setActiveStyleState
     },
-    /* @__PURE__ */ React88.createElement(import_session6.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React88.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React88.createElement(ClassesHeader, null, /* @__PURE__ */ React88.createElement(CssClassSelector, null), /* @__PURE__ */ React88.createElement(import_ui43.Divider, null)), /* @__PURE__ */ React88.createElement(SectionsList, null, /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React88.createElement(import_session7.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React88.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React88.createElement(ClassesHeader, null, /* @__PURE__ */ React88.createElement(CssClassSelector, null), /* @__PURE__ */ React88.createElement(import_ui43.Divider, null)), /* @__PURE__ */ React88.createElement(SectionsList, null, /* @__PURE__ */ React88.createElement(
       StyleTabSection,
       {
         section: {
@@ -5012,7 +5068,7 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = (0, import_i18n62.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React90.createElement(import_ui45.ErrorBoundary, { fallback: /* @__PURE__ */ React90.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React90.createElement(import_session7.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React90.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React90.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React90.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React90.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React90.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React90.createElement(EditingPanelTabs, null)))))))));
+  return /* @__PURE__ */ React90.createElement(import_ui45.ErrorBoundary, { fallback: /* @__PURE__ */ React90.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React90.createElement(import_session8.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ React90.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React90.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React90.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React90.createElement(import_icons24.AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React90.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React90.createElement(import_editor_controls53.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React90.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React90.createElement(EditingPanelTabs, null)))))))));
 };
 
 // src/panel.ts
@@ -5161,11 +5217,11 @@ var import_ui47 = require("@elementor/ui");
 var import_i18n64 = require("@wordpress/i18n");
 
 // src/hooks/use-persist-dynamic-value.ts
-var import_session8 = require("@elementor/session");
+var import_session9 = require("@elementor/session");
 var usePersistDynamicValue = (propKey) => {
   const { element } = useElement();
   const prefixedKey = `dynamic/non-dynamic-values-history/${element.id}/${propKey}`;
-  return (0, import_session8.useSessionStorage)(prefixedKey);
+  return (0, import_session9.useSessionStorage)(prefixedKey);
 };
 
 // src/dynamics/dynamic-control.tsx