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

package/dist/index.mjs

@@ -620,7 +620,7 @@ var PrefetchCssClassUsage = () => {
 import * as React19 from "react";
 import { useCallback, useEffect as useEffect4, useState as useState7 } from "react";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
-import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { reloadCurrentDocument, setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
   Panel,
@@ -630,7 +630,7 @@ import {
   PanelHeaderTitle
 } from "@elementor/editor-panels";
 import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { __privateRunCommand as runCommand, changeEditMode } from "@elementor/editor-v1-adapters";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { XIcon } from "@elementor/icons";
 import { useMutation } from "@elementor/query";
 import { __dispatch as dispatch4 } from "@elementor/store";
@@ -1289,6 +1289,7 @@ import * as React17 from "react";
 import { useEffect as useEffect2, useMemo as useMemo3, useState as useState5 } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
 import { List, Stack as Stack8, styled as styled6, Typography as Typography8 } from "@elementor/ui";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __13 } from "@wordpress/i18n";
 
 // src/hooks/use-ordered-classes.ts
@@ -1641,9 +1642,17 @@ import {
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(
+  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(GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, ...props }) => {
+var SortableItem = ({ children, id: id2, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     UnstableSortableItem,
     {
@@ -1664,7 +1673,7 @@ var SortableItem = ({ children, id: id2, ...props }) => {
           Box7,
           {
             ...itemProps,
-            style: itemStyle,
+            style: { ...itemStyle, ...!isDragOverlay ? style : null },
             component: "li",
             role: "listitem",
             sx: {
@@ -1987,7 +1996,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();
@@ -1998,6 +2014,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 = 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(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);
+    }
+  });
   useEffect2(() => {
     const handler2 = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
@@ -2024,67 +2060,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(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
-    SortableProvider,
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(
+    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(Stack8, { 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" }, __13("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", color: "text.secondary" }, __13(
   "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.",
@@ -2214,16 +2275,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 = getCurrentDocument();
-  const documentsManager = getV1DocumentsManager();
-  documentsManager.invalidateCache();
-  return runCommand("editor/documents/switch", {
-    id: currentDocument?.id,
-    shouldScroll: false,
-    shouldNavigateToDefaultRoute: false
-  });
-};
 var { panel, usePanelActions } = createPanel({
   id,
   component: ClassManagerPanel,
@@ -2234,7 +2285,7 @@ var { panel, usePanelActions } = createPanel({
   },
   onClose: async () => {
     changeEditMode("edit");
-    await reloadDocument();
+    await reloadCurrentDocument();
     unblockPanelInteractions();
   },
   isOpenPreviousElement: true
@@ -2246,6 +2297,7 @@ function ClassManagerPanel() {
   const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = useState7(null);
   const [isStopSyncSuppressed] = useSuppressedMessage2(STOP_SYNC_MESSAGE_KEY);
+  const [scrollElement, setScrollElement] = useState7(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     dispatch4(slice.actions.resetToInitialState({ context: "frontend" }));
@@ -2313,6 +2365,7 @@ function ClassManagerPanel() {
     /* @__PURE__ */ React19.createElement(
       Box11,
       {
+        ref: setScrollElement,
         px: 2,
         sx: {
           flexGrow: 1,
@@ -2323,6 +2376,7 @@ function ClassManagerPanel() {
         GlobalClassesList,
         {
           disabled: isPublishing,
+          scrollElement,
           onStopSyncRequest: handleStopSyncRequest,
           onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
         }
@@ -2543,6 +2597,7 @@ function createClassName(prefix) {
 
 // src/components/global-styles-import-listener.tsx
 import { useEffect as useEffect5 } from "react";
+import { GLOBAL_STYLES_IMPORTED_EVENT } from "@elementor/editor-canvas";
 import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
   const dispatch5 = useDispatch2();
@@ -2581,12 +2636,9 @@ function GlobalStylesImportListener() {
       }).catch(() => {
       });
     };
-    window.addEventListener("elementor/global-styles/imported", handleGlobalStylesImported);
+    window.addEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     return () => {
-      window.removeEventListener(
-        "elementor/global-styles/imported",
-        handleGlobalStylesImported
-      );
+      window.removeEventListener(GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported);
     };
   }, [dispatch5]);
   return null;