Sections in table

packages/@adobe/spectrum-css-temp/components/table/index.css

@@ -61,6 +61,8 @@ svg.spectrum-Table-sortedIcon {
   margin-bottom: -1px;
   z-index: 1;
 }
+
+.spectrum-Table-sectionCellContents,
 .spectrum-Table-headCellContents {
   display: inline-block;
   min-inline-size: 0;
@@ -69,6 +71,7 @@ svg.spectrum-Table-sortedIcon {
   text-overflow: ellipsis;
 }
 
+.spectrum-Table-sectionCell,
 .spectrum-Table-headCell {
   display: flex;
   box-sizing: border-box;

packages/@adobe/spectrum-css-temp/components/table/skin.css

@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
   --spectrum-table-row-border-color-selected: var(--spectrum-global-color-blue-500);
   --spectrum-table-cell-border-color-selected: var(--spectrum-global-color-blue-500);
   --spectrum-table-row-focus-indicator-color: var(--spectrum-selectlist-option-focus-indicator-color);
+  --spectrum-table-section-header-background-color: var(--spectrum-global-color-gray-200);
 }
 
 .spectrum-Table-headWrapper {
@@ -32,6 +33,11 @@ governing permissions and limitations under the License.
   forced-color-adjust: none;
 }
 
+.spectrum-Table-sectionCell {
+  color: var(--spectrum-alias-text-color);
+  background-color: var(--spectrum-table-section-header-background-color);
+}
+
 .spectrum-Table-headCell {
   color: var(--spectrum-alias-text-color);
   background-color: var(--spectrum-alias-background-color-default);
@@ -142,6 +148,7 @@ tbody.spectrum-Table-body {
   }
 }
 
+.spectrum-Table-sectionRow,
 .spectrum-Table-row {
   box-sizing: border-box;
 

packages/@react-aria/autocomplete/src/useSearchAutocomplete.ts

@@ -43,7 +43,7 @@ export interface AriaSearchAutocompleteOptions<T> extends AriaSearchAutocomplete
   /** The ref for the list box. */
   listBoxRef: RefObject<HTMLElement>,
   /** An optional keyboard delegate implementation, to override the default. */
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
 }
 
 /**
@@ -87,7 +87,7 @@ export function useSearchAutocomplete<T>(props: AriaSearchAutocompleteOptions<T>
     value: state.inputValue,
     setValue: state.setInputValue
   }, inputRef);
-  
+
 
   let {listBoxProps, labelProps, inputProps: comboBoxInputProps} = useComboBox(
     {

packages/@react-aria/combobox/src/useComboBox.ts

@@ -37,7 +37,7 @@ export interface AriaComboBoxOptions<T> extends Omit<AriaComboBoxProps<T>, 'chil
   /** The ref for the optional list box popup trigger button.  */
   buttonRef?: RefObject<Element>,
   /** An optional keyboard delegate implementation, to override the default. */
-  keyboardDelegate?: KeyboardDelegate
+  keyboardDelegate?: KeyboardDelegate<T>
 }
 
 export interface ComboBoxAria<T> {

packages/@react-aria/dnd/intl/ar-AE.json

@@ -25,5 +25,7 @@
   "endDragVirtual": "السحب. انقر لإلغاء السحب.",
   "insertAfter": "أدخل بعد {itemText}",
   "insertBefore": "أدخل قبل {itemText}",
-  "insertBetween": "أدخل بين {beforeItemText} و {afterItemText}"
+  "insertBetween": "أدخل بين {beforeItemText} و {afterItemText}",
+  "insertBeforeSection": "Insert after {itemText} in {sectionText}",
+  "insertAfterSection": "Insert before {itemText} in {sectionText}"
 }

packages/@react-aria/dnd/intl/en-US.json

@@ -25,5 +25,7 @@
   "dropOnItem": "Drop on {itemText}",
   "insertBefore": "Insert before {itemText}",
   "insertBetween": "Insert between {beforeItemText} and {afterItemText}",
-  "insertAfter": "Insert after {itemText}"
+  "insertAfter": "Insert after {itemText}",
+  "insertBeforeSection": "Insert after {itemText} in {sectionText}",
+  "insertAfterSection": "Insert before {itemText} in {sectionText}"
 }

packages/@react-aria/dnd/src/useDropIndicator.ts

@@ -12,7 +12,7 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget} from '@react-types/shared';
+import {DropTarget, KeyboardDelegate} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
 import {HTMLAttributes, Key, RefObject} from 'react';
 // @ts-ignore
@@ -23,7 +23,9 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DropIndicatorProps {
   /** The drop target that the drop indicator represents. */
-  target: DropTarget
+  target: DropTarget,
+  /** A delegate object that implements behavior for keyboard focus movement. */
+  keyboardDelegate?: KeyboardDelegate<unknown>
 }
 
 export interface DropIndicatorAria {
@@ -42,14 +44,16 @@ export interface DropIndicatorAria {
  * Handles drop interactions for a target within a droppable collection.
  */
 export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria {
-  let {target} = props;
+  let {target, keyboardDelegate} = props;
   let {collection} = state;
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let dragSession = DragManager.useDragSession();
   let {dropProps} = useDroppableItem(props, state, ref);
   let id = useId();
   let getText = (key: Key) => collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue;
+  let itemFilter = (item) => item.type === 'item' || item.type === 'section';
+  let getNode = (key: Key) => collection.getItem(key);
 
   let label = '';
   let labelledBy: string;
@@ -63,23 +67,54 @@ export function useDropIndicator(props: DropIndicatorProps, state: DroppableColl
   } else {
     let before: Key | null;
     let after: Key | null;
-    if (collection.getFirstKey() === target.key && target.dropPosition === 'before') {
+    let keyGetter = keyboardDelegate ?? collection;
+
+    let targetNode = getNode(target.key);
+    let keyBefore = keyboardDelegate != null ? keyboardDelegate.getKeyAbove(target.key, itemFilter) : collection.getKeyBefore(target.key);
+    if (keyGetter.getFirstKey() === target.key && target.dropPosition === 'before' && getNode(targetNode.parentKey)?.type !== 'section') {
       before = null;
     } else {
-      before = target.dropPosition === 'before' ? collection.getKeyBefore(target.key) : target.key;
+      before = target.dropPosition === 'before' ? keyBefore : target.key;
     }
 
-    if (collection.getLastKey() === target.key && target.dropPosition === 'after') {
-      after = null;
+    let keyAfter = keyboardDelegate != null ? keyboardDelegate.getKeyBelow(target.key, itemFilter) : collection.getKeyAfter(target.key);
+    if (keyGetter.getLastKey() === target.key && target.dropPosition === 'after') {
+      if (getNode(targetNode.parentKey)?.type === 'section') {
+        after = targetNode.parentKey;
+      } else {
+        after = null;
+      }
     } else {
-      after = target.dropPosition === 'after' ? collection.getKeyAfter(target.key) : target.key;
+      if (target.dropPosition === 'before') {
+        after = target.key;
+      } else {
+        if (getNode(keyAfter)?.type === 'section') {
+          after = targetNode.parentKey;
+        } else {
+          after = keyAfter;
+        }
+      }
     }
 
     if (before && after) {
-      label = stringFormatter.format('insertBetween', {
-        beforeItemText: getText(before),
-        afterItemText: getText(after)
-      });
+      let beforeNode = getNode(before);
+      let afterNode = getNode(after);
+      if (beforeNode.type === 'section') {
+        label = stringFormatter.format('insertAfterSection', {
+          itemText: getText(after),
+          sectionText: getText(before)
+        });
+      } else if (afterNode.type === 'section') {
+        label = stringFormatter.format('insertBeforeSection', {
+          itemText: getText(before),
+          sectionText: getText(after)
+        });
+      } else {
+        label = stringFormatter.format('insertBetween', {
+          beforeItemText: getText(before),
+          afterItemText: getText(after)
+        });
+      }
     } else if (before) {
       label = stringFormatter.format('insertAfter', {
         itemText: getText(before)

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -41,7 +41,7 @@ import {useDrop} from './useDrop';
 
 export interface DroppableCollectionOptions extends DroppableCollectionProps {
   /** A delegate object that implements behavior for keyboard focus movement. */
-  keyboardDelegate: KeyboardDelegate,
+  keyboardDelegate: KeyboardDelegate<unknown>,
   /** A delegate object that provides drop targets for pointer coordinates within the collection. */
   dropTargetDelegate: DropTargetDelegate
 }
@@ -74,6 +74,11 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
   localState.props = props;
   localState.state = state;
 
+  let itemFilter = useCallback((item) => {
+    let isEmptySection = item?.type === 'section' && [...item.childNodes].filter((child) => child.type === 'item').length === 0;
+    return item.type === 'item' || isEmptySection;
+  }, []);
+
   let defaultOnDrop = useCallback(async (e: DroppableCollectionDropEvent) => {
     let {
       onInsert,
@@ -325,24 +330,30 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
 
       let {keyboardDelegate} = localState.props;
       let nextKey = target.type === 'item'
-        ? keyboardDelegate.getKeyBelow(target.key)
-        : keyboardDelegate.getFirstKey();
-      let dropPosition: DropPosition = 'before';
+        ? keyboardDelegate.getKeyBelow(target.key, itemFilter)
+        : keyboardDelegate.getFirstKey(undefined, undefined, itemFilter);
+      let targetItem = target.type === 'item' ? localState.state.collection.getItem(target.key) : undefined;
+      let nextItem = nextKey != null ? localState.state.collection.getItem(nextKey) : undefined;
+      let dropPosition: DropPosition = nextItem && nextItem.type === 'section' ? 'on' : 'before';
 
-      if (target.type === 'item') {
+      if (target?.type === 'item' && targetItem?.type !== 'section') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
         let nextDropPosition = DROP_POSITIONS[positionIndex + 1];
-        if (positionIndex < DROP_POSITIONS.length - 1 && !(nextDropPosition === 'after' && nextKey != null)) {
+        if (
+          targetItem?.type === 'item' &&
+          (positionIndex < DROP_POSITIONS.length - 1 && !(nextDropPosition === 'after' && nextKey != null)) ||
+          (nextDropPosition === 'after' && nextKey != null && targetItem.parentKey !== nextItem.parentKey)
+        ) {
           return {
             type: 'item',
             key: target.key,
             dropPosition: nextDropPosition
           };
         }
 
-        // If the last drop position was 'after', then 'before' on the next key is equivalent.
-        // Switch to 'on' instead.
-        if (target.dropPosition === 'after') {
+        // If the last drop position was 'after', then 'before' on the next key is equivalent if they have the same parent.
+        // Switch to 'on' instead. Do the same if the next key is a section as well.
+        if (target.dropPosition === 'after' && (targetItem?.parentKey === nextItem?.parentKey || nextItem?.type === 'section')) {
           dropPosition = 'on';
         }
       }
@@ -367,25 +378,30 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     let getPreviousTarget = (target: DropTarget, wrap = true): DropTarget => {
       let {keyboardDelegate} = localState.props;
       let nextKey = target?.type === 'item'
-        ? keyboardDelegate.getKeyAbove(target.key)
-        : keyboardDelegate.getLastKey();
-      let dropPosition: DropPosition = !target || target.type === 'root' ? 'after' : 'on';
+        ? keyboardDelegate.getKeyAbove(target.key, itemFilter)
+        : keyboardDelegate.getLastKey(undefined, undefined, itemFilter);
+      let targetItem = target?.type === 'item' ? localState.state.collection.getItem(target.key) : undefined;
+      let nextItem = nextKey != null ? localState.state.collection.getItem(nextKey) : undefined;
+      let dropPosition: DropPosition = (!target || target.type === 'root') && nextItem.type !== 'section' ? 'after' : 'on';
 
-      if (target?.type === 'item') {
+      if (target?.type === 'item' && targetItem?.type !== 'section') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
         let nextDropPosition = DROP_POSITIONS[positionIndex - 1];
-        if (positionIndex > 0 && nextDropPosition !== 'after') {
+        if (targetItem?.type === 'item' && positionIndex > 0 && nextDropPosition !== 'after') {
           return {
             type: 'item',
             key: target.key,
             dropPosition: nextDropPosition
           };
         }
 
-        // If the last drop position was 'before', then 'after' on the previous key is equivalent.
-        // Switch to 'on' instead.
-        if (target.dropPosition === 'before') {
+        // If the last drop position was 'before', then 'after' on the previous key is equivalent if they have the same parent.
+        // Switch to 'on' instead. Do the same if the next key is a section as well.
+        // If we are changing sections or moving from an empty section to a row then the dropPosition is after
+        if (target.dropPosition === 'before' && (targetItem?.parentKey === nextItem?.parentKey || nextItem?.type === 'section')) {
           dropPosition = 'on';
+        } else if ((target.dropPosition === 'before' || targetItem.type === 'section') && nextItem && targetItem.parentKey !== nextItem.parentKey) {
+          dropPosition = 'after';
         }
       }
 
@@ -471,6 +487,13 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         let item = localState.state.collection.getItem(key);
         if (item?.type === 'cell') {
           key = item.parentKey;
+          item = localState.state.collection.getItem(key);
+        }
+
+        if (item != null && !itemFilter(item)) {
+          // If the previously focused item in the droppable collection isn't an item or a section (e.g. table column header)
+          // then set key to null so we start from root
+          key = null;
         }
 
         // If the focused item is also selected, the default drop target is after the last selected item.
@@ -577,22 +600,25 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
                 let nextKey = keyboardDelegate.getKeyPageBelow(
                   target.type === 'item'
                     ? target.key
-                    : keyboardDelegate.getFirstKey()
+                    : keyboardDelegate.getFirstKey(undefined, undefined, itemFilter),
+                  itemFilter
                 );
+
+                // Prioritize the same drop position that we started on, even if the next key is less than a whole page down
                 let dropPosition = target.type === 'item' ? target.dropPosition : 'after';
 
                 // If there is no next key, or we are starting on the last key, jump to the last possible position.
-                if (nextKey == null || (target.type === 'item' && target.key === keyboardDelegate.getLastKey())) {
-                  nextKey = keyboardDelegate.getLastKey();
+                if (nextKey == null || (target.type === 'item' && target.key === keyboardDelegate.getLastKey(undefined, undefined, itemFilter))) {
+                  nextKey = keyboardDelegate.getLastKey(undefined, undefined, itemFilter);
                   dropPosition = 'after';
+
                 }
 
                 target = {
                   type: 'item',
                   key: nextKey,
                   dropPosition
                 };
-
                 // If the target does not accept the drop, find the next valid target.
                 // If no next valid target, find the previous valid target.
                 let {draggingCollectionRef, draggingKeys} = globalDndState;
@@ -604,7 +630,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
                 }
               }
 
-              localState.state.setTarget(target ?? localState.state.target);
+              let finalTarget = target ?? localState.state.target;
+              if (finalTarget.type === 'item' && localState.state.collection.getItem(finalTarget.key).type === 'section') {
+                finalTarget.dropPosition = 'on';
+              }
+
+              localState.state.setTarget(finalTarget);
             }
             break;
           }
@@ -618,15 +649,15 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
               target = nextValidTarget(null, types, drag.allowedDropOperations, getPreviousTarget);
             } else if (target.type === 'item') {
               // If at the top already, switch to the root. Otherwise navigate a page up.
-              if (target.key === keyboardDelegate.getFirstKey()) {
+              if (target.key === keyboardDelegate.getFirstKey(undefined, undefined, itemFilter)) {
                 target = {
                   type: 'root'
                 };
               } else {
-                let nextKey = keyboardDelegate.getKeyPageAbove(target.key);
+                let nextKey = keyboardDelegate.getKeyPageAbove(target.key, itemFilter);
                 let dropPosition = target.dropPosition;
                 if (nextKey == null) {
-                  nextKey = keyboardDelegate.getFirstKey();
+                  nextKey = keyboardDelegate.getFirstKey(undefined, undefined, itemFilter);
                   dropPosition = 'before';
                 }
 
@@ -648,13 +679,18 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
               }
             }
 
-            localState.state.setTarget(target ?? localState.state.target);
+            let finalTarget = target ?? localState.state.target;
+            if (finalTarget.type === 'item' && localState.state.collection.getItem(finalTarget.key).type === 'section') {
+              finalTarget.dropPosition = 'on';
+            }
+
+            localState.state.setTarget(finalTarget);
             break;
           }
         }
       }
     });
-  }, [localState, ref, onDrop]);
+  }, [localState, ref, onDrop, itemFilter]);
 
   let id = useId();
   droppableCollectionMap.set(state, {id, ref});

packages/@react-aria/grid/intl/en-US.json

@@ -4,5 +4,6 @@
   "selectedCount": "{count, plural, =0 {No items selected} one {# item selected} other {# items selected}}.",
   "selectedAll": "All items selected.",
   "selectedItem": "{item} selected.",
-  "longPressToSelect": "Long press to enter selection mode."
+  "longPressToSelect": "Long press to enter selection mode.",
+  "sectionAnnouncement": "Entered section {sectionTitle}, with {sectionSize, plural, one {# row} other {# rows}}."
 }