@hanzogui/dismissable 3.0.2 → 7.3.0

package/LICENSE

@@ -1,21 +1,42 @@
-MIT License
+BSD 3-Clause License
+
+Copyright (c) 2026-present, Hanzo AI, Inc.
+
+Portions of this software are derived from upstream code originally licensed under
+the MIT License, with the following copyright notices retained per its terms:
 
   Copyright (c) 2020 Nate Wienert
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in all
-  copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  SOFTWARE.
+  Copyright (c) 2015-present, Nicolas Gallagher.
+  Copyright (c) 2015-present, Facebook, Inc.
+  Copyright (c) 2021 Radix
+  Copyright (c) 2017 Carmelo Pullara
+  Copyright (c) 2018 Framer B.V.
+  Copyright (c) 2022 WorkOS
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors
+   may be used to endorse or promote products derived from this software
+   without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.

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);
+  }
 }