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

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.",
@@ -2188,6 +2249,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 +2317,7 @@ function ClassManagerPanel() {
     /* @__PURE__ */ React19.createElement(
       import_ui16.Box,
       {
+        ref: setScrollElement,
         px: 2,
         sx: {
           flexGrow: 1,
@@ -2265,6 +2328,7 @@ function ClassManagerPanel() {
         GlobalClassesList,
         {
           disabled: isPublishing,
+          scrollElement,
           onStopSyncRequest: handleStopSyncRequest,
           onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
         }