Activation constraints

apps/docs/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['dnd-kit'],
-};
+  extends: ['dnd-kit', 'plugin:storybook/recommended']
+};

apps/docs/.storybook/main.js

@@ -1,23 +1,33 @@
+import {dirname, join} from 'path';
 import {mergeConfig} from 'vite';
-import {addons} from '@storybook/manager-api';
-
-import {theme} from './theme';
-
-addons.setConfig({
-  theme,
-});
 
 export default {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/react-vite',
-  core: {
-    builder: '@storybook/builder-vite',
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
   },
   async viteFinal(config, {configType}) {
     // customize the Vite config here
     return mergeConfig(config, {
-      define: {'process.env': {}},
+      define: {
+        'process.env': {},
+      },
     });
   },
+  docs: {
+    autodocs: true,
+  },
 };
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

apps/docs/.storybook/manager.js

@@ -0,0 +1,7 @@
+import {addons} from '@storybook/manager-api';
+import {theme} from './theme';
+
+addons.setConfig({
+  theme,
+  showPanel: false,
+});

apps/docs/.storybook/theme.js

@@ -1,8 +1,8 @@
 import {create} from '@storybook/theming/create';
+import {default as brandImage} from './assets/dnd-kit-banner.svg';
 
 export const theme = create({
   base: 'light',
-  brandImage:
-    'https://raw.githubusercontent.com/clauderic/dnd-kit/master/.storybook/assets/dnd-kit-banner.svg',
+  brandImage,
   appBg: '#F9F9F9',
 });

apps/docs/package.json

@@ -13,27 +13,27 @@
     "@dnd-kit/dom": "*",
     "@dnd-kit/react": "*",
     "@dnd-kit/utilities": "*",
-    "use-pan-and-zoom": "^0.6.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "use-pan-and-zoom": "^0.6.5"
   },
   "devDependencies": {
-    "@dnd-kit/config-ts": "*",
     "@dnd-kit/abstract": "*",
+    "@dnd-kit/config-eslint": "*",
+    "@dnd-kit/config-ts": "*",
     "@dnd-kit/dom": "*",
     "@dnd-kit/react": "*",
     "@dnd-kit/utilities": "*",
-    "@dnd-kit/config-eslint": "*",
-    "@storybook/addon-actions": "^7.1.1",
-    "@storybook/addon-docs": "^7.1.1",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/builder-vite": "^7.1.1",
-    "@storybook/manager-api": "^7.1.1",
-    "@storybook/react": "^7.1.1",
-    "@storybook/react-vite": "^7.1.1",
-    "@storybook/theming": "^7.1.1",
+    "@storybook/addon-actions": "^7.2.0",
+    "@storybook/addon-docs": "^7.2.0",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-links": "^7.2.0",
+    "@storybook/manager-api": "^7.2.0",
+    "@storybook/react": "^7.2.0",
+    "@storybook/react-vite": "^7.2.0",
+    "@storybook/theming": "^7.2.0",
     "@vitejs/plugin-react": "^4.0.3",
+    "eslint-plugin-storybook": "^0.6.13",
     "serve": "^13.0.2",
     "storybook": "next",
     "typescript": "^5.1.6",

apps/docs/stories/Droppable/DroppableExample.tsx

@@ -6,6 +6,7 @@ import {closestCenter, CollisionDetector} from '@dnd-kit/collision';
 
 import {Button, Dropzone} from '../components';
 import {DraggableIcon} from '../icons';
+import {cloneDeep} from '../utilities';
 
 export function DroppableExample() {
   const [items, setItems] = useState({
@@ -31,6 +32,7 @@ export function DroppableExample() {
       C4: [],
     },
   });
+  const snapshot = useRef(cloneDeep(items));
 
   return (
     <DndContext
@@ -61,6 +63,13 @@ export function DroppableExample() {
           }
         }
       }}
+      onDragEnd={(event) => {
+        if (event.canceled) {
+          setItems(snapshot.current);
+        } else {
+          snapshot.current = cloneDeep(items);
+        }
+      }}
     >
       <div style={{display: 'flex', flexDirection: 'row', gap: 20}}>
         {Object.entries(items).map(([columnId, items]) => (
@@ -76,7 +85,12 @@ export function DroppableExample() {
                 collisionDetector={closestCenter}
               >
                 {children.map((child) => (
-                  <Draggable id={child.id} type={child.type} parent={rowId} />
+                  <Draggable
+                    key={child.id}
+                    id={child.id}
+                    type={child.type}
+                    parent={rowId}
+                  />
                 ))}
               </Droppable>
             ))}

apps/docs/stories/utilities/cloneDeep.ts

@@ -0,0 +1,3 @@
+export function cloneDeep(obejct: Object) {
+  return JSON.parse(JSON.stringify(obejct));
+}

apps/docs/stories/utilities/index.ts

@@ -1 +1,2 @@
 export {classNames} from './classnames';
+export {cloneDeep} from './cloneDeep';

packages/abstract/src/manager/dragOperation.ts

@@ -111,6 +111,18 @@ export function DragOperationManager<
     position,
   };
 
+  const reset = () =>
+    requestAnimationFrame(() => {
+      batch(() => {
+        status.value = Status.Idle;
+        sourceIdentifier.value = null;
+        targetIdentifier.value = null;
+        shape.value = null;
+        position.reset({x: 0, y: 0});
+      });
+    });
+
+
   return {
     operation,
     actions: {
@@ -148,11 +160,14 @@ export function DragOperationManager<
         monitor.dispatch('dragmove', {});
       },
       cancel() {
-        // TO-DO
+        status.value = Status.Dropping;
+
         monitor.dispatch('dragend', {
           operation: snapshot(operation),
           canceled: true,
         });
+
+        reset()
       },
       stop() {
         status.value = Status.Dropping;
@@ -162,15 +177,7 @@ export function DragOperationManager<
           canceled: false,
         });
 
-        requestAnimationFrame(() => {
-          batch(() => {
-            status.value = Status.Idle;
-            sourceIdentifier.value = null;
-            targetIdentifier.value = null;
-            shape.value = null;
-            position.reset({x: 0, y: 0});
-          });
-        });
+        reset();
       },
     },
   };

packages/dom/src/plugins/feedback/PlaceholderFeedback.ts

@@ -39,7 +39,6 @@ export class PlaceholderFeedback extends Plugin<DragDropManager> {
       element.replaceWith(placeholder);
       overlay.appendChild(element);
       document.body.appendChild(overlay);
-      console.log('mount overlay');
 
       return () => {
         const clone = cloneElement(element);