fix: up/down arrow selections

Author: JarrodMFlesch

packages/ui/src/elements/TreeView/NestedSectionsTable/Row/index.tsx

@@ -52,7 +52,7 @@ interface DivTableRowProps {
       shiftKey: boolean
     }
   }) => void
-  openItemIDs?: Set<number | string>
+  openItemKeys?: Set<ItemKey>
   rowItem: SectionRow
   segmentWidth: number
   selectedItemKeys: Set<ItemKey>
@@ -83,7 +83,7 @@ export const Row: React.FC<DivTableRowProps> = ({
   onRowDrag,
   onRowKeyPress,
   onSelectionChange,
-  openItemIDs,
+  openItemKeys,
   rowItem,
   segmentWidth,
   selectedItemKeys,
@@ -226,7 +226,7 @@ export const Row: React.FC<DivTableRowProps> = ({
                         </div>
                       ) : (
                         <ChevronIcon
-                          direction={openItemIDs?.has(rowItem.rowID) ? 'down' : 'right'}
+                          direction={openItemKeys?.has(rowItem.rowID) ? 'down' : 'right'}
                         />
                       )}
                     </Button>

packages/ui/src/elements/TreeView/NestedSectionsTable/TableSection/index.tsx

@@ -36,7 +36,7 @@ interface RenderTableSectionProps {
       shiftKey: boolean
     }
   }) => void
-  openItemIDs?: Set<number | string>
+  openItemKeys?: Set<ItemKey>
   parentItems?: SectionRow[]
   rowIndexOffset?: number
   rows: SectionRow[]
@@ -64,7 +64,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
   onRowDrag,
   onRowKeyPress,
   onSelectionChange,
-  openItemIDs,
+  openItemKeys,
   parentItems = [],
   rowIndexOffset = 0,
   rows,
@@ -76,7 +76,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
   // Helper to count all rows recursively, only counting visible (open) rows
   const countRows = (items: SectionRow[]): number => {
     return items.reduce((count, item) => {
-      const isOpen = openItemIDs?.has(item.rowID)
+      const isOpen = openItemKeys?.has(item.rowID)
       return count + 1 + (item.rows && isOpen ? countRows(item.rows) : 0)
     }, 0)
   }
@@ -86,7 +86,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
     let offset = rowIndexOffset
     for (let i = 0; i < index; i++) {
       offset += 1
-      const isOpen = openItemIDs?.has(rows[i].rowID)
+      const isOpen = openItemKeys?.has(rows[i].rowID)
       if (rows[i].rows && isOpen) {
         offset += countRows(rows[i].rows || [])
       }
@@ -99,7 +99,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
       {rows.map((rowItem, sectionRowIndex: number) => {
         const absoluteRowIndex = getAbsoluteRowIndex(sectionRowIndex)
         const isLastRow = rows.length - 1 === sectionRowIndex
-        const hasNestedRows = Boolean(rowItem?.rows?.length) && openItemIDs?.has(rowItem.rowID)
+        const hasNestedRows = Boolean(rowItem?.rows?.length) && openItemKeys?.has(rowItem.rowID)
         const isRowAtRootLevel = level === 0 || (isLastRow && isLastRowOfRoot)
 
         // Calculate drop target items based on position in hierarchy
@@ -158,7 +158,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
               onRowDrag={onRowDrag}
               onRowKeyPress={onRowKeyPress}
               onSelectionChange={onSelectionChange}
-              openItemIDs={openItemIDs}
+              openItemKeys={openItemKeys}
               rowItem={rowItem}
               segmentWidth={segmentWidth}
               selectedItemKeys={selectedItemKeys}
@@ -186,7 +186,7 @@ export const TableSection: React.FC<RenderTableSectionProps> = ({
                 onRowDrag={onRowDrag}
                 onRowKeyPress={onRowKeyPress}
                 onSelectionChange={onSelectionChange}
-                openItemIDs={openItemIDs}
+                openItemKeys={openItemKeys}
                 parentItems={[...parentItems, rowItem]}
                 rowIndexOffset={absoluteRowIndex + 1}
                 rows={rowItem.rows}

packages/ui/src/elements/TreeView/NestedSectionsTable/index.tsx

@@ -15,14 +15,14 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
   dropContextName,
   hoveredRowID,
   isDragging = false,
-  isRowFocusable = () => true,
+  isRowFocusable,
   loadingRowIDs,
   onDroppableHover,
   onEnter,
   onEscape,
   onRowDrag,
   onSelectAll,
-  openItemIDs,
+  openItemKeys,
   sections,
   segmentWidth = DEFAULT_SEGMENT_WIDTH,
   selectedItemKeys,
@@ -42,13 +42,13 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
       let count = 0
       for (const row of rows) {
         count++
-        if (row.rows && openItemIDs?.has(row.rowID)) {
+        if (row.rows && openItemKeys?.has(row.rowID)) {
           count += countVisibleRows(row.rows)
         }
       }
       return count
     },
-    [openItemIDs],
+    [openItemKeys],
   )
 
   const totalVisibleRows = React.useMemo(
@@ -70,7 +70,7 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
             return row
           }
           currentIndex++
-          if (row.rows && openItemIDs?.has(row.rowID)) {
+          if (row.rows && openItemKeys?.has(row.rowID)) {
             const found = findRow(row.rows)
             if (found) {
               return found
@@ -82,7 +82,7 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
 
       return findRow(sections)
     },
-    [sections, openItemIDs],
+    [sections, openItemKeys],
   )
 
   // Get visual index from row ID
@@ -99,7 +99,7 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
             return currentIndex
           }
           currentIndex++
-          if (row.rows && openItemIDs?.has(row.rowID)) {
+          if (row.rows && openItemKeys?.has(row.rowID)) {
             const found = findIndex(row.rows)
             if (found !== -1) {
               return found
@@ -111,7 +111,7 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
 
       return sections ? findIndex(sections) : -1
     },
-    [sections, openItemIDs],
+    [sections, openItemKeys],
   )
 
   // Get the current focused row index for passing down to Row components
@@ -207,13 +207,6 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
           const currentIndex = getIndexFromRowID(row.rowID)
           let nextIndex = currentIndex + direction
 
-          if (shiftKey) {
-            onSelectionChange({
-              itemKey: row.rowID,
-              options: { ctrlKey, metaKey, shiftKey },
-            })
-          }
-
           // Find next focusable row
           while (nextIndex >= 0 && nextIndex < totalVisibleRows) {
             const nextRow = getRowAtVisibleIndex(nextIndex)
@@ -349,7 +342,7 @@ export const NestedSectionsTable: React.FC<NestedSectionsTableProps> = ({
           onRowDrag={onRowDrag}
           onRowKeyPress={handleRowKeyPress}
           onSelectionChange={onSelectionChange}
-          openItemIDs={openItemIDs}
+          openItemKeys={openItemKeys}
           parentItems={[]}
           rowIndexOffset={0}
           rows={sections}

packages/ui/src/elements/TreeView/NestedSectionsTable/types.ts

@@ -28,7 +28,7 @@ export type NestedSectionsTableProps = {
   onEscape: () => void
   onRowDrag?: (params: { event: PointerEvent; item: null | SectionRow }) => void
   onSelectAll: () => void
-  openItemIDs?: Set<number | string>
+  openItemKeys?: Set<ItemKey>
   sections: SectionRow[]
   segmentWidth?: number
   selectedItemKeys: Set<ItemKey>

packages/ui/src/elements/TreeView/TreeViewTable/index.tsx

@@ -6,7 +6,7 @@ import { useDndMonitor } from '@dnd-kit/core'
 import React from 'react'
 import { toast } from 'sonner'
 
-import type { SectionRow } from '../NestedSectionsTable/types.js'
+import type { ItemKey, SectionRow } from '../NestedSectionsTable/types.js'
 
 import { useTranslation } from '../../../providers/Translation/index.js'
 import { useTreeView } from '../../../providers/TreeView/index.js'
@@ -28,7 +28,7 @@ export function TreeViewTable() {
     loadingRowIDs,
     moveItems,
     onItemSelection,
-    openItemIDs,
+    openItemKeys,
     selectAll,
     selectedItemKeys,
     toggleRow,
@@ -46,13 +46,6 @@ export function TreeViewTable() {
     [items, i18n.language],
   )
 
-  const selectedRowIDs = React.useMemo(() => {
-    return Array.from(selectedItemKeys).map((key) => {
-      const doc = items.find((d) => d.itemKey === key)
-      return doc?.value.id || ''
-    })
-  }, [selectedItemKeys, items])
-
   // Handle drag/drop events
   const onDragEnd = React.useCallback(
     async (event: DragEndEvent) => {
@@ -65,14 +58,24 @@ export function TreeViewTable() {
         'targetItem' in event.over.data.current
       ) {
         const selectedItems = getSelectedItems()
-        const docIDs = selectedItems.map((doc) => doc.value.id)
+        const { docsToMove, itemKeys } = selectedItems.reduce(
+          (acc, doc) => {
+            acc.itemKeys.add(doc.itemKey)
+            acc.docsToMove.push({
+              relationTo: doc.relationTo,
+              value: doc.value.id,
+            })
+            return acc
+          },
+          { docsToMove: [], itemKeys: new Set<ItemKey>() },
+        )
         const targetItem = event.over.data.current.targetItem
         const targetID = targetItem?.rowID
 
         // Validate: prevent moving a parent into its own descendant
-        const invalidTargets = new Set<number | string>()
-        docIDs.forEach((id) => {
-          const descendants = getAllDescendantIDs({ itemIDs: [id], items })
+        const invalidTargets = new Set<ItemKey>()
+        itemKeys.forEach((itemKey) => {
+          const descendants = getAllDescendantIDs({ itemKeys: new Set([itemKey]), items })
           descendants.forEach((descendantID) => invalidTargets.add(descendantID))
         })
         if (targetID && invalidTargets.has(targetID)) {
@@ -82,7 +85,7 @@ export function TreeViewTable() {
 
         try {
           await moveItems({
-            docIDs,
+            docsToMove,
             parentID: targetID,
           })
         } catch (error) {
@@ -144,7 +147,6 @@ export function TreeViewTable() {
       const isCurrentlySelected = selectedItemKeys.has(dragItemDoc.itemKey)
 
       if (!isCurrentlySelected) {
-        const index = items.findIndex((d) => d.itemKey === dragItemDoc.itemKey)
         onItemSelection({
           eventOptions: {
             ctrlKey: event.ctrlKey || event.metaKey,
@@ -159,8 +161,8 @@ export function TreeViewTable() {
   )
 
   const unfocusableIDs = React.useMemo(() => {
-    return getAllDescendantIDs({ itemIDs: selectedRowIDs, items })
-  }, [selectedRowIDs, items])
+    return getAllDescendantIDs({ itemKeys: selectedItemKeys, items })
+  }, [selectedItemKeys, items])
 
   const isRowFocusable = React.useCallback(
     (row: SectionRow) => {
@@ -198,7 +200,7 @@ export function TreeViewTable() {
         onEscape={clearSelections}
         onRowDrag={onRowDrag}
         onSelectAll={handleSelectAll}
-        openItemIDs={openItemIDs}
+        openItemKeys={openItemKeys}
         sections={sections}
         selectedItemKeys={selectedItemKeys}
         targetParentID={targetParentID}

packages/ui/src/elements/TreeView/utils/getAllDescendantIDs.ts

@@ -1,10 +1,12 @@
 import type { TreeViewItem } from 'payload/shared'
 
+import type { ItemKey } from './itemsToSectionRows.js'
+
 type GetAllDescendantIDsArgs = {
   /**
-   * IDs of the items to get descendants for
+   * Item Keys of the items to get descendants for
    */
-  itemIDs: (number | string)[]
+  itemKeys: Set<ItemKey>
   /**
    * All items in the tree
    */
@@ -31,24 +33,21 @@ type GetAllDescendantIDsArgs = {
  * getAllDescendantIDs({ itemID: ['A', 'D'], items: documents })
  * // Returns Set { 'A', 'B', 'C', 'D' }
  */
-export function getAllDescendantIDs({
-  itemIDs,
-  items,
-}: GetAllDescendantIDsArgs): Set<number | string> {
-  const result = new Set<number | string>()
+export function getAllDescendantIDs({ itemKeys, items }: GetAllDescendantIDsArgs): Set<ItemKey> {
+  const result = new Set<ItemKey>()
 
-  const collectDescendants = (parentID: number | string) => {
+  const collectDescendants = (parentItemKey: ItemKey) => {
     items.forEach((doc) => {
-      if (doc.value.parentID === parentID) {
-        result.add(doc.value.id)
+      if (doc.parentItemKey === parentItemKey) {
+        result.add(doc.itemKey)
         // Recursively collect this child's descendants
-        collectDescendants(doc.value.id)
+        collectDescendants(doc.itemKey)
       }
     })
   }
 
-  itemIDs.forEach((id) => {
-    collectDescendants(id)
+  itemKeys.forEach((itemKey) => {
+    collectDescendants(itemKey)
   })
 
   return result

packages/ui/src/providers/TreeView/index.tsx

@@ -32,7 +32,10 @@ export type TreeViewContextValue = {
   itemKeysToMove?: Set<TreeViewItemKey>
   items?: TreeViewItem[]
   loadingRowIDs: Set<number | string>
-  moveItems: (args: { docIDs: (number | string)[]; parentID?: number | string }) => Promise<void>
+  moveItems: (args: {
+    docsToMove: { relationTo: string; value: number | string }[]
+    parentID?: number | string
+  }) => Promise<void>
   onItemSelection: (args: {
     eventOptions?: {
       ctrlKey?: boolean
@@ -41,7 +44,7 @@ export type TreeViewContextValue = {
     }
     item: TreeViewItem
   }) => void
-  openItemIDs: Set<number | string>
+  openItemKeys: Set<ItemKey>
   parentFieldName: string
   refineTreeViewData: (args: { query?: TreeViewQueryParams; updateURL: boolean }) => void
   search: string
@@ -63,7 +66,7 @@ const Context = React.createContext<TreeViewContextValue>({
   loadingRowIDs: new Set<number | string>(),
   moveItems: () => Promise.resolve(undefined),
   onItemSelection: () => undefined,
-  openItemIDs: new Set<number | string>(),
+  openItemKeys: new Set<ItemKey>(),
   parentFieldName: '_parentDoc',
   refineTreeViewData: () => undefined,
   search: '',
@@ -240,11 +243,13 @@ export function TreeViewProvider({
 
   const moveItems: TreeViewContextValue['moveItems'] = React.useCallback(
     async (args) => {
-      const { docIDs, parentID } = args
-      if (!docIDs.length) {
+      const { docsToMove, parentID } = args
+      if (!docsToMove.length) {
         return
       }
 
+      const docIDs = docsToMove.map((d) => d.value)
+
       // Optimistically update local documents
       setItems((prevDocs) =>
         prevDocs.map((doc) =>
@@ -402,7 +407,7 @@ export function TreeViewProvider({
         loadingRowIDs,
         moveItems,
         onItemSelection,
-        openItemIDs: openItemKeys,
+        openItemKeys,
         parentFieldName,
         refineTreeViewData,
         search,