@tamagui/dismissable 2.0.0-rc.8 → 2.0.0

package/dist/jsx/Dismissable.native.js

@@ -4,46 +4,64 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Dismissable_native_exports = {};
 __export(Dismissable_native_exports, {
   Dismissable: () => Dismissable,
   DismissableBranch: () => DismissableBranch,
-  dispatchDiscreteCustomEvent: () => dispatchDiscreteCustomEvent
+  dispatchDiscreteCustomEvent: () => dispatchDiscreteCustomEvent,
+  getDismissableLayerCount: () => getDismissableLayerCount,
+  useDismissableLayersAbove: () => useDismissableLayersAbove,
+  useHasDismissableLayers: () => useHasDismissableLayers,
+  useIsInsideDismissable: () => useIsInsideDismissable
 });
 module.exports = __toCommonJS(Dismissable_native_exports);
 var import_react = __toESM(require("react"), 1);
 function dispatchDiscreteCustomEvent(_target, _event) {}
+function getDismissableLayerCount() {
+  return 0;
+}
+function useHasDismissableLayers() {
+  return false;
+}
+function useIsInsideDismissable(_ref) {
+  return false;
+}
+function useDismissableLayersAbove(_ref) {
+  return 0;
+}
 var Dismissable = /* @__PURE__ */import_react.default.forwardRef(function (props, _ref) {
-    return props.children;
-  }),
-  DismissableBranch = /* @__PURE__ */import_react.default.forwardRef(function (props, _ref) {
-    return props.children;
-  });
+  return props.children;
+});
+var DismissableBranch = /* @__PURE__ */import_react.default.forwardRef(function (props, _ref) {
+  return props.children;
+});
 //# sourceMappingURL=Dismissable.native.js.map

package/dist/jsx/Dismissable.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dismissable_native_exports","__export","Dismissable","DismissableBranch","dispatchDiscreteCustomEvent","module","exports","__toCommonJS","import_react","__toESM","require","_target","_event","default","forwardRef","props","_ref","children"],"sources":["../../src/Dismissable.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,iBAAA,EAAAA,CAAA,KAAAA,iBAAA;EAAAC,2BAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAP,0BAAA;AAAA,IAAAQ,YAAA,GAAkBC,OAAA,CAAAC,OAAA;AAEX,SAASN,4BAA4BO,OAAA,EAASC,MAAA,EAAQ,CAAC;AACvD,IAAIV,WAAA,GAA4B,eAAAM,YAAA,CAAAK,OAAA,CAAMC,UAAA,CAAW,UAASC,KAAA,EAAOC,IAAA,EAAM;IAC1E,OAAOD,KAAA,CAAME,QAAA;EACjB,CAAC;EACUd,iBAAA,GAAkC,eAAAK,YAAA,CAAAK,OAAA,CAAMC,UAAA,CAAW,UAASC,KAAA,EAAOC,IAAA,EAAM;IAChF,OAAOD,KAAA,CAAME,QAAA;EACjB,CAAC","ignoreList":[]}
+{"version":3,"names":["Dismissable_native_exports","__export","Dismissable","DismissableBranch","dispatchDiscreteCustomEvent","getDismissableLayerCount","useDismissableLayersAbove","useHasDismissableLayers","useIsInsideDismissable","module","exports","__toCommonJS","import_react","__toESM","require","_target","_event","_ref","default","forwardRef","props","children"],"sources":["../../src/Dismissable.native.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,WAAA,EAAAA,CAAA,KAAAA,WAAA;EAAAC,iBAAA,EAAAA,CAAA,KAAAA,iBAAA;EAAAC,2BAAA,EAAAA,CAAA,KAAAA,2BAAA;EAAAC,wBAAA,EAAAA,CAAA,KAAAA,wBAAA;EAAAC,yBAAA,EAAAA,CAAA,KAAAA,yBAAA;EAAAC,uBAAA,EAAAA,CAAA,KAAAA,uBAAA;EAAAC,sBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAC,YAAA,CAAAX,0BAAA;AAAA,IAAAY,YAAA,GAAkBC,OAAA,CAAAC,OAAA;AAEX,SAASV,4BAA4BW,OAAA,EAASC,MAAA,EAAQ,CAAC;AACvD,SAASX,yBAAA,EAA2B;EACvC,OAAO;AACX;AACO,SAASE,wBAAA,EAA0B;EACtC,OAAO;AACX;AACO,SAASC,uBAAuBS,IAAA,EAAM;EACzC,OAAO;AACX;AACO,SAASX,0BAA0BW,IAAA,EAAM;EAC5C,OAAO;AACX;AACO,IAAIf,WAAA,GAA4B,eAAAU,YAAA,CAAAM,OAAA,CAAMC,UAAA,CAAW,UAASC,KAAA,EAAOH,IAAA,EAAM;EAC1E,OAAOG,KAAA,CAAMC,QAAA;AACjB,CAAC;AACM,IAAIlB,iBAAA,GAAkC,eAAAS,YAAA,CAAAM,OAAA,CAAMC,UAAA,CAAW,UAASC,KAAA,EAAOH,IAAA,EAAM;EAChF,OAAOG,KAAA,CAAMC,QAAA;AACjB,CAAC","ignoreList":[]}

package/dist/jsx/DismissableProps.native.js

@@ -5,14 +5,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-    get: () => from[key],
-    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-  });
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
   return to;
 };
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var DismissableProps_exports = {};
 module.exports = __toCommonJS(DismissableProps_exports);

package/dist/jsx/index.js

@@ -1,2 +1,2 @@
-export * from "./Dismissable";
+export * from "./Dismissable.mjs";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

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

package/dist/jsx/index.native.js

@@ -5,15 +5,17 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  },
-  __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
+  value: true
 }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/dismissable",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -16,15 +16,12 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./types/index.d.ts",
-      "react-native": {
-        "module": "./dist/esm/index.native.js",
-        "import": "./dist/esm/index.native.js",
-        "require": "./dist/cjs/index.native.js"
-      },
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
       "module": "./dist/esm/index.mjs",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
-      "default": "./dist/cjs/index.native.js"
+      "default": "./dist/esm/index.mjs"
     }
   },
   "publishConfig": {
@@ -37,14 +34,14 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.0.0-rc.8",
-    "@tamagui/core": "2.0.0-rc.8",
-    "@tamagui/helpers": "2.0.0-rc.8",
-    "@tamagui/use-escape-keydown": "2.0.0-rc.8",
-    "@tamagui/use-event": "2.0.0-rc.8"
+    "@tamagui/compose-refs": "2.0.0",
+    "@tamagui/core": "2.0.0",
+    "@tamagui/helpers": "2.0.0",
+    "@tamagui/use-escape-keydown": "2.0.0",
+    "@tamagui/use-event": "2.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.8",
+    "@tamagui/build": "2.0.0",
     "react": ">=19",
     "react-dom": "*"
   },

package/src/Dismissable.native.tsx

@@ -2,12 +2,32 @@ import React from 'react'
 
 import type { DismissableBranchProps, DismissableProps } from './DismissableProps'
 
-// stub for native - not used but needed for export compatibility
+// stubs for native - dismissable is a web-only concept
 export function dispatchDiscreteCustomEvent<E extends CustomEvent>(
   _target: E['target'],
   _event: E
 ) {}
 
+export function getDismissableLayerCount(): number {
+  return 0
+}
+
+export function useHasDismissableLayers(): boolean {
+  return false
+}
+
+export function useIsInsideDismissable(
+  _ref: React.RefObject<HTMLElement | null>
+): boolean {
+  return false
+}
+
+export function useDismissableLayersAbove(
+  _ref: React.RefObject<HTMLElement | null>
+): number {
+  return 0
+}
+
 export const Dismissable = React.forwardRef((props: DismissableProps, _ref) => {
   return props.children as any
 })

package/src/Dismissable.tsx

@@ -2,7 +2,7 @@
 // https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324
 
 import { useComposedRefs } from '@tamagui/compose-refs'
-import { Slot, View, composeEventHandlers } from '@tamagui/core'
+import { Slot, TamaguiElement, View, composeEventHandlers } from '@tamagui/core'
 import { useEscapeKeydown } from '@tamagui/use-escape-keydown'
 import { useEvent } from '@tamagui/use-event'
 import * as React from 'react'
@@ -28,14 +28,128 @@ const FOCUS_OUTSIDE = 'dismissable.focusOutside'
 
 let originalBodyPointerEvents: string
 
+// global layer tracking
+const globalLayers = new Set<HTMLElement>()
+const layerChangeListeners = new Set<() => void>()
+
+// track if any layer has disableOutsidePointerEvents - only then do we need position updates
+let layersWithPointerEventsDisabledCount = 0
+
+function notifyLayerChange() {
+  for (const listener of layerChangeListeners) {
+    listener()
+  }
+}
+
+/**
+ * returns the number of active dismissable layers
+ * useful for non-React contexts (e.g. escape key handlers)
+ */
+export function getDismissableLayerCount(): number {
+  return globalLayers.size
+}
+
+/**
+ * debug helper - logs what elements are registered as dismissable layers
+ */
+export function debugDismissableLayers(): HTMLElement[] {
+  const layers = Array.from(globalLayers)
+  console.log('[Dismissable] Active layers:', layers.length, layers)
+  return layers
+}
+
+/**
+ * hook that returns true when any dismissable layer is active
+ * re-renders when the state changes
+ * uses module-level globals, not React context, so works anywhere in tree
+ */
+export function useHasDismissableLayers(): boolean {
+  const [count, setCount] = React.useState(() => globalLayers.size)
+
+  React.useEffect(() => {
+    setCount(globalLayers.size)
+    const update = () => setCount(globalLayers.size)
+    layerChangeListeners.add(update)
+    return () => {
+      layerChangeListeners.delete(update)
+    }
+  }, [])
+
+  return count > 0
+}
+
 const DismissableContext = React.createContext({
-  layers: new Set<HTMLDivElement>(),
-  layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),
-  branches: new Set<HTMLDivElement>(),
+  layers: new Set<HTMLElement>(),
+  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),
+  branches: new Set<HTMLElement>(),
 })
 
+/**
+ * hook to check if a DOM element is inside an active dismissable layer
+ * useful for custom escape handling - if inside a dismissable, you may want to defer
+ */
+export function useIsInsideDismissable(ref: React.RefObject<HTMLElement | null>) {
+  const context = React.useContext(DismissableContext)
+  const [isInside, setIsInside] = React.useState(false)
+
+  React.useEffect(() => {
+    const check = () => {
+      const el = ref.current
+      if (!el) {
+        setIsInside(false)
+        return
+      }
+      for (const layer of context.layers) {
+        if (layer.contains(el)) {
+          setIsInside(true)
+          return
+        }
+      }
+      setIsInside(false)
+    }
+
+    check()
+    document.addEventListener(CONTEXT_UPDATE, check)
+    return () => document.removeEventListener(CONTEXT_UPDATE, check)
+  }, [context.layers, ref])
+
+  return isInside
+}
+
+/**
+ * hook to check if there are dismissable layers above a given element
+ * returns the count of layers that are ancestors of the element
+ */
+export function useDismissableLayersAbove(ref: React.RefObject<HTMLElement | null>) {
+  const context = React.useContext(DismissableContext)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    const check = () => {
+      const el = ref.current
+      if (!el) {
+        setCount(0)
+        return
+      }
+      let above = 0
+      for (const layer of context.layers) {
+        if (layer.contains(el)) {
+          above++
+        }
+      }
+      setCount(above)
+    }
+
+    check()
+    document.addEventListener(CONTEXT_UPDATE, check)
+    return () => document.removeEventListener(CONTEXT_UPDATE, check)
+  }, [context.layers, ref])
+
+  return count
+}
+
 const Dismissable = React.forwardRef<
-  HTMLDivElement,
+  HTMLElement,
   DismissableProps & { asChild?: boolean }
 >((props, forwardedRef) => {
   const {
@@ -48,13 +162,16 @@ const Dismissable = React.forwardRef<
     onDismiss,
     asChild,
     children,
+    branches: branchesProp,
     ...layerProps
   } = props
-  const Comp = (asChild ? Slot : View) as any
+  const Comp = asChild ? Slot : View
   const context = React.useContext(DismissableContext)
-  const [node, setNode] = React.useState<HTMLDivElement | null>(null)
+  const [node, setNode] = React.useState<HTMLElement | null>(null)
   const [, force] = React.useState({})
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))
+  const composedRefs = useComposedRefs(forwardedRef, (node: HTMLElement | null) =>
+    setNode(node)
+  )
   const layers = Array.from(context.layers)
 
   const [highestLayerWithOutsidePointerEventsDisabled] = [
@@ -71,10 +188,10 @@ const Dismissable = React.forwardRef<
     index >= highestLayerWithOutsidePointerEventsDisabledIndex
 
   const pointerDownOutside = usePointerDownOutside((event) => {
-    const target = event.target as HTMLDivElement
-    const isPointerDownOnBranch = [...context.branches].some((branch) =>
-      branch.contains(target)
-    )
+    const target = event.target as HTMLElement
+    // check prop-based branches first (scoped to this dismissable), then global branches
+    const branches = branchesProp || context.branches
+    const isPointerDownOnBranch = [...branches].some((branch) => branch.contains(target))
     if (!isPointerEventsEnabled || isPointerDownOnBranch) return
     onPointerDownOutside?.(event)
     onInteractOutside?.(event)
@@ -82,17 +199,25 @@ const Dismissable = React.forwardRef<
   })
 
   const focusOutside = useFocusOutside((event) => {
-    const target = event.target as HTMLDivElement
-    const isFocusInBranch = [...context.branches].some((branch) =>
-      branch.contains(target)
-    )
+    const target = event.target as HTMLElement
+    // check prop-based branches first (scoped to this dismissable), then global branches
+    const branches = branchesProp || context.branches
+    const isFocusInBranch = [...branches].some((branch) => branch.contains(target))
     if (isFocusInBranch) return
     onFocusOutside?.(event)
     onInteractOutside?.(event)
     if (!event.defaultPrevented) onDismiss?.()
   })
 
+  // track forceUnmount in a ref so escape handler can check it
+  const forceUnmountRef = React.useRef(forceUnmount)
+  React.useEffect(() => {
+    forceUnmountRef.current = forceUnmount
+  }, [forceUnmount])
+
   useEscapeKeydown((event) => {
+    // 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
     const currentLayers = Array.from(context.layers)
     const currentIndex = node ? currentLayers.indexOf(node) : -1
@@ -107,24 +232,32 @@ const Dismissable = React.forwardRef<
 
   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)
-    dispatchUpdate()
+    globalLayers.add(node)
+    // only dispatch position update when pointer-events tracking is active
+    if (disableOutsidePointerEvents || layersWithPointerEventsDisabledCount > 0) {
+      dispatchUpdate()
+    }
+    notifyLayerChange()
     return () => {
-      if (
-        disableOutsidePointerEvents &&
-        context.layersWithOutsidePointerEventsDisabled.size === 1
-      ) {
-        document.body.style.pointerEvents = originalBodyPointerEvents
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          document.body.style.pointerEvents = originalBodyPointerEvents
+        }
+        // decrement AFTER dispatch so other layers still re-render
       }
     }
-  }, [node, disableOutsidePointerEvents, context])
+  }, [node, disableOutsidePointerEvents, forceUnmount, context])
 
   /**
    * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
@@ -136,15 +269,30 @@ const Dismissable = React.forwardRef<
     if (forceUnmount) return
     return () => {
       if (!node) return
+      const hadPointerEventsDisabled =
+        context.layersWithOutsidePointerEventsDisabled.has(node)
       context.layers.delete(node)
       context.layersWithOutsidePointerEventsDisabled.delete(node)
-      dispatchUpdate()
+      globalLayers.delete(node)
+      // only dispatch position update when pointer-events tracking is active
+      if (layersWithPointerEventsDisabledCount > 0) {
+        dispatchUpdate()
+      }
+      notifyLayerChange()
+      // decrement count AFTER dispatch so other layers see count > 0 and re-render
+      if (hadPointerEventsDisabled) {
+        layersWithPointerEventsDisabledCount--
+      }
     }
   }, [node, context, forceUnmount])
 
   React.useEffect(() => {
     const handleUpdate = () => {
-      force({})
+      // only force re-render if we need to track layer positions for pointer-events
+      // this avoids N^2 re-renders when multiple dismissables mount/unmount
+      if (layersWithPointerEventsDisabledCount > 0) {
+        force({})
+      }
     }
     document.addEventListener(CONTEXT_UPDATE, handleUpdate)
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate)
@@ -155,7 +303,9 @@ const Dismissable = React.forwardRef<
       {...layerProps}
       // @ts-ignore
       ref={composedRefs}
-      display="contents"
+      {...(!asChild && {
+        display: 'contents',
+      })}
       pointerEvents={
         isBodyPointerEventsDisabled
           ? isPointerEventsEnabled
@@ -189,23 +339,27 @@ Dismissable.displayName = DISMISSABLE_LAYER_NAME
 
 const BRANCH_NAME = 'DismissableBranch'
 
-const DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(
+const DismissableBranch = React.forwardRef<TamaguiElement, DismissableBranchProps>(
   (props, forwardedRef) => {
+    const { branches: branchesProp, ...rest } = props
     const context = React.useContext(DismissableContext)
-    const ref = React.useRef<HTMLDivElement>(null)
+    const ref = React.useRef<TamaguiElement>(null)
     const composedRefs = useComposedRefs(forwardedRef, ref)
 
     React.useEffect(() => {
       const node = ref.current
-      if (node) {
-        context.branches.add(node)
+      if (!(node instanceof HTMLElement)) return
+      // use prop-based branches if provided, otherwise fall back to global context
+      const branches = branchesProp || context.branches
+      if (node && branches) {
+        branches.add(node)
         return () => {
-          context.branches.delete(node)
+          branches.delete(node)
         }
       }
-    }, [context.branches])
+    }, [branchesProp, context.branches])
 
-    return <div style={{ display: 'contents' }} {...props} ref={composedRefs} />
+    return <View asChild="except-style" {...rest} ref={composedRefs} />
   }
 )
 

package/src/DismissableProps.tsx

@@ -9,6 +9,11 @@ export interface DismissableProps {
    * interact with them: once to close the `Dismissable`, and again to trigger the element.
    */
   disableOutsidePointerEvents?: boolean
+  /**
+   * Optional Set of branch elements that should not trigger dismissal.
+   * Pass the same Set to DismissableBranch components to scope them to this Dismissable.
+   */
+  branches?: Set<HTMLElement>
   /**
    * Event handler called when the escape key is down.
    * Can be prevented.
@@ -50,4 +55,9 @@ export interface DismissableProps {
 
 export interface DismissableBranchProps {
   children?: React.ReactNode
+  /**
+   * Optional Set to register this branch with.
+   * Pass the same Set to the Dismissable to scope this branch to that specific layer.
+   */
+  branches?: Set<HTMLElement>
 }

package/types/Dismissable.d.ts

@@ -1,10 +1,36 @@
+import { TamaguiElement } from '@tamagui/core';
 import * as React from 'react';
 import type { DismissableBranchProps, DismissableProps } from './DismissableProps';
 export declare function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E): void;
+/**
+ * returns the number of active dismissable layers
+ * useful for non-React contexts (e.g. escape key handlers)
+ */
+export declare function getDismissableLayerCount(): number;
+/**
+ * debug helper - logs what elements are registered as dismissable layers
+ */
+export declare function debugDismissableLayers(): HTMLElement[];
+/**
+ * hook that returns true when any dismissable layer is active
+ * re-renders when the state changes
+ * uses module-level globals, not React context, so works anywhere in tree
+ */
+export declare function useHasDismissableLayers(): boolean;
+/**
+ * hook to check if a DOM element is inside an active dismissable layer
+ * useful for custom escape handling - if inside a dismissable, you may want to defer
+ */
+export declare function useIsInsideDismissable(ref: React.RefObject<HTMLElement | null>): boolean;
+/**
+ * hook to check if there are dismissable layers above a given element
+ * 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 & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLDivElement>>;
-declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<HTMLDivElement>>;
+} & React.RefAttributes<HTMLElement>>;
+declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<TamaguiElement>>;
 export type PointerDownOutsideEvent = CustomEvent<{
     originalEvent: PointerEvent;
 }>;

package/types/Dismissable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dismissable.d.ts","sourceRoot":"","sources":["../src/Dismissable.tsx"],"names":[],"mappings":"AAOA,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;AAmBD,QAAA,MAAM,WAAW;cAEgB,OAAO;wCA+ItC,CAAA;AAUF,QAAA,MAAM,iBAAiB,+FAkBtB,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,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"}

package/types/Dismissable.native.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
 import type { DismissableBranchProps, DismissableProps } from './DismissableProps';
 export declare function dispatchDiscreteCustomEvent<E extends CustomEvent>(_target: E['target'], _event: E): void;
+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>>;
 //# 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,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":"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"}