Merge branch 'main' into clean-up-lint-warnings

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

@@ -70,8 +70,6 @@ governing permissions and limitations under the License.
   /* Correct the outline for input[type="search"] style in Safari. */
   outline-offset: -2px;
 
-  /* Use padding instead of text-indent so long strings don't overlap the icon */
-  padding-inline-start: var(--spectrum-search-padding-left);
   text-indent: 0;
 
   /* Don't let long strings overlap the close icon */
@@ -96,16 +94,3 @@ governing permissions and limitations under the License.
   }
 }
 
-/* Positions search magnifier UI icon */
-.spectrum-Search .spectrum-Search-icon {
-  display: block;
-  position: absolute;
-  height: var(--spectrum-global-dimension-size-200);
-  width: var(--spectrum-global-dimension-size-200);
-  inset-inline-start: 12px;
-  top: calc(calc(var(--spectrum-textfield-height) / 2) - calc(var(--spectrum-global-dimension-size-200) / 2));
-
-  transition: fill var(--spectrum-global-animation-duration-100) ease-in-out;
-
-  pointer-events: none;
-}

packages/@adobe/spectrum-css-temp/components/search/vars.css

@@ -11,4 +11,3 @@
  */
 
 @import './index.css';
-@import './skin.css';

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

@@ -227,15 +227,21 @@ governing permissions and limitations under the License.
   position: absolute;
   height: var(--spectrum-icon-info-medium-height);
   width: var(--spectrum-icon-info-medium-width);
-  inset-inline-start: var(--spectrum-global-dimension-size-100);
+  /* This has a named variable in a future update of spectrum-css. */
+  inset-inline-start: var(--spectrum-global-dimension-size-150);
   top: var(--spectrum-global-dimension-size-85);
   transition: fill var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
 /* styles the textfield properly if the left icon is provided */
 .spectrum-Textfield-inputIcon {
   /* Use padding instead of text-indent so long strings don't overlap the icon */
-  padding-inline-start: calc(calc(var(--spectrum-global-dimension-size-200) + var(--spectrum-icon-info-medium-width)) - 1px);
+  /* These values have real names in a spectrum-css update, when we update, use those. */
+  padding-inline-start: calc(
+    var(--spectrum-global-dimension-size-150) +
+    var(--spectrum-global-dimension-size-225) +
+    var(--spectrum-global-dimension-size-65)
+  );
 
   .spectrum-Textfield--quiet & {
     padding-inline-start: calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width));

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

@@ -119,7 +119,9 @@ const CANCELED_EVENTS = [
   'touchstart',
   'touchmove',
   'touchend',
-  'keyup'
+  'keyup',
+  'focusin',
+  'focusout'
 ];
 
 const CLICK_EVENTS = [

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

@@ -120,6 +120,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target.type === 'item'
         ? keyboardDelegate.getKeyBelow(target.key)
         : keyboardDelegate.getFirstKey();
+      let dropPosition: DropPosition = 'before';
 
       if (target.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -131,6 +132,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             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') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -146,7 +153,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: DROP_POSITIONS[0]
+        dropPosition
       };
     };
 
@@ -155,6 +162,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target?.type === 'item'
         ? keyboardDelegate.getKeyAbove(target.key)
         : keyboardDelegate.getLastKey();
+      let dropPosition: DropPosition = !target || target.type === 'root' ? 'after' : 'on';
 
       if (target?.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -166,6 +174,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             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') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -181,7 +195,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: !target || target.type === 'root' ? 'after' : 'on'
+        dropPosition
       };
     };
 
@@ -231,7 +245,52 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDropEnter(e, drag) {
         let types = getTypes(drag.items);
-        let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        let selectionManager = localState.state.selectionManager;
+        let target: DropTarget;
+
+        // When entering the droppable collection for the first time, the default drop target
+        // is after the focused key.
+        let key = selectionManager.focusedKey;
+        let dropPosition: DropPosition = 'after';
+
+        // If the focused key is a cell, get the parent item instead.
+        // For now, we assume that individual cells cannot be dropped on.
+        let item = localState.state.collection.getItem(key);
+        if (item?.type === 'cell') {
+          key = item.parentKey;
+        }
+
+        // If the focused item is also selected, the default drop target is after the last selected item.
+        // But if the focused key is the first selected item, then default to before the first selected item.
+        // This is to make reordering lists slightly easier. If you select top down, we assume you want to
+        // move the items down. If you select bottom up, we assume you want to move the items up.
+        if (selectionManager.isSelected(key)) {
+          if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) {
+            dropPosition = 'before';
+          } else {
+            key = selectionManager.lastSelectedKey;
+          }
+        }
+
+        if (key != null) {
+          target = {
+            type: 'item',
+            key,
+            dropPosition
+          };
+
+          // If the default target is not valid, find the next one that is.
+          if (localState.state.getDropOperation(target, types, drag.allowedDropOperations) === 'cancel') {
+            target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
+              ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
+          }
+        }
+
+        // If no focused key, then start from the root.
+        if (!target) {
+          target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        }
+
         localState.state.setTarget(target);
       },
       onDropExit() {

packages/@react-aria/dnd/stories/DroppableGrid.tsx

@@ -149,6 +149,7 @@ function DroppableGrid(props) {
 
   let dropState = useDroppableCollectionState({
     collection: gridState.collection,
+    selectionManager: gridState.selectionManager,
     getDropOperation: props.getDropOperation || defaultGetDropOperation,
     onDropEnter: props.onDropEnter,
     onDropMove: props.onDropMove,
@@ -282,8 +283,7 @@ function CollectionItem({item, state, dropState, onPaste}) {
   let {gridCellProps} = useGridCell({
     node: cellNode,
     ref: cellRef,
-    focusMode: 'cell',
-    shouldSelectOnPressUp: true
+    focusMode: 'cell'
   }, state);
 
   let dropIndicatorRef = React.useRef();

packages/@react-aria/dnd/stories/DroppableListBox.tsx

@@ -93,6 +93,7 @@ export function DroppableListBox(props) {
 
   let dropState = useDroppableCollectionState({
     collection: state.collection,
+    selectionManager: state.selectionManager,
     getDropOperation(target, types, allowedOperations) {
       if (target.type === 'root') {
         return 'move';

packages/@react-aria/dnd/stories/Reorderable.tsx

@@ -150,6 +150,7 @@ function ReorderableGrid(props) {
 
   let dropState = useDroppableCollectionState({
     collection: gridState.collection,
+    selectionManager: gridState.selectionManager,
     getDropOperation(target) {
       if (target.type === 'root' || target.dropPosition === 'on') {
         return 'cancel';

packages/@react-aria/dnd/stories/VirtualizedListBox.tsx

@@ -102,6 +102,7 @@ export function VirtualizedListBox(props) {
 
   let dropState = useDroppableCollectionState({
     collection: state.collection,
+    selectionManager: state.selectionManager,
     getDropOperation(target, types, allowedOperations) {
       if (props.accept) {
         // Don't accept if types includes both items and folders.