Bug fixes

clauderic · Jun 2, 2024 · 14cf108 · 14cf108
1 parent b7304da
commit 14cf108
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 146 deletions.
diff --git a/apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx b/apps/docs/stories/react/Sortable/MultipleLists/MultipleLists.tsx
@@ -1,15 +1,22 @@
 import React, {useRef, useState} from 'react';
 import type {PropsWithChildren} from 'react';
 import {CollisionPriority} from '@dnd-kit/abstract';
-import {DragDropProvider} from '@dnd-kit/react';
+import {DragDropProvider, useDragOperation} from '@dnd-kit/react';
 import {useSortable} from '@dnd-kit/react/sortable';
 import {move} from '@dnd-kit/helpers';
 import {DragDropManager, defaultPreset} from '@dnd-kit/dom';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
 import {supportsViewTransition} from '@dnd-kit/dom/utilities';
 
-import {Actions, Container, Item, Handle, Remove} from '../../components';
-import {createRange, cloneDeep} from '../../../utilities';
+import {
+  Actions,
+  Container,
+  Item,
+  Handle,
+  Remove,
+} from '../../components/index.js';
+import {createRange} from '../../../utilities/createRange.js';
+import {cloneDeep} from '../../../utilities/cloneDeep.js';
 import {flushSync} from 'react-dom';
 
 interface Props {
@@ -21,14 +28,9 @@ interface Props {
   vertical?: boolean;
 }
 
-export function MultipleLists({
-  debug,
-  defaultItems,
-  grid,
-  itemCount,
-  scrollable,
-  vertical,
-}: Props) {
+export function MultipleLists(
+  {debug, defaultItems, grid, itemCount, scrollable, vertical}: Props
+) {
   const [items, setItems] = useState(
     defaultItems ?? {
       A: createRange(itemCount).map((id) => `A${id}`),
@@ -79,26 +81,34 @@ export function MultipleLists({
           gap: 20,
         }}
       >
-        {columns.map((column, columnIndex) => (
-          <SortableColumn
-            key={column}
-            id={column}
-            index={columnIndex}
-            columns={grid ? 2 : 1}
-            scrollable={scrollable}
-          >
-            {items[column].map((id, index) => (
-              <SortableItem
-                key={id}
-                id={id}
-                column={column}
-                index={index}
-                onRemove={handleRemoveItem}
-                style={grid ? {height: 100} : undefined}
-              />
-            ))}
-          </SortableColumn>
-        ))}
+        {columns.map((column, columnIndex) => {
+          const rows = items[column];
+          const children =
+            rows.length > 0
+              ? rows.map((id, index) => (
+                  <SortableItem
+                    key={id}
+                    id={id}
+                    column={column}
+                    index={index}
+                    onRemove={handleRemoveItem}
+                    style={grid ? {height: 100} : undefined}
+                  />
+                ))
+              : null;
+
+          return (
+            <SortableColumn
+              key={column}
+              id={column}
+              index={columnIndex}
+              columns={grid ? 2 : 1}
+              scrollable={scrollable}
+            >
+              {children}
+            </SortableColumn>
+          );
+        })}
       </div>
     </DragDropProvider>
   );
@@ -111,9 +121,7 @@ export function MultipleLists({
       }));
 
     if (supportsViewTransition(document)) {
-      document.startViewTransition(() => {
-        flushSync(remove);
-      });
+      document.startViewTransition(() => flushSync(remove));
     } else {
       remove();
     }
@@ -128,20 +136,16 @@ interface SortableItemProps {
   onRemove?: (id: string, column: string) => void;
 }
 
-const COLORS = {
+const COLORS: Record<string, string> = {
   A: '#7193f1',
   B: '#FF851B',
   C: '#2ECC40',
   D: '#ff3680',
 };
 
-function SortableItem({
-  id,
-  column,
-  index,
-  style,
-  onRemove,
-}: PropsWithChildren<SortableItemProps>) {
+function SortableItem(
+  {id, column, index, style, onRemove}: PropsWithChildren<SortableItemProps>
+) {
   const {handleRef, ref, isDragSource} = useSortable({
     id,
     accept: 'item',
@@ -178,18 +182,25 @@ interface SortableColumnProps {
   scrollable?: boolean;
 }
 
-function SortableColumn({
-  children,
-  columns,
-  id,
-  index,
-  scrollable,
-}: PropsWithChildren<SortableColumnProps>) {
+function SortableColumn(
+  {
+    children,
+    columns,
+    id,
+    index,
+    scrollable,
+  }: PropsWithChildren<SortableColumnProps>
+) {
+  const empty = !children;
+  const {source} = useDragOperation();
   const {handleRef, isDragSource, ref} = useSortable({
     id,
     accept: ['column', 'item'],
-    /* Prioritize item collisions over column collisions. */
-    collisionPriority: CollisionPriority.Lowest,
+    collisionPriority:
+      empty || source?.type === 'column'
+        ? CollisionPriority.Normal
+        : /* Prioritize item collisions over column collisions when the column has children. */
+          CollisionPriority.Lowest,
     type: 'column',
     index,
   });

diff --git a/apps/docs/stories/react/Sortable/SortableExample.tsx b/apps/docs/stories/react/Sortable/SortableExample.tsx
@@ -13,8 +13,9 @@ import {directionBiased} from '@dnd-kit/collision';
 import {move} from '@dnd-kit/helpers';
 import {Debug} from '@dnd-kit/dom/plugins/debug';
 
-import {Item, Handle} from '../components';
-import {createRange, cloneDeep} from '../../utilities';
+import {Item, Handle} from '../components/index.js';
+import {createRange} from '../../utilities/createRange.js';
+import {cloneDeep} from '../../utilities/cloneDeep.js';
 
 interface Props {
   debug?: boolean;
@@ -29,18 +30,20 @@ interface Props {
   getItemStyle?(id: UniqueIdentifier, index: number): CSSProperties;
 }
 
-export function SortableExample({
-  debug,
-  itemCount = 15,
-  collisionDetector,
-  disabled,
-  dragHandle,
-  feedback,
-  layout = 'vertical',
-  modifiers,
-  transition,
-  getItemStyle,
-}: Props) {
+export function SortableExample(
+  {
+    debug,
+    itemCount = 15,
+    collisionDetector,
+    disabled,
+    dragHandle,
+    feedback,
+    layout = 'vertical',
+    modifiers,
+    transition,
+    getItemStyle,
+  }: Props
+) {
   const [items, setItems] = useState(createRange(itemCount));
   const snapshot = useRef(cloneDeep(items));
 
@@ -96,16 +99,18 @@ interface SortableProps {
   style?: React.CSSProperties;
 }
 
-function SortableItem({
-  id,
-  index,
-  collisionDetector = directionBiased,
-  disabled,
-  dragHandle,
-  feedback,
-  transition,
-  style,
-}: PropsWithChildren<SortableProps>) {
+function SortableItem(
+  {
+    id,
+    index,
+    collisionDetector = directionBiased,
+    disabled,
+    dragHandle,
+    feedback,
+    transition,
+    style,
+  }: PropsWithChildren<SortableProps>
+) {
   const [element, setElement] = useState<Element | null>(null);
   const handleRef = useRef<HTMLButtonElement | null>(null);
 
@@ -132,10 +137,12 @@ function SortableItem({
   );
 }
 
-function Wrapper({
-  layout,
-  children,
-}: PropsWithChildren<{layout: 'vertical' | 'horizontal' | 'grid'}>) {
+function Wrapper(
+  {
+    layout,
+    children,
+  }: PropsWithChildren<{layout: 'vertical' | 'horizontal' | 'grid'}>
+) {
   return <div style={getWrapperStyles(layout)}>{children}</div>;
 }
 

diff --git a/apps/docs/stories/react/Sortable/Vertical/Vertical.stories.tsx b/apps/docs/stories/react/Sortable/Vertical/Vertical.stories.tsx
@@ -42,6 +42,20 @@ export const VariableHeights: Story = {
   },
 };
 
+export const DynamicHeights: Story = {
+  name: 'Dynamic heights',
+  args: {
+    debug: false,
+    getItemStyle(_, index) {
+      const heights = {1: 100, 3: 150, 5: 200, 8: 100, 12: 150};
+
+      return {
+        height: heights[index],
+      };
+    },
+  },
+};
+
 export const Clone: Story = {
   name: 'Clone feedback',
   args: {

diff --git a/packages/abstract/src/core/collision/observer.ts b/packages/abstract/src/core/collision/observer.ts
@@ -40,12 +40,12 @@ export class CollisionObserver<
 
   public forceUpdate(refresh = true) {
     untracked(() => {
-      const type = this.manager.dragOperation.source?.type;
+      const {source} = this.manager.dragOperation;
 
       batch(() => {
         if (refresh) {
           for (const droppable of this.manager.registry.droppables) {
-            if (type != null && !droppable.accepts(type)) {
+            if (source && !droppable.accepts(source)) {
               continue;
             }
 
@@ -69,7 +69,6 @@ export class CollisionObserver<
       return DEFAULT_VALUE;
     }
 
-    const type = source?.type;
     const collisions: Collision[] = [];
 
     this.forceUpdateCount.value;
@@ -79,7 +78,7 @@ export class CollisionObserver<
         continue;
       }
 
-      if (type != null && !entry.accepts(type)) {
+      if (source && !entry.accepts(source)) {
         continue;
       }
 

diff --git a/packages/abstract/src/core/collision/types.ts b/packages/abstract/src/core/collision/types.ts
@@ -8,7 +8,7 @@ import type {
 export enum CollisionPriority {
   Lowest,
   Low,
-  Medium,
+  Normal,
   High,
   Highest,
 }

diff --git a/packages/abstract/src/core/entities/draggable/draggable.ts b/packages/abstract/src/core/entities/draggable/draggable.ts
@@ -17,11 +17,13 @@ export interface Input<
 
 export class Draggable<T extends Data = Data> extends Entity<T> {
   constructor(
-    {modifiers, ...input}: Input<T>,
+    {modifiers, type, ...input}: Input<T>,
     public manager: DragDropManager
   ) {
     super(input, manager);
 
+    this.type = type;
+
     if (modifiers?.length) {
       this.modifiers = modifiers.map((modifier) => {
         const {plugin, options} = descriptor(modifier);