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

package/dist/index.mjs

@@ -158,10 +158,12 @@ import {
   validateStyleLabel as validateStyleLabel2
 } from "@elementor/editor-styles-repository";
 import { InfoAlert, WarningInfotip } from "@elementor/editor-ui";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { ColorSwatchIcon, MapPinIcon } from "@elementor/icons";
 import { createLocation as createLocation2 } from "@elementor/locations";
 import {
   Box as Box2,
+  Button,
   Chip as Chip3,
   FormLabel,
   Link,
@@ -374,14 +376,20 @@ function useCreateOption(params) {
 
 // src/components/creatable-autocomplete/use-filter-options.ts
 import { createFilterOptions } from "@elementor/ui";
+var STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g;
+function normalizeClassSearch(value) {
+  return value.replace(STRIP_NON_CLASS_CHARS, "").toLowerCase();
+}
 function useFilterOptions(parameters) {
   const { options: options13, selected, onCreate, entityName } = parameters;
-  const filter = createFilterOptions();
+  const filter = createFilterOptions({
+    matchFrom: "any"
+  });
   const filterOptions = (optionList, params) => {
     const selectedValues = selected.map((option) => option.value);
     const filteredOptions = filter(
       optionList.filter((option) => !selectedValues.includes(option.value)),
-      params
+      { ...params, inputValue: normalizeClassSearch(params.inputValue) }
     );
     const isExisting = options13.some((option) => params.inputValue === option.label);
     const allowCreate = Boolean(onCreate) && params.inputValue !== "" && !selectedValues.includes(params.inputValue) && !isExisting;
@@ -1240,6 +1248,19 @@ var validateLabel = (newLabel) => {
 // src/components/css-classes/css-class-selector.tsx
 var ID = "elementor-css-class-selector";
 var TAGS_LIMIT = 50;
+var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
+var EVENT_TOGGLE_DESIGN_SYSTEM = "elementor/toggle-design-system";
+function openClassManagerPanel() {
+  if (isExperimentActive("e_editor_design_system_panel")) {
+    window.dispatchEvent(
+      new CustomEvent(EVENT_TOGGLE_DESIGN_SYSTEM, {
+        detail: { tab: "classes" }
+      })
+    );
+    return;
+  }
+  window.dispatchEvent(new CustomEvent(EVENT_OPEN_GLOBAL_CLASSES_MANAGER));
+}
 var EMPTY_OPTION = {
   label: __6("local", "elementor"),
   value: null,
@@ -1255,7 +1276,7 @@ function CssClassSelector() {
   const autocompleteRef = useRef(null);
   const [renameError, setRenameError] = useState4(null);
   const handleSelect = useHandleSelect();
-  const { create, validate, entityName } = useCreateAction();
+  const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction();
   const appliedOptions = useAppliedOptions(options13);
   const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION;
   const showPlaceholder = appliedOptions.every(({ fixed }) => fixed);
@@ -1284,7 +1305,7 @@ function CssClassSelector() {
         onCreate: create ?? void 0,
         validate: validate ?? void 0,
         limitTags: TAGS_LIMIT,
-        renderEmptyState: EmptyState,
+        renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ React11.createElement(LimitReachedEmptyState, { limitCount, onClear: props.onClear }) : EmptyState,
         getLimitTagsText: (more) => /* @__PURE__ */ React11.createElement(Chip3, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
         renderTags: (values, getTagProps) => values.map((value, index) => {
           const chipProps = getTagProps({ index });
@@ -1323,7 +1344,7 @@ function CssClassSelector() {
     )
   ), !canEdit && /* @__PURE__ */ React11.createElement(InfoAlert, { sx: { mt: 1 } }, __6("With your current role, you can use existing classes but can\u2019t modify them.", "elementor")));
 }
-var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
   Stack3,
   {
     gap: 1,
@@ -1334,9 +1355,54 @@ var EmptyState = ({ searchValue, onClear }) => /* @__PURE__ */ React11.createEle
   },
   /* @__PURE__ */ React11.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
   /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "subtitle2" }, __6("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React11.createElement("br", null), "\u201C", searchValue, "\u201D."),
-  /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", sx: { mb: 2 } }, __6("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), __6("you can only use existing classes.", "elementor")),
+  children,
   /* @__PURE__ */ React11.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __6("Clear & try again", "elementor"))
 ));
+var EmptyState = (props) => /* @__PURE__ */ React11.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", sx: { mb: 2 } }, __6("With your current role,", "elementor"), /* @__PURE__ */ React11.createElement("br", null), __6("you can only use existing classes.", "elementor")));
+var LimitReachedEmptyState = ({
+  limitCount,
+  onClear
+}) => /* @__PURE__ */ React11.createElement(Box2, { sx: { py: 4 } }, /* @__PURE__ */ React11.createElement(
+  Stack3,
+  {
+    gap: 1,
+    alignItems: "center",
+    color: "text.secondary",
+    justifyContent: "center",
+    sx: { px: 1, m: "auto", maxWidth: "260px" }
+  },
+  /* @__PURE__ */ React11.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)" }, fontSize: "large" }),
+  /* @__PURE__ */ React11.createElement(
+    Typography3,
+    { align: "center", variant: "subtitle2" },
+    /* translators: %s is the maximum number of classes */
+    __6("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))
+  ),
+  /* @__PURE__ */ React11.createElement(Typography3, { align: "center", variant: "caption", component: "div" }, __6("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ React11.createElement(
+    Link,
+    {
+      color: "inherit",
+      variant: "caption",
+      component: "button",
+      onClick: onClear,
+      sx: { verticalAlign: "baseline" }
+    },
+    __6("Clear", "elementor")
+  )),
+  /* @__PURE__ */ React11.createElement(
+    Button,
+    {
+      variant: "outlined",
+      color: "secondary",
+      size: "small",
+      onClick: () => {
+        openClassManagerPanel();
+        onClear();
+      }
+    },
+    __6("Class Manager", "elementor")
+  )
+));
 var updateClassByProvider = (provider, data) => {
   if (!provider) {
     return;
@@ -1379,6 +1445,11 @@ function useCreateAction() {
   if (!provider || !createAction) {
     return {};
   }
+  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
+  const validate = (newClassLabel, event) => validateStyleLabel2(newClassLabel, event);
+  if (hasReachedLimit(provider)) {
+    return { entityName, isAtLimit: true, limitCount: provider.limit, validate };
+  }
   const create = (classLabel) => {
     const { createdId } = createAction({ classLabel });
     trackStyles(provider.getKey() ?? "", "classCreated", {
@@ -1387,21 +1458,7 @@ function useCreateAction() {
       classId: createdId
     });
   };
-  const validate = (newClassLabel, event) => {
-    if (hasReachedLimit(provider)) {
-      return {
-        isValid: false,
-        /* translators: %s is the maximum number of classes */
-        errorMessage: __6(
-          "You\u2019ve reached the limit of %s classes. Please remove an existing one to create a new class.",
-          "elementor"
-        ).replace("%s", provider.limit.toString())
-      };
-    }
-    return validateStyleLabel2(newClassLabel, event);
-  };
-  const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0;
-  return { create, validate, entityName };
+  return { create, validate, entityName, isAtLimit: false };
 }
 function hasReachedLimit(provider) {
   return provider.actions.all().length >= provider.limit;
@@ -1832,7 +1889,7 @@ function EditorPanelErrorFallback() {
 import { Fragment as Fragment9 } from "react";
 import * as React86 from "react";
 import { getWidgetsCache as getWidgetsCache2 } from "@elementor/editor-elements";
-import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { Divider as Divider6, Stack as Stack13, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __60 } from "@wordpress/i18n";
 
@@ -1944,6 +2001,219 @@ var InteractionsTab = () => {
 import * as React23 from "react";
 import { SessionStorageProvider } from "@elementor/session";
 
+// src/utils/prop-dependency-utils.ts
+import {
+  extractValue,
+  isDependency,
+  isDependencyMet,
+  isOverridable,
+  isTransformable,
+  rewrapOverridableValue
+} from "@elementor/editor-props";
+import { getSessionStorageItem as getSessionStorageItem2, removeSessionStorageItem, setSessionStorageItem as setSessionStorageItem2 } from "@elementor/session";
+function getElementSettingsWithDefaults(propsSchema, elementSettings) {
+  const elementSettingsWithDefaults = { ...elementSettings };
+  Object.keys(propsSchema).forEach((key) => {
+    if (elementSettingsWithDefaults[key] === null && propsSchema[key].default !== null) {
+      elementSettingsWithDefaults[key] = propsSchema[key].default;
+    }
+  });
+  return elementSettingsWithDefaults;
+}
+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,
+    isDisabled: (prop) => !isDependencyMet(prop?.dependencies, settingsWithDefaults).isMet
+  };
+}
+function extractOrderedDependencies(dependenciesPerTargetMapping) {
+  return Object.values(dependenciesPerTargetMapping).flat().filter((dependent, index, self) => self.indexOf(dependent) === index);
+}
+function getUpdatedValues(values, dependencies, propsSchema, elementValues, elementId) {
+  if (!dependencies.length) {
+    return values;
+  }
+  return dependencies.reduce(
+    (newValues, dependency) => {
+      const path = dependency.split(".");
+      const combinedValues = { ...elementValues, ...newValues };
+      const propType = getPropType(propsSchema, combinedValues, path);
+      if (!propType) {
+        return newValues;
+      }
+      const testDependencies = {
+        previousValues: isDependencyMet(propType.dependencies, elementValues),
+        newValues: 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, newValue, combinedValues)
+        };
+      }
+      if (!testDependencies.previousValues.isMet) {
+        const savedValue = retrievePreviousValueFromStorage({ path: dependency, elementId });
+        const currentValue = extractValue(path, combinedValues, [], {
+          unwrapOverridableLeaf: false
+        });
+        removePreviousValueFromStorage({ path: dependency, elementId });
+        const restored = isCompatibleSavedValue(savedValue, currentValue) ? savedValue : propType.default;
+        return {
+          ...newValues,
+          ...updateValue(path, restored, combinedValues)
+        };
+      }
+      return newValues;
+    },
+    { ...values }
+  );
+}
+function getPropType(schema, elementValues, path) {
+  if (!path.length) {
+    return null;
+  }
+  const [basePropKey, ...keys] = path;
+  const baseProp = schema[basePropKey];
+  if (!baseProp) {
+    return null;
+  }
+  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 = extractValue(path.slice(0, index + 1), elementValues);
+      const type = value?.$$type ?? null;
+      return getPropType(
+        { [basePropKey]: prop.prop_types?.[type] },
+        elementValues,
+        path.slice(0, index + 2)
+      );
+    case "array":
+      return prop.item_prop_type;
+    case "object":
+      return prop.shape[key];
+  }
+  return prop[key];
+}
+function updateValue(path, value, values) {
+  const topPropKey = path[0];
+  const root = { ...values };
+  let carry = root;
+  for (let index = 0; index < path.length; index++) {
+    const key = path[index];
+    const isLeaf = index === path.length - 1;
+    if (isLeaf) {
+      carry[key] = mergeLeafValue(carry[key], value);
+      break;
+    }
+    const next = cloneDescent(carry[key]);
+    if (!next) {
+      break;
+    }
+    carry[key] = next.replacement;
+    carry = next.descended;
+  }
+  return { [topPropKey]: root[topPropKey] ?? null };
+}
+function cloneDescent(child) {
+  if (!child) {
+    return null;
+  }
+  if (isOverridable(child)) {
+    const origin = child.value.origin_value;
+    if (!origin || !isTransformable(origin)) {
+      return null;
+    }
+    const descended = { ...origin.value };
+    const replacement = {
+      ...child,
+      value: {
+        ...child.value,
+        origin_value: { ...origin, value: descended }
+      }
+    };
+    return { replacement, descended };
+  }
+  if (isTransformable(child)) {
+    const descended = { ...child.value };
+    const replacement = { ...child, value: descended };
+    return { replacement, descended };
+  }
+  return null;
+}
+function isCompatibleSavedValue(saved, current) {
+  if (!saved) {
+    return false;
+  }
+  return isOverridable(saved) === isOverridable(current);
+}
+function mergeLeafValue(existing, incoming) {
+  if (incoming === null) {
+    return null;
+  }
+  if (incoming && isOverridable(incoming)) {
+    return incoming;
+  }
+  if (existing && isOverridable(existing) && incoming) {
+    return rewrapOverridableValue(existing, incoming);
+  }
+  return incoming;
+}
+function handleUnmetCondition(props) {
+  const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
+  const termWithNewValue = failingDependencies.find(
+    (term) => "newValue" in term && !!term.newValue
+  );
+  const newValue = termWithNewValue?.newValue ?? null;
+  const currentValue = extractValue(dependency.split("."), elementValues, [], { unwrapOverridableLeaf: false }) ?? 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}`;
+  setSessionStorageItem2(key, value);
+}
+function retrievePreviousValueFromStorage({ path, elementId }) {
+  const prefix = `elementor/${elementId}`;
+  const key = `${prefix}:${path}`;
+  return getSessionStorageItem2(key) ?? null;
+}
+function removePreviousValueFromStorage({ path, elementId }) {
+  const prefix = `elementor/${elementId}`;
+  const key = `${prefix}:${path}`;
+  removeSessionStorageItem(key);
+}
+
 // src/components/section.tsx
 import * as React17 from "react";
 import { useId as useId2, useRef as useRef3 } from "react";
@@ -2187,219 +2457,6 @@ import { getElementLabel as getElementLabel3, getElementSettings, updateElementS
 import { undoable as undoable4 } from "@elementor/editor-v1-adapters";
 import { __ as __8 } from "@wordpress/i18n";
 
-// src/utils/prop-dependency-utils.ts
-import {
-  extractValue,
-  isDependency,
-  isDependencyMet,
-  isOverridable,
-  isTransformable,
-  rewrapOverridableValue
-} from "@elementor/editor-props";
-import { getSessionStorageItem as getSessionStorageItem2, removeSessionStorageItem, setSessionStorageItem as setSessionStorageItem2 } from "@elementor/session";
-function getElementSettingsWithDefaults(propsSchema, elementSettings) {
-  const elementSettingsWithDefaults = { ...elementSettings };
-  Object.keys(propsSchema).forEach((key) => {
-    if (elementSettingsWithDefaults[key] === null && propsSchema[key].default !== null) {
-      elementSettingsWithDefaults[key] = propsSchema[key].default;
-    }
-  });
-  return elementSettingsWithDefaults;
-}
-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,
-    isDisabled: (prop) => !isDependencyMet(prop?.dependencies, settingsWithDefaults).isMet
-  };
-}
-function extractOrderedDependencies(dependenciesPerTargetMapping) {
-  return Object.values(dependenciesPerTargetMapping).flat().filter((dependent, index, self) => self.indexOf(dependent) === index);
-}
-function getUpdatedValues(values, dependencies, propsSchema, elementValues, elementId) {
-  if (!dependencies.length) {
-    return values;
-  }
-  return dependencies.reduce(
-    (newValues, dependency) => {
-      const path = dependency.split(".");
-      const combinedValues = { ...elementValues, ...newValues };
-      const propType = getPropType(propsSchema, combinedValues, path);
-      if (!propType) {
-        return newValues;
-      }
-      const testDependencies = {
-        previousValues: isDependencyMet(propType.dependencies, elementValues),
-        newValues: 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, newValue, combinedValues)
-        };
-      }
-      if (!testDependencies.previousValues.isMet) {
-        const savedValue = retrievePreviousValueFromStorage({ path: dependency, elementId });
-        const currentValue = extractValue(path, combinedValues, [], {
-          unwrapOverridableLeaf: false
-        });
-        removePreviousValueFromStorage({ path: dependency, elementId });
-        const restored = isCompatibleSavedValue(savedValue, currentValue) ? savedValue : propType.default;
-        return {
-          ...newValues,
-          ...updateValue(path, restored, combinedValues)
-        };
-      }
-      return newValues;
-    },
-    { ...values }
-  );
-}
-function getPropType(schema, elementValues, path) {
-  if (!path.length) {
-    return null;
-  }
-  const [basePropKey, ...keys] = path;
-  const baseProp = schema[basePropKey];
-  if (!baseProp) {
-    return null;
-  }
-  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 = extractValue(path.slice(0, index + 1), elementValues);
-      const type = value?.$$type ?? null;
-      return getPropType(
-        { [basePropKey]: prop.prop_types?.[type] },
-        elementValues,
-        path.slice(0, index + 2)
-      );
-    case "array":
-      return prop.item_prop_type;
-    case "object":
-      return prop.shape[key];
-  }
-  return prop[key];
-}
-function updateValue(path, value, values) {
-  const topPropKey = path[0];
-  const root = { ...values };
-  let carry = root;
-  for (let index = 0; index < path.length; index++) {
-    const key = path[index];
-    const isLeaf = index === path.length - 1;
-    if (isLeaf) {
-      carry[key] = mergeLeafValue(carry[key], value);
-      break;
-    }
-    const next = cloneDescent(carry[key]);
-    if (!next) {
-      break;
-    }
-    carry[key] = next.replacement;
-    carry = next.descended;
-  }
-  return { [topPropKey]: root[topPropKey] ?? null };
-}
-function cloneDescent(child) {
-  if (!child) {
-    return null;
-  }
-  if (isOverridable(child)) {
-    const origin = child.value.origin_value;
-    if (!origin || !isTransformable(origin)) {
-      return null;
-    }
-    const descended = { ...origin.value };
-    const replacement = {
-      ...child,
-      value: {
-        ...child.value,
-        origin_value: { ...origin, value: descended }
-      }
-    };
-    return { replacement, descended };
-  }
-  if (isTransformable(child)) {
-    const descended = { ...child.value };
-    const replacement = { ...child, value: descended };
-    return { replacement, descended };
-  }
-  return null;
-}
-function isCompatibleSavedValue(saved, current) {
-  if (!saved) {
-    return false;
-  }
-  return isOverridable(saved) === isOverridable(current);
-}
-function mergeLeafValue(existing, incoming) {
-  if (incoming === null) {
-    return null;
-  }
-  if (incoming && isOverridable(incoming)) {
-    return incoming;
-  }
-  if (existing && isOverridable(existing) && incoming) {
-    return rewrapOverridableValue(existing, incoming);
-  }
-  return incoming;
-}
-function handleUnmetCondition(props) {
-  const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props;
-  const termWithNewValue = failingDependencies.find(
-    (term) => "newValue" in term && !!term.newValue
-  );
-  const newValue = termWithNewValue?.newValue ?? null;
-  const currentValue = extractValue(dependency.split("."), elementValues, [], { unwrapOverridableLeaf: false }) ?? 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}`;
-  setSessionStorageItem2(key, value);
-}
-function retrievePreviousValueFromStorage({ path, elementId }) {
-  const prefix = `elementor/${elementId}`;
-  const key = `${prefix}:${path}`;
-  return getSessionStorageItem2(key) ?? null;
-}
-function removePreviousValueFromStorage({ path, elementId }) {
-  const prefix = `elementor/${elementId}`;
-  const key = `${prefix}:${path}`;
-  removeSessionStorageItem(key);
-}
-
 // src/controls-registry/create-top-level-object-type.ts
 var createTopLevelObjectType = ({ schema }) => {
   const schemaPropType = {
@@ -2543,8 +2600,9 @@ function populateChildControlProps(props) {
 
 // src/components/settings-tab.tsx
 var SettingsTab = () => {
-  const { elementType, element } = useElement();
+  const { elementType, element, settings } = useElement();
   const settingsDefault = useDefaultPanelSettings();
+  const currentSettings = settings;
   const isDefaultExpanded = (sectionId) => settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId);
   return /* @__PURE__ */ React23.createElement(SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ React23.createElement(SectionsList, null, elementType.controls.map((control, index) => {
     if (isControl(control)) {
@@ -2552,6 +2610,15 @@ var 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 /* @__PURE__ */ React23.createElement(
         Section,
         {
@@ -2559,12 +2626,7 @@ var SettingsTab = () => {
           key: type + "." + index,
           defaultExpanded: isDefaultExpanded(value.label)
         },
-        value.items?.map((item) => {
-          if (isControl(item)) {
-            return /* @__PURE__ */ React23.createElement(SettingsControl, { key: getKey(item, element), control: item });
-          }
-          return null;
-        })
+        sectionItems
       );
     }
     return null;
@@ -2579,6 +2641,26 @@ function getKey(control, element) {
 function isControl(control) {
   return control.type === "control" || control.type === "element-control";
 }
+function renderSectionItems({
+  items: items3,
+  element,
+  propsSchema,
+  settings
+}) {
+  return items3?.flatMap((item) => {
+    if (!isControl(item)) {
+      return [];
+    }
+    if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings)) {
+      return [];
+    }
+    return [/* @__PURE__ */ React23.createElement(SettingsControl, { key: getKey(item, element), control: item })];
+  }) ?? [];
+}
+function isControlHiddenByDependencies(control, propsSchema, settings) {
+  const { isHidden } = extractDependencyEffect(control.value.bind, propsSchema, settings);
+  return isHidden;
+}
 
 // src/components/style-tab.tsx
 import * as React85 from "react";
@@ -3409,7 +3491,7 @@ var EffectsSection = () => {
 import * as React55 from "react";
 import { ControlFormLabel as ControlFormLabel2 } from "@elementor/editor-controls";
 import { useParentElement } from "@elementor/editor-elements";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
 import { __ as __33 } from "@wordpress/i18n";
 
 // src/hooks/use-computed-style.ts
@@ -3732,7 +3814,7 @@ var getOptions2 = (parentStyleDirection) => {
 import * as React44 from "react";
 import { useMemo as useMemo9 } from "react";
 import { ToggleControl as ToggleControl6 } from "@elementor/editor-controls";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import { __ as __22 } from "@wordpress/i18n";
 var DISPLAY_LABEL = __22("Display", "elementor");
 var displayFieldItems = [
@@ -3775,7 +3857,7 @@ var displayFieldItems = [
 ];
 var DisplayField = () => {
   const placeholder = useDisplayPlaceholderValue();
-  const isGridActive = isExperimentActive("e_css_grid");
+  const isGridActive = isExperimentActive2("e_css_grid");
   const items3 = useMemo9(
     () => isGridActive ? displayFieldItems : displayFieldItems.filter((item) => item.value !== "grid"),
     [isGridActive]
@@ -4428,7 +4510,7 @@ var LayoutSection = () => {
     history: { propDisplayName: DISPLAY_LABEL2 }
   });
   const displayPlaceholder = useDisplayPlaceholderValue();
-  const isGridExperimentActive = isExperimentActive2("e_css_grid");
+  const isGridExperimentActive = isExperimentActive3("e_css_grid");
   const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder);
   const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value);
   const { element } = useElement();
@@ -5420,7 +5502,7 @@ var PanelTabContent = () => {
   const { element } = useElement();
   const editorDefaults = useDefaultPanelSettings();
   const defaultComponentTab = editorDefaults.defaultTab;
-  const isInteractionsActive = isExperimentActive3("e_interactions");
+  const isInteractionsActive = isExperimentActive4("e_interactions");
   const isPromotedElement = !!getWidgetsCache2()?.[element.type]?.meta?.is_pro_promotion;
   const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab);
   const currentTab = isPromotedElement && storedTab === "settings" ? "style" : storedTab;