@northlight/ui 1.5.9 → 2.0.0

package/dist/es/northlight.d.mts

@@ -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/es/northlight.mjs

@@ -5977,7 +5977,7 @@ function MultiSort({
 
 function SortableList({
   children,
-  items: sortableItems,
+  items,
   collisionDetection,
   createKey = identity,
   strategy,
@@ -5989,7 +5989,6 @@ function SortableList({
   dblClickThreshold = 300,
   disableDrag = false
 }) {
-  const [items, setItems] = useState(sortableItems);
   const [activeItem, setActiveItem] = useState(null);
   const identifierItems = useMemo(() => map(createKey, items), [items]);
   const customSensors = useSensors(
@@ -6007,15 +6006,12 @@ function SortableList({
   const handleDragEnd = (event) => {
     const { active, over } = event;
     if (active && over && active.id !== over.id) {
-      setItems((prev) => {
-        const prevIds = map(createKey, prev);
-        const oldIndex = indexOf(active.id, prevIds);
-        const newIndex = indexOf(over.id, prevIds);
-        onMovedItem({ item: prev[oldIndex], oldIndex, newIndex });
-        const newItems = arrayMove(prev, oldIndex, newIndex);
-        onChange(newItems);
-        return newItems;
-      });
+      const prevIds = map(createKey, items);
+      const oldIndex = indexOf(active.id, prevIds);
+      const newIndex = indexOf(over.id, prevIds);
+      onMovedItem({ item: items[oldIndex], oldIndex, newIndex });
+      const newItems = arrayMove(items, oldIndex, newIndex);
+      onChange(newItems);
     }
   };
   return /* @__PURE__ */ React.createElement(