New: Add positional-array-sorter

README.md

@@ -65,6 +65,9 @@ Create property with type `reapeatable`.
 #                ...
             properties:
               field0:
+                # The order of the fields can be altered by setting position. It is the same logic as @position in Fusion
+                # https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-join
+                position: 10
                 editorOptions:
                   placeholder: 'default field editor'
               field1:

Resources/Private/Editor/Repeatable/index.jsx

@@ -7,6 +7,7 @@ import { selectors } from "@neos-project/neos-ui-redux-store";
 import { neos } from "@neos-project/neos-ui-decorators";
 import { IconButton, Button, Label } from "@neos-project/react-ui-components";
 import backend from "@neos-project/neos-ui-backend-connector";
+import positionalArraySorter from "@neos-project/positional-array-sorter";
 import Loading from "carbon-neos-loadinganimation/LoadingWithStyles";
 import { Sortable, DragHandle } from "./Sortable";
 import Envelope from "./Envelope";
@@ -112,9 +113,15 @@ function Repeatable(props) {
         let group = {};
         const properties = options.properties;
         if (properties) {
-            Object.entries(properties).forEach(([property, item]) => {
+            // Create array to enable sorting
+            const array = [];
+            for (const key in properties) {
+                const item = properties[key];
+                array.push({ key, position: item?.position ?? null, item });
+            }
+            positionalArraySorter(array).forEach(({ key, item }) => {
                 const defaultValue = item && item.defaultValue;
-                group[property] = returnValueIfSet(defaultValue, "");
+                group[key] = returnValueIfSet(defaultValue, "");
             });
         }
         return group;
@@ -293,6 +300,8 @@ function Repeatable(props) {
             properties.push(getProperty(property, idx));
         });
 
+        // positionalArraySorter
+
         return (
             <div className={style.group}>
                 {groupLabel && <span dangerouslySetInnerHTML={{ __html: groupLabel }} />}

package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@formkit/auto-animate": "^0.8.2",
     "@neos-project/neos-ui-extensibility": "~8.3.11",
+    "@neos-project/positional-array-sorter": "^8.3.11",
     "array-move": "^4.0.0",
     "carbon-neos-loadinganimation": "^1.1.1",
     "clsx": "^2.1.1",