@elementor/editor-editing-panel 1.32.0 → 1.33.0

package/dist/index.mjs

@@ -962,7 +962,7 @@ function EditorPanelErrorFallback() {
 // src/components/editing-panel-tabs.tsx
 import * as React69 from "react";
 import { Fragment as Fragment8 } from "react";
-import { Divider as Divider5, Stack as Stack17, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
+import { Divider as Divider6, Stack as Stack17, Tab, TabPanel, Tabs, useTabs } from "@elementor/ui";
 import { __ as __45 } from "@wordpress/i18n";
 
 // src/contexts/scroll-context.tsx
@@ -1008,6 +1008,7 @@ function useScrollDirection() {
 import * as React16 from "react";
 import { ControlFormLabel } from "@elementor/editor-controls";
 import { SessionStorageProvider } from "@elementor/session";
+import { Divider as Divider3 } from "@elementor/ui";
 
 // src/controls-registry/control.tsx
 import * as React11 from "react";
@@ -1033,12 +1034,12 @@ var controlTypes = {
   link: { component: LinkControl, layout: "full" },
   url: { component: UrlControl, layout: "full" }
 };
-var getControlByType = (type) => controlTypes[type]?.component;
-var getLayoutByType = (type) => controlTypes[type].layout;
+var getControl = (type) => controlTypes[type]?.component;
+var getDefaultLayout = (type) => controlTypes[type].layout;
 
 // src/controls-registry/control.tsx
 var Control = ({ props, type }) => {
-  const ControlByType = getControlByType(type);
+  const ControlByType = getControl(type);
   const { element } = useElement();
   if (!ControlByType) {
     throw new ControlTypeNotFoundError({
@@ -1051,11 +1052,7 @@ var Control = ({ props, type }) => {
 // src/controls-registry/control-type-container.tsx
 import * as React12 from "react";
 import { Box as Box3, styled as styled4 } from "@elementor/ui";
-var ControlTypeContainer = ({
-  controlType,
-  children
-}) => {
-  const layout = getLayoutByType(controlType);
+var ControlTypeContainer = ({ children, layout }) => {
   return /* @__PURE__ */ React12.createElement(StyledContainer, { layout }, children);
 };
 var StyledContainer = styled4(Box3, {
@@ -1174,10 +1171,11 @@ var SettingsTab = () => {
   })));
 };
 var Control2 = ({ control }) => {
-  if (!getControlByType(control.type)) {
+  if (!getControl(control.type)) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(SettingsField, { bind: control.bind }, /* @__PURE__ */ React16.createElement(ControlTypeContainer, { controlType: control.type }, control.label ? /* @__PURE__ */ React16.createElement(ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React16.createElement(Control, { type: control.type, props: control.props })));
+  const layout = control.meta?.layout || getDefaultLayout(control.type);
+  return /* @__PURE__ */ React16.createElement(SettingsField, { bind: control.bind }, control.meta?.topDivider && /* @__PURE__ */ React16.createElement(Divider3, null), /* @__PURE__ */ React16.createElement(ControlTypeContainer, { layout }, control.label ? /* @__PURE__ */ React16.createElement(ControlFormLabel, null, control.label) : null, /* @__PURE__ */ React16.createElement(Control, { type: control.type, props: control.props })));
 };
 
 // src/components/style-tab.tsx
@@ -1186,7 +1184,7 @@ import { useState as useState12 } from "react";
 import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
-import { Divider as Divider4, Stack as Stack16 } from "@elementor/ui";
+import { Divider as Divider5, Stack as Stack16 } from "@elementor/ui";
 import { __ as __44 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
@@ -1758,8 +1756,8 @@ import * as React31 from "react";
 
 // src/components/panel-divider.tsx
 import * as React22 from "react";
-import { Divider as Divider3 } from "@elementor/ui";
-var PanelDivider = () => /* @__PURE__ */ React22.createElement(Divider3, { sx: { my: 0.5 } });
+import { Divider as Divider4 } from "@elementor/ui";
+var PanelDivider = () => /* @__PURE__ */ React22.createElement(Divider4, { sx: { my: 0.5 } });
 
 // src/components/section-content.tsx
 import * as React23 from "react";
@@ -3183,7 +3181,7 @@ var StyleTab = () => {
       },
       setMetaState: setActiveStyleState
     },
-    /* @__PURE__ */ React68.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React68.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React68.createElement(ClassesHeader, null, /* @__PURE__ */ React68.createElement(CssClassSelector, null), /* @__PURE__ */ React68.createElement(Divider4, null)), /* @__PURE__ */ React68.createElement(SectionsList, null, /* @__PURE__ */ React68.createElement(Section, { title: __44("Layout", "elementor") }, /* @__PURE__ */ React68.createElement(LayoutSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Spacing", "elementor") }, /* @__PURE__ */ React68.createElement(SpacingSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Size", "elementor") }, /* @__PURE__ */ React68.createElement(SizeSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Position", "elementor") }, /* @__PURE__ */ React68.createElement(PositionSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Typography", "elementor") }, /* @__PURE__ */ React68.createElement(TypographySection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Background", "elementor") }, /* @__PURE__ */ React68.createElement(BackgroundSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Border", "elementor") }, /* @__PURE__ */ React68.createElement(BorderSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Effects", "elementor") }, /* @__PURE__ */ React68.createElement(EffectsSection, null)))))
+    /* @__PURE__ */ React68.createElement(SessionStorageProvider2, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ React68.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React68.createElement(ClassesHeader, null, /* @__PURE__ */ React68.createElement(CssClassSelector, null), /* @__PURE__ */ React68.createElement(Divider5, null)), /* @__PURE__ */ React68.createElement(SectionsList, null, /* @__PURE__ */ React68.createElement(Section, { title: __44("Layout", "elementor") }, /* @__PURE__ */ React68.createElement(LayoutSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Spacing", "elementor") }, /* @__PURE__ */ React68.createElement(SpacingSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Size", "elementor") }, /* @__PURE__ */ React68.createElement(SizeSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Position", "elementor") }, /* @__PURE__ */ React68.createElement(PositionSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Typography", "elementor") }, /* @__PURE__ */ React68.createElement(TypographySection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Background", "elementor") }, /* @__PURE__ */ React68.createElement(BackgroundSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Border", "elementor") }, /* @__PURE__ */ React68.createElement(BorderSection, null)), /* @__PURE__ */ React68.createElement(Section, { title: __44("Effects", "elementor") }, /* @__PURE__ */ React68.createElement(EffectsSection, null)))))
   ));
 };
 function ClassesHeader({ children }) {
@@ -3208,7 +3206,7 @@ var EditingPanelTabs = () => {
   return (
     // When switching between elements, the local states should be reset. We are using key to rerender the tabs.
     // Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
-    /* @__PURE__ */ React69.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(Tabs, { variant: "fullWidth", size: "small", sx: { mt: 0.5 }, ...getTabsProps() }, /* @__PURE__ */ React69.createElement(Tab, { label: __45("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React69.createElement(Tab, { label: __45("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React69.createElement(Divider5, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null)))))
+    /* @__PURE__ */ React69.createElement(Fragment8, { key: element.id }, /* @__PURE__ */ React69.createElement(ScrollProvider, null, /* @__PURE__ */ React69.createElement(Stack17, { direction: "column", sx: { width: "100%" } }, /* @__PURE__ */ React69.createElement(Stack17, { sx: { ...stickyHeaderStyles, top: 0 } }, /* @__PURE__ */ React69.createElement(Tabs, { variant: "fullWidth", size: "small", sx: { mt: 0.5 }, ...getTabsProps() }, /* @__PURE__ */ React69.createElement(Tab, { label: __45("General", "elementor"), ...getTabProps("settings") }), /* @__PURE__ */ React69.createElement(Tab, { label: __45("Style", "elementor"), ...getTabProps("style") })), /* @__PURE__ */ React69.createElement(Divider6, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("settings"), disablePadding: true }, /* @__PURE__ */ React69.createElement(SettingsTab, null)), /* @__PURE__ */ React69.createElement(TabPanel, { ...getTabPanelProps("style"), disablePadding: true }, /* @__PURE__ */ React69.createElement(StyleTab, null)))))
   );
 };
 
@@ -3281,7 +3279,7 @@ import {
   bindPopover as bindPopover2,
   bindTrigger as bindTrigger2,
   Box as Box5,
-  Divider as Divider7,
+  Divider as Divider8,
   Grid as Grid27,
   IconButton as IconButton4,
   Paper,
@@ -3423,7 +3421,7 @@ import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { DatabaseIcon, SearchIcon } from "@elementor/icons";
 import {
   Box as Box4,
-  Divider as Divider6,
+  Divider as Divider7,
   InputAdornment,
   Link,
   MenuItem,
@@ -3466,7 +3464,7 @@ var DynamicSelection = ({ onSelect }) => {
         startAdornment: /* @__PURE__ */ React73.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React73.createElement(SearchIcon, { fontSize: SIZE3 }))
       }
     }
-  )), /* @__PURE__ */ React73.createElement(Divider6, null), /* @__PURE__ */ React73.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React73.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React73.createElement(Fragment9, { key: index }, /* @__PURE__ */ React73.createElement(
+  )), /* @__PURE__ */ React73.createElement(Divider7, null), /* @__PURE__ */ React73.createElement(Box4, { sx: { overflowY: "auto", height: 260, width: 220 } }, options12.length > 0 ? /* @__PURE__ */ React73.createElement(MenuList, { role: "listbox", tabIndex: 0 }, options12.map(([category, items3], index) => /* @__PURE__ */ React73.createElement(Fragment9, { key: index }, /* @__PURE__ */ React73.createElement(
     MenuSubheader2,
     {
       sx: { px: 1.5, typography: "caption", color: "text.tertiary" }
@@ -3502,7 +3500,7 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React73.createElem
   /* @__PURE__ */ React73.createElement(Typography4, { align: "center", variant: "subtitle2" }, __47("Sorry, nothing matched", "elementor"), /* @__PURE__ */ React73.createElement("br", null), "\u201C", searchValue, "\u201D."),
   /* @__PURE__ */ React73.createElement(Typography4, { align: "center", variant: "caption" }, __47("Try something else.", "elementor"), "\xA0", /* @__PURE__ */ React73.createElement(Link, { color: "text.secondary", variant: "caption", component: "button", onClick: onClear }, __47("Clear & try again", "elementor")))
 );
-var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React73.createElement(Divider6, null), /* @__PURE__ */ React73.createElement(
+var NoDynamicTags = () => /* @__PURE__ */ React73.createElement(Box4, { sx: { overflowY: "hidden", height: 297, width: 220 } }, /* @__PURE__ */ React73.createElement(Divider7, null), /* @__PURE__ */ React73.createElement(
   Stack19,
   {
     gap: 1,
@@ -3600,7 +3598,7 @@ var DynamicSettings = ({ controls }) => {
   if (!tabs.length) {
     return null;
   }
-  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React74.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React74.createElement(Divider7, null), tabs.map(({ value }, index) => {
+  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, /* @__PURE__ */ React74.createElement(Tabs2, { size: "small", variant: "fullWidth", ...getTabsProps() }, tabs.map(({ value }, index) => /* @__PURE__ */ React74.createElement(Tab2, { key: index, label: value.label, sx: { px: 1, py: 0.5 }, ...getTabProps(index) }))), /* @__PURE__ */ React74.createElement(Divider8, null), tabs.map(({ value }, index) => {
     return /* @__PURE__ */ React74.createElement(TabPanel2, { key: index, sx: { flexGrow: 1, py: 0 }, ...getTabPanelProps(index) }, /* @__PURE__ */ React74.createElement(PopoverContent, { p: 2, gap: 2 }, value.items.map((item) => {
       if (item.type === "control") {
         return /* @__PURE__ */ React74.createElement(Control3, { key: item.value.bind, control: item.value });
@@ -3610,7 +3608,7 @@ var DynamicSettings = ({ controls }) => {
   }));
 };
 var Control3 = ({ control }) => {
-  if (!getControlByType(control.type)) {
+  if (!getControl(control.type)) {
     return null;
   }
   return /* @__PURE__ */ React74.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ React74.createElement(Grid27, { container: true, gap: 0.75 }, control.label ? /* @__PURE__ */ React74.createElement(Grid27, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(ControlFormLabel5, null, control.label)) : null, /* @__PURE__ */ React74.createElement(Grid27, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Control, { type: control.type, props: control.props }))));