@northlight/ui 1.5.8 → 2.0.0

package/dist/ts/types.d.ts

@@ -1337,12 +1337,16 @@ declare function MultiSort<itemKeys extends string | number | symbol>({ items: s
  * @example (Example)
  * ### With custom component
  * (?
+ * () => {
+ * const [items, setItems] = useState([ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ])
+ * return (
  * <Stack>
  *
  * <SortableList
-  items={ [ { name: 'item1' }, { name: 'item2' }, { name: 'item3' } ] }
+  items={ items }
   createKey={ (item) => item.name }
   disableDrag={ true }
+  onChange={setItems}
 >
   { ({ name }, listeners, { isOver }) => (
     <HStack>
@@ -1352,6 +1356,7 @@ declare function MultiSort<itemKeys extends string | number | symbol>({ items: s
   ) }
 </SortableList>
 </Stack>
+  )}
  * ?)
 <br />
 If disableDrag=false, then when the user double clicks it will trigger
@@ -1360,7 +1365,7 @@ the default behaviour of the rendered component instead of the dragging,
  *
  *
  */
-declare function SortableList<T>({ children, items: sortableItems, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, }: SortableListProps<T>): JSX.Element;
+declare function SortableList<T>({ children, items, collisionDetection, createKey, strategy, onChange, onMovedItem, displayOverlay, sensors, dblClickThreshold, disableDrag, }: SortableListProps<T>): JSX.Element;
 
 /**
  * Used with multi sort to render a sortable list inside a droppable

package/dist/umd/northlight.js

@@ -5943,7 +5943,7 @@
 
   function SortableList({
     children,
-    items: sortableItems,
+    items,
     collisionDetection,
     createKey = ramda.identity,
     strategy,
@@ -5955,15 +5955,8 @@
     dblClickThreshold = 300,
     disableDrag = false
   }) {
-    const [items, setItems] = React.useState(sortableItems);
     const [activeItem, setActiveItem] = React.useState(null);
     const identifierItems = React.useMemo(() => ramda.map(createKey, items), [items]);
-    React.useEffect(() => {
-      onChange(items);
-    }, [items]);
-    React.useEffect(() => {
-      setItems(sortableItems);
-    }, [sortableItems]);
     const customSensors = core.useSensors(
       core.useSensor(core.PointerSensor),
       core.useSensor(core.KeyboardSensor, {
@@ -5979,13 +5972,12 @@
     const handleDragEnd = (event) => {
       const { active, over } = event;
       if (active && over && active.id !== over.id) {
-        setItems((prev) => {
-          const prevIds = ramda.map(createKey, prev);
-          const oldIndex = ramda.indexOf(active.id, prevIds);
-          const newIndex = ramda.indexOf(over.id, prevIds);
-          onMovedItem({ item: prev[oldIndex], oldIndex, newIndex });
-          return sortable.arrayMove(prev, oldIndex, newIndex);
-        });
+        const prevIds = ramda.map(createKey, items);
+        const oldIndex = ramda.indexOf(active.id, prevIds);
+        const newIndex = ramda.indexOf(over.id, prevIds);
+        onMovedItem({ item: items[oldIndex], oldIndex, newIndex });
+        const newItems = sortable.arrayMove(items, oldIndex, newIndex);
+        onChange(newItems);
       }
     };
     return /* @__PURE__ */ React.createElement(