@elementor/editor-components 4.0.0-552 → 4.0.0-573

package/dist/index.mjs

@@ -1613,7 +1613,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
     }
     onSubmit({ label: propLabel ?? "", group });
   };
-  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React3.createElement(Stack3, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
     Stack3,
     {
       direction: "row",
@@ -2311,7 +2311,7 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React10.createElement(Box7, null, /* @__PURE__ */ React10.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(Tooltip4, { title: __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(Box7, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React10.createElement(PanelHeader2, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(Tooltip4, { title: __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(IconButton4, { size: "tiny", onClick: onBack, "aria-label": __13("Back", "elementor") }, /* @__PURE__ */ React10.createElement(ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
     EllipsisWithTooltip2,
     {
       title: componentName,
@@ -3498,7 +3498,8 @@ function CreateComponentForm() {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
-      anchorPosition
+      anchorPosition,
+      "data-testid": "create-component-form"
     },
     element !== null && /* @__PURE__ */ React19.createElement(
       Form2,
@@ -3935,7 +3936,7 @@ import { useSelectedElement as useSelectedElement2 } from "@elementor/editor-ele
 import { PanelBody as PanelBody2, PanelHeader as PanelHeader3, PanelHeaderTitle as PanelHeaderTitle2 } from "@elementor/editor-panels";
 import { EllipsisWithTooltip as EllipsisWithTooltip4 } from "@elementor/editor-ui";
 import { ComponentsIcon as ComponentsIcon4, PencilIcon as PencilIcon2 } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton6, Stack as Stack16, Tooltip as Tooltip5 } from "@elementor/ui";
+import { Box as Box15, Divider as Divider4, IconButton as IconButton6, Stack as Stack16, Tooltip as Tooltip5 } from "@elementor/ui";
 import { __ as __27 } from "@wordpress/i18n";
 
 // src/hooks/use-component-instance-settings.ts
@@ -4481,7 +4482,7 @@ function InstanceEditingPanel() {
   const isNonEmptyGroup = (group) => group !== null && group.props.length > 0;
   const groups = overridableProps.groups.order.map((groupId) => overridableProps.groups.items[groupId] ?? null).filter(isNonEmptyGroup);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(Box15, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React29.createElement(
     ComponentInstanceProvider,
     {
       componentId,
@@ -4490,7 +4491,7 @@ function InstanceEditingPanel() {
     },
     /* @__PURE__ */ React29.createElement(PanelHeader3, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(Stack16, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(ComponentsIcon4, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(EllipsisWithTooltip4, { title: component.name, as: PanelHeaderTitle2, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(Tooltip5, { title: panelTitle }, /* @__PURE__ */ React29.createElement(IconButton6, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(PencilIcon2, { fontSize: "tiny" }))))),
     /* @__PURE__ */ React29.createElement(PanelBody2, null, /* @__PURE__ */ React29.createElement(ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(Stack16, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React29.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React29.createElement(Divider4, null))))))
-  );
+  ));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
@@ -4662,10 +4663,10 @@ function setOverridableProp({
 import * as React31 from "react";
 import { forwardRef as forwardRef2 } from "react";
 import { CheckIcon, PlusIcon } from "@elementor/icons";
-import { Box as Box15, styled as styled4 } from "@elementor/ui";
+import { Box as Box16, styled as styled4 } from "@elementor/ui";
 import { __ as __28 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
-var IconContainer = styled4(Box15)`
+var IconContainer = styled4(Box16)`
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s ease-in-out;
@@ -4682,7 +4683,7 @@ var IconContainer = styled4(Box15)`
 		stroke-width: 2px;
 	}
 `;
-var Content = styled4(Box15)`
+var Content = styled4(Box16)`
 	position: relative;
 	display: flex;
 	align-items: center;
@@ -4719,14 +4720,17 @@ var Content = styled4(Box15)`
 		}
 	}
 `;
-var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
-  IconContainer,
+var Indicator2 = forwardRef2(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(
+  Content,
   {
-    className: "icon",
+    role: "button",
+    ref,
+    ...props,
+    className: isOpen || isOverridable ? "enlarged" : "",
     "aria-label": isOverridable ? __28("Overridable property", "elementor") : __28("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React31.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(PlusIcon, { fontSize: SIZE2 })
-)));
+  /* @__PURE__ */ React31.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React31.createElement(CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(PlusIcon, { fontSize: SIZE2 }))
+));
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 function OverridablePropIndicator() {