feat(Upload): remove open-upload-jumper custom event

components/core/Upload/Popup.js

@@ -169,11 +169,14 @@ export function Popup() {
     { hideUploadPopup, expandUploadSummary, collapseUploadSummary, cancelAutoCollapseOnMouseEnter },
   ] = useUploadPopup({ totalFilesSummary });
 
-  if (!popupState.isVisible) return null;
-
   return (
-    <div
+    <AnimatePresence>
+      {popupState.isVisible ? (
+        <motion.div
           css={STYLES_POPUP_WRAPPER}
+          initial={{ opacity: 0, y: 0 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
           onMouseEnter={handleOnMouseEnter}
           onMouseLeave={handleOnMouseLeave}
         >
@@ -199,11 +202,16 @@ export function Popup() {
             />
           </div>
           <Show when={isHovered && isFinished}>
-        <button css={STYLES_DISMISS_BUTTON} onClick={() => (hideUploadPopup(), resetUploadState())}>
+            <button
+              css={STYLES_DISMISS_BUTTON}
+              onClick={() => (hideUploadPopup(), resetUploadState())}
+            >
               <SVG.Dismiss width={16} />
             </button>
           </Show>
-    </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
   );
 }
 

components/core/Upload/Provider.js

@@ -23,8 +23,6 @@ export const Provider = ({ children, page, data, viewer }) => {
     viewer,
   });
 
-  useEventListener({ type: "open-upload-jumper", handler: showUploadModal });
-
   const providerValue = React.useMemo(
     () => [
       { ...uploadState, isUploadJumperVisible },

components/core/Upload/index.js

@@ -6,6 +6,7 @@ import { ModalPortal } from "../ModalPortal";
 import { Provider } from "~/components/core/Upload/Provider";
 import { Popup } from "~/components/core/Upload/Popup";
 import { UploadJumper as Jumper } from "~/components/core/Upload/Jumper";
+import { useUploadContext } from "~/components/core/Upload/Provider";
 
 import DropIndicator from "~/components/core/Upload/DropIndicator";
 
@@ -13,11 +14,12 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
  * Root
  * -----------------------------------------------------------------------------------------------*/
 const Root = ({ children, data }) => {
+  const [{ isUploadJumperVisible }] = useUploadContext();
   return (
     <>
       {children}
+      {isUploadJumperVisible && <Jumper data={data} />}
       <ModalPortal>
-        <Jumper data={data} />
         <Popup />
         <DropIndicator data={data} />
       </ModalPortal>
@@ -30,12 +32,13 @@ const Root = ({ children, data }) => {
  * -----------------------------------------------------------------------------------------------*/
 
 const Trigger = ({ viewer, css, children, ...props }) => {
+  const [, { showUploadJumper }] = useUploadContext();
   const showUploadModal = () => {
     if (!viewer) {
       Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
       return;
     }
-    Events.dispatchCustomEvent({ name: "open-upload-jumper" });
+    showUploadJumper();
   };
 
   return (