@elementor/editor-editing-panel 3.33.0-154 → 3.33.0-156

package/dist/index.js

@@ -5227,6 +5227,7 @@ var usePersistDynamicValue = (propKey) => {
 // src/dynamics/dynamic-control.tsx
 var React92 = __toESM(require("react"));
 var import_editor_controls56 = require("@elementor/editor-controls");
+var import_editor_props18 = require("@elementor/editor-props");
 var DynamicControl = ({ bind, children }) => {
   const { value, setValue } = (0, import_editor_controls56.useBoundProp)(dynamicPropTypeUtil);
   const { name = "", settings } = value ?? {};
@@ -5247,7 +5248,28 @@ var DynamicControl = ({ bind, children }) => {
     });
   };
   const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema });
-  return /* @__PURE__ */ React92.createElement(import_editor_controls56.PropProvider, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind }, children));
+  const defaults = React92.useMemo(() => {
+    const entries = Object.entries(dynamicTag.props_schema ?? {});
+    return entries.reduce((result, [key, prop]) => {
+      result[key] = prop?.default ?? null;
+      return result;
+    }, {});
+  }, [dynamicTag.props_schema]);
+  const effectiveSettings = { ...defaults, ...settings ?? {} };
+  const isHidden = !(0, import_editor_props18.isDependencyMet)(dynamicPropType?.dependencies, effectiveSettings);
+  if (isHidden) {
+    return null;
+  }
+  return /* @__PURE__ */ React92.createElement(
+    import_editor_controls56.PropProvider,
+    {
+      propType,
+      setValue: setDynamicValue,
+      value: { [bind]: dynamicValue },
+      isDisabled: (prop) => !(0, import_editor_props18.isDependencyMet)(prop?.dependencies, effectiveSettings)
+    },
+    /* @__PURE__ */ React92.createElement(import_editor_controls56.PropKeyProvider, { bind }, children)
+  );
 };
 
 // src/dynamics/components/dynamic-selection.tsx
@@ -5366,6 +5388,7 @@ var useFilteredOptions = (searchValue) => {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 var SIZE7 = "tiny";
+var tagsWithoutTabs = ["popup"];
 var DynamicSelectionControl = () => {
   const { setValue: setAnyValue } = (0, import_editor_controls58.useBoundProp)();
   const { bind, value } = (0, import_editor_controls58.useBoundProp)(dynamicPropTypeUtil);
@@ -5437,15 +5460,19 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
         onClose: popupState.close,
         icon: /* @__PURE__ */ React94.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE7 })
       }
-    ), /* @__PURE__ */ React94.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
+    ), /* @__PURE__ */ React94.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls, tagName: dynamicTag.name }))
   ));
 };
-var DynamicSettings = ({ controls }) => {
+var DynamicSettings = ({ controls, tagName }) => {
   const tabs = controls.filter(({ type }) => type === "section");
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui47.useTabs)(0);
   if (!tabs.length) {
     return null;
   }
+  if (tagsWithoutTabs.includes(tagName)) {
+    const singleTab = tabs[0];
+    return /* @__PURE__ */ React94.createElement(React94.Fragment, null, /* @__PURE__ */ React94.createElement(import_ui47.Divider, null), /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: singleTab.value.items }));
+  }
   return /* @__PURE__ */ React94.createElement(React94.Fragment, null, tabs.length > 1 && /* @__PURE__ */ React94.createElement(import_ui47.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React94.createElement(
     import_ui47.Tab,
     {
@@ -5462,12 +5489,7 @@ var DynamicSettings = ({ controls }) => {
         sx: { flexGrow: 1, py: 0, overflowY: "auto" },
         ...getTabPanelProps(index)
       },
-      /* @__PURE__ */ React94.createElement(import_ui47.Stack, { p: 2, gap: 2 }, value.items.map((item) => {
-        if (item.type === "control") {
-          return /* @__PURE__ */ React94.createElement(Control3, { key: item.value.bind, control: item.value });
-        }
-        return null;
-      }))
+      /* @__PURE__ */ React94.createElement(ControlsItemsStack, { items: value.items })
     );
   }));
 };
@@ -5476,7 +5498,14 @@ var LAYOUT_OVERRIDE_FIELDS = {
   action: "full",
   off_canvas: "full"
 };
+var DYNAMIC_TAG_LAYOUT_OVERRIDES = {
+  select: "full"
+};
 var getLayout = (control) => {
+  const dynamicOverride = DYNAMIC_TAG_LAYOUT_OVERRIDES[control.type];
+  if (dynamicOverride) {
+    return dynamicOverride;
+  }
   return LAYOUT_OVERRIDE_FIELDS[control.bind] ?? controlsRegistry.getLayout(control.type);
 };
 var Control3 = ({ control }) => {
@@ -5484,21 +5513,24 @@ var Control3 = ({ control }) => {
     return null;
   }
   const layout = getLayout(control);
-  return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(
-    import_ui47.Grid,
-    {
-      container: true,
-      gap: 0.75,
-      sx: layout === "two-columns" ? { display: "grid", gridTemplateColumns: "1fr 1fr" } : {}
-    },
-    control.label ? /* @__PURE__ */ React94.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null,
-    /* @__PURE__ */ React94.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: control.props }))
+  const shouldDisablePortal = control.type === "select";
+  const controlProps = shouldDisablePortal ? { ...control.props, MenuProps: { ...control.props?.MenuProps ?? {}, disablePortal: true } } : control.props;
+  const isSwitchControl = control.type === "switch";
+  const layoutStyleProps = layout === "two-columns" ? {
+    display: "grid",
+    gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr"
+  } : {};
+  return /* @__PURE__ */ React94.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React94.createElement(import_ui47.Grid, { container: true, gap: 0.75, sx: layoutStyleProps }, control.label ? /* @__PURE__ */ React94.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(import_editor_controls58.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ React94.createElement(import_ui47.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(Control, { type: control.type, props: controlProps }))));
+};
+function ControlsItemsStack({ items: items3 }) {
+  return /* @__PURE__ */ React94.createElement(import_ui47.Stack, { p: 2, gap: 2, sx: { overflowY: "auto" } }, items3.map(
+    (item) => item.type === "control" ? /* @__PURE__ */ React94.createElement(Control3, { key: item.value.bind, control: item.value }) : null
   ));
-};
+}
 
 // src/dynamics/dynamic-transformer.ts
 var import_editor_canvas4 = require("@elementor/editor-canvas");
-var import_editor_props18 = require("@elementor/editor-props");
+var import_editor_props19 = require("@elementor/editor-props");
 
 // src/dynamics/errors.ts
 var import_utils10 = require("@elementor/utils");
@@ -5516,7 +5548,7 @@ var dynamicTransformer = (0, import_editor_canvas4.createTransformer)((value) =>
 });
 function simpleTransform(props) {
   const transformed = Object.entries(props).map(([settingKey, settingValue]) => {
-    const value = (0, import_editor_props18.isTransformable)(settingValue) ? settingValue.value : settingValue;
+    const value = (0, import_editor_props19.isTransformable)(settingValue) ? settingValue.value : settingValue;
     return [settingKey, value];
   });
   return Object.fromEntries(transformed);