@elementor/editor-components 4.0.0-680 → 4.0.0-682

package/dist/index.mjs

@@ -411,6 +411,7 @@ var componentOverrideTransformer = createTransformer3((override) => {
 
 // src/components/components-tab/components.tsx
 import * as React8 from "react";
+import { useLayoutEffect } from "react";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { Stack as Stack4 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
@@ -780,7 +781,7 @@ import { CrownFilledIcon as CrownFilledIcon2 } from "@elementor/icons";
 import { Alert, AlertAction, AlertTitle, Box as Box5, Typography as Typography3 } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 function ComponentsUpgradeAlert({ title, description, upgradeUrl }) {
-  return /* @__PURE__ */ React6.createElement(Box5, { sx: { mt: "auto" } }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React6.createElement(Box5, { sx: { mt: "auto", position: "sticky", bottom: 0 } }, /* @__PURE__ */ React6.createElement(
     Alert,
     {
       variant: "standard",
@@ -820,12 +821,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 = () => {
+  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 = hasProInstalled2();
   const showProNotification = !hasPro && hasComponents;
-  return /* @__PURE__ */ React8.createElement(Stack4, { 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(Stack4, { 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(ThemeProvider, null, /* @__PURE__ */ React8.createElement(SearchProvider, { localStorageKey: "elementor-components-search" }, /* @__PURE__ */ React8.createElement(ComponentsContent, null)));
@@ -1369,7 +1407,19 @@ var EmptyState2 = ({ onEditComponent }) => {
     /* @__PURE__ */ React14.createElement(ComponentPropListIcon, { fontSize: "large" }),
     /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "subtitle2" }, __9("No properties yet", "elementor")),
     /* @__PURE__ */ React14.createElement(Typography5, { align: "center", variant: "caption", maxWidth: "170px" }, message),
-    canEdit && !!onEditComponent && /* @__PURE__ */ React14.createElement(Button3, { variant: "outlined", color: "secondary", size: "small", sx: { mt: 1 }, onClick: onEditComponent }, /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" }), __9("Edit component", "elementor"))
+    canEdit && /* @__PURE__ */ React14.createElement(
+      Button3,
+      {
+        variant: "outlined",
+        color: "secondary",
+        size: "small",
+        sx: { mt: 1 },
+        disabled: !onEditComponent,
+        onClick: onEditComponent
+      },
+      /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" }),
+      __9("Edit component", "elementor")
+    )
   );
 };
 
@@ -2195,14 +2245,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
@@ -2245,15 +2295,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)])
   );
   dispatch5(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 [
@@ -2842,7 +2892,7 @@ async function publishDraftComponentsInPageBeforeSave({ status, elements }) {
     return;
   }
   const documents = await getComponentDocuments(elements);
-  const draftIds = [...documents.values()].filter(isDocumentDirty2).map((document) => document.id);
+  const draftIds = [...documents.values()].filter(isDocumentDirty2).map((document2) => document2.id);
   if (draftIds.length === 0) {
     return;
   }