[C-3216] Add react-slot, implement asChild for drag/drop

packages/web/package.json

@@ -67,6 +67,7 @@
     "@optimizely/optimizely-sdk": "4.9.2",
     "@project-serum/anchor": "0.24.2",
     "@project-serum/sol-wallet-adapter": "0.2.5",
+    "@radix-ui/react-slot": "^1.0.2",
     "@react-spring/web": "9.7.2",
     "@reduxjs/toolkit": "1.6.1",
     "@sentry/browser": "7.65.0",

packages/web/src/components/dragndrop/Draggable.tsx

@@ -1,6 +1,7 @@
 import { DragEvent, ReactNode, useCallback } from 'react'
 
 import { ID } from '@audius/common'
+import { Slot } from '@radix-ui/react-slot'
 import { useDispatch } from 'react-redux'
 
 import { DragDropKind, drag, drop } from 'store/dragndrop/slice'
@@ -24,6 +25,7 @@ export type DraggableProps = {
   children: ReactNode
   onDrag?: () => void
   onDrop?: () => void
+  asChild?: boolean
 }
 
 export const Draggable = (props: DraggableProps) => {
@@ -38,6 +40,7 @@ export const Draggable = (props: DraggableProps) => {
     onDrag,
     onDrop,
     children,
+    asChild,
     ...otherProps // passed to child
   } = props
   const dispatch = useDispatch()
@@ -84,15 +87,17 @@ export const Draggable = (props: DraggableProps) => {
     onDrop?.()
   }, [dispatch, onDrop])
 
+  const Comp = asChild ? Slot : 'div'
+
   return (
-    <div
+    <Comp
       draggable={!isDisabled}
       className={styles.draggable}
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
       {...otherProps}
     >
       {children}
-    </div>
+    </Comp>
   )
 }

packages/web/src/components/dragndrop/Droppable.tsx

@@ -1,13 +1,13 @@
 import {
   useState,
   useCallback,
-  cloneElement,
   ReactElement,
   DragEvent,
   ReactNode
 } from 'react'
 
 import { ID, useDebouncedCallback } from '@audius/common'
+import { Slot } from '@radix-ui/react-slot'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
@@ -29,10 +29,10 @@ export type DroppableProps = {
   acceptOwner?: boolean
 } & (
   | {
-      forward: true
+      asChild: true
       children: ReactElement
     }
-  | { forward?: false; children: ReactNode }
+  | { asChild?: false; children: ReactNode }
 )
 
 export const Droppable = (props: DroppableProps) => {
@@ -46,7 +46,7 @@ export const Droppable = (props: DroppableProps) => {
     disabled,
     acceptOwner = true,
     children,
-    forward
+    asChild
   } = props
   const { id, kind, index, isOwner } = useSelector(selectDragnDropState)
   const [hovered, setHovered] = useState(false)
@@ -113,9 +113,7 @@ export const Droppable = (props: DroppableProps) => {
     ...(canDrop ? droppableHandlerProps : {})
   }
 
-  if (forward) {
-    return cloneElement(children, droppableProps)
-  }
+  const Comp = asChild ? Slot : 'div'
 
-  return <div {...droppableProps}>{children}</div>
+  return <Comp {...droppableProps}>{children}</Comp>
 }

packages/web/src/components/nav/desktop/LeftNavLink.tsx

@@ -30,8 +30,8 @@ export const LeftNavLink = (props: LeftNavLinkProps) => {
 
 type LeftNavDroppableProps = SetOptional<
   DroppableProps,
-  'hoverClassName' | 'activeClassName' | 'inactiveClassName' | 'forward'
-> & { forward?: false }
+  'hoverClassName' | 'activeClassName' | 'inactiveClassName'
+>
 
 export const LeftNavDroppable = (props: LeftNavDroppableProps) => {
   const { kind } = useSelector(selectDragnDropState)