@elementor/editor-global-classes 4.1.0-822 → 4.1.0-824

package/dist/index.js

@@ -1280,6 +1280,7 @@ var React17 = __toESM(require("react"));
 var import_react8 = require("react");
 var import_store18 = require("@elementor/store");
 var import_ui14 = require("@elementor/ui");
+var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n13 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
@@ -1592,9 +1593,17 @@ var useDeleteConfirmation = () => {
 var React14 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(import_ui11.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(
+  import_ui11.UnstableSortableProvider,
+  {
+    restrictAxis: true,
+    variant: "static",
+    dragPlaceholderStyle: { visibility: "hidden" },
+    ...props
+  }
+);
 var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, ...props }) => {
+var SortableItem = ({ children, id: id2, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     import_ui11.UnstableSortableItem,
     {
@@ -1615,7 +1624,7 @@ var SortableItem = ({ children, id: id2, ...props }) => {
           import_ui11.Box,
           {
             ...itemProps,
-            style: itemStyle,
+            style: { ...itemStyle, ...!isDragOverlay ? style : null },
             component: "li",
             role: "listitem",
             sx: {
@@ -1938,7 +1947,14 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
 );
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) => {
+var ROW_HEIGHT = 40;
+var OVERSCAN = 6;
+var GlobalClassesList = ({
+  disabled,
+  scrollElement,
+  onStopSyncRequest,
+  onStartSyncRequest
+}) => {
   const {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
@@ -1949,6 +1965,26 @@ var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) =>
   const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
   const [classesOrder, reorderClasses] = useReorder(draggedItemId, setDraggedItemId, draggedItemLabel ?? "");
   const filteredCssClasses = useFilteredCssClasses();
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: filteredCssClasses.length,
+    getScrollElement: () => scrollElement ?? null,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: OVERSCAN,
+    getItemKey: (index) => filteredCssClasses[index].id,
+    // Keep the actively dragged row mounted even when scrolled out of view.
+    // SortableItem unregisters its render on unmount, which would make the
+    // DragOverlay clone disappear mid-drag.
+    rangeExtractor: (range) => {
+      const indices = new Set((0, import_react_virtual.defaultRangeExtractor)(range));
+      if (draggedItemId) {
+        const draggedItemIndex = filteredCssClasses.findIndex((cssClass) => cssClass.id === draggedItemId);
+        if (draggedItemIndex >= 0) {
+          indices.add(draggedItemIndex);
+        }
+      }
+      return [...indices].sort((a, b) => a - b);
+    }
+  });
   (0, import_react8.useEffect)(() => {
     const handler2 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
@@ -1975,67 +2011,92 @@ var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) =>
   }
   const isFiltersApplied = filters?.length || searchValue;
   const allowSorting = filteredCssClasses.length > 1 && !isFiltersApplied;
-  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(import_ui14.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
-    SortableProvider,
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(
+    import_ui14.List,
     {
-      value: classesOrder,
-      onChange: reorderClasses,
-      disableDragOverlay: !allowSorting
-    },
-    filteredCssClasses?.map((cssClass) => /* @__PURE__ */ React17.createElement(SortableItem, { key: cssClass.id, id: cssClass.id }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
-      if (isDragged && !draggedItemId) {
-        setDraggedItemId(cssClass.id);
+      sx: {
+        position: "relative",
+        display: "block",
+        height: virtualizer.getTotalSize(),
+        padding: 0
       }
-      return /* @__PURE__ */ React17.createElement(
-        ClassItem,
-        {
-          id: cssClass.id,
-          label: cssClass.label,
-          renameClass: (newLabel) => {
-            trackGlobalClasses({
-              event: "classRenamed",
-              classId: cssClass.id,
-              oldValue: cssClass.label,
-              newValue: newLabel,
-              source: "class-manager"
-            });
-            dispatch5(
-              slice.actions.update({
-                style: {
-                  id: cssClass.id,
-                  label: newLabel
-                }
-              })
-            );
-          },
-          selected: isDragged,
-          disabled: disabled || isDragPlaceholder,
-          sortableTriggerProps: {
-            ...triggerProps,
-            style: triggerStyle
+    },
+    /* @__PURE__ */ React17.createElement(
+      SortableProvider,
+      {
+        value: classesOrder,
+        onChange: reorderClasses,
+        onDragStart: (event) => setDraggedItemId(event.active.id),
+        onDragEnd: () => setDraggedItemId(null),
+        onDragCancel: () => setDraggedItemId(null),
+        disableDragOverlay: !allowSorting
+      },
+      virtualizer.getVirtualItems().map((virtualRow) => {
+        const cssClass = filteredCssClasses[virtualRow.index];
+        return /* @__PURE__ */ React17.createElement(
+          SortableItem,
+          {
+            key: virtualRow.key,
+            id: cssClass.id,
+            style: {
+              position: "absolute",
+              top: virtualRow.start,
+              left: 0,
+              width: "100%"
+            }
           },
-          showSortIndicator: allowSorting,
-          syncToV3: cssClass.sync_to_v3,
-          onToggleSync: (id2, newValue) => {
-            if (!newValue && onStopSyncRequest) {
-              onStopSyncRequest(id2);
-            } else if (newValue && onStartSyncRequest) {
-              onStartSyncRequest(id2);
-            } else {
-              dispatch5(
-                slice.actions.update({
-                  style: {
-                    id: id2,
-                    sync_to_v3: newValue
-                  }
-                })
-              );
+          ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React17.createElement(
+            ClassItem,
+            {
+              id: cssClass.id,
+              label: cssClass.label,
+              renameClass: (newLabel) => {
+                trackGlobalClasses({
+                  event: "classRenamed",
+                  classId: cssClass.id,
+                  oldValue: cssClass.label,
+                  newValue: newLabel,
+                  source: "class-manager"
+                });
+                dispatch5(
+                  slice.actions.update({
+                    style: {
+                      id: cssClass.id,
+                      label: newLabel
+                    }
+                  })
+                );
+              },
+              selected: isDragged,
+              disabled: disabled || isDragPlaceholder,
+              sortableTriggerProps: {
+                ...triggerProps,
+                style: triggerStyle
+              },
+              showSortIndicator: allowSorting,
+              syncToV3: cssClass.sync_to_v3,
+              onToggleSync: (id2, newValue) => {
+                if (!newValue && onStopSyncRequest) {
+                  onStopSyncRequest(id2);
+                } else if (newValue && onStartSyncRequest) {
+                  onStartSyncRequest(id2);
+                } else {
+                  dispatch5(
+                    slice.actions.update({
+                      style: {
+                        id: id2,
+                        sync_to_v3: newValue
+                      }
+                    })
+                  );
+                }
+              }
             }
-          }
-        }
-      );
-    }))
-  )));
+          )
+        );
+      })
+    )
+  ));
 };
 var EmptyState = () => /* @__PURE__ */ React17.createElement(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n13.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n13.__)(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
@@ -2156,16 +2217,6 @@ var StartSyncToV3Modal = ({
 // src/components/class-manager/class-manager-panel.tsx
 var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
 var id = "global-classes-manager";
-var reloadDocument = () => {
-  const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
-  const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
-  documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
-    id: currentDocument?.id,
-    shouldScroll: false,
-    shouldNavigateToDefaultRoute: false
-  });
-};
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
@@ -2176,7 +2227,7 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   },
   onClose: async () => {
     (0, import_editor_v1_adapters2.changeEditMode)("edit");
-    await reloadDocument();
+    await (0, import_editor_documents3.reloadCurrentDocument)();
     unblockPanelInteractions();
   },
   isOpenPreviousElement: true
@@ -2188,6 +2239,7 @@ function ClassManagerPanel() {
   const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react10.useState)(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = (0, import_react10.useState)(null);
   const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  const [scrollElement, setScrollElement] = (0, import_react10.useState)(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
@@ -2255,6 +2307,7 @@ function ClassManagerPanel() {
     /* @__PURE__ */ React19.createElement(
       import_ui16.Box,
       {
+        ref: setScrollElement,
         px: 2,
         sx: {
           flexGrow: 1,
@@ -2265,6 +2318,7 @@ function ClassManagerPanel() {
         GlobalClassesList,
         {
           disabled: isPublishing,
+          scrollElement,
           onStopSyncRequest: handleStopSyncRequest,
           onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
         }
@@ -2485,6 +2539,7 @@ function createClassName(prefix) {
 
 // src/components/global-styles-import-listener.tsx
 var import_react11 = require("react");
+var import_editor_canvas = require("@elementor/editor-canvas");
 var import_store22 = require("@elementor/store");
 function GlobalStylesImportListener() {
   const dispatch5 = (0, import_store22.__useDispatch)();
@@ -2523,12 +2578,9 @@ function GlobalStylesImportListener() {
       }).catch(() => {
       });
     };
-    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    window.addEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
+      window.removeEventListener(import_editor_canvas.GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
   }, [dispatch5]);
   return null;
@@ -2755,7 +2807,7 @@ function initMcpApplyGetGlobalClassUsages(reg) {
 }
 
 // src/mcp-integration/mcp-manage-global-classes.ts
-var import_editor_canvas = require("@elementor/editor-canvas");
+var import_editor_canvas2 = require("@elementor/editor-canvas");
 var import_editor_props = require("@elementor/editor-props");
 var import_editor_styles3 = require("@elementor/editor-styles");
 var import_schema3 = require("@elementor/schema");
@@ -2915,8 +2967,8 @@ var initManageGlobalClasses = (reg) => {
     name: "manage-global-classes",
     requiredResources: [
       { uri: GLOBAL_CLASSES_URI, description: "Global classes list" },
-      { uri: import_editor_canvas.STYLE_SCHEMA_URI, description: "Style schema resources" },
-      { uri: import_editor_canvas.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
+      { uri: import_editor_canvas2.STYLE_SCHEMA_URI, description: "Style schema resources" },
+      { uri: import_editor_canvas2.BREAKPOINTS_SCHEMA_URI, description: "Breakpoints list" }
     ],
     modelPreferences: {
       intelligencePriority: 0.85,