@elementor/editor-editing-panel 4.3.0-960 → 4.3.0-961

package/dist/index.mjs

@@ -2722,7 +2722,7 @@ import { CLASSES_PROP_KEY } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { createLocation as createLocation4 } from "@elementor/locations";
 import { SessionStorageProvider as SessionStorageProvider2 } from "@elementor/session";
-import { Box as Box6, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
+import { Box as Box7, Divider as Divider5, Stack as Stack13 } from "@elementor/ui";
 import { __ as __62 } from "@wordpress/i18n";
 
 // src/contexts/styles-inheritance-context.tsx
@@ -4467,11 +4467,28 @@ var GridJustifyItemsField = () => /* @__PURE__ */ React55.createElement(StylesFi
 
 // src/components/style-sections/layout-section/grid-outline-field.tsx
 import * as React56 from "react";
-import { SwitchControl as SwitchControl2 } from "@elementor/editor-controls";
+import { updateElementEditorSettings, useElementEditorSettings } from "@elementor/editor-elements";
+import { Box as Box5, Switch } from "@elementor/ui";
 import { __ as __32 } from "@wordpress/i18n";
 var GRID_OUTLINE_LABEL = __32("Show Grid Outline", "elementor");
 var GridOutlineField = () => {
-  return /* @__PURE__ */ React56.createElement(SettingsField, { bind: "grid_outline", propDisplayName: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(SwitchControl2, null)));
+  const { element } = useElement();
+  const settings = useElementEditorSettings(element.id);
+  const value = settings?.grid_outline ?? true;
+  return /* @__PURE__ */ React56.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ React56.createElement(Box5, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React56.createElement(
+    Switch,
+    {
+      "aria-label": GRID_OUTLINE_LABEL,
+      checked: value,
+      onChange: (event) => {
+        updateElementEditorSettings({
+          elementId: element.id,
+          settings: { grid_outline: event.target.checked }
+        });
+      },
+      size: "small"
+    }
+  )));
 };
 
 // src/components/style-sections/layout-section/grid-size-field.tsx
@@ -4855,12 +4872,12 @@ var PositionField = () => {
 import * as React65 from "react";
 import { NumberControl as NumberControl4 } from "@elementor/editor-controls";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box5, Infotip } from "@elementor/ui";
+import { Alert as Alert3, AlertTitle as AlertTitle2, Box as Box6, Infotip } from "@elementor/ui";
 import { __ as __41 } from "@wordpress/i18n";
 var Z_INDEX_LABEL = __41("Z-index", "elementor");
 var ZIndexField = ({ disabled }) => {
   const StyleField = /* @__PURE__ */ React65.createElement(StylesField, { bind: "z-index", propDisplayName: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ React65.createElement(NumberControl4, { disabled })));
-  const content = /* @__PURE__ */ React65.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React65.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React65.createElement(AlertTitle2, null, __41("Z-index", "elementor")), /* @__PURE__ */ React65.createElement(Box5, { component: "span" }, __41(
+  const content = /* @__PURE__ */ React65.createElement(Alert3, { color: "secondary", icon: /* @__PURE__ */ React65.createElement(InfoCircleFilledIcon, null), size: "small" }, /* @__PURE__ */ React65.createElement(AlertTitle2, null, __41("Z-index", "elementor")), /* @__PURE__ */ React65.createElement(Box6, { component: "span" }, __41(
     "z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.",
     "elementor"
   )));
@@ -4872,7 +4889,7 @@ var ZIndexField = ({ disabled }) => {
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React65.createElement(Box5, null, StyleField)
+    /* @__PURE__ */ React65.createElement(Box6, null, StyleField)
   ) : /* @__PURE__ */ React65.createElement(React65.Fragment, null, StyleField);
 };
 
@@ -5614,7 +5631,7 @@ var StyleTab = () => {
           "transition"
         ]
       }
-    ), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(Box6, { sx: { height: "150px" } })))
+    ), /* @__PURE__ */ React89.createElement(StyleTabSlot, null)), /* @__PURE__ */ React89.createElement(Box7, { sx: { height: "150px" } })))
   ));
 };
 function ClassesHeader({ children }) {
@@ -5779,13 +5796,13 @@ import {
   useBoundProp as useBoundProp7
 } from "@elementor/editor-controls";
 import {
-  updateElementEditorSettings,
+  updateElementEditorSettings as updateElementEditorSettings2,
   useElementChildren,
-  useElementEditorSettings
+  useElementEditorSettings as useElementEditorSettings2
 } from "@elementor/editor-elements";
 import { numberPropTypeUtil as numberPropTypeUtil4 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { Alert as Alert4, Chip as Chip4, Infotip as Infotip2, Stack as Stack15, Switch, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
+import { Alert as Alert4, Chip as Chip4, Infotip as Infotip2, Stack as Stack15, Switch as Switch2, TextField as TextField2, Typography as Typography5 } from "@elementor/ui";
 import { __ as __67 } from "@wordpress/i18n";
 
 // src/controls-registry/element-controls/get-element-by-type.ts
@@ -6093,7 +6110,7 @@ var DefaultTabControl = ({ tabIndex }) => {
   const { value, setValue } = useBoundProp7(numberPropTypeUtil4);
   const isDefault = value === tabIndex;
   return /* @__PURE__ */ React93.createElement(Stack15, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 2 }, /* @__PURE__ */ React93.createElement(ControlFormLabel3, null, __67("Set as default tab", "elementor")), /* @__PURE__ */ React93.createElement(ConditionalTooltip, { showTooltip: isDefault, placement: "right" }, /* @__PURE__ */ React93.createElement(
-    Switch,
+    Switch2,
     {
       size: "small",
       checked: isDefault,
@@ -6108,7 +6125,7 @@ var DefaultTabControl = ({ tabIndex }) => {
   )));
 };
 var TabLabelControl = ({ elementId }) => {
-  const editorSettings = useElementEditorSettings(elementId);
+  const editorSettings = useElementEditorSettings2(elementId);
   const label = editorSettings?.title ?? "";
   return /* @__PURE__ */ React93.createElement(Stack15, { gap: 1 }, /* @__PURE__ */ React93.createElement(ControlFormLabel3, null, __67("Tab name", "elementor")), /* @__PURE__ */ React93.createElement(
     TextField2,
@@ -6116,7 +6133,7 @@ var TabLabelControl = ({ elementId }) => {
       size: "tiny",
       value: label,
       onChange: ({ target }) => {
-        updateElementEditorSettings({
+        updateElementEditorSettings2({
           elementId,
           settings: { title: target.value }
         });
@@ -6344,7 +6361,7 @@ import { DatabaseIcon as DatabaseIcon3, SettingsIcon, XIcon } from "@elementor/i
 import {
   bindPopover,
   bindTrigger as bindTrigger2,
-  Box as Box7,
+  Box as Box8,
   Divider as Divider8,
   Grid as Grid8,
   IconButton as IconButton2,
@@ -6643,7 +6660,7 @@ var DynamicSelectionControl = ({ OriginalControl, ...props }) => {
   if (!dynamicTag) {
     throw new Error(`Dynamic tag ${tagName} not found`);
   }
-  return /* @__PURE__ */ React98.createElement(Box7, null, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React98.createElement(Box8, null, /* @__PURE__ */ React98.createElement(
     Tag,
     {
       fullWidth: true,
@@ -6990,7 +7007,7 @@ import {
 import { PopoverHeader as PopoverHeader3, useSectionWidth as useSectionWidth2 } from "@elementor/editor-ui";
 import {
   Backdrop,
-  Box as Box9,
+  Box as Box10,
   Card,
   CardContent,
   ClickAwayListener,
@@ -7173,8 +7190,8 @@ var ValueComponent = ({ index, value }) => {
 
 // src/styles-inheritance/components/infotip/action-icons.tsx
 import * as React103 from "react";
-import { Box as Box8 } from "@elementor/ui";
-var ActionIcons = () => /* @__PURE__ */ React103.createElement(Box8, { display: "flex", gap: 0.5, alignItems: "center" });
+import { Box as Box9 } from "@elementor/ui";
+var ActionIcons = () => /* @__PURE__ */ React103.createElement(Box9, { display: "flex", gap: 0.5, alignItems: "center" });
 
 // src/styles-inheritance/components/styles-inheritance-infotip.tsx
 var SECTION_PADDING_INLINE = 32;
@@ -7224,7 +7241,7 @@ var StylesInheritanceInfotip = ({
       }
     },
     /* @__PURE__ */ React104.createElement(
-      Box9,
+      Box10,
       {
         sx: {
           position: "sticky",
@@ -7251,7 +7268,7 @@ var StylesInheritanceInfotip = ({
       },
       /* @__PURE__ */ React104.createElement(Stack18, { gap: 1.5, sx: { pl: 2, pr: 1, pt: 1.5, pb: 1.5 }, role: "list" }, items3.map((item, index) => {
         return /* @__PURE__ */ React104.createElement(
-          Box9,
+          Box10,
           {
             key: item.id,
             display: "flex",
@@ -7263,7 +7280,7 @@ var StylesInheritanceInfotip = ({
             )
           },
           /* @__PURE__ */ React104.createElement(
-            Box9,
+            Box10,
             {
               display: "flex",
               gap: 0.5,
@@ -7279,9 +7296,9 @@ var StylesInheritanceInfotip = ({
     )
   ));
   if (isDisabled) {
-    return /* @__PURE__ */ React104.createElement(Box9, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React104.createElement(Box10, { sx: { display: "inline-flex" } }, children);
   }
-  return /* @__PURE__ */ React104.createElement(Box9, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React104.createElement(Box10, { ref: triggerRef, sx: { display: "inline-flex" } }, /* @__PURE__ */ React104.createElement(
     TooltipOrInfotip,
     {
       showInfotip,
@@ -7309,7 +7326,7 @@ function TooltipOrInfotip({
   isDisabled
 }) {
   if (isDisabled) {
-    return /* @__PURE__ */ React104.createElement(Box9, { sx: { display: "inline-flex" } }, children);
+    return /* @__PURE__ */ React104.createElement(Box10, { sx: { display: "inline-flex" } }, children);
   }
   if (showInfotip) {
     return /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(