@elementor/editor-editing-panel 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 
 // src/control-replacement.tsx
 import { createControlReplacement } from "@elementor/editor-controls";
@@ -290,22 +290,35 @@ var getGridLayout = (layout) => ({
 
 // src/controls-registry/settings-field.tsx
 import * as React9 from "react";
-import { BoundPropProvider } from "@elementor/editor-controls";
+import { PropKeyProvider, PropProvider } from "@elementor/editor-controls";
 import { updateSettings, useElementSetting } from "@elementor/editor-elements";
+
+// src/controls-registry/create-top-level-object-type.ts
+var createTopLevelOjectType = ({ schema }) => {
+  const schemaPropType = {
+    key: "",
+    kind: "object",
+    meta: {},
+    settings: {},
+    default: null,
+    shape: schema
+  };
+  return schemaPropType;
+};
+
+// src/controls-registry/settings-field.tsx
 var SettingsField = ({ bind, children }) => {
   const { element, elementType } = useElement();
-  const defaultValue = elementType.propsSchema[bind]?.default;
   const settingsValue = useElementSetting(element.id, bind);
-  const value = settingsValue ?? defaultValue ?? null;
+  const value = { [bind]: settingsValue };
+  const propType = createTopLevelOjectType({ schema: elementType.propsSchema });
   const setValue = (newValue) => {
     updateSettings({
       id: element.id,
-      props: {
-        [bind]: newValue
-      }
+      props: { ...newValue }
     });
   };
-  return /* @__PURE__ */ React9.createElement(BoundPropProvider, { setValue, value, bind }, children);
+  return /* @__PURE__ */ React9.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React9.createElement(PropKeyProvider, { bind }, children));
 };
 
 // src/components/section.tsx
@@ -377,7 +390,7 @@ var Control2 = ({ control }) => {
 
 // src/components/style-tab.tsx
 import * as React59 from "react";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { useElementSetting as useElementSetting3, useElementStyles } from "@elementor/editor-elements";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { Divider as Divider7 } from "@elementor/ui";
@@ -400,14 +413,18 @@ function useClassesProp() {
 
 // src/components/css-class-selector.tsx
 import * as React16 from "react";
-import { useId as useId3, useRef as useRef2 } from "react";
-import { updateSettings as updateSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
+import { useId as useId4, useRef as useRef2 } from "react";
+import { getElementSetting, updateSettings as updateSettings2, useElementSetting as useElementSetting2 } from "@elementor/editor-elements";
 import { classesPropTypeUtil } from "@elementor/editor-props";
-import { ELEMENTS_STYLES_PROVIDER_KEY, useAllStylesByProvider } from "@elementor/editor-styles-repository";
+import {
+  ELEMENTS_STYLES_PROVIDER_KEY,
+  useAllStylesByProvider,
+  useCreateActionsByProvider
+} from "@elementor/editor-styles-repository";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
   bindTrigger,
-  Chip as Chip2,
+  Chip,
   Stack as Stack3,
   Typography as Typography2,
   UnstableChipGroup,
@@ -450,79 +467,25 @@ var Content = React14.forwardRef(({ maxWidth, ...tooltipProps }, ref) => /* @__P
   }
 ));
 
-// src/components/multi-combobox/multi-combobox.tsx
+// src/components/multi-combobox.tsx
 import * as React15 from "react";
+import { useId as useId3, useState as useState3 } from "react";
 import {
   Autocomplete,
   Box as Box5,
-  Chip,
+  createFilterOptions,
   styled as styled4,
   TextField
 } from "@elementor/ui";
-
-// src/components/multi-combobox/use-combobox-actions.ts
-import { createFilterOptions } from "@elementor/ui";
-var useComboboxActions = (applied, actions, optionsLabel, onSelect) => ({
-  action: {
-    is: (opt) => typeof opt !== "string" && "action" in opt,
-    getLabel: (option) => option.action.getLabel(option.label),
-    groupBy: (option) => option.action.groupLabel,
-    onChange: ({ action, label }) => action?.apply(label),
-    getFilteredActions: (optionList, params) => {
-      const actionGroups = Object.values(actions);
-      return actionGroups.reduce((groups, group) => {
-        const actionOptions = group.actions.reduce((groupActions, action) => {
-          const shouldShowAction = action.condition(optionList, params.inputValue);
-          if (shouldShowAction) {
-            const actionOption = createActionOption(group.label, action, params.inputValue);
-            groupActions.unshift(actionOption);
-          }
-          return groupActions;
-        }, []);
-        return [...groups, ...actionOptions];
-      }, []);
-    }
-  },
-  option: {
-    is: (opt) => typeof opt !== "string" && !("action" in opt),
-    getLabel: (option) => option.label,
-    groupBy: () => optionsLabel ?? "",
-    onChange: (optionValues) => onSelect?.(optionValues),
-    getFilteredOptions: (optionList, params) => {
-      const appliedValues = applied.map((option) => option.value);
-      const optionsWithoutApplied = optionList.filter((option) => !appliedValues.includes(option.value));
-      return filter(optionsWithoutApplied, params);
-    }
-  }
-});
-var filter = createFilterOptions();
-var createActionOption = (groupLabel, action, inputValue) => ({
-  value: "",
-  label: inputValue,
-  action: {
-    groupLabel,
-    apply: action.apply,
-    getLabel: action.getLabel
-  }
-});
-
-// src/components/multi-combobox/multi-combobox.tsx
-var MultiCombobox = ({
-  actions = {},
+function MultiCombobox({
+  actions = [],
   selected,
   options: options10,
-  optionsLabel,
   onSelect,
-  onCreate,
   ...props
-}) => {
-  const { action: actionProps, option: optionProps } = useComboboxActions(
-    selected,
-    actions,
-    // TODO: make the group mechanism more generic, allow passing list of groups.
-    optionsLabel,
-    onSelect
-  );
+}) {
+  const filter = useFilterOptions();
+  const { run, loading } = useActionRunner();
   return /* @__PURE__ */ React15.createElement(
     Autocomplete,
     {
@@ -533,57 +496,94 @@ var MultiCombobox = ({
       selectOnFocus: true,
       disableClearable: true,
       handleHomeEndKeys: true,
+      disabled: loading,
       value: selected,
       options: options10,
-      renderGroup,
+      renderGroup: (params) => /* @__PURE__ */ React15.createElement(Group, { ...params }),
       renderInput: (params) => /* @__PURE__ */ React15.createElement(TextField, { ...params }),
-      getLimitTagsText: (more) => /* @__PURE__ */ React15.createElement(Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
-      onChange: (_, selectedOrTypedValue, reason) => {
+      onChange: (_, selectedOrInputValue, reason) => {
+        const inputValue = selectedOrInputValue.find((option) => typeof option === "string");
+        const optionsAndActions = selectedOrInputValue.filter((option) => typeof option !== "string");
         if (reason === "createOption") {
-          const typedValue = selectedOrTypedValue.find((option) => typeof option === "string");
-          return typedValue && onCreate?.(typedValue);
+          const [firstAction] = filterActions(actions, { options: options10, inputValue: inputValue ?? "" });
+          if (firstAction) {
+            return run(firstAction.apply, firstAction.value);
+          }
         }
-        const action = selectedOrTypedValue.find((value) => actionProps.is(value));
+        const action = optionsAndActions.find((value) => isAction(value));
         if (reason === "selectOption" && action) {
-          return actionProps.onChange(action);
+          return run(action.apply, action.value);
         }
-        const selectedValues = selectedOrTypedValue.filter((v) => typeof v !== "string");
-        const fixedValues = options10.filter((option) => option.fixed);
-        optionProps.onChange([.../* @__PURE__ */ new Set([...fixedValues, ...selectedValues])]);
+        const fixedValues = options10.filter((option) => !!option.fixed);
+        onSelect?.([.../* @__PURE__ */ new Set([...optionsAndActions, ...fixedValues])]);
       },
-      getOptionLabel: (option) => {
-        if (optionProps.is(option)) {
-          return optionProps.getLabel(option);
+      getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+      getOptionKey: (option) => {
+        if (typeof option === "string") {
+          return option;
         }
-        if (actionProps.is(option)) {
-          return actionProps.getLabel(option);
-        }
-        return "";
+        return option.key ?? option.value;
       },
       filterOptions: (optionList, params) => {
-        const filteredOptions = optionProps.getFilteredOptions(optionList, params);
-        const actionOptions = actionProps.getFilteredActions(optionList, params);
-        return [...actionOptions, ...filteredOptions];
+        const selectedValues = selected.map((option) => option.value);
+        return [
+          ...filterActions(actions, { options: optionList, inputValue: params.inputValue }),
+          ...filter(
+            optionList.filter((option) => !selectedValues.includes(option.value)),
+            params
+          )
+        ];
       },
-      groupBy: (option) => (optionProps.is(option) ? optionProps.groupBy() : actionProps.groupBy(option)) ?? ""
+      groupBy: (option) => option.group ?? ""
     }
   );
+}
+var Group = (params) => {
+  const id = `combobox-group-${useId3().replace(/:/g, "_")}`;
+  return /* @__PURE__ */ React15.createElement(StyledGroup, { role: "group", "aria-labelledby": id }, /* @__PURE__ */ React15.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ React15.createElement(StyledGroupItems, { role: "listbox" }, params.children));
 };
-var renderGroup = (params) => /* @__PURE__ */ React15.createElement(Group, { key: params.key }, /* @__PURE__ */ React15.createElement(GroupHeader, null, params.group), /* @__PURE__ */ React15.createElement(GroupItems, null, params.children));
-var Group = styled4("li")`
+var StyledGroup = styled4("li")`
 	&:not( :last-of-type ) {
 		border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 	}
 `;
-var GroupHeader = styled4(Box5)(({ theme }) => ({
+var StyledGroupHeader = styled4(Box5)(({ theme }) => ({
   position: "sticky",
   top: "-8px",
   padding: theme.spacing(1, 2),
   color: theme.palette.text.tertiary
 }));
-var GroupItems = styled4("ul")`
+var StyledGroupItems = styled4("ul")`
 	padding: 0;
 `;
+function useFilterOptions() {
+  return useState3(() => createFilterOptions())[0];
+}
+function useActionRunner() {
+  const [loading, setLoading] = useState3(false);
+  const run = async (apply, value) => {
+    setLoading(true);
+    try {
+      await apply(value);
+    } catch {
+    }
+    setLoading(false);
+  };
+  return { run, loading };
+}
+function filterActions(actions, { options: options10, inputValue }) {
+  return actions.filter((action) => action.condition(options10, inputValue)).map((action, index) => ({
+    label: action.label(inputValue),
+    value: inputValue,
+    group: action.group,
+    apply: action.apply,
+    condition: action.condition,
+    key: index.toString()
+  }));
+}
+function isAction(option) {
+  return "apply" in option && "condition" in option;
+}
 
 // src/components/css-class-selector.tsx
 var ID = "elementor-css-class-selector";
@@ -597,8 +597,9 @@ var EMPTY_OPTION = {
 };
 function CssClassSelector() {
   const options10 = useOptions();
-  const [appliedIds, setAppliedIds] = useAppliedClassesIds();
+  const { value: appliedIds, setValue: setAppliedIds, pushValue: pushAppliedId } = useAppliedClassesIds();
   const { id: activeId, setId: setActiveId } = useStyle();
+  const actions = useCreateActions({ pushAppliedId, setActiveId });
   const handleApply = useHandleApply(appliedIds, setAppliedIds);
   const handleActivate = ({ value }) => setActiveId(value);
   const applied = useAppliedOptions(options10, appliedIds);
@@ -612,7 +613,8 @@ function CssClassSelector() {
       selected: applied,
       onSelect: handleApply,
       limitTags: TAGS_LIMIT,
-      optionsLabel: __2("Global CSS Classes", "elementor"),
+      actions,
+      getLimitTagsText: (more) => /* @__PURE__ */ React16.createElement(Chip, { size: "tiny", variant: "standard", label: `+${more}`, clickable: true }),
       renderTags: (values, getTagProps) => values.map((value, index) => {
         const chipProps = getTagProps({ index });
         const isActive = value.value === active?.value;
@@ -635,15 +637,15 @@ function CssClassSelector() {
 }
 function CssClassItem({ id, label, isActive, isGlobal, color, chipProps, onClickActive }) {
   const { meta } = useStyle();
-  const popupId = useId3().replace(/:/g, "_");
+  const popupId = useId4().replace(/:/g, "_");
   const popupState = usePopupState2({ variant: "popover", popupId });
   const chipRef = useRef2(null);
   const { onDelete, ...chipGroupProps } = chipProps;
   return /* @__PURE__ */ React16.createElement(CssClassItemProvider, { styleId: id, isActive, isGlobal }, /* @__PURE__ */ React16.createElement(UnstableChipGroup, { ref: chipRef, ...chipGroupProps, "aria-label": `Edit ${label}`, role: "group" }, /* @__PURE__ */ React16.createElement(
-    Chip2,
+    Chip,
     {
       key: chipProps.key,
-      size: "small",
+      size: "tiny",
       label: /* @__PURE__ */ React16.createElement(ConditionalTooltipWrapper, { maxWidth: "10ch", title: label }),
       variant: isActive && !meta.state ? "filled" : "standard",
       color,
@@ -651,10 +653,10 @@ function CssClassItem({ id, label, isActive, isGlobal, color, chipProps, onClick
       "aria-pressed": isActive
     }
   ), /* @__PURE__ */ React16.createElement(
-    Chip2,
+    Chip,
     {
       key: `${chipProps.key}-menu`,
-      size: "small",
+      size: "tiny",
       label: /* @__PURE__ */ React16.createElement(Stack3, { direction: "row", gap: 0.5, alignItems: "center" }, isActive && meta.state && /* @__PURE__ */ React16.createElement(Typography2, { variant: "inherit" }, meta.state), /* @__PURE__ */ React16.createElement(DotsVerticalIcon, { fontSize: "inherit" })),
       variant: "filled",
       color,
@@ -665,20 +667,50 @@ function CssClassItem({ id, label, isActive, isGlobal, color, chipProps, onClick
 }
 function useOptions() {
   const { element } = useElement();
-  return useAllStylesByProvider({ elementId: element.id }).flatMap(([providerKey, styleDefs]) => {
-    const isElements = providerKey === ELEMENTS_STYLES_PROVIDER_KEY;
-    if (isElements && styleDefs.length === 0) {
-      return [EMPTY_OPTION];
+  return useAllStylesByProvider({ elementId: element.id }).flatMap(
+    ([provider, styleDefs]) => {
+      const isElements = provider.key === ELEMENTS_STYLES_PROVIDER_KEY;
+      if (isElements && styleDefs.length === 0) {
+        return [EMPTY_OPTION];
+      }
+      return styleDefs.map((styleDef) => {
+        return {
+          label: styleDef.label,
+          value: styleDef.id,
+          fixed: isElements,
+          color: isElements ? "primary" : "global",
+          provider: provider.key,
+          group: provider.labels?.plural
+        };
+      });
     }
-    return styleDefs.map((styleDef) => {
-      return {
-        label: styleDef.label,
-        value: styleDef.id,
-        fixed: isElements,
-        color: isElements ? "primary" : "global",
-        provider: providerKey
-      };
-    });
+  );
+}
+function useCreateActions({
+  pushAppliedId,
+  setActiveId
+}) {
+  return useCreateActionsByProvider().map(([provider, create]) => {
+    return {
+      // translators: %s is the label of the new class.
+      label: (value) => __2('Create new "%s"', "elementor").replace("%s", value),
+      apply: async (value) => {
+        const created = await create({ label: value });
+        if (!created) {
+          return;
+        }
+        pushAppliedId(created.id);
+        setActiveId(created.id);
+      },
+      condition: (options10, inputValue) => {
+        const isUniqueLabel = !options10.some(
+          (option) => option.label.toLowerCase() === inputValue.toLowerCase()
+        );
+        return !!inputValue && isUniqueLabel;
+      },
+      // translators: %s is the singular label of css class provider (e.g "Global CSS Class").
+      group: __2("Create New %s", "elementor").replace("%s", provider.labels?.singular ?? "")
+    };
   });
 }
 function useAppliedOptions(options10, appliedIds) {
@@ -703,7 +735,15 @@ function useAppliedClassesIds() {
       }
     });
   };
-  return [value, setValue];
+  const pushValue = (id) => {
+    const ids = getElementSetting(element.id, currentClassesProp)?.value || [];
+    setValue([...ids, id]);
+  };
+  return {
+    value,
+    setValue,
+    pushValue
+  };
 }
 function useHandleApply(appliedIds, setAppliedIds) {
   const { id: activeId, setId: setActiveId } = useStyle();
@@ -732,7 +772,8 @@ import { BackgroundControl } from "@elementor/editor-controls";
 
 // src/controls-registry/styles-field.tsx
 import * as React17 from "react";
-import { BoundPropProvider as BoundPropProvider2 } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider2, PropProvider as PropProvider2 } from "@elementor/editor-controls";
+import { getStylesSchema } from "@elementor/editor-styles";
 
 // src/hooks/use-styles-fields.ts
 import { updateStyle, useElementStyleProps } from "@elementor/editor-elements";
@@ -775,7 +816,13 @@ function useStylesField(propName) {
 // src/controls-registry/styles-field.tsx
 var StylesField = ({ bind, children }) => {
   const [value, setValue] = useStylesField(bind);
-  return /* @__PURE__ */ React17.createElement(BoundPropProvider2, { setValue, value, bind }, children);
+  const stylesSchema = getStylesSchema();
+  const propType = createTopLevelOjectType({ schema: stylesSchema });
+  const values = { [bind]: value };
+  const setValues = (newValue) => {
+    setValue(newValue[bind]);
+  };
+  return /* @__PURE__ */ React17.createElement(PropProvider2, { propType, value: values, setValue: setValues }, /* @__PURE__ */ React17.createElement(PropKeyProvider2, { bind }, children));
 };
 
 // src/components/style-sections/background-section/background-section.tsx
@@ -882,11 +929,7 @@ var BorderWidthField = () => {
 };
 
 // src/components/style-sections/border-section/border-field.tsx
-var initialSize = { $$type: "size", value: { size: 1, unit: "px" } };
-var initialBorderWidth = {
-  $$type: "border-width",
-  value: { top: initialSize, right: initialSize, bottom: initialSize, left: initialSize }
-};
+var initialBorderWidth = { $$type: "size", value: { size: 1, unit: "px" } };
 var initialBorderColor = { $$type: "color", value: "#000000" };
 var initialBorderStyle = "solid";
 var BorderField = () => {
@@ -1212,7 +1255,7 @@ var FlexDirectionField = () => {
 
 // src/components/style-sections/layout-section/flex-order-field.tsx
 import * as React32 from "react";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import {
   ControlLabel as ControlLabel9,
   ControlToggleButtonGroup,
@@ -1252,7 +1295,7 @@ var items = [
 ];
 var FlexOrderField = () => {
   const { isSiteRtl } = useDirection(), [order, setOrder] = useStylesField("order");
-  const [groupControlValue, setGroupControlValue] = useState3(getGroupControlValue(order?.value || null));
+  const [groupControlValue, setGroupControlValue] = useState4(getGroupControlValue(order?.value || null));
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -1489,11 +1532,11 @@ import * as React41 from "react";
 import { Stack as Stack14 } from "@elementor/ui";
 
 // src/hooks/use-session-storage.ts
-import { useEffect as useEffect2, useState as useState5 } from "react";
+import { useEffect as useEffect2, useState as useState6 } from "react";
 import { getSessionStorageItem, removeSessionStorageItem, setSessionStorageItem } from "@elementor/utils";
 var useSessionStorage = (key) => {
   const prefixedKey = `elementor/${key}`;
-  const [value, setValue] = useState5();
+  const [value, setValue] = useState6();
   useEffect2(() => {
     return subscribeToSessionStorage(prefixedKey, (newValue) => {
       setValue(newValue ?? null);
@@ -1553,7 +1596,8 @@ var positionOptions = [
   { label: __20("Static", "elementor"), value: "static" },
   { label: __20("Relative", "elementor"), value: "relative" },
   { label: __20("Absolute", "elementor"), value: "absolute" },
-  { label: __20("Fixed", "elementor"), value: "fixed" }
+  { label: __20("Fixed", "elementor"), value: "fixed" },
+  { label: __20("Sticky", "elementor"), value: "sticky" }
 ];
 var PositionField = ({ onChange }) => {
   return /* @__PURE__ */ React39.createElement(StylesField, { bind: "position" }, /* @__PURE__ */ React39.createElement(Grid10, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React39.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlLabel15, null, __20("Position", "elementor"))), /* @__PURE__ */ React39.createElement(Grid10, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(SelectControl3, { options: positionOptions, onChange }))));
@@ -1665,11 +1709,11 @@ import { Divider as Divider6, Stack as Stack18 } from "@elementor/ui";
 
 // src/components/collapsible-content.tsx
 import * as React45 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Button, Collapse as Collapse3, Stack as Stack17 } from "@elementor/ui";
 import { __ as __25 } from "@wordpress/i18n";
 var CollapsibleContent = ({ children, defaultOpen = false }) => {
-  const [open, setOpen] = useState6(defaultOpen);
+  const [open, setOpen] = useState7(defaultOpen);
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
@@ -1990,7 +2034,7 @@ var CLASSES_PROP_KEY = "classes";
 var StyleTab = () => {
   const currentClassesProp = useCurrentClassesProp();
   const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp);
-  const [activeStyleState, setActiveStyleState] = useState7(null);
+  const [activeStyleState, setActiveStyleState] = useState8(null);
   const breakpoint = useActiveBreakpoint();
   return /* @__PURE__ */ React59.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ React59.createElement(
     StyleProvider,
@@ -2009,7 +2053,7 @@ var StyleTab = () => {
   ));
 };
 function useActiveStyleDefId(currentClassesProp) {
-  const [activeStyledDefId, setActiveStyledDefId] = useState7(null);
+  const [activeStyledDefId, setActiveStyledDefId] = useState8(null);
   const fallback = useFirstElementStyleDef(currentClassesProp);
   return [activeStyledDefId || fallback?.id || null, setActiveStyledDefId];
 }
@@ -2022,7 +2066,7 @@ function useFirstElementStyleDef(currentClassesProp) {
 function useCurrentClassesProp() {
   const { elementType } = useElement();
   const prop = Object.entries(elementType.propsSchema).find(
-    ([, propType]) => propType.kind === "array" && propType.key === CLASSES_PROP_KEY
+    ([, propType]) => propType.kind === "plain" && propType.key === CLASSES_PROP_KEY
   );
   if (!prop) {
     throw new Error("Element does not have a classes prop");
@@ -2134,8 +2178,8 @@ function registerGlobalClassItems() {
 
 // src/dynamics/components/dynamic-selection-control.tsx
 import * as React64 from "react";
-import { useId as useId4 } from "react";
-import { ControlLabel as ControlLabel30, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { useId as useId5 } from "react";
+import { ControlLabel as ControlLabel30, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SettingsIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
@@ -2165,13 +2209,14 @@ var usePersistDynamicValue = (propKey) => {
 
 // src/dynamics/dynamic-control.tsx
 import * as React62 from "react";
-import { BoundPropProvider as BoundPropProvider3, useBoundProp } from "@elementor/editor-controls";
+import { PropKeyProvider as PropKeyProvider3, PropProvider as PropProvider3, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 
 // src/dynamics/hooks/use-dynamic-tag.ts
 import { useMemo as useMemo3 } from "react";
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
 import { useMemo as useMemo2 } from "react";
+import { useBoundProp } from "@elementor/editor-controls";
 
 // src/dynamics/sync/get-elementor-config.ts
 var getElementorConfig2 = () => {
@@ -2213,15 +2258,14 @@ var dynamicPropTypeUtil = createPropUtils(
   DYNAMIC_PROP_TYPE_KEY,
   z.strictObject({
     name: z.string(),
-    settings: z.record(z.any()).optional()
+    settings: z.any().optional()
   })
 );
 
 // src/dynamics/hooks/use-prop-dynamic-tags.ts
-var usePropDynamicTags = (propName) => {
+var usePropDynamicTags = () => {
   let categories = [];
-  const { elementType } = useElement();
-  const propType = elementType.propsSchema?.[propName];
+  const { propType } = useBoundProp();
   if (propType) {
     const propDynamicType = getDynamicPropType(propType);
     categories = propDynamicType?.settings.categories || [];
@@ -2240,37 +2284,39 @@ var getDynamicTagsByCategories = (categories) => {
 };
 
 // src/dynamics/hooks/use-dynamic-tag.ts
-var useDynamicTag = (propName, tagName) => {
-  const dynamicTags = usePropDynamicTags(propName);
+var useDynamicTag = (tagName) => {
+  const dynamicTags = usePropDynamicTags();
   return useMemo3(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]);
 };
 
 // src/dynamics/dynamic-control.tsx
 var DynamicControl = ({ bind, children }) => {
-  const { value, setValue, bind: propName } = useBoundProp(dynamicPropTypeUtil);
+  const { value, setValue } = useBoundProp2(dynamicPropTypeUtil);
   const { name = "", settings } = value ?? {};
-  const dynamicTag = useDynamicTag(propName, name);
+  const dynamicTag = useDynamicTag(name);
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${name} not found`);
   }
-  const defaultValue = dynamicTag.props_schema[bind]?.default;
+  const dynamicPropType = dynamicTag.props_schema[bind];
+  const defaultValue = dynamicPropType?.default;
   const dynamicValue = settings?.[bind] ?? defaultValue;
-  const setDynamicValue = (newValue) => {
+  const setDynamicValue = (newValues) => {
     setValue({
       name,
       settings: {
         ...settings,
-        [bind]: newValue
+        ...newValues
       }
     });
   };
-  return /* @__PURE__ */ React62.createElement(BoundPropProvider3, { setValue: setDynamicValue, value: dynamicValue, bind }, children);
+  const propType = createTopLevelOjectType({ schema: dynamicTag.props_schema });
+  return /* @__PURE__ */ React62.createElement(PropProvider3, { propType, setValue: setDynamicValue, value: { [bind]: dynamicValue } }, /* @__PURE__ */ React62.createElement(PropKeyProvider3, { bind }, children));
 };
 
 // src/dynamics/components/dynamic-selection.tsx
 import * as React63 from "react";
-import { Fragment as Fragment8, useState as useState8 } from "react";
-import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { Fragment as Fragment8, useState as useState9 } from "react";
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { PhotoIcon, SearchIcon } from "@elementor/icons";
 import {
   Box as Box6,
@@ -2287,13 +2333,13 @@ import {
 import { __ as __41 } from "@wordpress/i18n";
 var SIZE3 = "tiny";
 var DynamicSelection = ({ onSelect }) => {
-  const [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const { groups: dynamicGroups } = getAtomicDynamicTags() || {};
-  const { value: anyValue } = useBoundProp2();
-  const { bind, value: dynamicValue, setValue } = useBoundProp2(dynamicPropTypeUtil);
+  const { value: anyValue } = useBoundProp3();
+  const { bind, value: dynamicValue, setValue } = useBoundProp3(dynamicPropTypeUtil);
   const [, updatePropValueHistory] = usePersistDynamicValue(bind);
   const isCurrentValueDynamic = !!dynamicValue;
-  const options10 = useFilteredOptions(bind, searchValue);
+  const options10 = useFilteredOptions(searchValue);
   const handleSearch = (event) => {
     setSearchValue(event.target.value);
   };
@@ -2340,8 +2386,8 @@ var DynamicSelection = ({ onSelect }) => {
     __41("Clear the filters", "elementor")
   ), "\xA0", __41("and try again.", "elementor")))));
 };
-var useFilteredOptions = (bind, searchValue) => {
-  const dynamicTags = usePropDynamicTags(bind);
+var useFilteredOptions = (searchValue) => {
+  const dynamicTags = usePropDynamicTags();
   const options10 = dynamicTags.reduce((categories, { name, label, group }) => {
     const isVisible = label.toLowerCase().includes(searchValue.trim().toLowerCase());
     if (!isVisible) {
@@ -2359,13 +2405,13 @@ var useFilteredOptions = (bind, searchValue) => {
 // src/dynamics/components/dynamic-selection-control.tsx
 var SIZE4 = "tiny";
 var DynamicSelectionControl = () => {
-  const { setValue: setAnyValue } = useBoundProp3();
-  const { bind, value } = useBoundProp3(dynamicPropTypeUtil);
+  const { setValue: setAnyValue } = useBoundProp4();
+  const { bind, value } = useBoundProp4(dynamicPropTypeUtil);
   const [propValueFromHistory] = usePersistDynamicValue(bind);
   const { name: tagName = "" } = value;
-  const selectionPopoverId = useId4();
+  const selectionPopoverId = useId5();
   const selectionPopoverState = usePopupState3({ variant: "popover", popupId: selectionPopoverId });
-  const dynamicTag = useDynamicTag(bind, tagName);
+  const dynamicTag = useDynamicTag(tagName);
   const removeDynamicTag = () => {
     setAnyValue(propValueFromHistory ?? null);
   };
@@ -2402,7 +2448,7 @@ var DynamicSelectionControl = () => {
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
-  const popupId = useId4();
+  const popupId = useId5();
   const settingsPopupState = usePopupState3({ variant: "popover", popupId });
   const hasDynamicSettings = !!dynamicTag.atomic_controls.length;
   if (!hasDynamicSettings) {
@@ -2450,13 +2496,11 @@ var Control3 = ({ control }) => {
 
 // src/dynamics/hooks/use-prop-dynamic-action.tsx
 import * as React65 from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { DatabaseIcon as DatabaseIcon2 } from "@elementor/icons";
 import { __ as __43 } from "@wordpress/i18n";
 var usePropDynamicAction = () => {
-  const { bind } = useBoundProp4();
-  const { elementType } = useElement();
-  const propType = elementType.propsSchema[bind];
+  const { propType } = useBoundProp5();
   const visible = !!propType && supportsDynamic(propType);
   return {
     visible,
@@ -2503,6 +2547,6 @@ export {
   registerGlobalClassMenuItem,
   registerStateMenuItem,
   replaceControl,
-  useBoundProp5 as useBoundProp
+  useBoundProp6 as useBoundProp
 };
 //# sourceMappingURL=index.mjs.map