@tamagui/dismissable 2.7.6 → 3.0.0-beta.637.1

package/src/Dismissable.tsx

@@ -2,7 +2,14 @@
 // https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324
 
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { Slot, TamaguiElement, View, composeEventHandlers } from '@tamagui/core'
+import {
+  Slot,
+  TamaguiElement,
+  View,
+  composeEventHandlers,
+  createChangeEventDetails,
+  createRefComponent,
+} from '@tamagui/core'
 import { useEscapeKeydown } from '@tamagui/use-escape-keydown'
 import { useEvent } from '@tamagui/use-event'
 import * as React from 'react'
@@ -23,8 +30,6 @@ export function dispatchDiscreteCustomEvent<E extends CustomEvent>(
 
 const DISMISSABLE_LAYER_NAME = 'Dismissable'
 const CONTEXT_UPDATE = 'dismissable.update'
-const POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'
-const FOCUS_OUTSIDE = 'dismissable.focusOutside'
 
 let originalBodyPointerEvents: string
 
@@ -148,7 +153,7 @@ export function useDismissableLayersAbove(ref: React.RefObject<HTMLElement | nul
   return count
 }
 
-const Dismissable = React.forwardRef<
+const Dismissable = createRefComponent<
   HTMLElement,
   DismissableProps & { asChild?: boolean }
 >((props, forwardedRef) => {
@@ -193,9 +198,12 @@ const Dismissable = React.forwardRef<
     const branches = branchesProp || context.branches
     const isPointerDownOnBranch = [...branches].some((branch) => branch.contains(target))
     if (!isPointerEventsEnabled || isPointerDownOnBranch) return
-    onPointerDownOutside?.(event)
-    onInteractOutside?.(event)
-    if (!event.defaultPrevented) onDismiss?.()
+    const details = createChangeEventDetails('outside-press', event, event.target, {
+      interaction: 'pointer' as const,
+    })
+    onPointerDownOutside?.(details)
+    onInteractOutside?.(details)
+    if (!details.isCanceled) onDismiss?.(details)
   })
 
   const focusOutside = useFocusOutside((event) => {
@@ -204,9 +212,16 @@ const Dismissable = React.forwardRef<
     const branches = branchesProp || context.branches
     const isFocusInBranch = [...branches].some((branch) => branch.contains(target))
     if (isFocusInBranch) return
-    onFocusOutside?.(event)
-    onInteractOutside?.(event)
-    if (!event.defaultPrevented) onDismiss?.()
+    // browser focus fixup can move focus to an ancestor of this layer (e.g. the
+    // native <dialog> element when its inner active element blurs). an ancestor
+    // gaining focus is not the user focusing elsewhere — never dismiss for it
+    if (node && target.contains(node)) return
+    const details = createChangeEventDetails('focus-out', event, event.target, {
+      interaction: 'focus' as const,
+    })
+    onFocusOutside?.(details)
+    onInteractOutside?.(details)
+    if (!details.isCanceled) onDismiss?.(details)
   })
 
   // track forceUnmount in a ref so escape handler can check it
@@ -216,6 +231,10 @@ const Dismissable = React.forwardRef<
   }, [forceUnmount])
 
   useEscapeKeydown((event) => {
+    // a higher layer may have consumed this same document event and removed
+    // itself before this listener runs. don't let the newly-highest layer also
+    // dismiss from a single escape press.
+    if (event.defaultPrevented) return
     // skip if this layer is force-unmounted (e.g. dialog closed but still mounted)
     if (forceUnmountRef.current) return
     // Check layers at callback time, not render time, to avoid stale closures
@@ -223,68 +242,71 @@ const Dismissable = React.forwardRef<
     const currentIndex = node ? currentLayers.indexOf(node) : -1
     const isHighestLayer = currentIndex === currentLayers.length - 1
     if (!isHighestLayer) return
-    onEscapeKeyDown?.(event)
-    if (!event.defaultPrevented && onDismiss) {
+    const details = createChangeEventDetails('escape-key', event, event.target)
+    onEscapeKeyDown?.(details)
+    if (!details.isCanceled && onDismiss) {
+      // consuming the escape prevents native defaults (exiting fullscreen etc),
+      // matching the pre-details behavior. a canceled dismiss leaves the native
+      // event alone; handlers that self-close call preventDefault themselves
       event.preventDefault()
-      onDismiss()
+      onDismiss(details)
     }
   })
 
+  /**
+   * Creation-order layer tracking. This effect only runs on mount/unmount (and
+   * when the node itself changes), NOT when `disableOutsidePointerEvents`
+   * toggles, so a prop change can't remove a layer from the stack and re-add it
+   * at the end - the layering order stays _creation order_.
+   */
   React.useEffect(() => {
     if (!node) return
     // don't add to layers when force-unmounted (dialog closed but still mounted)
     if (forceUnmount) return
-    if (disableOutsidePointerEvents) {
-      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-        originalBodyPointerEvents = document.body.style.pointerEvents
-        document.body.style.pointerEvents = 'none'
-      }
-      context.layersWithOutsidePointerEventsDisabled.add(node)
-      layersWithPointerEventsDisabledCount++
-    }
     context.layers.add(node)
     globalLayers.add(node)
-    // only dispatch position update when pointer-events tracking is active
-    if (disableOutsidePointerEvents || layersWithPointerEventsDisabledCount > 0) {
-      dispatchUpdate()
-    }
+    dispatchUpdate()
     notifyLayerChange()
     return () => {
-      if (disableOutsidePointerEvents) {
-        if (context.layersWithOutsidePointerEventsDisabled.size === 1) {
-          document.body.style.pointerEvents = originalBodyPointerEvents
-        }
-        // decrement AFTER dispatch so other layers still re-render
-      }
+      context.layers.delete(node)
+      globalLayers.delete(node)
+      dispatchUpdate()
+      notifyLayerChange()
     }
-  }, [node, disableOutsidePointerEvents, forceUnmount, context])
+  }, [node, forceUnmount, context])
 
   /**
-   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
-   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack
-   * and add it to the end again so the layering order wouldn't be _creation order_.
-   * We only want them to be removed from context stacks when unmounted.
+   * Pointer-events tracking. This owns SYMMETRIC add/remove of the node from
+   * `layersWithOutsidePointerEventsDisabled`, the module count, and the body
+   * pointer-events style. It reruns on every `disableOutsidePointerEvents`
+   * transition, and the cleanup fully reverses the setup, so a true->false->true
+   * toggle never leaves a stale Set entry or a divergent count.
    */
   React.useEffect(() => {
+    if (!node) return
     if (forceUnmount) return
+    if (!disableOutsidePointerEvents) return
+    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+      originalBodyPointerEvents = document.body.style.pointerEvents
+      document.body.style.pointerEvents = 'none'
+    }
+    context.layersWithOutsidePointerEventsDisabled.add(node)
+    layersWithPointerEventsDisabledCount++
+    dispatchUpdate()
+    notifyLayerChange()
     return () => {
-      if (!node) return
-      const hadPointerEventsDisabled =
-        context.layersWithOutsidePointerEventsDisabled.has(node)
-      context.layers.delete(node)
       context.layersWithOutsidePointerEventsDisabled.delete(node)
-      globalLayers.delete(node)
-      // only dispatch position update when pointer-events tracking is active
-      if (layersWithPointerEventsDisabledCount > 0) {
-        dispatchUpdate()
+      // restore the body once this was the last pointer-events-disabling layer
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        document.body.style.pointerEvents = originalBodyPointerEvents
       }
+      // dispatch while the count is still > 0 so other layers re-render, then
+      // decrement so they observe the settled count on their next render
+      dispatchUpdate()
       notifyLayerChange()
-      // decrement count AFTER dispatch so other layers see count > 0 and re-render
-      if (hadPointerEventsDisabled) {
-        layersWithPointerEventsDisabledCount--
-      }
+      layersWithPointerEventsDisabledCount--
     }
-  }, [node, context, forceUnmount])
+  }, [node, disableOutsidePointerEvents, forceUnmount, context])
 
   React.useEffect(() => {
     const handleUpdate = () => {
@@ -339,7 +361,7 @@ Dismissable.displayName = DISMISSABLE_LAYER_NAME
 
 const BRANCH_NAME = 'DismissableBranch'
 
-const DismissableBranch = React.forwardRef<TamaguiElement, DismissableBranchProps>(
+const DismissableBranch = createRefComponent<TamaguiElement, DismissableBranchProps>(
   (props, forwardedRef) => {
     const { branches: branchesProp, ...rest } = props
     const context = React.useContext(DismissableContext)
@@ -367,33 +389,23 @@ DismissableBranch.displayName = BRANCH_NAME
 
 /* -----------------------------------------------------------------------------------------------*/
 
-export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>
-export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
-
 /**
  * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
  * to mimic layer dismissing behaviour present in OS.
  * Returns props to pass to the node we want to check for outside events.
  */
-function usePointerDownOutside(
-  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void
-) {
-  const handlePointerDownOutside = useEvent(onPointerDownOutside) as EventListener
+function usePointerDownOutside(onPointerDownOutside?: (event: PointerEvent) => void) {
+  const handlePointerDownOutside = useEvent(onPointerDownOutside)
   const isPointerInsideReactTreeRef = React.useRef(false)
   const handleClickRef = React.useRef(() => {})
 
   React.useEffect(() => {
     const handlePointerDown = (event: PointerEvent) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
-        const eventDetail = { originalEvent: event }
-
-        function handleAndDispatchPointerDownOutsideEvent() {
-          handleAndDispatchCustomEvent(
-            POINTER_DOWN_OUTSIDE,
-            handlePointerDownOutside,
-            eventDetail,
-            { discrete: true }
-          )
+        function handlePointerDownOutsideEvent() {
+          if (handlePointerDownOutside) {
+            ReactDOM.flushSync(() => handlePointerDownOutside(event))
+          }
         }
 
         /**
@@ -410,10 +422,10 @@ function usePointerDownOutside(
          */
         if (event.pointerType === 'touch') {
           document.removeEventListener('click', handleClickRef.current)
-          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent
+          handleClickRef.current = handlePointerDownOutsideEvent
           document.addEventListener('click', handleClickRef.current, { once: true })
         } else {
-          handleAndDispatchPointerDownOutsideEvent()
+          handlePointerDownOutsideEvent()
         }
       }
       isPointerInsideReactTreeRef.current = false
@@ -453,17 +465,14 @@ function usePointerDownOutside(
  * Listens for when focus happens outside a react subtree.
  * Returns props to pass to the root (node) of the subtree we want to check.
  */
-function useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {
-  const handleFocusOutside = useEvent(onFocusOutside) as EventListener
+function useFocusOutside(onFocusOutside?: (event: FocusEvent) => void) {
+  const handleFocusOutside = useEvent(onFocusOutside)
   const isFocusInsideReactTreeRef = React.useRef(false)
 
   React.useEffect(() => {
     const handleFocus = (event: FocusEvent) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
-        const eventDetail = { originalEvent: event }
-        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
-          discrete: false,
-        })
+        handleFocusOutside?.(event)
       }
     }
     document.addEventListener('focusin', handleFocus)
@@ -485,23 +494,12 @@ function dispatchUpdate() {
   document.dispatchEvent(event)
 }
 
-function handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(
-  name: string,
-  handler: ((event: E) => void) | undefined,
-  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),
-  { discrete }: { discrete: boolean }
-) {
-  const target = detail.originalEvent.target
-  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })
-  if (handler) target.addEventListener(name, handler as EventListener, { once: true })
-
-  if (discrete) {
-    dispatchDiscreteCustomEvent(target, event)
-  } else {
-    target.dispatchEvent(event)
-  }
-}
-
 export { Dismissable, DismissableBranch }
 
-export type { DismissableProps }
+export type {
+  DismissableDismissDetails,
+  DismissableProps,
+  FocusOutsideDetails,
+  InteractOutsideDetails,
+  PointerDownOutsideDetails,
+} from './DismissableProps'

package/src/DismissableProps.tsx

@@ -1,6 +1,25 @@
 import type React from 'react'
 
-import type { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable'
+import type { TamaguiChangeEventDetails, TamaguiEventDetails } from '@tamagui/core'
+
+export type PointerDownOutsideDetails = TamaguiChangeEventDetails<
+  'outside-press',
+  PointerEvent,
+  { interaction: 'pointer' }
+>
+
+export type FocusOutsideDetails = TamaguiChangeEventDetails<
+  'focus-out',
+  FocusEvent,
+  { interaction: 'focus' }
+>
+
+export type InteractOutsideDetails = PointerDownOutsideDetails | FocusOutsideDetails
+
+export type DismissableDismissDetails =
+  | TamaguiEventDetails<'escape-key', React.KeyboardEvent>
+  | TamaguiEventDetails<'outside-press', PointerEvent, { interaction: 'pointer' }>
+  | TamaguiEventDetails<'focus-out', FocusEvent, { interaction: 'focus' }>
 
 export interface DismissableProps {
   /**
@@ -16,30 +35,32 @@ export interface DismissableProps {
   branches?: Set<HTMLElement>
   /**
    * Event handler called when the escape key is down.
-   * Can be prevented.
+   * Can be canceled.
    */
-  onEscapeKeyDown?: React.KeyboardEventHandler
+  onEscapeKeyDown?: (
+    details: TamaguiChangeEventDetails<'escape-key', React.KeyboardEvent>
+  ) => void
   /**
    * Event handler called when the a `pointerdown` event happens outside of the `Dismissable`.
-   * Can be prevented.
+   * Can be canceled.
    */
-  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void
+  onPointerDownOutside?: (details: PointerDownOutsideDetails) => void
   /**
    * Event handler called when the focus moves outside of the `Dismissable`.
-   * Can be prevented.
+   * Can be canceled.
    */
-  onFocusOutside?: (event: FocusOutsideEvent) => void
+  onFocusOutside?: (details: FocusOutsideDetails) => void
   /**
    * Event handler called when an interaction happens outside the `Dismissable`.
    * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
-   * Can be prevented.
+   * Can be canceled.
    */
-  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void
+  onInteractOutside?: (details: InteractOutsideDetails) => void
 
   /**
    * Handler called when the `Dismissable` should be dismissed
    */
-  onDismiss?: () => void
+  onDismiss?: (details: DismissableDismissDetails) => void
 
   /**
    * When using animations on exit, may want to simualte force unmount early

package/types/Dismissable.d.ts

@@ -27,16 +27,10 @@ export declare function useIsInsideDismissable(ref: React.RefObject<HTMLElement
  * returns the count of layers that are ancestors of the element
  */
 export declare function useDismissableLayersAbove(ref: React.RefObject<HTMLElement | null>): number;
-declare const Dismissable: React.ForwardRefExoticComponent<DismissableProps & {
+declare const Dismissable: import("@tamagui/compose-refs").RefComponent<HTMLElement, DismissableProps & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLElement>>;
-declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<TamaguiElement>>;
-export type PointerDownOutsideEvent = CustomEvent<{
-    originalEvent: PointerEvent;
-}>;
-export type FocusOutsideEvent = CustomEvent<{
-    originalEvent: FocusEvent;
 }>;
+declare const DismissableBranch: import("@tamagui/compose-refs").RefComponent<TamaguiElement, DismissableBranchProps>;
 export { Dismissable, DismissableBranch };
-export type { DismissableProps };
+export type { DismissableDismissDetails, DismissableProps, FocusOutsideDetails, InteractOutsideDetails, PointerDownOutsideDetails, } from './DismissableProps';
 //# sourceMappingURL=Dismissable.d.ts.map

package/types/Dismissable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dismissable.d.ts","sourceRoot":"","sources":["../src/Dismissable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,cAAc,EAA8B,MAAM,eAAe,CAAA;AAGhF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAElF,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,WAAW,EAC/D,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,EACnB,KAAK,EAAE,CAAC,QAGT;AA0BD;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,WAAW,EAAE,CAItD;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAajD;AAQD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,WA0B9E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,UA0BjF;AAED,QAAA,MAAM,WAAW;cAEgB,OAAO;qCAmLtC,CAAA;AAUF,QAAA,MAAM,iBAAiB,+FAsBtB,CAAA;AAMD,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAA;AAClF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAA;AAsI1E,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAA;AAEzC,YAAY,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Dismissable.d.ts","sourceRoot":"","sources":["../src/Dismissable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,cAAc,EAKf,MAAM,eAAe,CAAA;AAGtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAElF,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,WAAW,EAC/D,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAC,EACnB,KAAK,EAAE,CAAC,QAGT;AAwBD;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,WAAW,EAAE,CAItD;AAED;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAajD;AAQD;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,WA0B9E;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,UA0BjF;AAED,QAAA,MAAM,WAAW;cAEgB,OAAO;EAoMtC,CAAA;AAUF,QAAA,MAAM,iBAAiB,sFAsBtB,CAAA;AA+GD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAA;AAEzC,YAAY,EACV,yBAAyB,EACzB,gBAAgB,EAChB,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAA"}

package/types/Dismissable.native.d.ts

@@ -5,6 +5,6 @@ export declare function getDismissableLayerCount(): number;
 export declare function useHasDismissableLayers(): boolean;
 export declare function useIsInsideDismissable(_ref: React.RefObject<HTMLElement | null>): boolean;
 export declare function useDismissableLayersAbove(_ref: React.RefObject<HTMLElement | null>): number;
-export declare const Dismissable: React.ForwardRefExoticComponent<DismissableProps & React.RefAttributes<unknown>>;
-export declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<unknown>>;
+export declare const Dismissable: import("@tamagui/core").RefComponent<unknown, DismissableProps>;
+export declare const DismissableBranch: import("@tamagui/core").RefComponent<unknown, DismissableBranchProps>;
 //# sourceMappingURL=Dismissable.native.d.ts.map

package/types/Dismissable.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dismissable.native.d.ts","sourceRoot":"","sources":["../src/Dismissable.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGlF,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,WAAW,EAC/D,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,EACpB,MAAM,EAAE,CAAC,QACP;AAEJ,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GACxC,OAAO,CAET;AAED,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GACxC,MAAM,CAER;AAED,eAAO,MAAM,WAAW,kFAEtB,CAAA;AAEF,eAAO,MAAM,iBAAiB,wFAI7B,CAAA"}
+{"version":3,"file":"Dismissable.native.d.ts","sourceRoot":"","sources":["../src/Dismissable.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGlF,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,WAAW,EAC/D,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,EACpB,MAAM,EAAE,CAAC,QACP;AAEJ,wBAAgB,wBAAwB,IAAI,MAAM,CAEjD;AAED,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GACxC,OAAO,CAET;AAED,wBAAgB,yBAAyB,CACvC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GACxC,MAAM,CAER;AAED,eAAO,MAAM,WAAW,iEAEtB,CAAA;AAEF,eAAO,MAAM,iBAAiB,uEAI7B,CAAA"}

package/types/DismissableProps.d.ts

@@ -1,5 +1,17 @@
 import type React from 'react';
-import type { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable';
+import type { TamaguiChangeEventDetails, TamaguiEventDetails } from '@tamagui/core';
+export type PointerDownOutsideDetails = TamaguiChangeEventDetails<'outside-press', PointerEvent, {
+    interaction: 'pointer';
+}>;
+export type FocusOutsideDetails = TamaguiChangeEventDetails<'focus-out', FocusEvent, {
+    interaction: 'focus';
+}>;
+export type InteractOutsideDetails = PointerDownOutsideDetails | FocusOutsideDetails;
+export type DismissableDismissDetails = TamaguiEventDetails<'escape-key', React.KeyboardEvent> | TamaguiEventDetails<'outside-press', PointerEvent, {
+    interaction: 'pointer';
+}> | TamaguiEventDetails<'focus-out', FocusEvent, {
+    interaction: 'focus';
+}>;
 export interface DismissableProps {
     /**
      * When `true`, hover/focus/click interactions will be disabled on elements outside
@@ -14,29 +26,29 @@ export interface DismissableProps {
     branches?: Set<HTMLElement>;
     /**
      * Event handler called when the escape key is down.
-     * Can be prevented.
+     * Can be canceled.
      */
-    onEscapeKeyDown?: React.KeyboardEventHandler;
+    onEscapeKeyDown?: (details: TamaguiChangeEventDetails<'escape-key', React.KeyboardEvent>) => void;
     /**
      * Event handler called when the a `pointerdown` event happens outside of the `Dismissable`.
-     * Can be prevented.
+     * Can be canceled.
      */
-    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onPointerDownOutside?: (details: PointerDownOutsideDetails) => void;
     /**
      * Event handler called when the focus moves outside of the `Dismissable`.
-     * Can be prevented.
+     * Can be canceled.
      */
-    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onFocusOutside?: (details: FocusOutsideDetails) => void;
     /**
      * Event handler called when an interaction happens outside the `Dismissable`.
      * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
-     * Can be prevented.
+     * Can be canceled.
      */
-    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
+    onInteractOutside?: (details: InteractOutsideDetails) => void;
     /**
      * Handler called when the `Dismissable` should be dismissed
      */
-    onDismiss?: () => void;
+    onDismiss?: (details: DismissableDismissDetails) => void;
     /**
      * When using animations on exit, may want to simualte force unmount early
      */

package/types/DismissableProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DismissableProps.d.ts","sourceRoot":"","sources":["../src/DismissableProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAE/E,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAA;IAC5C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC/D;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACnD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAA;IAEhF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,oBAAoB,CAAC,EAAE,GAAG,CAAA;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,cAAc,CAAC,EAAE,GAAG,CAAA;IAEpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CAC5B"}
+{"version":3,"file":"DismissableProps.d.ts","sourceRoot":"","sources":["../src/DismissableProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAEnF,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAC/D,eAAe,EACf,YAAY,EACZ;IAAE,WAAW,EAAE,SAAS,CAAA;CAAE,CAC3B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CACzD,WAAW,EACX,UAAU,EACV;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CACzB,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG,yBAAyB,GAAG,mBAAmB,CAAA;AAEpF,MAAM,MAAM,yBAAyB,GACjC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,GACtD,mBAAmB,CAAC,eAAe,EAAE,YAAY,EAAE;IAAE,WAAW,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9E,mBAAmB,CAAC,WAAW,EAAE,UAAU,EAAE;IAAE,WAAW,EAAE,OAAO,CAAA;CAAE,CAAC,CAAA;AAE1E,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAChB,OAAO,EAAE,yBAAyB,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,KAClE,IAAI,CAAA;IACT;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAA;IACnE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACvD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAA;IAE7D;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAA;IAExD;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,oBAAoB,CAAC,EAAE,GAAG,CAAA;IAC1B,aAAa,CAAC,EAAE,GAAG,CAAA;IACnB,cAAc,CAAC,EAAE,GAAG,CAAA;IAEpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CAC5B"}

package/dist/esm/DismissableProps.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/esm/DismissableProps.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/DismissableProps.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":[],"sourcesContent":[],"mappings":"","ignoreList":[]}

package/dist/jsx/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}