@elementor/editor-components 3.35.0-346 → 3.35.0-348

package/dist/index.mjs

@@ -458,7 +458,7 @@ var ComponentSearch = () => {
 // src/components/components-tab/components-list.tsx
 import * as React7 from "react";
 import { ComponentsIcon as ComponentsIcon2, EyeIcon } from "@elementor/icons";
-import { Box as Box6, Divider as Divider2, Icon, Link, List, Stack as Stack4, Typography as Typography3 } from "@elementor/ui";
+import { Box as Box6, Divider as Divider2, Icon, Link, List, Stack as Stack5, Typography as Typography3 } from "@elementor/ui";
 import { __ as __6 } from "@wordpress/i18n";
 
 // src/hooks/use-components.ts
@@ -473,7 +473,7 @@ var useComponents = () => {
 import * as React5 from "react";
 import { endDragElementFromPanel, startDragElementFromPanel } from "@elementor/editor-canvas";
 import { dropElement } from "@elementor/editor-elements";
-import { MenuListItem } from "@elementor/editor-ui";
+import { EllipsisWithTooltip, MenuListItem } from "@elementor/editor-ui";
 import { ComponentsIcon, DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
@@ -482,8 +482,8 @@ import {
   IconButton as IconButton2,
   ListItemButton,
   ListItemIcon,
-  ListItemText,
   Menu,
+  Stack as Stack3,
   Typography as Typography2,
   usePopupState
 } from "@elementor/ui";
@@ -889,21 +889,47 @@ var ComponentItem = ({ component }) => {
     }
     archiveComponent(component.id);
   };
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement(Stack3, null, /* @__PURE__ */ React5.createElement(
     ListItemButton,
     {
       draggable: true,
       onDragStart: () => startDragElementFromPanel(componentModel),
       onDragEnd: handleDragEnd,
       shape: "rounded",
-      sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 }
+      sx: {
+        border: "solid 1px",
+        borderColor: "divider",
+        py: 0.5,
+        px: 1,
+        display: "flex",
+        width: "100%",
+        alignItems: "center",
+        gap: 1
+      }
     },
-    /* @__PURE__ */ React5.createElement(Box4, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React5.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React5.createElement(ComponentsIcon, { fontSize: "tiny" })), /* @__PURE__ */ React5.createElement(
-      ListItemText,
+    /* @__PURE__ */ React5.createElement(
+      Box4,
       {
-        primary: /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", sx: { color: "text.primary" } }, component.name)
-      }
-    )),
+        onClick: handleClick,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          minWidth: 0,
+          flexGrow: 1
+        }
+      },
+      /* @__PURE__ */ React5.createElement(ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React5.createElement(ComponentsIcon, { fontSize: "tiny" })),
+      /* @__PURE__ */ React5.createElement(Box4, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, /* @__PURE__ */ React5.createElement(
+        EllipsisWithTooltip,
+        {
+          title: component.name,
+          as: Typography2,
+          variant: "caption",
+          color: "text.primary"
+        }
+      ))
+    ),
     /* @__PURE__ */ React5.createElement(IconButton2, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
   ), /* @__PURE__ */ React5.createElement(
     Menu,
@@ -936,12 +962,12 @@ var addComponentToPage = (model) => {
 
 // src/components/components-tab/loading-components.tsx
 import * as React6 from "react";
-import { Box as Box5, ListItemButton as ListItemButton2, Skeleton, Stack as Stack3 } from "@elementor/ui";
+import { Box as Box5, ListItemButton as ListItemButton2, Skeleton, Stack as Stack4 } from "@elementor/ui";
 var ROWS_COUNT = 6;
 var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
 var LoadingComponents = () => {
   return /* @__PURE__ */ React6.createElement(
-    Stack3,
+    Stack4,
     {
       "aria-label": "Loading components",
       gap: 1,
@@ -991,7 +1017,7 @@ function ComponentsList() {
 }
 var EmptyState = () => {
   return /* @__PURE__ */ React7.createElement(
-    Stack4,
+    Stack5,
     {
       alignItems: "center",
       justifyContent: "center",
@@ -1025,7 +1051,7 @@ var EmptyState = () => {
 var EmptySearchResult = () => {
   const { searchValue, clearSearch } = useSearch();
   return /* @__PURE__ */ React7.createElement(
-    Stack4,
+    Stack5,
     {
       color: "text.secondary",
       pt: 5,
@@ -1099,7 +1125,7 @@ import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useSta
 import { getElementLabel } from "@elementor/editor-elements";
 import { Form as FormElement, ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { StarIcon } from "@elementor/icons";
-import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack5, TextField as TextField2, Typography as Typography4 } from "@elementor/ui";
+import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack as Stack6, TextField as TextField2, Typography as Typography4 } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
 
 // src/store/actions/create-unpublished-component.ts
@@ -1344,8 +1370,8 @@ var Form = ({
     create: __8("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React9.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React9.createElement(Stack5, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React9.createElement(
-    Stack5,
+  return /* @__PURE__ */ React9.createElement(FormElement, { onSubmit: handleSubmit }, /* @__PURE__ */ React9.createElement(Stack6, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React9.createElement(
+    Stack6,
     {
       direction: "row",
       alignItems: "center",
@@ -1367,7 +1393,7 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React9.createElement(Stack5, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React9.createElement(Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React9.createElement(Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
+  ))), /* @__PURE__ */ React9.createElement(Stack6, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React9.createElement(Button, { onClick: closePopup, color: "secondary", variant: "text", size: "small" }, texts.cancel), /* @__PURE__ */ React9.createElement(Button, { type: "submit", disabled: !isValid, variant: "contained", color: "primary", size: "small" }, texts.create))));
 };
 
 // src/components/edit-component/edit-component.tsx
@@ -1636,7 +1662,7 @@ function getComponentDOMElement(id) {
 import * as React12 from "react";
 import { closeDialog, openDialog } from "@elementor/editor-ui";
 import { InfoCircleFilledIcon } from "@elementor/icons";
-import { Box as Box7, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack6, Typography as Typography5 } from "@elementor/ui";
+import { Box as Box7, Button as Button2, DialogActions, DialogContent, DialogHeader, Icon as Icon2, Stack as Stack7, Typography as Typography5 } from "@elementor/ui";
 import { __ as __10 } from "@wordpress/i18n";
 var openEditModeDialog = (lockedBy) => {
   openDialog({
@@ -1645,7 +1671,7 @@ var openEditModeDialog = (lockedBy) => {
 };
 var EditModeDialog = ({ lockedBy }) => {
   const content = __10("%s is currently editing this document", "elementor").replace("%s", lockedBy);
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(Typography5, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(Stack6, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(Typography5, { variant: "body2" }, __10(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React12.createElement(Box7, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React12.createElement(Icon2, { color: "secondary" }, /* @__PURE__ */ React12.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React12.createElement(Typography5, { variant: "subtitle1" }, content))), /* @__PURE__ */ React12.createElement(DialogContent, null, /* @__PURE__ */ React12.createElement(Stack7, { spacing: 2, direction: "column" }, /* @__PURE__ */ React12.createElement(Typography5, { variant: "body2" }, __10(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
   )), /* @__PURE__ */ React12.createElement(DialogActions, null, /* @__PURE__ */ React12.createElement(Button2, { color: "secondary", variant: "contained", onClick: closeDialog }, __10("Close", "elementor"))))));
@@ -1658,7 +1684,7 @@ import { useElementSetting, useSelectedElement } from "@elementor/editor-element
 import { PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 import { ComponentsIcon as ComponentsIcon3, PencilIcon as PencilIcon2 } from "@elementor/icons";
 import { __getState as getState5 } from "@elementor/store";
-import { IconButton as IconButton3, Stack as Stack9, Tooltip as Tooltip2 } from "@elementor/ui";
+import { IconButton as IconButton3, Stack as Stack10, Tooltip as Tooltip2 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
 
 // src/prop-types/component-instance-prop-type.ts
@@ -1702,11 +1728,11 @@ var componentInstancePropTypeUtil = createPropUtils3(
 // src/components/instance-editing-panel/empty-state.tsx
 import * as React13 from "react";
 import { ComponentPropListIcon as ComponentPropListIcon2, PencilIcon } from "@elementor/icons";
-import { Button as Button3, Stack as Stack7, Typography as Typography6 } from "@elementor/ui";
+import { Button as Button3, Stack as Stack8, Typography as Typography6 } from "@elementor/ui";
 import { __ as __11 } from "@wordpress/i18n";
 var EmptyState2 = ({ onEditComponent }) => {
   return /* @__PURE__ */ React13.createElement(
-    Stack7,
+    Stack8,
     {
       alignItems: "center",
       justifyContent: "start",
@@ -1730,7 +1756,7 @@ import * as React14 from "react";
 import { useId } from "react";
 import { useStateByElement } from "@elementor/editor-editing-panel";
 import { CollapseIcon } from "@elementor/editor-ui";
-import { Collapse, ListItemButton as ListItemButton3, ListItemText as ListItemText2, Stack as Stack8 } from "@elementor/ui";
+import { Collapse, ListItemButton as ListItemButton3, ListItemText, Stack as Stack9 } from "@elementor/ui";
 function OverridePropsGroup({ group, props }) {
   const [isOpen, setIsOpen] = useStateByElement(group.id, true);
   const handleClick = () => {
@@ -1750,8 +1776,8 @@ function OverridePropsGroup({ group, props }) {
       p: 0,
       sx: { "&:hover": { backgroundColor: "transparent" } }
     },
-    /* @__PURE__ */ React14.createElement(Stack8, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
-      ListItemText2,
+    /* @__PURE__ */ React14.createElement(Stack9, { direction: "row", alignItems: "center", justifyItems: "start", flexGrow: 1, gap: 0.5 }, /* @__PURE__ */ React14.createElement(
+      ListItemText,
       {
         secondary: title,
         secondaryTypographyProps: { color: "text.primary", variant: "caption", fontWeight: "bold" },
@@ -1759,7 +1785,7 @@ function OverridePropsGroup({ group, props }) {
       }
     )),
     /* @__PURE__ */ React14.createElement(CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
-  ), /* @__PURE__ */ React14.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(Stack8, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
+  ), /* @__PURE__ */ React14.createElement(Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React14.createElement(Stack9, { direction: "column", gap: 1, p: 2 }, group.props.map((propId) => (
     // TODO: Render actual controls
     /* @__PURE__ */ React14.createElement("pre", { key: propId }, JSON.stringify(props[propId], null, 2))
   )))));
@@ -1782,7 +1808,7 @@ function InstanceEditingPanel() {
     (groupId) => overridableProps.groups.items[groupId] ? overridableProps.groups.items[groupId] : null
   ).filter(Boolean);
   const isEmpty = groups.length === 0 || Object.keys(overridableProps.props).length === 0;
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(PanelHeader, { sx: { justifyContent: "start" } }, /* @__PURE__ */ React15.createElement(Stack9, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(Stack9, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(Tooltip2, { title: panelTitle }, /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(Stack9, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(PanelHeader, { sx: { justifyContent: "start" } }, /* @__PURE__ */ React15.createElement(Stack10, { direction: "row", alignContent: "space-between", flexGrow: 1 }, /* @__PURE__ */ React15.createElement(Stack10, { direction: "row", alignItems: "center", justifyContent: "start", gap: 1, flexGrow: 1 }, /* @__PURE__ */ React15.createElement(ComponentsIcon3, { fontSize: "small", sx: { color: "text.tertiary" } }), /* @__PURE__ */ React15.createElement(PanelHeaderTitle, null, component.name)), /* @__PURE__ */ React15.createElement(Tooltip2, { title: panelTitle }, /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React15.createElement(PencilIcon2, { fontSize: "tiny" }))))), /* @__PURE__ */ React15.createElement(PanelBody, null, isEmpty ? /* @__PURE__ */ React15.createElement(EmptyState2, { onEditComponent: handleEditComponent }) : /* @__PURE__ */ React15.createElement(Stack10, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React15.createElement(OverridePropsGroup, { key: group.id, group, props: overridableProps.props })))));
 }
 
 // src/components/overridable-props/overridable-prop-control.tsx
@@ -2109,7 +2135,7 @@ var Indicator = forwardRef(({ isOpen, isOverridable, ...props }, ref) => /* @__P
 import * as React19 from "react";
 import { useState as useState4 } from "react";
 import { Form as Form2, MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
-import { Button as Button4, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack10, TextField as TextField3, Typography as Typography7 } from "@elementor/ui";
+import { Button as Button4, FormLabel as FormLabel2, Grid as Grid2, Select, Stack as Stack11, TextField as TextField3, Typography as Typography7 } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 var SIZE2 = "tiny";
 var DEFAULT_GROUP = { value: null, label: __15("Default", "elementor") };
@@ -2121,8 +2147,8 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
   const isCreate = currentValue === void 0;
   const title = isCreate ? __15("Create new property", "elementor") : __15("Update property", "elementor");
   const ctaLabel = isCreate ? __15("Create", "elementor") : __15("Update", "elementor");
-  return /* @__PURE__ */ React19.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(Stack10, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
-    Stack10,
+  return /* @__PURE__ */ React19.createElement(Form2, { onSubmit: () => onSubmit({ label: propLabel ?? "", group }) }, /* @__PURE__ */ React19.createElement(Stack11, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React19.createElement(
+    Stack11,
     {
       direction: "row",
       alignItems: "center",
@@ -2159,7 +2185,7 @@ function OverridablePropForm({ onSubmit, groups, currentValue }) {
       }
     },
     (groups ?? [DEFAULT_GROUP]).map(({ label: groupLabel, ...props }) => /* @__PURE__ */ React19.createElement(MenuListItem2, { key: props.value, ...props, value: props.value ?? "" }, groupLabel))
-  ))), /* @__PURE__ */ React19.createElement(Stack10, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(Button4, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
+  ))), /* @__PURE__ */ React19.createElement(Stack11, { direction: "row", justifyContent: "flex-end", alignSelf: "end", mt: 1.5, py: 1, px: 1.5 }, /* @__PURE__ */ React19.createElement(Button4, { type: "submit", disabled: !propLabel, variant: "contained", color: "primary", size: "small" }, ctaLabel))));
 }
 
 // src/components/overridable-props/utils/get-overridable-prop.ts