@elementor/editor-global-classes 4.1.0-821 → 4.1.0-823

package/dist/index.mjs

@@ -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.",
@@ -2246,6 +2307,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 +2375,7 @@ function ClassManagerPanel() {
     /* @__PURE__ */ React19.createElement(
       Box11,
       {
+        ref: setScrollElement,
         px: 2,
         sx: {
           flexGrow: 1,
@@ -2323,6 +2386,7 @@ function ClassManagerPanel() {
         GlobalClassesList,
         {
           disabled: isPublishing,
+          scrollElement,
           onStopSyncRequest: handleStopSyncRequest,
           onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
         }