chore: 🤖 upgrade @dnd-kit/core ^6

close#6

package.json

@@ -78,10 +78,6 @@
     "tslib": "^2.3.1",
     "typescript": "^4.6.3"
   },
-  "dependencies": {
-    "@dnd-kit/core": "^5.0.3",
-    "@dnd-kit/sortable": "^6.0.1"
-  },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -98,5 +94,9 @@
     "Sortable List",
     "Drag and Drop",
     "@dnd-kit"
-  ]
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0"
+  }
 }

stories/SortableList.stories.tsx

@@ -1,5 +1,4 @@
 import { useState } from '@storybook/addons';
-import { Meta } from '@storybook/react';
 import React from 'react';
 
 import {
@@ -12,7 +11,7 @@ import {
 export default {
   component: SortableList,
   title: 'components/SortableList',
-} as Meta;
+};
 
 const DragHandler = (props) => (
   <div
@@ -81,6 +80,22 @@ export const ChildrenExample: React.VFC = () => {
   );
 };
 
+const data = Array.from({ length: 30 }, (_, index) => ({
+  id: `${index}`,
+  name: `Item ${index}`,
+}));
+
+export const DraggingScrollingExample: React.VFC = () => {
+  const [items, setItems] = useState<SortableItemProps[]>(data);
+  return (
+    <SortableList
+      items={items}
+      setItems={setItems}
+      itemRender={({ item }: ItemRenderProps) => <Item name={item.name} />}
+    />
+  );
+};
+
 export const DragHandlerExample: React.VFC = () => {
   const [items, setItems] = useState<SortableItemProps[]>([
     { id: '1', name: 'Item 1' },