Add end method from caller scope

README.md

@@ -95,6 +95,22 @@ const accepted = await Confirm.call({ message: 'Continue?' })
 
 Check out [the demo site](https://react-call.desko.dev/) to see some live examples of other React components being called.
 
+# Extra controls
+
+The returned promise can also be used to end the call from the caller scope:
+
+```tsx
+const promise = Confirm.call({ message: 'Continue?' })
+
+// For example, you could dismiss it on some event subscription
+onImportantEvent(() => {
+  Confirm.end(promise, false)
+})
+
+// While still awaiting the response where needed
+const accepted = await promise
+```
+
 # Exit animations
 
 To animate the exit of your component when `call.end()` is run, just pass the duration of your animation in milliseconds to createCallable as a second argument:

bundlesize.config.json

@@ -2,7 +2,7 @@
   "files": [
     {
       "path": "./dist/*.js",
-      "maxSize": "555 B"
+      "maxSize": "650 B"
     }
   ]
 }

lib/createCallable/index.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import type {
   UserComponent as UserComponentType,
+  PrivateResolve,
   PrivateStackState,
   PrivateStackStateSetter,
   Callable,
@@ -13,36 +14,43 @@ export function createCallable<Props = void, Response = void, RootProps = {}>(
   let $setStack: PrivateStackStateSetter<Props, Response> | null = null
   let $nextKey = 0
 
+  const createEnd = (promise: Promise<Response>) => (response: Response) => {
+    if (!$setStack) return
+    const scopedSetStack = $setStack
+
+    scopedSetStack((prev) => {
+      const target = prev.find((c) => c.promise === promise)
+      if (!target) return prev
+
+      target.resolve(response)
+      return prev.map((c) =>
+        c.promise !== promise ? c : { ...c, ended: true },
+      )
+    })
+
+    globalThis.setTimeout(
+      () => scopedSetStack((prev) => prev.filter((c) => c.promise !== promise)),
+      unmountingDelay,
+    )
+  }
+
   return {
     call: (props) => {
       if (!$setStack) throw new Error('No <Root> found!')
 
       const key = String($nextKey++)
-      let resolve: (value: Response | PromiseLike<Response>) => void
+      let resolve: PrivateResolve<Response>
       const promise = new Promise<Response>((res) => {
         resolve = res
       })
 
-      const end = (response: Response) => {
-        resolve(response)
-        if (!$setStack) return
-        const scopedSetStack = $setStack
-
-        if (unmountingDelay > 0) {
-          scopedSetStack((prev) =>
-            prev.map((c) => (c.key !== key ? c : { ...c, ended: true })),
-          )
-        }
-
-        globalThis.setTimeout(
-          () => scopedSetStack((prev) => prev.filter((c) => c.key !== key)),
-          unmountingDelay,
-        )
-      }
-
-      $setStack((prev) => [...prev, { key, props, end, ended: false }])
+      $setStack((prev) => [
+        ...prev,
+        { key, props, promise, resolve, end: createEnd(promise), ended: false },
+      ])
       return promise
     },
+    end: (promise, response) => createEnd(promise)(response),
     Root: (rootProps: RootProps) => {
       const [stack, setStack] = useState<PrivateStackState<Props, Response>>([])
 

lib/createCallable/types.ts

@@ -1,6 +1,12 @@
+export type PrivateResolve<Response> = (
+  value: Response | PromiseLike<Response>,
+) => void
+
 export interface PrivateCallContext<Props, Response> {
   key: string
   props: Props
+  promise: Promise<Response>
+  resolve: PrivateResolve<Response>
   end: (response: Response) => void
   ended: boolean
 }
@@ -45,4 +51,5 @@ export type UserComponent<Props, Response, RootProps> = React.FunctionComponent<
 export type Callable<Props, Response, RootProps> = {
   Root: React.FunctionComponent<RootProps>
   call: CallFunction<Props, Response>
+  end: (promise: Promise<Response>, response: Response) => void
 }