@elementor/editor-variables 3.33.0-137 → 3.33.0-139

package/dist/index.mjs

@@ -50,13 +50,14 @@ var buildOperationsArray = (originalVariables, currentVariables) => {
           ...original.label !== variable.label && { label: variable.label },
           ...original.value !== variable.value && { value: variable.value }
         });
-      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value)) {
+      } else if (!variable.deleted && (original.label !== variable.label || original.value !== variable.value || original.order !== variable.order)) {
         operations.push({
           type: "update",
           id: id2,
           variable: {
             ...original.label !== variable.label && { label: variable.label },
-            ...original.value !== variable.value && { value: variable.value }
+            ...original.value !== variable.value && { value: variable.value },
+            ...original.order !== variable.order && { order: variable.order }
           }
         });
       }
@@ -592,8 +593,13 @@ var useFilteredVariables = (searchValue, propTypeKey) => {
   const baseVariables = usePropVariables(propTypeKey);
   const typeFilteredVariables = useVariableSelectionFilter(baseVariables);
   const searchFilteredVariables = filterVariablesBySearchValue(typeFilteredVariables, searchValue);
+  const sortedVariables = searchFilteredVariables.sort((a, b) => {
+    const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  });
   return {
-    list: searchFilteredVariables,
+    list: sortedVariables,
     hasMatches: searchFilteredVariables.length > 0,
     isSourceNotEmpty: typeFilteredVariables.length > 0,
     hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0
@@ -613,10 +619,11 @@ var usePropVariables = (propKey) => {
 };
 var normalizeVariables = (propKey) => {
   const variables = getVariables(false);
-  return Object.entries(variables).filter(([, variable]) => variable.type === propKey).map(([key, { label, value }]) => ({
+  return Object.entries(variables).filter(([, variable]) => variable.type === propKey).map(([key, { label, value, order }]) => ({
     key,
     label,
-    value
+    value,
+    order
   }));
 };
 var extractId = ({ id: id2 }) => id2;
@@ -1065,7 +1072,13 @@ var VariablesManagerTable = ({
       variableRowRefs.current.delete(id2);
     }
   };
-  const rows = ids.filter((id2) => !variables[id2].deleted).map((id2) => {
+  useEffect2(() => {
+    const sortedIds = [...ids].sort(sortVariablesOrder(variables));
+    if (JSON.stringify(sortedIds) !== JSON.stringify(ids)) {
+      setIds(sortedIds);
+    }
+  }, [ids, variables, setIds]);
+  const rows = ids.filter((id2) => !variables[id2].deleted).sort(sortVariablesOrder(variables)).map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
     return {
@@ -1084,7 +1097,19 @@ var VariablesManagerTable = ({
     UnstableSortableProvider,
     {
       value: ids,
-      onChange: setIds,
+      onChange: (newIds) => {
+        const updatedVariables = { ...variables };
+        newIds.forEach((id2, index) => {
+          if (updatedVariables[id2]) {
+            updatedVariables[id2] = {
+              ...updatedVariables[id2],
+              order: index + 1
+            };
+          }
+        });
+        handleOnChange(updatedVariables);
+        setIds(newIds);
+      },
       variant: "static",
       restrictAxis: true,
       dragOverlay: ({ children: dragOverlayChildren, ...dragOverlayProps }) => /* @__PURE__ */ React9.createElement(Table, { sx: tableSX, ...dragOverlayProps }, /* @__PURE__ */ React9.createElement(TableBody, null, dragOverlayChildren))
@@ -1234,6 +1259,13 @@ var VariablesManagerTable = ({
     ))
   ))));
 };
+function sortVariablesOrder(variables) {
+  return (a, b) => {
+    const orderA = variables[a]?.order ?? Number.MAX_SAFE_INTEGER;
+    const orderB = variables[b]?.order ?? Number.MAX_SAFE_INTEGER;
+    return orderA - orderB;
+  };
+}
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var id = "variables-manager";