UnifiedPicker: Drop to either side of items (#16236)

* working, not rtl tested yet

* rtl I think

* Change files

change/@fluentui-react-experiments-2020-12-15-11-05-24-dropright.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "UnifiedPicker drop to each side of item",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-12-15T19:05:24.161Z"
+}

packages/react-experiments/src/components/UnifiedPicker/UnifiedPicker.tsx

@@ -11,6 +11,7 @@ import { useSelectedItems } from './hooks/useSelectedItems';
 import { IFloatingSuggestionItemProps } from '../../FloatingSuggestionsComposite';
 import { getTheme } from '@fluentui/react/lib/Styling';
 import { mergeStyles } from '@fluentui/merge-styles';
+import { getRTL } from '@fluentui/react/lib/Utilities';
 
 export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.Element => {
   const getClassNames = classNamesFunction<IUnifiedPickerStyleProps, IUnifiedPickerStyles>();
@@ -180,6 +181,21 @@ export const UnifiedPicker = <T extends {}>(props: IUnifiedPickerProps<T>): JSX.
       insertIndex = selectedItems.indexOf(item);
     }
 
+    // If the drop is in the right half of the item, we want to drop at index+1
+    if (event && event.currentTarget) {
+      const targetElement = event.currentTarget as HTMLElement;
+      const halfwayPoint = targetElement.offsetLeft + targetElement.offsetWidth / 2;
+      if (getRTL()) {
+        if (event.pageX < halfwayPoint) {
+          insertIndex++;
+        }
+      } else {
+        if (event.pageX > halfwayPoint) {
+          insertIndex++;
+        }
+      }
+    }
+
     event?.preventDefault();
     _onDropInner(event?.dataTransfer !== null ? event?.dataTransfer : undefined);
   };