Merge pull request #1542 from clauderic/fix-zero-id

Fix for when id is equal to 0

.changeset/fix-zero-id.md

@@ -0,0 +1,6 @@
+---
+'@dnd-kit/core': patch
+'@dnd-ki/sortable': patch
+---
+
+Fix bug with draggable and sortable elements with an `id` equal to `0`.

packages/core/src/components/DndContext/DndContext.tsx

@@ -152,7 +152,7 @@ export const DndContext = memo(function DndContext({
     draggable: {active: activeId, nodes: draggableNodes, translate},
     droppable: {containers: droppableContainers},
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = useRef<Active['rect']['current']>({
     initial: null,
     translated: null,
@@ -197,7 +197,7 @@ export const DndContext = memo(function DndContext({
   );
 
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure,

packages/core/src/hooks/useDraggable.ts

@@ -38,7 +38,7 @@ const NullContext = createContext<any>(null);
 
 const defaultRole = 'button';
 
-const ID_PREFIX = 'Droppable';
+const ID_PREFIX = 'Draggable';
 
 export function useDraggable({
   id,

packages/core/src/hooks/utilities/useCachedNode.ts

@@ -7,12 +7,12 @@ export function useCachedNode(
   draggableNodes: DraggableNodes,
   id: UniqueIdentifier | null
 ): DraggableNode['node']['current'] {
-  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
 
   return useLazyMemo(
     (cachedNode) => {
-      if (id === null) {
+      if (id == null) {
         return null;
       }
 

packages/core/src/store/reducer.ts

@@ -28,7 +28,7 @@ export function reducer(state: State, action: Actions): State {
         },
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
 

packages/sortable/src/hooks/useSortable.ts

@@ -179,7 +179,7 @@ export function useSortable({
       return;
     }
 
-    if (activeId && !previous.current.activeId) {
+    if (activeId != null && previous.current.activeId == null) {
       previous.current.activeId = activeId;
       return;
     }

stories/2 - Presets/Sortable/5-Virtualized.story.tsx

@@ -50,7 +50,7 @@ function Sortable({
     })
   );
   const getIndex = (id: UniqueIdentifier) => items.indexOf(id);
-  const activeIndex = activeId ? getIndex(activeId) : -1;
+  const activeIndex = activeId != null ? getIndex(activeId) : -1;
 
   return (
     <DndContext
@@ -80,7 +80,9 @@ function Sortable({
             className={styles.VirtualList}
             itemCount={items.length}
             itemSize={64}
-            stickyIndices={activeId ? [items.indexOf(activeId)] : undefined}
+            stickyIndices={
+              activeId != null ? [items.indexOf(activeId)] : undefined
+            }
             renderItem={({index, style}) => {
               const id = items[index];
 
@@ -104,7 +106,7 @@ function Sortable({
       </Wrapper>
       {createPortal(
         <DragOverlay adjustScale={adjustScale}>
-          {activeId ? (
+          {activeId != null ? (
             <Item
               value={items[activeIndex]}
               handle={handle}

stories/2 - Presets/Sortable/MultipleContainers.tsx

@@ -182,7 +182,8 @@ export function MultipleContainers({
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const lastOverId = useRef<UniqueIdentifier | null>(null);
   const recentlyMovedToNewContainer = useRef(false);
-  const isSortingContainer = activeId ? containers.includes(activeId) : false;
+  const isSortingContainer =
+    activeId != null ? containers.includes(activeId) : false;
 
   /**
    * Custom collision detection strategy optimized for multiple containers

stories/2 - Presets/Sortable/Sortable.tsx

@@ -117,8 +117,7 @@ export function Sortable({
 }: Props) {
   const [items, setItems] = useState<UniqueIdentifier[]>(
     () =>
-      initialItems ??
-      createRange<UniqueIdentifier>(itemCount, (index) => index + 1)
+      initialItems ?? createRange<UniqueIdentifier>(itemCount, (index) => index)
   );
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
   const sensors = useSensors(
@@ -137,7 +136,7 @@ export function Sortable({
   const isFirstAnnouncement = useRef(true);
   const getIndex = (id: UniqueIdentifier) => items.indexOf(id);
   const getPosition = (id: UniqueIdentifier) => getIndex(id) + 1;
-  const activeIndex = activeId ? getIndex(activeId) : -1;
+  const activeIndex = activeId != null ? getIndex(activeId) : -1;
   const handleRemove = removable
     ? (id: UniqueIdentifier) =>
         setItems((items) => items.filter((item) => item !== id))
@@ -184,7 +183,7 @@ export function Sortable({
   };
 
   useEffect(() => {
-    if (!activeId) {
+    if (activeId == null) {
       isFirstAnnouncement.current = true;
     }
   }, [activeId]);
@@ -246,7 +245,7 @@ export function Sortable({
               adjustScale={adjustScale}
               dropAnimation={dropAnimation}
             >
-              {activeId ? (
+              {activeId != null ? (
                 <Item
                   value={items[activeIndex]}
                   handle={handle}

stories/3 - Examples/Advanced/Pages/Pages.tsx

@@ -70,7 +70,7 @@ export function Pages({layout}: Props) {
   const [items, setItems] = useState(() =>
     createRange<UniqueIdentifier>(20, (index) => `${index + 1}`)
   );
-  const activeIndex = activeId ? items.indexOf(activeId) : -1;
+  const activeIndex = activeId != null ? items.indexOf(activeId) : -1;
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {coordinateGetter: sortableKeyboardCoordinates})
@@ -102,7 +102,7 @@ export function Pages({layout}: Props) {
         </ul>
       </SortableContext>
       <DragOverlay dropAnimation={dropAnimation}>
-        {activeId ? (
+        {activeId != null ? (
           <PageOverlay id={activeId} layout={layout} items={items} />
         ) : null}
       </DragOverlay>

stories/3 - Examples/Tree/SortableTree.tsx

@@ -129,7 +129,7 @@ export function SortableTree({
 
     return removeChildrenOf(
       flattenedTree,
-      activeId ? [activeId, ...collapsedItems] : collapsedItems
+      activeId != null ? [activeId, ...collapsedItems] : collapsedItems
     );
   }, [activeId, items]);
   const projected =
@@ -156,9 +156,10 @@ export function SortableTree({
     })
   );
 
-  const sortedIds = useMemo(() => flattenedItems.map(({id}) => id), [
-    flattenedItems,
-  ]);
+  const sortedIds = useMemo(
+    () => flattenedItems.map(({id}) => id),
+    [flattenedItems]
+  );
   const activeItem = activeId
     ? flattenedItems.find(({id}) => id === activeId)
     : null;