From 41f68ae61a3ba9f3d6f0d7c0e42cdfb48418d385 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Mon, 16 Oct 2023 11:03:41 -0700
Subject: [PATCH] [C-3216] Add react-slot, implement asChild for drag/drop

---
 package-lock.json                                  |  6 +++---
 packages/web/package.json                          |  1 +
 .../web/src/components/dragndrop/Draggable.tsx     |  9 +++++++--
 .../web/src/components/dragndrop/Droppable.tsx     | 14 ++++++--------
 .../web/src/components/nav/desktop/LeftNavLink.tsx |  4 ++--
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 03d37958285..9e6e6a53457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9787,7 +9787,6 @@
     },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
@@ -10100,8 +10099,8 @@
     },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
-      "dev": true,
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/react-compose-refs": "1.0.1"
@@ -127306,6 +127305,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",
diff --git a/packages/web/package.json b/packages/web/package.json
index 28953824f1e..99b3126258b 100644
--- a/packages/web/package.json
+++ b/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",
diff --git a/packages/web/src/components/dragndrop/Draggable.tsx b/packages/web/src/components/dragndrop/Draggable.tsx
index c68cb1c6136..765d799e983 100644
--- a/packages/web/src/components/dragndrop/Draggable.tsx
+++ b/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,8 +87,10 @@ export const Draggable = (props: DraggableProps) => {
     onDrop?.()
   }, [dispatch, onDrop])
 
+  const Comp = asChild ? Slot : 'div'
+
   return (
-    <div
+    <Comp
       draggable={!isDisabled}
       className={styles.draggable}
       onDragStart={handleDragStart}
@@ -93,6 +98,6 @@ export const Draggable = (props: DraggableProps) => {
       {...otherProps}
     >
       {children}
-    </div>
+    </Comp>
   )
 }
diff --git a/packages/web/src/components/dragndrop/Droppable.tsx b/packages/web/src/components/dragndrop/Droppable.tsx
index 22de671f65b..b8c0b0b8055 100644
--- a/packages/web/src/components/dragndrop/Droppable.tsx
+++ b/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>
 }
diff --git a/packages/web/src/components/nav/desktop/LeftNavLink.tsx b/packages/web/src/components/nav/desktop/LeftNavLink.tsx
index 774125c48f9..1074aa4311b 100644
--- a/packages/web/src/components/nav/desktop/LeftNavLink.tsx
+++ b/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)