Function CollectionItem

packages/react-aria/stories/dnd/DroppableGrid.tsx:271–327

({item, state, dropState, onPaste})

});

function CollectionItem({item, state, dropState, onPaste}) {
  let rowRef = React.useRef<HTMLDivElement | null>(null);
  let cellRef = React.useRef<HTMLDivElement | null>(null);
  let cellNode = [...item.childNodes][0];

  let {rowProps} = useGridRow({node: item}, state, rowRef);
  let {gridCellProps} = useGridCell(
    {
      node: cellNode,
      focusMode: 'cell'
    },
    state,
    cellRef
  );

  let dropIndicatorRef = React.useRef<HTMLDivElement | null>(null);
  let {dropIndicatorProps} = useDropIndicator(
    {
      target: {type: 'item', key: item.key, dropPosition: 'on'}
    },
    dropState,
    dropIndicatorRef
  );
  let {visuallyHiddenProps} = useVisuallyHidden();

  let {clipboardProps} = useClipboard({
    onPaste
  });

  return (
    <div {...rowProps} ref={rowRef} style={{outline: 'none'}}>
      <FocusRing focusRingClass={classNames(dndStyles, 'focus-ring')}>
        <div
          {...mergeProps(gridCellProps, clipboardProps)}
          ref={cellRef}
          className={classNames(dndStyles, 'droppable', {
            'is-drop-target': dropState.isDropTarget({
              type: 'item',
              key: item.key,
              dropPosition: 'on'
            }),
            'is-selected': state.selectionManager.isSelected(item.key)
          })}>
          {item.rendered}
          {!dropIndicatorProps['aria-hidden'] && (
            <div
              {...visuallyHiddenProps}
              role="button"
              {...dropIndicatorProps}
              ref={dropIndicatorRef}
            />
          )}
        </div>
      </FocusRing>
    </div>
  );
}