@elementor/editor-components 4.0.0-681 → 4.0.0-683

package/dist/index.js

@@ -491,6 +491,7 @@ var componentOverrideTransformer = (0, import_editor_canvas3.createTransformer)(
 
 // src/components/components-tab/components.tsx
 var React8 = __toESM(require("react"));
+var import_react3 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui6 = require("@elementor/ui");
 var import_utils3 = require("@elementor/utils");
@@ -860,7 +861,7 @@ var import_icons4 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
-  return /* @__PURE__ */ React6.createElement(import_ui5.Box, { sx: { mt: "auto" } }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(import_ui5.Box, { sx: { mt: "auto", position: "sticky", bottom: 0 } }, /* @__PURE__ */ React6.createElement(
     import_ui5.Alert,
     {
       variant: "standard",
@@ -900,12 +901,49 @@ function ComponentsProNotification() {
 }
 
 // src/components/components-tab/components.tsx
+var FULL_HEIGHT_STYLE_ID = "components-full-height-panel";
+var FULL_HEIGHT_CSS = `
+#elementor-panel-page-elements {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+#elementor-panel-elements {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+
+#elementor-panel-elements-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+`;
+var useFullHeightPanel = () => {
+  (0, import_react3.useLayoutEffect)(() => {
+    let style = document.getElementById(FULL_HEIGHT_STYLE_ID);
+    if (!style) {
+      style = document.createElement("style");
+      style.id = FULL_HEIGHT_STYLE_ID;
+      style.textContent = FULL_HEIGHT_CSS;
+      document.head.appendChild(style);
+    }
+    return () => {
+      document.getElementById(FULL_HEIGHT_STYLE_ID)?.remove();
+    };
+  }, []);
+};
 var ComponentsContent = () => {
   const { components, isLoading } = useComponents();
   const hasComponents = !isLoading && components.length > 0;
   const hasPro = (0, import_utils3.hasProInstalled)();
   const showProNotification = !hasPro && hasComponents;
-  return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { sx: { height: "100%" } }, hasComponents && /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null), showProNotification && /* @__PURE__ */ React8.createElement(ComponentsProNotification, null));
+  useFullHeightPanel();
+  return /* @__PURE__ */ React8.createElement(import_ui6.Stack, { justifyContent: "space-between", sx: { flex: 1, minHeight: 0 } }, hasComponents && /* @__PURE__ */ React8.createElement(ComponentSearch, null), /* @__PURE__ */ React8.createElement(ComponentsList, null), showProNotification && /* @__PURE__ */ React8.createElement(ComponentsProNotification, null));
 };
 var Components = () => {
   return /* @__PURE__ */ React8.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
@@ -972,18 +1010,18 @@ var import_i18n10 = require("@wordpress/i18n");
 
 // src/provider/component-instance-context.tsx
 var React11 = __toESM(require("react"));
-var import_react3 = require("react");
-var ComponentInstanceContext = (0, import_react3.createContext)(null);
+var import_react4 = require("react");
+var ComponentInstanceContext = (0, import_react4.createContext)(null);
 function ComponentInstanceProvider({ children, ...props }) {
   return /* @__PURE__ */ React11.createElement(ComponentInstanceContext.Provider, { value: props }, children);
 }
-var useComponentId = () => (0, import_react3.useContext)(ComponentInstanceContext)?.componentId;
-var useComponentInstanceOverrides = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overrides;
-var useComponentOverridableProps = () => (0, import_react3.useContext)(ComponentInstanceContext)?.overridableProps;
+var useComponentId = () => (0, import_react4.useContext)(ComponentInstanceContext)?.componentId;
+var useComponentInstanceOverrides = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overrides;
+var useComponentOverridableProps = () => (0, import_react4.useContext)(ComponentInstanceContext)?.overridableProps;
 
 // src/components/instance-editing-panel/detach-action.tsx
 var React13 = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_editor_notifications = require("@elementor/editor-notifications");
 var import_icons8 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
@@ -1374,7 +1412,7 @@ var DetachAction = ({
   componentInstanceId,
   componentId
 }) => {
-  const [isDetachDialogOpen, setIsDetachDialogOpen] = (0, import_react4.useState)(false);
+  const [isDetachDialogOpen, setIsDetachDialogOpen] = (0, import_react5.useState)(false);
   const handleDetachConfirm = async () => {
     setIsDetachDialogOpen(false);
     try {
@@ -1449,7 +1487,19 @@ var EmptyState2 = ({ onEditComponent }) => {
     /* @__PURE__ */ React14.createElement(import_icons9.ComponentPropListIcon, { fontSize: "large" }),
     /* @__PURE__ */ React14.createElement(import_ui9.Typography, { align: "center", variant: "subtitle2" }, (0, import_i18n9.__)("No properties yet", "elementor")),
     /* @__PURE__ */ React14.createElement(import_ui9.Typography, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React14.createElement(import_ui9.Button, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(import_icons9.PencilIcon, { fontSize: "small" }), (0, import_i18n9.__)("Edit component", "elementor"))
+    canEdit && /* @__PURE__ */ React14.createElement(
+      import_ui9.Button,
+      {
+        variant: "outlined",
+        color: "secondary",
+        size: "small",
+        sx: { mt: 1 },
+        disabled: !onEditComponent,
+        onClick: onEditComponent
+      },
+      /* @__PURE__ */ React14.createElement(import_icons9.PencilIcon, { fontSize: "small" }),
+      (0, import_i18n9.__)("Edit component", "elementor")
+    )
   );
 };
 
@@ -1462,7 +1512,7 @@ var import_ui13 = require("@elementor/ui");
 
 // src/components/instance-editing-panel/override-props-group.tsx
 var React18 = __toESM(require("react"));
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_ui12 = require("@elementor/ui");
@@ -1507,13 +1557,13 @@ function getControlsByBind(controls) {
 
 // src/provider/overridable-prop-context.tsx
 var React15 = __toESM(require("react"));
-var import_react5 = require("react");
-var OverridablePropContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var OverridablePropContext = (0, import_react6.createContext)(null);
 function OverridablePropProvider({ children, ...props }) {
   return /* @__PURE__ */ React15.createElement(OverridablePropContext.Provider, { value: props }, children);
 }
-var useOverridablePropValue = () => (0, import_react5.useContext)(OverridablePropContext)?.value;
-var useComponentInstanceElement = () => (0, import_react5.useContext)(OverridablePropContext)?.componentInstanceElement;
+var useOverridablePropValue = () => (0, import_react6.useContext)(OverridablePropContext)?.value;
+var useComponentInstanceElement = () => (0, import_react6.useContext)(OverridablePropContext)?.componentInstanceElement;
 
 // src/utils/resolve-override-prop-value.ts
 var resolveOverridePropValue = (originalPropValue) => {
@@ -2055,7 +2105,7 @@ function OverridePropsGroup({ group }) {
   const handleClick = () => {
     setIsOpen(!isOpen);
   };
-  const id = (0, import_react6.useId)();
+  const id = (0, import_react7.useId)();
   const labelId = `label-${id}`;
   const contentId = `content-${id}`;
   const title = group.label;
@@ -2222,7 +2272,7 @@ function InstanceEditingPanel() {
 }
 
 // src/components/load-template-components.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_editor_templates = require("@elementor/editor-templates");
 
 // src/store/actions/load-components-assets.ts
@@ -2261,14 +2311,14 @@ async function getComponentIds(elements, cache) {
 async function getDocumentsMap(ids, cache) {
   const documents = await Promise.all(
     ids.map(async (id) => {
-      const document = await cache.get(id);
-      if (!document) {
+      const document2 = await cache.get(id);
+      if (!document2) {
         return null;
       }
-      return [id, document];
+      return [id, document2];
     })
   );
-  return new Map(documents.filter((document) => document !== null));
+  return new Map(documents.filter((document2) => document2 !== null));
 }
 
 // src/store/actions/load-components-overridable-props.ts
@@ -2311,15 +2361,15 @@ function loadComponentsStyles(documents) {
 }
 function addStyles(documents) {
   const styles = Object.fromEntries(
-    [...documents.entries()].map(([id, document]) => [id, extractStylesFromDocument(document)])
+    [...documents.entries()].map(([id, document2]) => [id, extractStylesFromDocument(document2)])
   );
   (0, import_store25.__dispatch)(slice.actions.addStyles(styles));
 }
-function extractStylesFromDocument(document) {
-  if (!document.elements?.length) {
+function extractStylesFromDocument(document2) {
+  if (!document2.elements?.length) {
     return [];
   }
-  return document.elements.flatMap(extractStylesFromElement);
+  return document2.elements.flatMap(extractStylesFromElement);
 }
 function extractStylesFromElement(element) {
   return [
@@ -2345,7 +2395,7 @@ function updateDocumentState(documents) {
 // src/components/load-template-components.tsx
 var LoadTemplateComponents = () => {
   const templates = (0, import_editor_templates.useLoadedTemplates)();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     loadComponentsAssets(templates.flatMap((elements) => elements ?? []));
   }, [templates]);
   return null;
@@ -2728,10 +2778,10 @@ function createComponentModel() {
 }
 
 // src/populate-store.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_store29 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     (0, import_store29.__dispatch)(loadComponents());
   }, []);
   return null;
@@ -2906,7 +2956,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     return;
   }
   const documents = await getComponentDocuments(elements);
-  const draftIds = [...documents.values()].filter(import_editor_documents5.isDocumentDirty).map((document) => document.id);
+  const draftIds = [...documents.values()].filter(import_editor_documents5.isDocumentDirty).map((document2) => document2.id);
   if (draftIds.length === 0) {
     return;
   }