@react-aria/dnd 3.0.0-alpha.9 → 3.0.0-nightly-4980928d3-240906

package/src/useDropIndicator.ts

@@ -12,75 +12,101 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget} from '@react-types/shared';
+import {DropTarget, Key, RefObject} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
-import {HTMLAttributes, Key, RefObject} from 'react';
+import {HTMLAttributes} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDroppableItem} from './useDroppableItem';
 import {useId} from '@react-aria/utils';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DropIndicatorProps {
+  /** The drop target that the drop indicator represents. */
   target: DropTarget
 }
 
 export interface DropIndicatorAria {
-  dropIndicatorProps: HTMLAttributes<HTMLElement>
+  /** Props for the drop indicator element. */
+  dropIndicatorProps: HTMLAttributes<HTMLElement>,
+  /** Whether the drop indicator is currently the active drop target. */
+  isDropTarget: boolean,
+  /**
+   * Whether the drop indicator is hidden, both visually and from assistive technology.
+   * Use this to determine whether to omit the element from the DOM entirely.
+   */
+  isHidden: boolean
 }
 
-export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria {
+/**
+ * Handles drop interactions for a target within a droppable collection.
+ */
+export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>): DropIndicatorAria {
   let {target} = props;
   let {collection} = state;
 
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/dnd');
   let dragSession = DragManager.useDragSession();
   let {dropProps} = useDroppableItem(props, state, ref);
   let id = useId();
-  let getText = (key: Key) => collection.getItem(key)?.textValue;
+  let getText = (key: Key) => collection.getTextValue?.(key) ?? collection.getItem(key)?.textValue;
 
   let label = '';
   let labelledBy: string;
   if (target.type === 'root') {
-    label = formatMessage('dropOnRoot');
+    label = stringFormatter.format('dropOnRoot');
     labelledBy = `${id} ${getDroppableCollectionId(state)}`;
   } else if (target.dropPosition === 'on') {
-    label = formatMessage('dropOnItem', {
+    label = stringFormatter.format('dropOnItem', {
       itemText: getText(target.key)
     });
   } else {
-    let before = target.dropPosition === 'before'
-      ? collection.getKeyBefore(target.key)
-      : target.key;
-    let after = target.dropPosition === 'after'
-      ? collection.getKeyAfter(target.key)
-      : target.key;
+    let before: Key | null;
+    let after: Key | null;
+    if (collection.getFirstKey() === target.key && target.dropPosition === 'before') {
+      before = null;
+    } else {
+      before = target.dropPosition === 'before' ? collection.getKeyBefore(target.key) : target.key;
+    }
+
+    if (collection.getLastKey() === target.key && target.dropPosition === 'after') {
+      after = null;
+    } else {
+      after = target.dropPosition === 'after' ? collection.getKeyAfter(target.key) : target.key;
+    }
 
     if (before && after) {
-      label = formatMessage('insertBetween', {
+      label = stringFormatter.format('insertBetween', {
         beforeItemText: getText(before),
         afterItemText: getText(after)
       });
     } else if (before) {
-      label = formatMessage('insertAfter', {
+      label = stringFormatter.format('insertAfter', {
         itemText: getText(before)
       });
     } else if (after) {
-      label = formatMessage('insertBefore', {
+      label = stringFormatter.format('insertBefore', {
         itemText: getText(after)
       });
     }
   }
 
+  let isDropTarget = state.isDropTarget(target);
+  let ariaHidden = !dragSession ? 'true' : dropProps['aria-hidden'];
   return {
     dropIndicatorProps: {
       ...dropProps,
       id,
-      'aria-roledescription': formatMessage('dropIndicator'),
+      'aria-roledescription': stringFormatter.format('dropIndicator'),
       'aria-label': label,
       'aria-labelledby': labelledBy,
-      'aria-hidden': !dragSession ? 'true' : dropProps['aria-hidden'],
+      'aria-hidden': ariaHidden,
       tabIndex: -1
-    }
+    },
+    isDropTarget,
+    // If aria-hidden, we are either not in a drag session or the drop target is invalid.
+    // In that case, there's no need to render anything at all unless we need to show the indicator visually.
+    // This can happen when dragging using the native DnD API as opposed to keyboard dragging.
+    isHidden: !isDropTarget && !!ariaHidden
   };
 }