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

package/dist/index.js

@@ -1619,7 +1619,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue, existingLabels =
     }
     onSubmit({ label: propLabel ?? "", group });
   };
-  return /* @__PURE__ */ React3.createElement(import_editor_ui2.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(import_editor_ui2.Form, { onSubmit: handleSubmit, "data-testid": "overridable-prop-form" }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { alignItems: "start", sx: { width: "268px", ...sx } }, /* @__PURE__ */ React3.createElement(
     import_ui3.Stack,
     {
       direction: "row",
@@ -2312,7 +2312,7 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement(import_ui10.Box, { "data-testid": "component-panel-header" }, /* @__PURE__ */ React10.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React10.createElement(import_ui10.Tooltip, { title: (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: "tiny", onClick: onBack, "aria-label": (0, import_i18n13.__)("Back", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons7.ArrowLeftIcon, { fontSize: "tiny" }))), /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(
     import_editor_ui6.EllipsisWithTooltip,
     {
       title: componentName,
@@ -3483,7 +3483,8 @@ function CreateComponentForm() {
       open: element !== null,
       onClose: cancelSave,
       anchorReference: "anchorPosition",
-      anchorPosition
+      anchorPosition,
+      "data-testid": "create-component-form"
     },
     element !== null && /* @__PURE__ */ React19.createElement(
       Form2,
@@ -4448,7 +4449,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(import_ui22.Box, { "data-testid": "instance-editing-panel" }, /* @__PURE__ */ React29.createElement(
     ComponentInstanceProvider,
     {
       componentId,
@@ -4457,7 +4458,7 @@ function InstanceEditingPanel() {
     },
     /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", flexGrow: 1, gap: 1, maxWidth: "100%" }, /* @__PURE__ */ React29.createElement(import_icons14.ComponentsIcon, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React29.createElement(import_editor_ui14.EllipsisWithTooltip, { title: component.name, as: import_editor_panels4.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(import_ui22.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui22.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))),
     /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelBody, null, /* @__PURE__ */ React29.createElement(import_editor_controls4.ControlAdornmentsProvider, { items: (0, import_editor_editing_panel5.getFieldIndicators)("settings") }, isEmpty ? /* @__PURE__ */ React29.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React29.createElement(import_ui22.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id + componentInstanceId }, /* @__PURE__ */ React29.createElement(OverridePropsGroup, { group }), /* @__PURE__ */ React29.createElement(import_ui22.Divider, null))))))
-  );
+  ));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
@@ -4679,14 +4680,17 @@ var Content = (0, import_ui23.styled)(import_ui23.Box)`
 		}
 	}
 `;
-var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(Content, { ref, ...props, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React31.createElement(
-  IconContainer,
+var Indicator2 = (0, import_react17.forwardRef)(({ isOpen, isOverridable, ...props }, ref) => /* @__PURE__ */ React31.createElement(
+  Content,
   {
-    className: "icon",
+    role: "button",
+    ref,
+    ...props,
+    className: isOpen || isOverridable ? "enlarged" : "",
     "aria-label": isOverridable ? (0, import_i18n28.__)("Overridable property", "elementor") : (0, import_i18n28.__)("Make prop overridable", "elementor")
   },
-  isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 })
-)));
+  /* @__PURE__ */ React31.createElement(IconContainer, { className: "icon" }, isOverridable ? /* @__PURE__ */ React31.createElement(import_icons15.CheckIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React31.createElement(import_icons15.PlusIcon, { fontSize: SIZE2 }))
+));
 
 // src/components/overridable-props/overridable-prop-indicator.tsx
 function OverridablePropIndicator() {