Update stories

apps/docs/package.json

@@ -13,12 +13,14 @@
     "@dnd-kit/dom": "*",
     "@dnd-kit/react": "*",
     "@dnd-kit/state-management": "*",
+    "@tanstack/react-virtual": "^3.0.0-beta.54",
     "prismjs": "^1.29.0",
     "clipboard": "^2.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-pan-and-zoom": "^0.6.5",
-    "@tanstack/react-virtual": "^3.0.0-beta.54"
+    "react-tiny-virtual-list": "^2.2.0",
+    "react-window": "1.8.9"
   },
   "devDependencies": {
     "@dnd-kit/abstract": "*",

apps/docs/stories/react/Sortable/MultipleContainers/MultipleLists.tsx → apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx

@@ -166,7 +166,7 @@ function SortableItem({
       style={style}
       transitionId={`sortable-${column}-${id}`}
     >
-      {id} {index}
+      {id}
     </Item>
   );
 }

apps/docs/stories/react/Sortable/MultipleLists/docs/MultipleLists.mdx

@@ -0,0 +1,42 @@
+import {Code, Preview} from '../../../../components';
+
+import {MultipleLists} from '../MultipleLists.tsx';
+import {Example} from './examples/QuickStart';
+import ExampleSource from './examples/QuickStart?raw';
+import ColumnSource from './examples/Column?raw';
+import ItemSource from './examples/Item?raw';
+
+# Multiple lists
+
+Reorder sortable elements across multiple lists.
+
+<Preview hero>
+  <div
+    style={{display: 'flex', justifyContent: 'center', '--min-width': '270px'}}
+  >
+    <MultipleLists
+      defaultItems={{
+        A: ['A1', 'A2'],
+        B: ['B1', 'B2'],
+        C: [],
+      }}
+    />
+  </div>
+</Preview>
+
+## Installation
+
+Before getting started, make sure to install the `@dnd-kit/react` package:
+
+```bash
+npm install @dnd-kit/react
+```
+
+## Getting started
+
+<Preview
+  tabs={['App.js', 'Item.js', 'Column.js']}
+  code={[ExampleSource, ItemSource, ColumnSource]}
+>
+  <Example />
+</Preview>

apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Column.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useDroppable} from '@dnd-kit/react';
+import {CollisionPriority} from '@dnd-kit/abstract';
+
+const styles = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  padding: 20,
+  minWidth: 200,
+  backgroundColor: 'rgba(0,0,0,0.1)',
+  borderRadius: 10,
+};
+
+export function Column({children, id}) {
+  const {ref} = useDroppable({
+    id,
+    type: 'column',
+    accept: ['item'],
+    collisionPriority: CollisionPriority.Low,
+  });
+
+  return (
+    <div style={styles} ref={ref}>
+      {children}
+    </div>
+  );
+}

apps/docs/stories/react/Sortable/MultipleLists/docs/examples/Item.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {useSortable} from '@dnd-kit/react/sortable';
+
+export function Item({id, index}) {
+  const {ref} = useSortable({id, index, type: 'item', accept: ['item']});
+
+  return (
+    <button ref={ref}>
+      {id}
+    </button>
+  );
+}

apps/docs/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+import {DragDropProvider} from '@dnd-kit/react';
+import {move} from '@dnd-kit/state-management';
+
+import {Column} from './Column';
+import {Item} from './Item';
+
+const styles = {display: 'inline-flex', flexDirection: 'row', gap: 20};
+
+export function Example({style = styles}) {
+  const [items, setItems] = useState({
+    A: ['A0', 'A1', 'A2'],
+    B: ['B0', 'B1'],
+    C: [],
+  });
+
+  return (
+    <DragDropProvider
+      onDragOver={(event) => {
+        const {source, target} = event.operation;
+
+        if (source && target) {
+          setItems((items) => move(items, source, target));
+        }
+      }}
+    >
+      <div style={style}>
+        {Object.entries(items).map(([column, items]) => (
+          <Column key={column} id={column}>
+            {items.map((id, index) => (
+              <Item key={id} id={id} index={index} />
+            ))}
+          </Column>
+        ))}
+      </div>
+    </DragDropProvider>
+  );
+}

apps/docs/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx

@@ -0,0 +1,83 @@
+import React, {useRef, useState} from 'react';
+import type {UniqueIdentifier} from '@dnd-kit/abstract';
+import {DragDropProvider} from '@dnd-kit/react';
+import {useSortable} from '@dnd-kit/react/sortable';
+import {defaultPreset} from '@dnd-kit/dom';
+import {Debug} from '@dnd-kit/dom/plugins/debug';
+import {move} from '@dnd-kit/state-management';
+import VirtualList from 'react-tiny-virtual-list';
+
+import {Item, Handle} from '../../components';
+import {createRange, cloneDeep} from '../../../utilities';
+
+interface Props {
+  debug?: boolean;
+}
+
+export function ReactTinyVirtualListExample({debug}: Props) {
+  const [items, setItems] = useState<UniqueIdentifier[]>(createRange(1000));
+  const snapshot = useRef(cloneDeep(items));
+
+  return (
+    <DragDropProvider
+      plugins={debug ? [Debug, ...defaultPreset.plugins] : undefined}
+      onDragStart={() => {
+        snapshot.current = cloneDeep(items);
+      }}
+      onDragOver={(event) => {
+        const {source, target} = event.operation;
+
+        if (!source || !target) {
+          return;
+        }
+
+        setItems((items) => move(items, source, target));
+      }}
+      onDragEnd={(event) => {
+        if (event.canceled) {
+          setItems(snapshot.current);
+        }
+      }}
+    >
+      <VirtualList
+        width={window.innerWidth - 100}
+        height={window.innerHeight - 100}
+        itemCount={items.length}
+        itemSize={82}
+        renderItem={({index, style}) => {
+          const id = items[index];
+
+          return <Sortable key={id} id={id} index={index} style={style} />;
+        }}
+      />
+    </DragDropProvider>
+  );
+}
+
+interface SortableProps {
+  id: UniqueIdentifier;
+  index: number;
+  style: React.CSSProperties;
+}
+
+function Sortable({id, index, style}: SortableProps) {
+  const {isDragSource, ref, handleRef} = useSortable({
+    id,
+    index,
+  });
+
+  return (
+    <div
+      ref={ref}
+      style={{...style, display: 'flex', justifyContent: 'center', padding: 10}}
+    >
+      <Item
+        actions={<Handle ref={handleRef} />}
+        data-index={index}
+        shadow={isDragSource}
+      >
+        {id}
+      </Item>
+    </div>
+  );
+}

apps/docs/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx

@@ -24,7 +24,7 @@ export function ReactVirtualExample({debug}: Props) {
 
   const virtualizer = useWindowVirtualizer({
     count: items.length,
-    estimateSize: () => 62,
+    estimateSize: () => 72,
     scrollMargin: parentOffsetRef.current,
     getItemKey: (index) => items[index],
   });

apps/docs/stories/react/Sortable/Virtualized/ReactWindowExample.tsx

@@ -0,0 +1,101 @@
+import React, {useRef, useEffect, useState} from 'react';
+import type {UniqueIdentifier} from '@dnd-kit/abstract';
+import {DragDropProvider} from '@dnd-kit/react';
+import {useSortable} from '@dnd-kit/react/sortable';
+import {defaultPreset} from '@dnd-kit/dom';
+import {Debug} from '@dnd-kit/dom/plugins/debug';
+import {move} from '@dnd-kit/state-management';
+import {FixedSizeList as List} from 'react-window';
+
+import {Item, Handle} from '../../components';
+import {createRange, cloneDeep} from '../../../utilities';
+
+interface Props {
+  debug?: boolean;
+}
+
+export function ReactWindowExample({debug}: Props) {
+  const [items, setItems] = useState<UniqueIdentifier[]>(createRange(1000));
+  const snapshot = useRef(cloneDeep(items));
+
+  return (
+    <DragDropProvider
+      plugins={debug ? [Debug, ...defaultPreset.plugins] : undefined}
+      onDragStart={() => {
+        snapshot.current = cloneDeep(items);
+      }}
+      onDragOver={(event) => {
+        const {source, target} = event.operation;
+
+        if (!source || !target) {
+          return;
+        }
+
+        setItems((items) => move(items, source, target));
+      }}
+      onDragEnd={(event) => {
+        if (event.canceled) {
+          setItems(snapshot.current);
+        }
+      }}
+    >
+      <List
+        width={window.innerWidth - 100}
+        height={window.innerHeight - 100}
+        itemCount={items.length}
+        itemSize={82}
+        itemData={items}
+        itemKey={(index) => items[index]}
+        style={{margin: '0 auto'}}
+      >
+        {Row}
+      </List>
+    </DragDropProvider>
+  );
+}
+
+function Row({
+  data,
+  index,
+  style,
+}: {
+  data: UniqueIdentifier[];
+  index: number;
+  style: React.CSSProperties;
+}) {
+  return <Sortable id={data[index]} index={index} style={style} />;
+}
+
+interface SortableProps {
+  id: UniqueIdentifier;
+  index: number;
+  style: React.CSSProperties;
+}
+
+function Sortable({id, index, style}: SortableProps) {
+  const {isDragSource, ref, handleRef} = useSortable({
+    id,
+    index,
+  });
+
+  useEffect(() => {
+    return () => {
+      console.log('unmount', id);
+    };
+  }, [id]);
+
+  return (
+    <div
+      ref={ref}
+      style={{...style, display: 'flex', justifyContent: 'center', padding: 10}}
+    >
+      <Item
+        actions={<Handle ref={handleRef} />}
+        data-index={index}
+        shadow={isDragSource}
+      >
+        {id}
+      </Item>
+    </div>
+  );
+}

apps/docs/stories/react/Sortable/Virtualized/Virtualized.stories.tsx

@@ -1,18 +1,27 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {ReactWindowExample} from './ReactWindowExample';
 import {ReactVirtualExample} from './ReactVirtualExample';
+import {ReactTinyVirtualListExample} from './ReactTinyVirtualListExample';
 
 const meta: Meta<typeof ReactVirtualExample> = {
   title: 'React/Sortable/Virtualized',
-  component: ReactVirtualExample,
 };
 
 export default meta;
 type Story = StoryObj<typeof ReactVirtualExample>;
 
+export const ReactWindow: Story = {
+  name: 'react-window',
+  render: ReactWindowExample,
+};
+
+export const ReactTinyVirtualList: Story = {
+  name: 'react-tiny-virtual-list',
+  render: ReactTinyVirtualListExample,
+};
+
 export const ReactVirtual: Story = {
   name: 'react-virtual',
-  args: {
-    debug: false,
-  },
+  render: ReactVirtualExample,
 };