@elementor/editor-components 3.35.0-480 → 3.35.0-481

package/dist/index.js

@@ -40,7 +40,7 @@ var import_editor_canvas8 = require("@elementor/editor-canvas");
 var import_editor_documents13 = require("@elementor/editor-documents");
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
-var import_editor_panels4 = require("@elementor/editor-panels");
+var import_editor_panels5 = require("@elementor/editor-panels");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 var import_store80 = require("@elementor/store");
@@ -380,6 +380,8 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 var React10 = __toESM(require("react"));
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_panels3 = require("@elementor/editor-panels");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_store29 = require("@elementor/store");
 var import_ui10 = require("@elementor/ui");
@@ -1671,14 +1673,18 @@ function PropertiesGroup({
         import_ui6.Box,
         {
           sx: {
-            flex: 1,
             height: 28,
             display: "flex",
             alignItems: "center",
             border: 2,
             borderColor: "text.secondary",
             borderRadius: 1,
-            pl: 0.5
+            pl: 0.5,
+            flexGrow: 1,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            width: "100%"
           }
         },
         /* @__PURE__ */ React6.createElement(
@@ -1693,12 +1699,13 @@ function PropertiesGroup({
           }
         )
       ) : /* @__PURE__ */ React6.createElement(
-        import_ui6.Typography,
+        import_editor_ui3.EllipsisWithTooltip,
         {
+          title: group.label,
+          as: import_ui6.Typography,
           variant: "caption",
           sx: { color: "text.primary", fontWeight: 400, lineHeight: 1.66 }
-        },
-        group.label
+        }
       ), /* @__PURE__ */ React6.createElement(
         import_ui6.IconButton,
         {
@@ -2075,24 +2082,22 @@ var ComponentPanelHeader = () => {
       properties_count: overridablePropsCount
     });
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Box, null, /* @__PURE__ */ React10.createElement(
-    import_ui10.Stack,
+  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(
+    import_editor_ui6.EllipsisWithTooltip,
     {
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      sx: { height: 48, pl: 1.5, pr: 2, py: 1 }
-    },
-    /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center" }, /* @__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_ui10.Stack, { direction: "row", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React10.createElement(import_icons7.ComponentsFilledIcon, { fontSize: "tiny", stroke: "currentColor" }), /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "caption", sx: { fontWeight: 500 } }, componentName))),
-    /* @__PURE__ */ React10.createElement(
-      ComponentsBadge,
-      {
-        overridablePropsCount,
-        ref: anchorRef,
-        onClick: handleOpenPropertiesPanel
-      }
-    )
-  ), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
+      title: componentName,
+      as: import_ui10.Typography,
+      variant: "caption",
+      sx: { fontWeight: 500, flexGrow: 1 }
+    }
+  ), /* @__PURE__ */ React10.createElement(
+    ComponentsBadge,
+    {
+      overridablePropsCount,
+      ref: anchorRef,
+      onClick: handleOpenPropertiesPanel
+    }
+  )), /* @__PURE__ */ React10.createElement(import_ui10.Divider, null), /* @__PURE__ */ React10.createElement(
     ComponentIntroduction,
     {
       anchorRef,
@@ -2115,7 +2120,7 @@ function getComponentName() {
 
 // src/components/components-tab/components.tsx
 var React19 = __toESM(require("react"));
-var import_editor_ui9 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 
 // src/hooks/use-components.ts
 var import_store31 = require("@elementor/store");
@@ -2278,7 +2283,7 @@ var React15 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_editor_canvas5 = require("@elementor/editor-canvas");
 var import_editor_elements8 = require("@elementor/editor-elements");
-var import_editor_ui7 = require("@elementor/editor-ui");
+var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
@@ -2533,13 +2538,13 @@ var createComponentModel2 = (component) => {
 
 // src/components/components-tab/delete-confirmation-dialog.tsx
 var React14 = __toESM(require("react"));
-var import_editor_ui6 = require("@elementor/editor-ui");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_i18n18 = require("@wordpress/i18n");
 function DeleteConfirmationDialog({ open, onClose, onConfirm }) {
-  return /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
+  return /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n18.__)("Delete this component?", "elementor")), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n18.__)(
     "Existing instances on your pages will remain functional. You will no longer find this component in your list.",
     "elementor"
-  ))), /* @__PURE__ */ React14.createElement(import_editor_ui6.ConfirmationDialog.Actions, { onClose, onConfirm }));
+  ))), /* @__PURE__ */ React14.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose, onConfirm }));
 }
 
 // src/components/components-tab/components-item.tsx
@@ -2554,7 +2559,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     openEditMode,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui7.useEditable)({
+  } = (0, import_editor_ui8.useEditable)({
     value: component.name,
     onSubmit: renameComponent2,
     validation: validateComponentTitle
@@ -2586,7 +2591,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
     setIsDeleteDialogOpen(false);
   };
   return /* @__PURE__ */ React15.createElement(import_ui13.Stack, null, /* @__PURE__ */ React15.createElement(
-    import_editor_ui7.WarningInfotip,
+    import_editor_ui8.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -2625,7 +2630,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
         },
         /* @__PURE__ */ React15.createElement(import_ui13.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React15.createElement(import_icons9.ComponentsIcon, { fontSize: "tiny" })),
         /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, /* @__PURE__ */ React15.createElement(import_ui13.Box, { display: "flex", flex: 1, minWidth: 0, flexGrow: 1 }, isEditing ? /* @__PURE__ */ React15.createElement(
-          import_editor_ui7.EditableField,
+          import_editor_ui8.EditableField,
           {
             ref: editableRef,
             as: import_ui13.Typography,
@@ -2633,7 +2638,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
             ...getEditableProps()
           }
         ) : /* @__PURE__ */ React15.createElement(
-          import_editor_ui7.EllipsisWithTooltip,
+          import_editor_ui8.EllipsisWithTooltip,
           {
             title: component.name,
             as: import_ui13.Typography,
@@ -2658,7 +2663,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       }
     },
     canRename && /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "text.primary" },
@@ -2670,7 +2675,7 @@ var ComponentItem = ({ component, renameComponent: renameComponent2 }) => {
       (0, import_i18n19.__)("Rename", "elementor")
     ),
     canDelete && /* @__PURE__ */ React15.createElement(
-      import_editor_ui7.MenuListItem,
+      import_editor_ui8.MenuListItem,
       {
         sx: { minWidth: "160px" },
         primaryTypographyProps: { variant: "caption", color: "error.light" },
@@ -2929,11 +2934,11 @@ var useFilteredComponents = () => {
 
 // src/components/components-tab/components-pro-notification.tsx
 var React18 = __toESM(require("react"));
-var import_editor_ui8 = require("@elementor/editor-ui");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui16 = require("@elementor/ui");
 var import_i18n21 = require("@wordpress/i18n");
 function ComponentsProNotification() {
-  return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui8.InfoAlert, null, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n21.__)("Try Components for free:", "elementor")), " ", (0, import_i18n21.__)(
+  return /* @__PURE__ */ React18.createElement(import_ui16.Box, { sx: { px: 2 } }, /* @__PURE__ */ React18.createElement(import_editor_ui9.InfoAlert, null, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span" }, /* @__PURE__ */ React18.createElement(import_ui16.Typography, { variant: "caption", component: "span", fontWeight: "bold" }, (0, import_i18n21.__)("Try Components for free:", "elementor")), " ", (0, import_i18n21.__)(
     "Soon Components will be part of the Pro subscription, but what you create now will remain on your site.",
     "elementor"
   ))));
@@ -2946,7 +2951,7 @@ var ComponentsContent = () => {
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, hasComponents && /* @__PURE__ */ React19.createElement(ComponentSearch, null), hasComponents && !isProUser() && /* @__PURE__ */ React19.createElement(ComponentsProNotification, null), /* @__PURE__ */ React19.createElement(ComponentsList, null));
 };
 var Components = () => {
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
+  return /* @__PURE__ */ React19.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React19.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React19.createElement(ComponentsContent, null)));
 };
 
 // src/components/consts.ts
@@ -2958,7 +2963,7 @@ var React20 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_elements10 = require("@elementor/editor-elements");
 var import_editor_notifications3 = require("@elementor/editor-notifications");
-var import_editor_ui10 = require("@elementor/editor-ui");
+var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_store47 = require("@elementor/store");
 var import_ui17 = require("@elementor/ui");
@@ -3272,7 +3277,7 @@ function CreateComponentForm() {
       ...eventData.current
     });
   };
-  return /* @__PURE__ */ React20.createElement(import_editor_ui10.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React20.createElement(import_editor_ui11.ThemeProvider, null, /* @__PURE__ */ React20.createElement(
     import_ui17.Popover,
     {
       open: element !== null,
@@ -3322,7 +3327,7 @@ var Form2 = ({
     create: (0, import_i18n23.__)("Create", "elementor")
   };
   const nameInputId = "component-name";
-  return /* @__PURE__ */ React20.createElement(import_editor_ui10.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React20.createElement(import_editor_ui11.Form, { onSubmit: handleSubmit }, /* @__PURE__ */ React20.createElement(import_ui17.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React20.createElement(
     import_ui17.Stack,
     {
       direction: "row",
@@ -3646,12 +3651,12 @@ function getComponentDOMElements(id2) {
 
 // src/components/in-edit-mode.tsx
 var React23 = __toESM(require("react"));
-var import_editor_ui11 = require("@elementor/editor-ui");
+var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons12 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n25 = require("@wordpress/i18n");
 var openEditModeDialog = (lockedBy) => {
-  (0, import_editor_ui11.openDialog)({
+  (0, import_editor_ui12.openDialog)({
     component: /* @__PURE__ */ React23.createElement(EditModeDialog, { lockedBy })
   });
 };
@@ -3660,7 +3665,7 @@ var EditModeDialog = ({ lockedBy }) => {
   return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui18.DialogHeader, { logo: false }, /* @__PURE__ */ React23.createElement(import_ui18.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_ui18.Icon, { color: "secondary" }, /* @__PURE__ */ React23.createElement(import_icons12.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "subtitle1" }, content))), /* @__PURE__ */ React23.createElement(import_ui18.DialogContent, null, /* @__PURE__ */ React23.createElement(import_ui18.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React23.createElement(import_ui18.Typography, { variant: "body2" }, (0, import_i18n25.__)(
     "You can wait for them to finish or reach out to coordinate your changes together.",
     "elementor"
-  )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui11.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
+  )), /* @__PURE__ */ React23.createElement(import_ui18.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui18.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui12.closeDialog }, (0, import_i18n25.__)("Close", "elementor"))))));
 };
 
 // src/components/instance-editing-panel/instance-editing-panel.tsx
@@ -3668,8 +3673,8 @@ var React29 = __toESM(require("react"));
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_elements15 = require("@elementor/editor-elements");
-var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_ui13 = require("@elementor/editor-ui");
+var import_editor_panels4 = require("@elementor/editor-panels");
+var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons14 = require("@elementor/icons");
 var import_ui23 = require("@elementor/ui");
 var import_i18n27 = require("@wordpress/i18n");
@@ -3718,7 +3723,7 @@ var EmptyState2 = ({ onEditComponent }) => {
 var React28 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui12 = require("@elementor/editor-ui");
+var import_editor_ui13 = require("@elementor/editor-ui");
 var import_ui22 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-prop-control.tsx
@@ -4074,7 +4079,7 @@ function OverridePropsGroup({ group, props, overrides }) {
         sx: { flexGrow: 0, flexShrink: 1, marginInlineEnd: 1 }
       }
     )),
-    /* @__PURE__ */ React28.createElement(import_editor_ui12.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
+    /* @__PURE__ */ React28.createElement(import_editor_ui13.CollapseIcon, { open: isOpen, color: "secondary", fontSize: "tiny" })
   ), /* @__PURE__ */ React28.createElement(import_ui22.Collapse, { id: contentId, "aria-labelledby": labelId, in: isOpen, timeout: "auto" }, /* @__PURE__ */ React28.createElement(import_ui22.Stack, { direction: "column", gap: 1, p: 2 }, group.props.map((overrideKey) => /* @__PURE__ */ React28.createElement(
     OverridePropControl,
     {
@@ -4102,7 +4107,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(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_editor_panels3.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.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_ui13.EllipsisWithTooltip, { title: component.name, as: import_editor_panels3.PanelHeaderTitle, sx: { flexGrow: 1 } }), canEdit && /* @__PURE__ */ React29.createElement(import_ui23.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui23.IconButton, { size: "tiny", onClick: handleEditComponent, "aria-label": panelTitle }, /* @__PURE__ */ React29.createElement(import_icons14.PencilIcon, { fontSize: "tiny" }))))), /* @__PURE__ */ React29.createElement(import_editor_panels3.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_ui23.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(import_editor_panels4.PanelHeader, { sx: { justifyContent: "start", px: 2 } }, /* @__PURE__ */ React29.createElement(import_ui23.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_ui23.Tooltip, { title: panelTitle }, /* @__PURE__ */ React29.createElement(import_ui23.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_ui23.Stack, { direction: "column", alignItems: "stretch" }, groups.map((group) => /* @__PURE__ */ React29.createElement(React29.Fragment, { key: group.id }, /* @__PURE__ */ React29.createElement(
     OverridePropsGroup,
     {
       group,
@@ -5346,7 +5351,7 @@ function hasOverrides(settings) {
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
   (0, import_store80.__registerSlice)(slice);
-  (0, import_editor_panels4.__registerPanel)(panel);
+  (0, import_editor_panels5.__registerPanel)(panel);
   (0, import_editor_canvas8.registerElementType)(
     COMPONENT_WIDGET_TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })