@elementor/editor-editing-panel 1.48.0 → 1.50.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Change Log
 
+## 1.50.0
+
+### Minor Changes
+
+- 64b3e09: Adds support for the backdrop-filter css property to atomic widgets.
+- 3d530f6: Change the positioning of the advanced dynamic tags settings.
+
+### Patch Changes
+
+- 22b87fb: Add temporary theme provider to css class selector.
+- 0db150c: Update the popover height.
+- Updated dependencies [64b3e09]
+- Updated dependencies [3904505]
+- Updated dependencies [0db150c]
+- Updated dependencies [cdbd491]
+- Updated dependencies [b90d7db]
+  - @elementor/editor-controls@1.5.0
+  - @elementor/editor-canvas@0.28.0
+  - @elementor/editor-props@0.18.0
+  - @elementor/editor-ui@0.14.2
+  - @elementor/editor-styles-repository@0.10.7
+  - @elementor/editor-elements@0.9.2
+  - @elementor/editor-styles@0.6.14
+  - @elementor/editor@0.21.1
+  - @elementor/editor-documents@0.13.10
+  - @elementor/editor-panels@0.17.1
+
+## 1.49.0
+
+### Minor Changes
+
+- 90ec4c6: reset functionality added to flex order filed
+
+### Patch Changes
+
+- Updated dependencies [669f39f]
+- Updated dependencies [2e677ee]
+- Updated dependencies [068f659]
+- Updated dependencies [e7cca0a]
+- Updated dependencies [07ca7e9]
+  - @elementor/editor-controls@1.4.0
+  - @elementor/editor-ui@0.14.1
+  - @elementor/editor-canvas@0.27.0
+  - @elementor/editor-props@0.17.0
+  - @elementor/editor-styles-repository@0.10.6
+  - @elementor/editor-elements@0.9.1
+  - @elementor/editor-styles@0.6.13
+
 ## 1.48.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import * as _elementor_editor_props from '@elementor/editor-props';
 import { ChipProps, Theme } from '@elementor/ui';
 import * as _elementor_locations from '@elementor/locations';
 import * as _elementor_menus from '@elementor/menus';
-import { PopoverScrollableContent as PopoverScrollableContent$1 } from '@elementor/editor-ui';
+import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
 
 declare const EXPERIMENTAL_FEATURES: {
     V_3_30: string;
@@ -71,11 +71,11 @@ declare const controlActionsMenu: _elementor_menus.Menu<{
 
 declare const useFontFamilies: () => FontCategory[];
 
-type Props = React.ComponentProps<typeof PopoverScrollableContent$1>;
-declare const PopoverScrollableContent: (props: Props) => React.JSX.Element;
+type Props = React.ComponentProps<typeof PopoverBody$1>;
+declare const PopoverBody: (props: Props) => React.JSX.Element;
 
 declare const useSectionWidth: () => number;
 
 declare function init(): void;
 
-export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverScrollableContent, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };
+export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import * as _elementor_editor_props from '@elementor/editor-props';
 import { ChipProps, Theme } from '@elementor/ui';
 import * as _elementor_locations from '@elementor/locations';
 import * as _elementor_menus from '@elementor/menus';
-import { PopoverScrollableContent as PopoverScrollableContent$1 } from '@elementor/editor-ui';
+import { PopoverBody as PopoverBody$1 } from '@elementor/editor-ui';
 
 declare const EXPERIMENTAL_FEATURES: {
     V_3_30: string;
@@ -71,11 +71,11 @@ declare const controlActionsMenu: _elementor_menus.Menu<{
 
 declare const useFontFamilies: () => FontCategory[];
 
-type Props = React.ComponentProps<typeof PopoverScrollableContent$1>;
-declare const PopoverScrollableContent: (props: Props) => React.JSX.Element;
+type Props = React.ComponentProps<typeof PopoverBody$1>;
+declare const PopoverBody: (props: Props) => React.JSX.Element;
 
 declare const useSectionWidth: () => number;
 
 declare function init(): void;
 
-export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverScrollableContent, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };
+export { EXPERIMENTAL_FEATURES, type PopoverActionProps, PopoverBody, type ValidationEvent, type ValidationResult, controlActionsMenu, init, injectIntoClassSelectorActions, registerControlReplacement, registerStyleProviderToColors, useFontFamilies, usePanelActions, usePanelStatus, useSectionWidth };

package/dist/index.js

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   EXPERIMENTAL_FEATURES: () => EXPERIMENTAL_FEATURES,
-  PopoverScrollableContent: () => PopoverScrollableContent,
+  PopoverBody: () => PopoverBody,
   controlActionsMenu: () => controlActionsMenu,
   init: () => init3,
   injectIntoClassSelectorActions: () => injectIntoClassSelectorActions,
@@ -182,6 +182,12 @@ var getStylesProviderThemeColor = (provider) => {
   }
   return getStyleProviderColors(provider).getThemeColor;
 };
+function getTempStylesProviderThemeColor(provider) {
+  if ((0, import_editor_styles_repository2.isElementsStylesProvider)(provider)) {
+    return (theme) => theme.palette.primary.main;
+  }
+  return getStylesProviderThemeColor(provider);
+}
 
 // src/components/creatable-autocomplete/creatable-autocomplete.tsx
 var React4 = __toESM(require("react"));
@@ -853,7 +859,7 @@ function StateMenuItem({ state, closeMenu, ...props }) {
         StyleIndicator,
         {
           "aria-label": (0, import_i18n2.__)("Has style", "elementor"),
-          getColor: getStylesProviderThemeColor(provider ?? "")
+          getColor: getTempStylesProviderThemeColor(provider ?? "")
         }
       ), state ?? "normal")
     )
@@ -930,7 +936,7 @@ function CssClassItem(props) {
   const providerActions = provider ? import_editor_styles_repository5.stylesRepository.getProviderByKey(provider)?.actions : null;
   const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update;
   const isShowingState = isActive && meta.state;
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_ui5.ThemeProvider, { palette: "default" }, /* @__PURE__ */ React7.createElement(
     import_ui5.UnstableChipGroup,
     {
       ref: setChipRef,
@@ -1008,7 +1014,7 @@ var EMPTY_OPTION = {
   label: (0, import_i18n4.__)("local", "elementor"),
   value: null,
   fixed: true,
-  color: "accent",
+  color: getTempStylesProviderColorName("accent"),
   icon: /* @__PURE__ */ React8.createElement(import_icons2.MapPinIcon, null),
   provider: null
 };
@@ -1119,13 +1125,19 @@ function useOptions() {
         label: styleDef.label,
         value: styleDef.id,
         fixed: isElements,
-        color: getStylesProviderColorName(provider.getKey()),
+        color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())),
         icon: isElements ? /* @__PURE__ */ React8.createElement(import_icons2.MapPinIcon, null) : null,
         provider: provider.getKey()
       };
     });
   });
 }
+function getTempStylesProviderColorName(color) {
+  if (color === "accent") {
+    return "primary";
+  }
+  return color;
+}
 function useCreateAction() {
   const [provider, createAction] = useCreateAndApplyClass();
   if (!provider || !createAction) {
@@ -2382,7 +2394,7 @@ var StylesInheritanceInfotip = ({ inheritanceChain, propType, path, label, child
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const key = path.join(".");
-  const sectionWidth = useSectionWidth() + SECTION_PADDING_INLINE;
+  const sectionWidth = useSectionWidth();
   const resolve = (0, import_react23.useMemo)(() => {
     return (0, import_editor_canvas2.createPropsResolver)({
       transformers: stylesInheritanceTransformersRegistry,
@@ -2869,11 +2881,12 @@ var OpacityControlField = () => {
 
 // src/components/style-sections/effects-section/effects-section.tsx
 var BOX_SHADOW_LABEL = (0, import_i18n19.__)("Box shadow", "elementor");
-var FILTER_LABEL = (0, import_i18n19.__)("Filter", "elementor");
+var FILTER_LABEL = (0, import_i18n19.__)("Filters", "elementor");
 var TRANSFORM_LABEL = (0, import_i18n19.__)("Transform", "elementor");
+var BACKDROP_FILTER_LABEL = (0, import_i18n19.__)("Backdrop filters", "elementor");
 var EffectsSection = () => {
   const isVersion331Active = (0, import_editor_v1_adapters10.isExperimentActive)(EXPERIMENTAL_FEATURES.V_3_31);
-  return /* @__PURE__ */ React42.createElement(SectionContent, null, isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null)), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.TransformRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.FilterRepeaterControl, null))));
+  return /* @__PURE__ */ React42.createElement(SectionContent, null, isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(OpacityControlField, null), /* @__PURE__ */ React42.createElement(PanelDivider, null)), /* @__PURE__ */ React42.createElement(StylesField, { bind: "box-shadow", propDisplayName: BOX_SHADOW_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.BoxShadowRepeaterControl, null)), isVersion331Active && /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "transform", propDisplayName: TRANSFORM_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.TransformRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "filter", propDisplayName: FILTER_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.FilterRepeaterControl, null)), /* @__PURE__ */ React42.createElement(PanelDivider, null), /* @__PURE__ */ React42.createElement(StylesField, { bind: "backdrop-filter", propDisplayName: BACKDROP_FILTER_LABEL }, /* @__PURE__ */ React42.createElement(import_editor_controls15.FilterRepeaterControl, { filterPropName: "backdrop-filter" }))));
 };
 
 // src/components/style-sections/layout-section/layout-section.tsx
@@ -3268,6 +3281,10 @@ var FlexOrderField = () => {
     history: { propDisplayName: ORDER_LABEL }
   });
   const [groupControlValue, setGroupControlValue] = (0, import_react26.useState)(getGroupControlValue(order?.value || null));
+  (0, import_react26.useEffect)(() => {
+    const newGroupControlValue = getGroupControlValue(order?.value || null);
+    setGroupControlValue(newGroupControlValue);
+  }, [order?.value]);
   const handleToggleButtonChange = (group) => {
     setGroupControlValue(group);
     if (!group || group === CUSTOM) {
@@ -4458,12 +4475,12 @@ var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__cre
   component: EditingPanel
 });
 
-// src/components/popover-scrollable-content.tsx
+// src/components/popover-body.tsx
 var React87 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
-var PopoverScrollableContent = (props) => {
+var PopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React87.createElement(import_editor_ui6.PopoverScrollableContent, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React87.createElement(import_editor_ui6.PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/init.ts
@@ -4690,21 +4707,21 @@ var DynamicSelection = ({ close: closePopover }) => {
       label: item.label
     }))
   ]);
-  return /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React90.createElement(PopoverBody, null, /* @__PURE__ */ React90.createElement(
     import_editor_ui7.PopoverHeader,
     {
       title: (0, import_i18n63.__)("Dynamic tags", "elementor"),
       onClose: closePopover,
       icon: /* @__PURE__ */ React90.createElement(import_icons26.DatabaseIcon, { fontSize: SIZE6 })
     }
-  ), /* @__PURE__ */ React90.createElement(import_ui46.Stack, null, hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(import_react42.Fragment, null, /* @__PURE__ */ React90.createElement(
+  ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(import_react42.Fragment, null, /* @__PURE__ */ React90.createElement(
     import_editor_ui7.PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n63.__)("Search dynamic tags\u2026", "elementor")
     }
-  ), /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(PopoverScrollableContent, null, /* @__PURE__ */ React90.createElement(
+  ), /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(
     import_editor_ui7.PopoverMenuList,
     {
       items: virtualizedItems,
@@ -4714,7 +4731,7 @@ var DynamicSelection = ({ close: closePopover }) => {
       itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {},
       noResultsComponent: /* @__PURE__ */ React90.createElement(NoResults, { searchValue, onClear: () => setSearchValue("") })
     }
-  )))));
+  )));
 };
 var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElement(
   import_ui46.Stack,
@@ -4731,7 +4748,7 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
   /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n63.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React90.createElement("br", null), "\u201C", searchValue, "\u201D."),
   /* @__PURE__ */ React90.createElement(import_ui46.Typography, { align: "center", variant: "caption", sx: { display: "flex", flexDirection: "column" } }, (0, import_i18n63.__)("Try something else.", "elementor"), /* @__PURE__ */ React90.createElement(import_ui46.Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n63.__)("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(import_ui46.Box, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(
+var NoDynamicTags = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null, /* @__PURE__ */ React90.createElement(import_ui46.Divider, null), /* @__PURE__ */ React90.createElement(
   import_ui46.Stack,
   {
     gap: 1,
@@ -4807,7 +4824,7 @@ var DynamicSelectionControl = () => {
       },
       ...(0, import_ui47.bindPopover)(selectionPopoverState)
     },
-    /* @__PURE__ */ React91.createElement(import_ui47.Stack, null, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
+    /* @__PURE__ */ React91.createElement(PopoverBody, null, /* @__PURE__ */ React91.createElement(DynamicSelection, { close: selectionPopoverState.close }))
   ));
 };
 var DynamicSettingsPopover = ({ dynamicTag }) => {
@@ -4821,21 +4838,21 @@ var DynamicSettingsPopover = ({ dynamicTag }) => {
     {
       disablePortal: true,
       disableScrollLock: true,
-      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      anchorOrigin: { vertical: "bottom", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "right" },
       PaperProps: {
-        sx: { my: 0.5 }
+        sx: { my: 1 }
       },
       ...(0, import_ui47.bindPopover)(popupState)
     },
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React91.createElement(PopoverBody, null, /* @__PURE__ */ React91.createElement(
       import_editor_ui8.PopoverHeader,
       {
         title: dynamicTag.label,
         onClose: popupState.close,
         icon: /* @__PURE__ */ React91.createElement(import_icons27.DatabaseIcon, { fontSize: SIZE7 })
       }
-    ),
-    /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls })
+    ), /* @__PURE__ */ React91.createElement(DynamicSettings, { controls: dynamicTag.atomic_controls }))
   ));
 };
 var DynamicSettings = ({ controls }) => {
@@ -4844,13 +4861,21 @@ var DynamicSettings = ({ controls }) => {
   if (!tabs.length) {
     return null;
   }
-  return /* @__PURE__ */ React91.createElement(import_editor_ui8.PopoverScrollableContent, null, /* @__PURE__ */ React91.createElement(import_ui47.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(import_ui47.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React91.createElement(import_ui47.Divider, null), tabs.map(({ value }, index) => {
-    return /* @__PURE__ */ React91.createElement(import_ui47.TabPanel, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React91.createElement(import_ui47.Stack, { p: 2, gap: 2 }, value.items.map((item) => {
-      if (item.type === "control") {
-        return /* @__PURE__ */ React91.createElement(Control3, { key: item.value.bind, control: item.value });
-      }
-      return null;
-    })));
+  return /* @__PURE__ */ React91.createElement(React91.Fragment, null, /* @__PURE__ */ React91.createElement(import_ui47.Tabs, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React91.createElement(import_ui47.Tab, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React91.createElement(import_ui47.Divider, null), tabs.map(({ value }, index) => {
+    return /* @__PURE__ */ React91.createElement(
+      import_ui47.TabPanel,
+      {
+        key: index,
+        sx: { flexGrow: 1, py: 0, overflowY: "auto" },
+        ...getTabPanelProps(index)
+      },
+      /* @__PURE__ */ React91.createElement(import_ui47.Stack, { p: 2, gap: 2 }, value.items.map((item) => {
+        if (item.type === "control") {
+          return /* @__PURE__ */ React91.createElement(Control3, { key: item.value.bind, control: item.value });
+        }
+        return null;
+      }))
+    );
   }));
 };
 var Control3 = ({ control }) => {
@@ -4961,7 +4986,7 @@ function initResetStyleProps() {
     useProps: useResetStyleValueProps
   });
 }
-var EXCLUDED_BINDS = ["order", "flex-grow", "flex-shrink", "flex-basis"];
+var EXCLUDED_BINDS = ["flex-grow", "flex-shrink", "flex-basis"];
 function useResetStyleValueProps() {
   const isStyle = useIsStyle();
   const { value, setValue, path, bind } = (0, import_editor_controls59.useBoundProp)();
@@ -5131,7 +5156,7 @@ var blockV1Panel = () => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EXPERIMENTAL_FEATURES,
-  PopoverScrollableContent,
+  PopoverBody,
   controlActionsMenu,
   init,
   injectIntoClassSelectorActions,