@tamagui/dismissable 1.0.1-beta.43

package/dist/cjs/Dismissable.js

@@ -0,0 +1,285 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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, {
+  Branch: () => Branch,
+  Dismissable: () => Dismissable,
+  DismissableBranch: () => DismissableBranch,
+  Root: () => Root
+});
+module.exports = __toCommonJS(Dismissable_exports);
+var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
+var import_react_use_escape_keydown = require("@radix-ui/react-use-escape-keydown");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_core = require("@tamagui/core");
+var React = __toESM(require("react"));
+var ReactDOM = __toESM(require("react-dom"));
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target)
+    ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
+const DISMISSABLE_LAYER_NAME = "Dismissable";
+const CONTEXT_UPDATE = "dismissable.update";
+const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissable.focusOutside";
+let originalBodyPointerEvents;
+const DismissableContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+const Dismissable = React.forwardRef((props, forwardedRef) => {
+  const _a = props, {
+    disableOutsidePointerEvents = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss
+  } = _a, layerProps = __objRest(_a, [
+    "disableOutsidePointerEvents",
+    "onEscapeKeyDown",
+    "onPointerDownOutside",
+    "onFocusOutside",
+    "onInteractOutside",
+    "onDismiss"
+  ]);
+  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 isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (!isPointerEventsEnabled || isPointerDownOnBranch)
+      return;
+    onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  const focusOutside = useFocusOutside((event) => {
+    const target = event.target;
+    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (isFocusInBranch)
+      return;
+    onFocusOutside == null ? void 0 : onFocusOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  (0, import_react_use_escape_keydown.useEscapeKeydown)((event) => {
+    const isHighestLayer = index === context.layers.size - 1;
+    if (!isHighestLayer)
+      return;
+    onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  });
+  React.useEffect(() => {
+    if (!node)
+      return;
+    if (disableOutsidePointerEvents) {
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        originalBodyPointerEvents = document.body.style.pointerEvents;
+        document.body.style.pointerEvents = "none";
+      }
+      context.layersWithOutsidePointerEventsDisabled.add(node);
+    }
+    context.layers.add(node);
+    dispatchUpdate();
+    return () => {
+      if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+        document.body.style.pointerEvents = originalBodyPointerEvents;
+      }
+    };
+  }, [node, disableOutsidePointerEvents, context]);
+  React.useEffect(() => {
+    return () => {
+      if (!node)
+        return;
+      context.layers.delete(node);
+      context.layersWithOutsidePointerEventsDisabled.delete(node);
+      dispatchUpdate();
+    };
+  }, [node, context]);
+  React.useEffect(() => {
+    const handleUpdate = /* @__PURE__ */ __name(() => force({}), "handleUpdate");
+    document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, layerProps), {
+    ref: composedRefs,
+    style: __spreadValues({
+      display: "contents",
+      pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0
+    }, props.style),
+    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)
+  }));
+});
+Dismissable.displayName = DISMISSABLE_LAYER_NAME;
+const BRANCH_NAME = "DismissableBranch";
+const DismissableBranch = React.forwardRef((props, forwardedRef) => {
+  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) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
+    style: { display: "contents" }
+  }, props), {
+    ref: composedRefs
+  }));
+});
+DismissableBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside) {
+  const handlePointerDownOutside = (0, import_react_use_callback_ref.useCallbackRef)(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent = function() {
+          handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
+        };
+        __name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
+        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 = false;
+    }, "handlePointerDown");
+    const timerId = window.setTimeout(() => {
+      document.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("click", handleClickRef.current);
+    };
+  }, [handlePointerDownOutside]);
+  return {
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+__name(usePointerDownOutside, "usePointerDownOutside");
+function useFocusOutside(onFocusOutside) {
+  const handleFocusOutside = (0, import_react_use_callback_ref.useCallbackRef)(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    }, "handleFocus");
+    document.addEventListener("focusin", handleFocus);
+    return () => document.removeEventListener("focusin", handleFocus);
+  }, [handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+__name(useFocusOutside, "useFocusOutside");
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+__name(dispatchUpdate, "dispatchUpdate");
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  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);
+  }
+}
+__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
+const Root = Dismissable;
+const Branch = DismissableBranch;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Branch,
+  Dismissable,
+  DismissableBranch,
+  Root
+});
+//# sourceMappingURL=Dismissable.js.map

package/dist/cjs/Dismissable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Dismissable.tsx"],
+  "sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event))\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dismissable\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'Dismissable'\nconst CONTEXT_UPDATE = 'dismissable.update'\nconst POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'\nconst FOCUS_OUTSIDE = 'dismissable.focusOutside'\n\nlet originalBodyPointerEvents: string\n\nconst DismissableContext = React.createContext({\n  layers: new Set<HTMLDivElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),\n  branches: new Set<HTMLDivElement>(),\n})\n\nconst Dismissable = React.forwardRef<HTMLDivElement, DismissableProps>((props, forwardedRef) => {\n  const {\n    disableOutsidePointerEvents = false,\n    onEscapeKeyDown,\n    onPointerDownOutside,\n    onFocusOutside,\n    onInteractOutside,\n    onDismiss,\n    ...layerProps\n  } = props\n  const context = React.useContext(DismissableContext)\n  const [node, setNode] = React.useState<HTMLDivElement | null>(null)\n  const [, force] = React.useState({})\n  const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n  const layers = Array.from(context.layers)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n  const index = node ? layers.indexOf(node) : -1\n  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0\n  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex\n\n  const pointerDownOutside = usePointerDownOutside((event) => {\n    const target = event.target as HTMLDivElement\n    const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target))\n    if (!isPointerEventsEnabled || isPointerDownOnBranch) return\n    onPointerDownOutside?.(event)\n    onInteractOutside?.(event)\n    if (!event.defaultPrevented) onDismiss?.()\n  })\n\n  const focusOutside = useFocusOutside((event) => {\n    const target = event.target as HTMLDivElement\n    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target))\n    if (isFocusInBranch) return\n    onFocusOutside?.(event)\n    onInteractOutside?.(event)\n    if (!event.defaultPrevented) onDismiss?.()\n  })\n\n  useEscapeKeydown((event) => {\n    const isHighestLayer = index === context.layers.size - 1\n    if (!isHighestLayer) return\n    onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  })\n\n  React.useEffect(() => {\n    if (!node) return\n    if (disableOutsidePointerEvents) {\n      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n        originalBodyPointerEvents = document.body.style.pointerEvents\n        document.body.style.pointerEvents = 'none'\n      }\n      context.layersWithOutsidePointerEventsDisabled.add(node)\n    }\n    context.layers.add(node)\n    dispatchUpdate()\n    return () => {\n      if (\n        disableOutsidePointerEvents &&\n        context.layersWithOutsidePointerEventsDisabled.size === 1\n      ) {\n        document.body.style.pointerEvents = originalBodyPointerEvents\n      }\n    }\n  }, [node, disableOutsidePointerEvents, context])\n\n  /**\n   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n   * and add it to the end again so the layering order wouldn't be _creation order_.\n   * We only want them to be removed from context stacks when unmounted.\n   */\n  React.useEffect(() => {\n    return () => {\n      if (!node) return\n      context.layers.delete(node)\n      context.layersWithOutsidePointerEventsDisabled.delete(node)\n      dispatchUpdate()\n    }\n  }, [node, context])\n\n  React.useEffect(() => {\n    const handleUpdate = () => force({})\n    document.addEventListener(CONTEXT_UPDATE, handleUpdate)\n    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate)\n  }, [])\n\n  return (\n    <div\n      {...layerProps}\n      // @ts-ignore\n      ref={composedRefs}\n      style={{\n        display: 'contents',\n        pointerEvents: isBodyPointerEventsDisabled\n          ? isPointerEventsEnabled\n            ? 'auto'\n            : 'none'\n          : undefined,\n        // @ts-ignore\n        ...props.style,\n      }}\n      onFocusCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onFocusCapture,\n        focusOutside.onFocusCapture\n      )}\n      onBlurCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onBlurCapture,\n        focusOutside.onBlurCapture\n      )}\n      // @ts-ignore\n      onPointerDownCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onPointerDownCapture,\n        pointerDownOutside.onPointerDownCapture\n      )}\n    />\n  )\n})\n\nDismissable.displayName = DISMISSABLE_LAYER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableBranch'\n\nconst DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(DismissableContext)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n\n    React.useEffect(() => {\n      const node = ref.current\n      if (node) {\n        context.branches.add(node)\n        return () => {\n          context.branches.delete(node)\n        }\n      }\n    }, [context.branches])\n\n    return <div style={{ display: 'contents' }} {...props} ref={composedRefs} />\n  }\n)\n\nDismissableBranch.displayName = BRANCH_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener\n  const isPointerInsideReactTreeRef = React.useRef(false)\n  const handleClickRef = React.useRef(() => {})\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.target && !isPointerInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            handlePointerDownOutside,\n            eventDetail,\n            { discrete: true }\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executres events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          document.removeEventListener('click', handleClickRef.current)\n          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent\n          document.addEventListener('click', handleClickRef.current, { once: true })\n        } else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      isPointerInsideReactTreeRef.current = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is not React specific, but rather how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      document.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n    return () => {\n      window.clearTimeout(timerId)\n      document.removeEventListener('pointerdown', handlePointerDown)\n      document.removeEventListener('click', handleClickRef.current)\n    }\n  }, [handlePointerDownOutside])\n\n  return {\n    // ensures we check React component tree (not just DOM tree)\n    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n  const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener\n  const isFocusInsideReactTreeRef = React.useRef(false)\n\n  React.useEffect(() => {\n    const handleFocus = (event: FocusEvent) => {\n      if (event.target && !isFocusInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n          discrete: false,\n        })\n      }\n    }\n    document.addEventListener('focusin', handleFocus)\n    return () => document.removeEventListener('focusin', handleFocus)\n  }, [handleFocusOutside])\n\n  return {\n    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n  }\n}\n\nfunction dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n\nfunction handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n  name: string,\n  handler: ((event: E) => void) | undefined,\n  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),\n  { discrete }: { discrete: boolean }\n) {\n  const target = detail.originalEvent.target\n  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })\n  if (handler) target.addEventListener(name, handler as EventListener, { once: true })\n\n  if (discrete) {\n    dispatchDiscreteCustomEvent(target, event)\n  } else {\n    target.dispatchEvent(event)\n  }\n}\n\nconst Root = Dismissable\nconst Branch = DismissableBranch\n\nexport {\n  Dismissable,\n  DismissableBranch,\n  //\n  Root,\n  Branch,\n}\n\nexport type { DismissableProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/Dismissable.native.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  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;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dismissable_native_exports = {};
+__export(Dismissable_native_exports, {
+  Dismissable: () => Dismissable,
+  DismissableBranch: () => DismissableBranch
+});
+module.exports = __toCommonJS(Dismissable_native_exports);
+const Dismissable = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "Dismissable");
+const DismissableBranch = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "DismissableBranch");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dismissable,
+  DismissableBranch
+});
+//# sourceMappingURL=Dismissable.native.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Dismissable.native.tsx"],
+  "sourcesContent": ["import { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nexport const Dismissable = (props: DismissableProps) => {\n  return props.children\n}\n\nexport const DismissableBranch = (props: DismissableBranchProps) => {\n  return props.children\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,cAAc,wBAAC,UAA4B;AACtD,SAAO,MAAM;AACf,GAF2B;AAIpB,MAAM,oBAAoB,wBAAC,UAAkC;AAClE,SAAO,MAAM;AACf,GAFiC;",
+  "names": []
+}

package/dist/cjs/DismissableProps.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+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))
+      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: true }), mod);
+var DismissableProps_exports = {};
+module.exports = __toCommonJS(DismissableProps_exports);
+//# sourceMappingURL=DismissableProps.js.map

package/dist/cjs/DismissableProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DismissableProps.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nimport { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable'\n\nexport interface DismissableProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `Dismissable`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `Dismissable`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `Dismissable`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n  /**\n   * Event handler called when the focus moves outside of the `Dismissable`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void\n  /**\n   * Event handler called when an interaction happens outside the `Dismissable`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void\n  /**\n   * Handler called when the `Dismissable` should be dismissed\n   */\n  onDismiss?: () => void\n\n  children?: React.ReactNode\n}\n\nexport interface DismissableBranchProps {\n  children?: React.ReactNode\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+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))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+module.exports = __toCommonJS(src_exports);
+__reExport(src_exports, require("./Dismissable"), module.exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './Dismissable'\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,0BAAd;",
+  "names": []
+}

package/dist/esm/Dismissable.js

@@ -0,0 +1,224 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { composeEventHandlers } from "@tamagui/core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target)
+    ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
+const DISMISSABLE_LAYER_NAME = "Dismissable";
+const CONTEXT_UPDATE = "dismissable.update";
+const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissable.focusOutside";
+let originalBodyPointerEvents;
+const DismissableContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+const Dismissable = React.forwardRef((props, forwardedRef) => {
+  const {
+    disableOutsidePointerEvents = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    ...layerProps
+  } = props;
+  const context = React.useContext(DismissableContext);
+  const [node, setNode] = React.useState(null);
+  const [, force] = React.useState({});
+  const composedRefs = 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 isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (!isPointerEventsEnabled || isPointerDownOnBranch)
+      return;
+    onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  const focusOutside = useFocusOutside((event) => {
+    const target = event.target;
+    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (isFocusInBranch)
+      return;
+    onFocusOutside == null ? void 0 : onFocusOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  useEscapeKeydown((event) => {
+    const isHighestLayer = index === context.layers.size - 1;
+    if (!isHighestLayer)
+      return;
+    onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  });
+  React.useEffect(() => {
+    if (!node)
+      return;
+    if (disableOutsidePointerEvents) {
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        originalBodyPointerEvents = document.body.style.pointerEvents;
+        document.body.style.pointerEvents = "none";
+      }
+      context.layersWithOutsidePointerEventsDisabled.add(node);
+    }
+    context.layers.add(node);
+    dispatchUpdate();
+    return () => {
+      if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+        document.body.style.pointerEvents = originalBodyPointerEvents;
+      }
+    };
+  }, [node, disableOutsidePointerEvents, context]);
+  React.useEffect(() => {
+    return () => {
+      if (!node)
+        return;
+      context.layers.delete(node);
+      context.layersWithOutsidePointerEventsDisabled.delete(node);
+      dispatchUpdate();
+    };
+  }, [node, context]);
+  React.useEffect(() => {
+    const handleUpdate = /* @__PURE__ */ __name(() => force({}), "handleUpdate");
+    document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+  }, []);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...layerProps,
+    ref: composedRefs,
+    style: {
+      display: "contents",
+      pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+      ...props.style
+    },
+    onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
+    onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
+    onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
+  });
+});
+Dismissable.displayName = DISMISSABLE_LAYER_NAME;
+const BRANCH_NAME = "DismissableBranch";
+const DismissableBranch = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return /* @__PURE__ */ React.createElement("div", {
+    style: { display: "contents" },
+    ...props,
+    ref: composedRefs
+  });
+});
+DismissableBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside) {
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent = function() {
+          handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
+        };
+        __name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
+        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 = false;
+    }, "handlePointerDown");
+    const timerId = window.setTimeout(() => {
+      document.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("click", handleClickRef.current);
+    };
+  }, [handlePointerDownOutside]);
+  return {
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+__name(usePointerDownOutside, "usePointerDownOutside");
+function useFocusOutside(onFocusOutside) {
+  const handleFocusOutside = useCallbackRef(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    }, "handleFocus");
+    document.addEventListener("focusin", handleFocus);
+    return () => document.removeEventListener("focusin", handleFocus);
+  }, [handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+__name(useFocusOutside, "useFocusOutside");
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+__name(dispatchUpdate, "dispatchUpdate");
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  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);
+  }
+}
+__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
+const Root = Dismissable;
+const Branch = DismissableBranch;
+export {
+  Branch,
+  Dismissable,
+  DismissableBranch,
+  Root
+};
+//# sourceMappingURL=Dismissable.js.map

package/dist/esm/Dismissable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Dismissable.tsx"],
+  "sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event))\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dismissable\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'Dismissable'\nconst CONTEXT_UPDATE = 'dismissable.update'\nconst POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'\nconst FOCUS_OUTSIDE = 'dismissable.focusOutside'\n\nlet originalBodyPointerEvents: string\n\nconst DismissableContext = React.createContext({\n  layers: new Set<HTMLDivElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),\n  branches: new Set<HTMLDivElement>(),\n})\n\nconst Dismissable = React.forwardRef<HTMLDivElement, DismissableProps>((props, forwardedRef) => {\n  const {\n    disableOutsidePointerEvents = false,\n    onEscapeKeyDown,\n    onPointerDownOutside,\n    onFocusOutside,\n    onInteractOutside,\n    onDismiss,\n    ...layerProps\n  } = props\n  const context = React.useContext(DismissableContext)\n  const [node, setNode] = React.useState<HTMLDivElement | null>(null)\n  const [, force] = React.useState({})\n  const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))\n  const layers = Array.from(context.layers)\n  const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n  const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n  const index = node ? layers.indexOf(node) : -1\n  const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0\n  const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex\n\n  const pointerDownOutside = usePointerDownOutside((event) => {\n    const target = event.target as HTMLDivElement\n    const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target))\n    if (!isPointerEventsEnabled || isPointerDownOnBranch) return\n    onPointerDownOutside?.(event)\n    onInteractOutside?.(event)\n    if (!event.defaultPrevented) onDismiss?.()\n  })\n\n  const focusOutside = useFocusOutside((event) => {\n    const target = event.target as HTMLDivElement\n    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target))\n    if (isFocusInBranch) return\n    onFocusOutside?.(event)\n    onInteractOutside?.(event)\n    if (!event.defaultPrevented) onDismiss?.()\n  })\n\n  useEscapeKeydown((event) => {\n    const isHighestLayer = index === context.layers.size - 1\n    if (!isHighestLayer) return\n    onEscapeKeyDown?.(event)\n    if (!event.defaultPrevented && onDismiss) {\n      event.preventDefault()\n      onDismiss()\n    }\n  })\n\n  React.useEffect(() => {\n    if (!node) return\n    if (disableOutsidePointerEvents) {\n      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n        originalBodyPointerEvents = document.body.style.pointerEvents\n        document.body.style.pointerEvents = 'none'\n      }\n      context.layersWithOutsidePointerEventsDisabled.add(node)\n    }\n    context.layers.add(node)\n    dispatchUpdate()\n    return () => {\n      if (\n        disableOutsidePointerEvents &&\n        context.layersWithOutsidePointerEventsDisabled.size === 1\n      ) {\n        document.body.style.pointerEvents = originalBodyPointerEvents\n      }\n    }\n  }, [node, disableOutsidePointerEvents, context])\n\n  /**\n   * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n   * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n   * and add it to the end again so the layering order wouldn't be _creation order_.\n   * We only want them to be removed from context stacks when unmounted.\n   */\n  React.useEffect(() => {\n    return () => {\n      if (!node) return\n      context.layers.delete(node)\n      context.layersWithOutsidePointerEventsDisabled.delete(node)\n      dispatchUpdate()\n    }\n  }, [node, context])\n\n  React.useEffect(() => {\n    const handleUpdate = () => force({})\n    document.addEventListener(CONTEXT_UPDATE, handleUpdate)\n    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate)\n  }, [])\n\n  return (\n    <div\n      {...layerProps}\n      // @ts-ignore\n      ref={composedRefs}\n      style={{\n        display: 'contents',\n        pointerEvents: isBodyPointerEventsDisabled\n          ? isPointerEventsEnabled\n            ? 'auto'\n            : 'none'\n          : undefined,\n        // @ts-ignore\n        ...props.style,\n      }}\n      onFocusCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onFocusCapture,\n        focusOutside.onFocusCapture\n      )}\n      onBlurCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onBlurCapture,\n        focusOutside.onBlurCapture\n      )}\n      // @ts-ignore\n      onPointerDownCapture={composeEventHandlers(\n        // @ts-ignore\n        props.onPointerDownCapture,\n        pointerDownOutside.onPointerDownCapture\n      )}\n    />\n  )\n})\n\nDismissable.displayName = DISMISSABLE_LAYER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableBranch'\n\nconst DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(\n  (props, forwardedRef) => {\n    const context = React.useContext(DismissableContext)\n    const ref = React.useRef<HTMLDivElement>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref)\n\n    React.useEffect(() => {\n      const node = ref.current\n      if (node) {\n        context.branches.add(node)\n        return () => {\n          context.branches.delete(node)\n        }\n      }\n    }, [context.branches])\n\n    return <div style={{ display: 'contents' }} {...props} ref={composedRefs} />\n  }\n)\n\nDismissableBranch.displayName = BRANCH_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>\nexport type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener\n  const isPointerInsideReactTreeRef = React.useRef(false)\n  const handleClickRef = React.useRef(() => {})\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.target && !isPointerInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event }\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            handlePointerDownOutside,\n            eventDetail,\n            { discrete: true }\n          )\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executres events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          document.removeEventListener('click', handleClickRef.current)\n          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent\n          document.addEventListener('click', handleClickRef.current, { once: true })\n        } else {\n          handleAndDispatchPointerDownOutsideEvent()\n        }\n      }\n      isPointerInsideReactTreeRef.current = false\n    }\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is not React specific, but rather how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      document.addEventListener('pointerdown', handlePointerDown)\n    }, 0)\n    return () => {\n      window.clearTimeout(timerId)\n      document.removeEventListener('pointerdown', handlePointerDown)\n      document.removeEventListener('click', handleClickRef.current)\n    }\n  }, [handlePointerDownOutside])\n\n  return {\n    // ensures we check React component tree (not just DOM tree)\n    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n  }\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n  const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener\n  const isFocusInsideReactTreeRef = React.useRef(false)\n\n  React.useEffect(() => {\n    const handleFocus = (event: FocusEvent) => {\n      if (event.target && !isFocusInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event }\n        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n          discrete: false,\n        })\n      }\n    }\n    document.addEventListener('focusin', handleFocus)\n    return () => document.removeEventListener('focusin', handleFocus)\n  }, [handleFocusOutside])\n\n  return {\n    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n  }\n}\n\nfunction dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE)\n  document.dispatchEvent(event)\n}\n\nfunction handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n  name: string,\n  handler: ((event: E) => void) | undefined,\n  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),\n  { discrete }: { discrete: boolean }\n) {\n  const target = detail.originalEvent.target\n  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail })\n  if (handler) target.addEventListener(name, handler as EventListener, { once: true })\n\n  if (discrete) {\n    dispatchDiscreteCustomEvent(target, event)\n  } else {\n    target.dispatchEvent(event)\n  }\n}\n\nconst Root = Dismissable\nconst Branch = DismissableBranch\n\nexport {\n  Dismissable,\n  DismissableBranch,\n  //\n  Root,\n  Branch,\n}\n\nexport type { DismissableProps }\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/Dismissable.native.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const Dismissable = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "Dismissable");
+const DismissableBranch = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "DismissableBranch");
+export {
+  Dismissable,
+  DismissableBranch
+};
+//# sourceMappingURL=Dismissable.native.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Dismissable.native.tsx"],
+  "sourcesContent": ["import { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nexport const Dismissable = (props: DismissableProps) => {\n  return props.children\n}\n\nexport const DismissableBranch = (props: DismissableBranchProps) => {\n  return props.children\n}\n"],
+  "mappings": ";;AAEO,MAAM,cAAc,wBAAC,UAA4B;AACtD,SAAO,MAAM;AACf,GAF2B;AAIpB,MAAM,oBAAoB,wBAAC,UAAkC;AAClE,SAAO,MAAM;AACf,GAFiC;",
+  "names": []
+}

package/dist/esm/DismissableProps.js

@@ -0,0 +1 @@
+//# sourceMappingURL=DismissableProps.js.map

package/dist/esm/DismissableProps.js.map

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx"],
+  "sourcesContent": ["export * from './Dismissable'\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/jsx/Dismissable.js

@@ -0,0 +1,212 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { composeEventHandlers } from "@tamagui/core";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+function dispatchDiscreteCustomEvent(target, event) {
+  if (target)
+    ReactDOM.flushSync(() => target.dispatchEvent(event));
+}
+__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
+const DISMISSABLE_LAYER_NAME = "Dismissable";
+const CONTEXT_UPDATE = "dismissable.update";
+const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
+const FOCUS_OUTSIDE = "dismissable.focusOutside";
+let originalBodyPointerEvents;
+const DismissableContext = React.createContext({
+  layers: /* @__PURE__ */ new Set(),
+  layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
+  branches: /* @__PURE__ */ new Set()
+});
+const Dismissable = React.forwardRef((props, forwardedRef) => {
+  const {
+    disableOutsidePointerEvents = false,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    onDismiss,
+    ...layerProps
+  } = props;
+  const context = React.useContext(DismissableContext);
+  const [node, setNode] = React.useState(null);
+  const [, force] = React.useState({});
+  const composedRefs = 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 isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (!isPointerEventsEnabled || isPointerDownOnBranch)
+      return;
+    onPointerDownOutside == null ? void 0 : onPointerDownOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  const focusOutside = useFocusOutside((event) => {
+    const target = event.target;
+    const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
+    if (isFocusInBranch)
+      return;
+    onFocusOutside == null ? void 0 : onFocusOutside(event);
+    onInteractOutside == null ? void 0 : onInteractOutside(event);
+    if (!event.defaultPrevented)
+      onDismiss == null ? void 0 : onDismiss();
+  });
+  useEscapeKeydown((event) => {
+    const isHighestLayer = index === context.layers.size - 1;
+    if (!isHighestLayer)
+      return;
+    onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  });
+  React.useEffect(() => {
+    if (!node)
+      return;
+    if (disableOutsidePointerEvents) {
+      if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+        originalBodyPointerEvents = document.body.style.pointerEvents;
+        document.body.style.pointerEvents = "none";
+      }
+      context.layersWithOutsidePointerEventsDisabled.add(node);
+    }
+    context.layers.add(node);
+    dispatchUpdate();
+    return () => {
+      if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
+        document.body.style.pointerEvents = originalBodyPointerEvents;
+      }
+    };
+  }, [node, disableOutsidePointerEvents, context]);
+  React.useEffect(() => {
+    return () => {
+      if (!node)
+        return;
+      context.layers.delete(node);
+      context.layersWithOutsidePointerEventsDisabled.delete(node);
+      dispatchUpdate();
+    };
+  }, [node, context]);
+  React.useEffect(() => {
+    const handleUpdate = /* @__PURE__ */ __name(() => force({}), "handleUpdate");
+    document.addEventListener(CONTEXT_UPDATE, handleUpdate);
+    return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
+  }, []);
+  return <div {...layerProps} ref={composedRefs} style={{
+    display: "contents",
+    pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
+    ...props.style
+  }} onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)} onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)} onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)} />;
+});
+Dismissable.displayName = DISMISSABLE_LAYER_NAME;
+const BRANCH_NAME = "DismissableBranch";
+const DismissableBranch = React.forwardRef((props, forwardedRef) => {
+  const context = React.useContext(DismissableContext);
+  const ref = React.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      context.branches.add(node);
+      return () => {
+        context.branches.delete(node);
+      };
+    }
+  }, [context.branches]);
+  return <div style={{ display: "contents" }} {...props} ref={composedRefs} />;
+});
+DismissableBranch.displayName = BRANCH_NAME;
+function usePointerDownOutside(onPointerDownOutside) {
+  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const isPointerInsideReactTreeRef = React.useRef(false);
+  const handleClickRef = React.useRef(() => {
+  });
+  React.useEffect(() => {
+    const handlePointerDown = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        let handleAndDispatchPointerDownOutsideEvent = function() {
+          handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
+        };
+        __name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
+        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 = false;
+    }, "handlePointerDown");
+    const timerId = window.setTimeout(() => {
+      document.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+    return () => {
+      window.clearTimeout(timerId);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("click", handleClickRef.current);
+    };
+  }, [handlePointerDownOutside]);
+  return {
+    onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
+  };
+}
+__name(usePointerDownOutside, "usePointerDownOutside");
+function useFocusOutside(onFocusOutside) {
+  const handleFocusOutside = useCallbackRef(onFocusOutside);
+  const isFocusInsideReactTreeRef = React.useRef(false);
+  React.useEffect(() => {
+    const handleFocus = /* @__PURE__ */ __name((event) => {
+      if (event.target && !isFocusInsideReactTreeRef.current) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
+          discrete: false
+        });
+      }
+    }, "handleFocus");
+    document.addEventListener("focusin", handleFocus);
+    return () => document.removeEventListener("focusin", handleFocus);
+  }, [handleFocusOutside]);
+  return {
+    onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
+    onBlurCapture: () => isFocusInsideReactTreeRef.current = false
+  };
+}
+__name(useFocusOutside, "useFocusOutside");
+function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}
+__name(dispatchUpdate, "dispatchUpdate");
+function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
+  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);
+  }
+}
+__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
+const Root = Dismissable;
+const Branch = DismissableBranch;
+export {
+  Branch,
+  Dismissable,
+  DismissableBranch,
+  Root
+};

package/dist/jsx/Dismissable.native.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const Dismissable = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "Dismissable");
+const DismissableBranch = /* @__PURE__ */ __name((props) => {
+  return props.children;
+}, "DismissableBranch");
+export {
+  Dismissable,
+  DismissableBranch
+};

package/dist/jsx/index.js

@@ -0,0 +1 @@
+export * from "./Dismissable";

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@tamagui/dismissable",
+  "version": "1.0.1-beta.43",
+  "sideEffects": true,
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@radix-ui/react-use-callback-ref": "^0.1.0",
+    "@radix-ui/react-use-escape-keydown": "^0.1.0",
+    "@tamagui/compose-refs": "^1.0.1-beta.43",
+    "@tamagui/core": "^1.0.1-beta.43"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.0.1-beta.43",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/types/Dismissable.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { DismissableBranchProps, DismissableProps } from './DismissableProps';
+declare const Dismissable: React.ForwardRefExoticComponent<DismissableProps & React.RefAttributes<HTMLDivElement>>;
+declare const DismissableBranch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<HTMLDivElement>>;
+export declare type PointerDownOutsideEvent = CustomEvent<{
+    originalEvent: PointerEvent;
+}>;
+export declare type FocusOutsideEvent = CustomEvent<{
+    originalEvent: FocusEvent;
+}>;
+declare const Root: React.ForwardRefExoticComponent<DismissableProps & React.RefAttributes<HTMLDivElement>>;
+declare const Branch: React.ForwardRefExoticComponent<DismissableBranchProps & React.RefAttributes<HTMLDivElement>>;
+export { Dismissable, DismissableBranch, Root, Branch, };
+export type { DismissableProps };
+//# sourceMappingURL=Dismissable.d.ts.map

package/types/Dismissable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dismissable.d.ts","sourceRoot":"","sources":["../src/Dismissable.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAuB7E,QAAA,MAAM,WAAW,yFA4Hf,CAAA;AAUF,QAAA,MAAM,iBAAiB,+FAkBtB,CAAA;AAMD,oBAAY,uBAAuB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAA;AAClF,oBAAY,iBAAiB,GAAG,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAA;AA8H1E,QAAA,MAAM,IAAI,yFAAc,CAAA;AACxB,QAAA,MAAM,MAAM,+FAAoB,CAAA;AAEhC,OAAO,EACL,WAAW,EACX,iBAAiB,EAEjB,IAAI,EACJ,MAAM,GACP,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/types/Dismissable.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DismissableBranchProps, DismissableProps } from './DismissableProps';
+export declare const Dismissable: (props: DismissableProps) => import("react").ReactNode;
+export declare const DismissableBranch: (props: DismissableBranchProps) => import("react").ReactNode;
+//# sourceMappingURL=Dismissable.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dismissable.native.d.ts","sourceRoot":"","sources":["../src/Dismissable.native.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,eAAO,MAAM,WAAW,UAAW,gBAAgB,8BAElD,CAAA;AAED,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,8BAE9D,CAAA"}

package/types/DismissableProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FocusOutsideEvent, PointerDownOutsideEvent } from './Dismissable';
+export interface DismissableProps {
+    disableOutsidePointerEvents?: boolean;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+}
+export interface DismissableBranchProps {
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=DismissableProps.d.ts.map

package/types/DismissableProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DismissableProps.d.ts","sourceRoot":"","sources":["../src/DismissableProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAE1E,MAAM,WAAW,gBAAgB;IAM/B,2BAA2B,CAAC,EAAE,OAAO,CAAA;IAKrC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAKhD,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAK/D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAMnD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAA;IAIhF,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dismissable';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}