@hanzogui/dismissable 3.0.2 → 102.0.0-rc.41-hanzoai.1

package/dist/cjs/Dismissable.cjs

@@ -2,33 +2,35 @@ 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_exports = {};
 __export(Dismissable_exports, {
   Dismissable: () => Dismissable,
@@ -41,43 +43,48 @@ __export(Dismissable_exports, {
   useIsInsideDismissable: () => useIsInsideDismissable
 });
 module.exports = __toCommonJS(Dismissable_exports);
-var import_gui_compose_refs = require("@hanzogui/compose-refs"),
-  import_gui_core = require("@hanzogui/core"),
-  import_gui_use_escape_keydown = require("@hanzogui/use-escape-keydown"),
-  import_gui_use_event = require("@hanzogui/use-event"),
-  React = __toESM(require("react"), 1),
-  ReactDOM = __toESM(require("react-dom"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_core = require("@hanzogui/core");
+var import_use_escape_keydown = require("@hanzogui/use-escape-keydown");
+var import_use_event = require("@hanzogui/use-event");
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
 function dispatchDiscreteCustomEvent(target, event) {
-  target && ReactDOM.flushSync(() => target.dispatchEvent(event));
+  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
-const DISMISSABLE_LAYER_NAME = "Dismissable",
-  CONTEXT_UPDATE = "dismissable.update",
-  POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside",
-  FOCUS_OUTSIDE = "dismissable.focusOutside";
+const DISMISSABLE_LAYER_NAME = "Dismissable";
+const CONTEXT_UPDATE = "dismissable.update";
+const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissable.focusOutside";
 let originalBodyPointerEvents;
-const globalLayers = /* @__PURE__ */new Set(),
-  layerChangeListeners = /* @__PURE__ */new Set();
+const globalLayers = /* @__PURE__ */new Set();
+const layerChangeListeners = /* @__PURE__ */new Set();
 let layersWithPointerEventsDisabledCount = 0;
 function notifyLayerChange() {
-  for (const listener of layerChangeListeners) listener();
+  for (const listener of layerChangeListeners) {
+    listener();
+  }
 }
 function getDismissableLayerCount() {
   return globalLayers.size;
 }
 function debugDismissableLayers() {
   const layers = Array.from(globalLayers);
-  return console.log("[Dismissable] Active layers:", layers.length, layers), layers;
+  console.log("[Dismissable] Active layers:", layers.length, layers);
+  return layers;
 }
 function useHasDismissableLayers() {
   const [count, setCount] = React.useState(() => globalLayers.size);
-  return React.useEffect(() => {
+  React.useEffect(() => {
     setCount(globalLayers.size);
     const update = () => setCount(globalLayers.size);
-    return layerChangeListeners.add(update), () => {
+    layerChangeListeners.add(update);
+    return () => {
       layerChangeListeners.delete(update);
     };
-  }, []), count > 0;
+  }, []);
+  return count > 0;
 }
 const DismissableContext = React.createContext({
   layers: /* @__PURE__ */new Set(),
@@ -85,28 +92,33 @@ const DismissableContext = React.createContext({
   branches: /* @__PURE__ */new Set()
 });
 function useIsInsideDismissable(ref) {
-  const context = React.useContext(DismissableContext),
-    [isInside, setIsInside] = React.useState(!1);
-  return React.useEffect(() => {
+  const context = React.useContext(DismissableContext);
+  const [isInside, setIsInside] = React.useState(false);
+  React.useEffect(() => {
     const check = () => {
       const el = ref.current;
       if (!el) {
-        setIsInside(!1);
+        setIsInside(false);
         return;
       }
-      for (const layer of context.layers) if (layer.contains(el)) {
-        setIsInside(!0);
-        return;
+      for (const layer of context.layers) {
+        if (layer.contains(el)) {
+          setIsInside(true);
+          return;
+        }
       }
-      setIsInside(!1);
+      setIsInside(false);
     };
-    return check(), document.addEventListener(CONTEXT_UPDATE, check), () => document.removeEventListener(CONTEXT_UPDATE, check);
-  }, [context.layers, ref]), isInside;
+    check();
+    document.addEventListener(CONTEXT_UPDATE, check);
+    return () => document.removeEventListener(CONTEXT_UPDATE, check);
+  }, [context.layers, ref]);
+  return isInside;
 }
 function useDismissableLayersAbove(ref) {
-  const context = React.useContext(DismissableContext),
-    [count, setCount] = React.useState(0);
-  return React.useEffect(() => {
+  const context = React.useContext(DismissableContext);
+  const [count, setCount] = React.useState(0);
+  React.useEffect(() => {
     const check = () => {
       const el = ref.current;
       if (!el) {
@@ -114,157 +126,236 @@ function useDismissableLayersAbove(ref) {
         return;
       }
       let above = 0;
-      for (const layer of context.layers) layer.contains(el) && above++;
+      for (const layer of context.layers) {
+        if (layer.contains(el)) {
+          above++;
+        }
+      }
       setCount(above);
     };
-    return check(), document.addEventListener(CONTEXT_UPDATE, check), () => document.removeEventListener(CONTEXT_UPDATE, check);
-  }, [context.layers, ref]), count;
+    check();
+    document.addEventListener(CONTEXT_UPDATE, check);
+    return () => document.removeEventListener(CONTEXT_UPDATE, check);
+  }, [context.layers, ref]);
+  return count;
 }
 const Dismissable = React.forwardRef((props, forwardedRef) => {
   const {
-      disableOutsidePointerEvents = !1,
-      forceUnmount,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      onDismiss,
-      asChild,
-      children,
-      branches: branchesProp,
-      ...layerProps
-    } = props,
-    Comp = asChild ? import_gui_core.Slot : import_gui_core.View,
-    context = React.useContext(DismissableContext),
-    [node, setNode] = React.useState(null),
-    [, force] = React.useState({}),
-    composedRefs = (0, import_gui_compose_refs.useComposedRefs)(forwardedRef, node2 => setNode(node2)),
-    layers = Array.from(context.layers),
-    [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1),
-    highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled),
-    index = node ? layers.indexOf(node) : -1,
-    isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0,
-    isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex,
-    pointerDownOutside = usePointerDownOutside(event => {
-      const target = event.target,
-        isPointerDownOnBranch = [...(branchesProp || context.branches)].some(branch => branch.contains(target));
-      !isPointerEventsEnabled || isPointerDownOnBranch || (onPointerDownOutside?.(event), onInteractOutside?.(event), event.defaultPrevented || onDismiss?.());
-    }),
-    focusOutside = useFocusOutside(event => {
-      const target = event.target;
-      [...(branchesProp || context.branches)].some(branch => branch.contains(target)) || (onFocusOutside?.(event), onInteractOutside?.(event), event.defaultPrevented || onDismiss?.());
-    }),
-    forceUnmountRef = React.useRef(forceUnmount);
-  return React.useEffect(() => {
+    disableOutsidePointerEvents = false,
+    forceUnmount,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    asChild,
+    children,
+    branches: branchesProp,
+    ...layerProps
+  } = props;
+  const Comp = asChild ? import_core.Slot : import_core.View;
+  const context = React.useContext(DismissableContext);
+  const [node, setNode] = React.useState(null);
+  const [, force] = React.useState({});
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, node2 => setNode(node2));
+  const layers = Array.from(context.layers);
+  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
+  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
+  const index = node ? layers.indexOf(node) : -1;
+  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
+  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
+  const pointerDownOutside = usePointerDownOutside(event => {
+    const target = event.target;
+    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 focusOutside = useFocusOutside(event => {
+    const target = event.target;
+    const branches = branchesProp || context.branches;
+    const isFocusInBranch = [...branches].some(branch => branch.contains(target));
+    if (isFocusInBranch) return;
+    onFocusOutside?.(event);
+    onInteractOutside?.(event);
+    if (!event.defaultPrevented) onDismiss?.();
+  });
+  const forceUnmountRef = React.useRef(forceUnmount);
+  React.useEffect(() => {
     forceUnmountRef.current = forceUnmount;
-  }, [forceUnmount]), (0, import_gui_use_escape_keydown.useEscapeKeydown)(event => {
+  }, [forceUnmount]);
+  (0, import_use_escape_keydown.useEscapeKeydown)(event => {
     if (forceUnmountRef.current) return;
     const currentLayers = Array.from(context.layers);
-    (node ? currentLayers.indexOf(node) : -1) === currentLayers.length - 1 && (onEscapeKeyDown?.(event), !event.defaultPrevented && onDismiss && (event.preventDefault(), onDismiss()));
-  }), React.useEffect(() => {
-    if (node && !forceUnmount) return disableOutsidePointerEvents && (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), (disableOutsidePointerEvents || layersWithPointerEventsDisabledCount > 0) && dispatchUpdate(), notifyLayerChange(), () => {
-      disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1 && (document.body.style.pointerEvents = originalBodyPointerEvents);
+    const currentIndex = node ? currentLayers.indexOf(node) : -1;
+    const isHighestLayer = currentIndex === currentLayers.length - 1;
+    if (!isHighestLayer) return;
+    onEscapeKeyDown?.(event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  });
+  React.useEffect(() => {
+    if (!node) return;
+    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);
+    if (disableOutsidePointerEvents || layersWithPointerEventsDisabledCount > 0) {
+      dispatchUpdate();
+    }
+    notifyLayerChange();
+    return () => {
+      if (disableOutsidePointerEvents) {
+        if (context.layersWithOutsidePointerEventsDisabled.size === 1) {
+          document.body.style.pointerEvents = originalBodyPointerEvents;
+        }
+      }
     };
-  }, [node, disableOutsidePointerEvents, forceUnmount, context]), React.useEffect(() => {
-    if (!forceUnmount) return () => {
+  }, [node, disableOutsidePointerEvents, forceUnmount, context]);
+  React.useEffect(() => {
+    if (forceUnmount) return;
+    return () => {
       if (!node) return;
       const hadPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.has(node);
-      context.layers.delete(node), context.layersWithOutsidePointerEventsDisabled.delete(node), globalLayers.delete(node), layersWithPointerEventsDisabledCount > 0 && dispatchUpdate(), notifyLayerChange(), hadPointerEventsDisabled && layersWithPointerEventsDisabledCount--;
+      context.layers.delete(node);
+      context.layersWithOutsidePointerEventsDisabled.delete(node);
+      globalLayers.delete(node);
+      if (layersWithPointerEventsDisabledCount > 0) {
+        dispatchUpdate();
+      }
+      notifyLayerChange();
+      if (hadPointerEventsDisabled) {
+        layersWithPointerEventsDisabledCount--;
+      }
     };
-  }, [node, context, forceUnmount]), React.useEffect(() => {
+  }, [node, context, forceUnmount]);
+  React.useEffect(() => {
     const handleUpdate = () => {
-      layersWithPointerEventsDisabledCount > 0 && force({});
+      if (layersWithPointerEventsDisabledCount > 0) {
+        force({});
+      }
     };
-    return document.addEventListener(CONTEXT_UPDATE, handleUpdate), () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
-  }, []), /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
+    document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+  }, []);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Comp, {
     ...layerProps,
     ref: composedRefs,
     ...(!asChild && {
       display: "contents"
     }),
     pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
-    onFocusCapture: (0, import_gui_core.composeEventHandlers)(props.onFocusCapture, focusOutside.onFocusCapture),
-    onBlurCapture: (0, import_gui_core.composeEventHandlers)(props.onBlurCapture, focusOutside.onBlurCapture),
-    onPointerDownCapture: (0, import_gui_core.composeEventHandlers)(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture),
+    onFocusCapture: (0, import_core.composeEventHandlers)(props.onFocusCapture, focusOutside.onFocusCapture),
+    onBlurCapture: (0, import_core.composeEventHandlers)(props.onBlurCapture, focusOutside.onBlurCapture),
+    onPointerDownCapture: (0, import_core.composeEventHandlers)(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture),
     children
   });
 });
 Dismissable.displayName = DISMISSABLE_LAYER_NAME;
-const BRANCH_NAME = "DismissableBranch",
-  DismissableBranch = React.forwardRef((props, forwardedRef) => {
-    const {
-        branches: branchesProp,
-        ...rest
-      } = props,
-      context = React.useContext(DismissableContext),
-      ref = React.useRef(null),
-      composedRefs = (0, import_gui_compose_refs.useComposedRefs)(forwardedRef, ref);
-    return React.useEffect(() => {
-      const node = ref.current;
-      if (!(node instanceof HTMLElement)) return;
-      const branches = branchesProp || context.branches;
-      if (node && branches) return branches.add(node), () => {
+const BRANCH_NAME = "DismissableBranch";
+const DismissableBranch = React.forwardRef((props, forwardedRef) => {
+  const {
+    branches: branchesProp,
+    ...rest
+  } = props;
+  const context = React.useContext(DismissableContext);
+  const ref = React.useRef(null);
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!(node instanceof HTMLElement)) return;
+    const branches = branchesProp || context.branches;
+    if (node && branches) {
+      branches.add(node);
+      return () => {
         branches.delete(node);
       };
-    }, [branchesProp, context.branches]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_core.View, {
-      asChild: "except-style",
-      ...rest,
-      ref: composedRefs
-    });
+    }
+  }, [branchesProp, context.branches]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    asChild: "except-style",
+    ...rest,
+    ref: composedRefs
   });
+});
 DismissableBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside) {
-  const handlePointerDownOutside = (0, import_gui_use_event.useEvent)(onPointerDownOutside),
-    isPointerInsideReactTreeRef = React.useRef(!1),
-    handleClickRef = React.useRef(() => {});
-  return React.useEffect(() => {
+  const handlePointerDownOutside = (0, import_use_event.useEvent)(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {});
+  React.useEffect(() => {
     const handlePointerDown = event => {
-        if (event.target && !isPointerInsideReactTreeRef.current) {
-          let handleAndDispatchPointerDownOutsideEvent = function () {
-            handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
-              discrete: !0
-            });
-          };
-          const eventDetail = {
-            originalEvent: event
-          };
-          event.pointerType === "touch" ? (document.removeEventListener("click", handleClickRef.current), handleClickRef.current = handleAndDispatchPointerDownOutsideEvent, document.addEventListener("click", handleClickRef.current, {
-            once: !0
-          })) : handleAndDispatchPointerDownOutsideEvent();
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent = function () {
+          handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
+            discrete: true
+          });
+        };
+        const eventDetail = {
+          originalEvent: event
+        };
+        if (event.pointerType === "touch") {
+          document.removeEventListener("click", handleClickRef.current);
+          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
+          document.addEventListener("click", handleClickRef.current, {
+            once: true
+          });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent();
         }
-        isPointerInsideReactTreeRef.current = !1;
-      },
-      timerId = setTimeout(() => {
-        document.addEventListener("pointerdown", handlePointerDown);
-      }, 0);
+      }
+      isPointerInsideReactTreeRef.current = false;
+    };
+    const timerId = setTimeout(() => {
+      document.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
     return () => {
-      window.clearTimeout(timerId), document.removeEventListener("pointerdown", handlePointerDown), document.removeEventListener("click", handleClickRef.current);
+      window.clearTimeout(timerId);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("click", handleClickRef.current);
     };
-  }, [handlePointerDownOutside]), {
+  }, [handlePointerDownOutside]);
+  return {
     // ensures we check React component tree (not just DOM tree)
     onPointerDownCapture: () => {
-      isPointerInsideReactTreeRef.current = !0;
+      isPointerInsideReactTreeRef.current = true;
     }
   };
 }
 function useFocusOutside(onFocusOutside) {
-  const handleFocusOutside = (0, import_gui_use_event.useEvent)(onFocusOutside),
-    isFocusInsideReactTreeRef = React.useRef(!1);
-  return React.useEffect(() => {
+  const handleFocusOutside = (0, import_use_event.useEvent)(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
     const handleFocus = event => {
-      event.target && !isFocusInsideReactTreeRef.current && handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, {
-        originalEvent: event
-      }, {
-        discrete: !1
-      });
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = {
+          originalEvent: event
+        };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
     };
-    return document.addEventListener("focusin", handleFocus), () => document.removeEventListener("focusin", handleFocus);
-  }, [handleFocusOutside]), {
+    document.addEventListener("focusin", handleFocus);
+    return () => document.removeEventListener("focusin", handleFocus);
+  }, [handleFocusOutside]);
+  return {
     onFocusCapture: () => {
-      isFocusInsideReactTreeRef.current = !0;
+      isFocusInsideReactTreeRef.current = true;
     },
     onBlurCapture: () => {
-      isFocusInsideReactTreeRef.current = !1;
+      isFocusInsideReactTreeRef.current = false;
     }
   };
 }
@@ -275,13 +366,18 @@ function dispatchUpdate() {
 function handleAndDispatchCustomEvent(name, handler, detail, {
   discrete
 }) {
-  const target = detail.originalEvent.target,
-    event = new CustomEvent(name, {
-      bubbles: !1,
-      cancelable: !0,
-      detail
-    });
-  handler && target.addEventListener(name, handler, {
-    once: !0
-  }), discrete ? dispatchDiscreteCustomEvent(target, event) : target.dispatchEvent(event);
+  const target = detail.originalEvent.target;
+  const event = new CustomEvent(name, {
+    bubbles: false,
+    cancelable: true,
+    detail
+  });
+  if (handler) target.addEventListener(name, handler, {
+    once: true
+  });
+  if (discrete) {
+    dispatchDiscreteCustomEvent(target, event);
+  } else {
+    target.dispatchEvent(event);
+  }
 }

package/dist/cjs/Dismissable.native.js

@@ -4,33 +4,35 @@ 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,
@@ -48,18 +50,18 @@ function getDismissableLayerCount() {
   return 0;
 }
 function useHasDismissableLayers() {
-  return !1;
+  return false;
 }
 function useIsInsideDismissable(_ref) {
-  return !1;
+  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/cjs/Dismissable.native.js.map

@@ -1 +1 @@
-{"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;IAC1E,OAAOG,KAAA,CAAMC,QAAA;EACjB,CAAC;EACUlB,iBAAA,GAAkC,eAAAS,YAAA,CAAAM,OAAA,CAAMC,UAAA,CAAW,UAASC,KAAA,EAAOH,IAAA,EAAM;IAChF,OAAOG,KAAA,CAAMC,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":[]}