@elementor/editor-editing-panel 3.35.0-341 → 3.35.0-343

package/dist/index.mjs

@@ -1788,6 +1788,18 @@ var controlActionsMenu = createMenu({
   }
 });
 
+// src/editing-panel-replacement-registry.tsx
+var registry = /* @__PURE__ */ new Map();
+var DEFAULT_PRIORITY = 10;
+var registerEditingPanelReplacement = ({
+  id,
+  priority = DEFAULT_PRIORITY,
+  ...props
+}) => {
+  registry.set(id, { ...props, priority });
+};
+var getEditingPanelReplacement = (element, elementType) => Array.from(registry.values()).filter(({ condition }) => condition(element, elementType)).sort((a, b) => a.priority - b.priority)?.[0] ?? null;
+
 // src/components/editing-panel-error-fallback.tsx
 import * as React14 from "react";
 import { Alert, Box as Box3 } from "@elementor/ui";
@@ -1909,6 +1921,7 @@ import { SessionStorageProvider } from "@elementor/session";
 // src/components/section.tsx
 import * as React19 from "react";
 import { useId as useId2, useRef as useRef3 } from "react";
+import { CollapseIcon as CollapseIcon2 } from "@elementor/editor-ui";
 import { Collapse as Collapse2, Divider as Divider2, ListItemButton, ListItemText, Stack as Stack5 } from "@elementor/ui";
 
 // src/contexts/section-context.tsx
@@ -1921,24 +1934,13 @@ var useSectionWidth = () => {
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
 };
 
-// src/components/collapse-icon.tsx
-import { ChevronDownIcon } from "@elementor/icons";
-import { styled as styled4 } from "@elementor/ui";
-var CollapseIcon = styled4(ChevronDownIcon, {
-  shouldForwardProp: (prop) => prop !== "open"
-})(({ theme, open }) => ({
-  transform: open ? "rotate(180deg)" : "rotate(0deg)",
-  transition: theme.transitions.create("transform", {
-    duration: theme.transitions.duration.standard
-  })
-}));
-
 // src/components/collapsible-content.tsx
 import * as React18 from "react";
 import { useState as useState7 } from "react";
-import { Button, Collapse, Stack as Stack4, styled as styled5 } from "@elementor/ui";
+import { CollapseIcon } from "@elementor/editor-ui";
+import { Button, Collapse, Stack as Stack4, styled as styled4 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
-var IndicatorsWrapper = styled5("div")`
+var IndicatorsWrapper = styled4("div")`
 	position: absolute;
 	top: 0;
 	right: ${({ theme }) => theme.spacing(3)};
@@ -2002,7 +2004,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     ), getCollapsibleValue(titleEnd, isOpen)),
-    /* @__PURE__ */ React19.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    /* @__PURE__ */ React19.createElement(CollapseIcon2, { open: isOpen, color: "secondary", fontSize: "tiny" })
   ), /* @__PURE__ */ React19.createElement(
     Collapse2,
     {
@@ -2019,7 +2021,7 @@ function Section({ title, children, defaultExpanded = false, titleEnd, unmountOn
 // src/components/settings-control.tsx
 import * as React24 from "react";
 import { ControlAdornmentsProvider } from "@elementor/editor-controls";
-import { Divider as Divider3, styled as styled7 } from "@elementor/ui";
+import { Divider as Divider3, styled as styled6 } from "@elementor/ui";
 
 // src/controls-registry/control.tsx
 import * as React20 from "react";
@@ -2122,14 +2124,14 @@ var Control = ({ props, type }) => {
 
 // src/controls-registry/control-type-container.tsx
 import * as React21 from "react";
-import { Box as Box4, styled as styled6 } from "@elementor/ui";
+import { Box as Box4, styled as styled5 } from "@elementor/ui";
 var ControlTypeContainer = ({ children, layout }) => {
   if (layout === "custom") {
     return children;
   }
   return /* @__PURE__ */ React21.createElement(StyledContainer, { layout }, children);
 };
-var StyledContainer = styled6(Box4, {
+var StyledContainer = styled5(Box4, {
   shouldForwardProp: (prop) => !["layout"].includes(prop)
 })(({ layout, theme }) => ({
   display: "grid",
@@ -2394,7 +2396,7 @@ var indicatorsRegistry = {
   settings: /* @__PURE__ */ new Map(),
   styles: /* @__PURE__ */ new Map()
 };
-var DEFAULT_PRIORITY = 10;
+var DEFAULT_PRIORITY2 = 10;
 var FIELD_TYPE = {
   SETTINGS: "settings",
   STYLES: "styles"
@@ -2403,7 +2405,7 @@ var registerFieldIndicator = ({
   fieldType,
   id,
   indicator,
-  priority = DEFAULT_PRIORITY
+  priority = DEFAULT_PRIORITY2
 }) => {
   indicatorsRegistry[fieldType].set(id, { id, indicator, priority });
 };
@@ -2418,7 +2420,7 @@ var ControlLabel = ({ children }) => {
 };
 
 // src/components/settings-control.tsx
-var Wrapper = styled7("span")`
+var Wrapper = styled6("span")`
 	display: contents;
 `;
 var SettingsControl = ({ control: { value, type } }) => {
@@ -4917,7 +4919,12 @@ var EditingPanel = () => {
     return null;
   }
   const panelTitle = __57("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React84.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React84.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React84.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React84.createElement(ThemeProvider3, null, /* @__PURE__ */ React84.createElement(Panel, null, /* @__PURE__ */ React84.createElement(PanelHeaderTopSlot, null), /* @__PURE__ */ React84.createElement(PanelHeader, null, /* @__PURE__ */ React84.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React84.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React84.createElement(PanelBody, null, /* @__PURE__ */ React84.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React84.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React84.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React84.createElement(EditingPanelTabs, null)))))))));
+  const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {};
+  let panelContent = /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(PanelHeader, null, /* @__PURE__ */ React84.createElement(PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ React84.createElement(AtomIcon, { fontSize: "small", sx: { color: "text.tertiary" } })), /* @__PURE__ */ React84.createElement(PanelBody, null, /* @__PURE__ */ React84.createElement(EditingPanelTabs, null)));
+  if (ReplacementComponent) {
+    panelContent = /* @__PURE__ */ React84.createElement(ReplacementComponent, null);
+  }
+  return /* @__PURE__ */ React84.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React84.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ React84.createElement(SessionStorageProvider3, { prefix: "elementor" }, /* @__PURE__ */ React84.createElement(ThemeProvider3, null, /* @__PURE__ */ React84.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React84.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React84.createElement(ElementProvider, { element, elementType }, /* @__PURE__ */ React84.createElement(Panel, null, /* @__PURE__ */ React84.createElement(PanelHeaderTopSlot, null), panelContent)))))));
 };
 
 // src/components/popover-body.tsx
@@ -5577,7 +5584,7 @@ var DynamicControl = ({ bind, children }) => {
 };
 
 // src/dynamics/components/dynamic-selection.tsx
-import { Fragment as Fragment12, useState as useState11 } from "react";
+import { Fragment as Fragment13, useState as useState11 } from "react";
 import * as React90 from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { PopoverHeader, PopoverMenuList, SearchField } from "@elementor/editor-ui";
@@ -5625,7 +5632,7 @@ var DynamicSelection = ({ close: closePopover }) => {
       onClose: closePopover,
       icon: /* @__PURE__ */ React90.createElement(DatabaseIcon2, { fontSize: SIZE4 })
     }
-  ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(Fragment12, null, /* @__PURE__ */ React90.createElement(
+  ), hasNoDynamicTags ? /* @__PURE__ */ React90.createElement(NoDynamicTags, null) : /* @__PURE__ */ React90.createElement(Fragment13, null, /* @__PURE__ */ React90.createElement(
     SearchField,
     {
       value: searchValue,
@@ -6468,12 +6475,12 @@ var arrayTransformer = createTransformer2((values) => {
 // src/styles-inheritance/transformers/background-color-overlay-transformer.tsx
 import * as React100 from "react";
 import { createTransformer as createTransformer3 } from "@elementor/editor-canvas";
-import { Stack as Stack20, styled as styled8, UnstableColorIndicator } from "@elementor/ui";
+import { Stack as Stack20, styled as styled7, UnstableColorIndicator } from "@elementor/ui";
 var backgroundColorOverlayTransformer = createTransformer3((value) => /* @__PURE__ */ React100.createElement(Stack20, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React100.createElement(ItemLabelColor, { value })));
 var ItemLabelColor = ({ value: { color } }) => {
   return /* @__PURE__ */ React100.createElement("span", null, color);
 };
-var StyledUnstableColorIndicator = styled8(UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator = styled7(UnstableColorIndicator)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6572,14 +6579,14 @@ var boxShadowTransformer = createTransformer6((value) => {
 // src/styles-inheritance/transformers/color-transformer.tsx
 import * as React104 from "react";
 import { createTransformer as createTransformer7 } from "@elementor/editor-canvas";
-import { Stack as Stack24, styled as styled9, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Stack as Stack24, styled as styled8, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 function isValidCSSColor(value) {
   if (!value.trim()) {
     return false;
   }
   return CSS.supports("color", value.trim());
 }
-var StyledColorIndicator = styled9(UnstableColorIndicator2)(({ theme }) => ({
+var StyledColorIndicator = styled8(UnstableColorIndicator2)(({ theme }) => ({
   width: "1em",
   height: "1em",
   borderRadius: `${theme.shape.borderRadius / 2}px`,
@@ -6708,6 +6715,7 @@ export {
   injectIntoPanelHeaderTop,
   injectIntoStyleTab,
   registerControlReplacement,
+  registerEditingPanelReplacement,
   registerFieldIndicator,
   registerStyleProviderToColors,
   stylesInheritanceTransformersRegistry,
@@ -6719,6 +6727,7 @@ export {
   usePanelActions,
   usePanelStatus,
   useSectionWidth,
+  useStateByElement,
   useStyle,
   useStylesRerender
 };