@tamagui/dismissable 1.0.1-beta.100 → 1.0.1-beta.103

package/dist/cjs/Dismissable.js

@@ -55,10 +55,10 @@ __export(Dismissable_exports, {
   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 import_use_event = require("@tamagui/use-event");
 var React = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 function dispatchDiscreteCustomEvent(target, event) {
@@ -197,7 +197,7 @@ const DismissableBranch = React.forwardRef((props, forwardedRef) => {
 });
 DismissableBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside) {
-  const handlePointerDownOutside = (0, import_react_use_callback_ref.useCallbackRef)(onPointerDownOutside);
+  const handlePointerDownOutside = (0, import_use_event.useEvent)(onPointerDownOutside);
   const isPointerInsideReactTreeRef = React.useRef(false);
   const handleClickRef = React.useRef(() => {
   });
@@ -232,7 +232,7 @@ function usePointerDownOutside(onPointerDownOutside) {
   };
 }
 function useFocusOutside(onFocusOutside) {
-  const handleFocusOutside = (0, import_react_use_callback_ref.useCallbackRef)(onFocusOutside);
+  const handleFocusOutside = (0, import_use_event.useEvent)(onFocusOutside);
   const isFocusInsideReactTreeRef = React.useRef(false);
   React.useEffect(() => {
     const handleFocus = (event) => {

package/dist/cjs/Dismissable.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\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 = useEvent(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 = useEvent(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.js

@@ -29,10 +29,10 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-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 { useEvent } from "@tamagui/use-event";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 function dispatchDiscreteCustomEvent(target, event) {
@@ -171,7 +171,7 @@ const DismissableBranch = React.forwardRef((props, forwardedRef) => {
 });
 DismissableBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside) {
-  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const handlePointerDownOutside = useEvent(onPointerDownOutside);
   const isPointerInsideReactTreeRef = React.useRef(false);
   const handleClickRef = React.useRef(() => {
   });
@@ -206,7 +206,7 @@ function usePointerDownOutside(onPointerDownOutside) {
   };
 }
 function useFocusOutside(onFocusOutside) {
-  const handleFocusOutside = useCallbackRef(onFocusOutside);
+  const handleFocusOutside = useEvent(onFocusOutside);
   const isFocusInsideReactTreeRef = React.useRef(false);
   React.useEffect(() => {
     const handleFocus = (event) => {

package/dist/esm/Dismissable.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\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 = useEvent(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 = useEvent(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/jsx/Dismissable.js

@@ -1,7 +1,7 @@
-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 { useEvent } from "@tamagui/use-event";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 function dispatchDiscreteCustomEvent(target, event) {
@@ -125,7 +125,7 @@ const DismissableBranch = React.forwardRef((props, forwardedRef) => {
 });
 DismissableBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside) {
-  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
+  const handlePointerDownOutside = useEvent(onPointerDownOutside);
   const isPointerInsideReactTreeRef = React.useRef(false);
   const handleClickRef = React.useRef(() => {
   });
@@ -160,7 +160,7 @@ function usePointerDownOutside(onPointerDownOutside) {
   };
 }
 function useFocusOutside(onFocusOutside) {
-  const handleFocusOutside = useCallbackRef(onFocusOutside);
+  const handleFocusOutside = useEvent(onFocusOutside);
   const isFocusInsideReactTreeRef = React.useRef(false);
   React.useEffect(() => {
     const handleFocus = (event) => {

package/dist/jsx/Dismissable.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\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 = useEvent(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 = useEvent(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": "AAGA;AACA;AACA;AACA;AACA;AACA;AAIA,qCAA4D,QAAqB,OAAU;AACzF,MAAI;AAAQ,aAAS,UAAU,MAAM,OAAO,cAAc,KAAK,CAAC;AAClE;AAMA,MAAM,yBAAyB;AAC/B,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,IAAI;AAEJ,MAAM,qBAAqB,MAAM,cAAc;AAAA,EAC7C,QAAQ,oBAAI,IAAoB;AAAA,EAChC,wCAAwC,oBAAI,IAAoB;AAAA,EAChE,UAAU,oBAAI,IAAoB;AACpC,CAAC;AAED,MAAM,cAAc,MAAM,WAA6C,CAAC,OAAO,iBAAiB;AAC9F,QAAM;AAAA,IACJ,8BAA8B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,CAAC,MAAM,WAAW,MAAM,SAAgC,IAAI;AAClE,QAAM,CAAC,EAAE,SAAS,MAAM,SAAS,CAAC,CAAC;AACnC,QAAM,eAAe,gBAAgB,cAAc,CAAC,UAAS,QAAQ,KAAI,CAAC;AAC1E,QAAM,SAAS,MAAM,KAAK,QAAQ,MAAM;AACxC,QAAM,CAAC,gDAAgD,CAAC,GAAG,QAAQ,sCAAsC,EAAE,MAAM,EAAE;AACnH,QAAM,oDAAoD,OAAO,QAAQ,4CAA4C;AACrH,QAAM,QAAQ,OAAO,OAAO,QAAQ,IAAI,IAAI;AAC5C,QAAM,8BAA8B,QAAQ,uCAAuC,OAAO;AAC1F,QAAM,yBAAyB,SAAS;AAExC,QAAM,qBAAqB,sBAAsB,CAAC,UAAU;AAC1D,UAAM,SAAS,MAAM;AACrB,UAAM,wBAAwB,CAAC,GAAG,QAAQ,QAAQ,EAAE,KAAK,CAAC,WAAW,OAAO,SAAS,MAAM,CAAC;AAC5F,QAAI,CAAC,0BAA0B;AAAuB;AACtD,iEAAuB;AACvB,2DAAoB;AACpB,QAAI,CAAC,MAAM;AAAkB;AAAA,EAC/B,CAAC;AAED,QAAM,eAAe,gBAAgB,CAAC,UAAU;AAC9C,UAAM,SAAS,MAAM;AACrB,UAAM,kBAAkB,CAAC,GAAG,QAAQ,QAAQ,EAAE,KAAK,CAAC,WAAW,OAAO,SAAS,MAAM,CAAC;AACtF,QAAI;AAAiB;AACrB,qDAAiB;AACjB,2DAAoB;AACpB,QAAI,CAAC,MAAM;AAAkB;AAAA,EAC/B,CAAC;AAED,mBAAiB,CAAC,UAAU;AAC1B,UAAM,iBAAiB,UAAU,QAAQ,OAAO,OAAO;AACvD,QAAI,CAAC;AAAgB;AACrB,uDAAkB;AAClB,QAAI,CAAC,MAAM,oBAAoB,WAAW;AACxC,YAAM,eAAe;AACrB,gBAAU;AAAA,IACZ;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC;AAAM;AACX,QAAI,6BAA6B;AAC/B,UAAI,QAAQ,uCAAuC,SAAS,GAAG;AAC7D,oCAA4B,SAAS,KAAK,MAAM;AAChD,iBAAS,KAAK,MAAM,gBAAgB;AAAA,MACtC;AACA,cAAQ,uCAAuC,IAAI,IAAI;AAAA,IACzD;AACA,YAAQ,OAAO,IAAI,IAAI;AACvB,mBAAe;AACf,WAAO,MAAM;AACX,UACE,+BACA,QAAQ,uCAAuC,SAAS,GACxD;AACA,iBAAS,KAAK,MAAM,gBAAgB;AAAA,MACtC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,6BAA6B,OAAO,CAAC;AAQ/C,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,CAAC;AAAM;AACX,cAAQ,OAAO,OAAO,IAAI;AAC1B,cAAQ,uCAAuC,OAAO,IAAI;AAC1D,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,QAAM,UAAU,MAAM;AACpB,UAAM,eAAe,MAAM,MAAM,CAAC,CAAC;AACnC,aAAS,iBAAiB,gBAAgB,YAAY;AACtD,WAAO,MAAM,SAAS,oBAAoB,gBAAgB,YAAY;AAAA,EACxE,GAAG,CAAC,CAAC;AAEL,SACE,CAAC,QACK,YAEJ,KAAK,cACL,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe,8BACX,yBACE,SACA,SACF;AAAA,IAEJ,GAAG,MAAM;AAAA,EACX,GACA,gBAAgB,qBAEd,MAAM,gBACN,aAAa,cACf,GACA,eAAe,qBAEb,MAAM,eACN,aAAa,aACf,GAEA,sBAAsB,qBAEpB,MAAM,sBACN,mBAAmB,oBACrB,GACF;AAEJ,CAAC;AAED,YAAY,cAAc;AAM1B,MAAM,cAAc;AAEpB,MAAM,oBAAoB,MAAM,WAC9B,CAAC,OAAO,iBAAiB;AACvB,QAAM,UAAU,MAAM,WAAW,kBAAkB;AACnD,QAAM,MAAM,MAAM,OAAuB,IAAI;AAC7C,QAAM,eAAe,gBAAgB,cAAc,GAAG;AAEtD,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,MAAM;AACR,cAAQ,SAAS,IAAI,IAAI;AACzB,aAAO,MAAM;AACX,gBAAQ,SAAS,OAAO,IAAI;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,SAAO,CAAC,IAAI,OAAO,EAAE,SAAS,WAAW,OAAO,OAAO,KAAK,cAAc;AAC5E,CACF;AAEA,kBAAkB,cAAc;AAYhC,+BAA+B,sBAAiE;AAC9F,QAAM,2BAA2B,SAAS,oBAAoB;AAC9D,QAAM,8BAA8B,MAAM,OAAO,KAAK;AACtD,QAAM,iBAAiB,MAAM,OAAO,MAAM;AAAA,EAAC,CAAC;AAE5C,QAAM,UAAU,MAAM;AACpB,UAAM,oBAAoB,CAAC,UAAwB;AACjD,UAAI,MAAM,UAAU,CAAC,4BAA4B,SAAS;AAGxD,YAAS,2CAAT,WAAoD;AAClD,uCACE,sBACA,0BACA,aACA,EAAE,UAAU,KAAK,CACnB;AAAA,QACF;AATA,cAAM,cAAc,EAAE,eAAe,MAAM;AAuB3C,YAAI,MAAM,gBAAgB,SAAS;AACjC,mBAAS,oBAAoB,SAAS,eAAe,OAAO;AAC5D,yBAAe,UAAU;AACzB,mBAAS,iBAAiB,SAAS,eAAe,SAAS,EAAE,MAAM,KAAK,CAAC;AAAA,QAC3E,OAAO;AACL,mDAAyC;AAAA,QAC3C;AAAA,MACF;AACA,kCAA4B,UAAU;AAAA,IACxC;AAcA,UAAM,UAAU,OAAO,WAAW,MAAM;AACtC,eAAS,iBAAiB,eAAe,iBAAiB;AAAA,IAC5D,GAAG,CAAC;AACJ,WAAO,MAAM;AACX,aAAO,aAAa,OAAO;AAC3B,eAAS,oBAAoB,eAAe,iBAAiB;AAC7D,eAAS,oBAAoB,SAAS,eAAe,OAAO;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,wBAAwB,CAAC;AAE7B,SAAO;AAAA,IAEL,sBAAsB,MAAO,4BAA4B,UAAU;AAAA,EACrE;AACF;AAMA,yBAAyB,gBAAqD;AAC5E,QAAM,qBAAqB,SAAS,cAAc;AAClD,QAAM,4BAA4B,MAAM,OAAO,KAAK;AAEpD,QAAM,UAAU,MAAM;AACpB,UAAM,cAAc,CAAC,UAAsB;AACzC,UAAI,MAAM,UAAU,CAAC,0BAA0B,SAAS;AACtD,cAAM,cAAc,EAAE,eAAe,MAAM;AAC3C,qCAA6B,eAAe,oBAAoB,aAAa;AAAA,UAC3E,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,WAAW;AAChD,WAAO,MAAM,SAAS,oBAAoB,WAAW,WAAW;AAAA,EAClE,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SAAO;AAAA,IACL,gBAAgB,MAAO,0BAA0B,UAAU;AAAA,IAC3D,eAAe,MAAO,0BAA0B,UAAU;AAAA,EAC5D;AACF;AAEA,0BAA0B;AACxB,QAAM,QAAQ,IAAI,YAAY,cAAc;AAC5C,WAAS,cAAc,KAAK;AAC9B;AAEA,sCACE,MACA,SACA,QACA,EAAE,YACF;AACA,QAAM,SAAS,OAAO,cAAc;AACpC,QAAM,QAAQ,IAAI,YAAY,MAAM,EAAE,SAAS,OAAO,YAAY,MAAM,OAAO,CAAC;AAChF,MAAI;AAAS,WAAO,iBAAiB,MAAM,SAA0B,EAAE,MAAM,KAAK,CAAC;AAEnF,MAAI,UAAU;AACZ,gCAA4B,QAAQ,KAAK;AAAA,EAC3C,OAAO;AACL,WAAO,cAAc,KAAK;AAAA,EAC5B;AACF;AAEA,MAAM,OAAO;AACb,MAAM,SAAS;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/dismissable",
-  "version": "1.0.1-beta.100",
+  "version": "1.0.1-beta.103",
   "sideEffects": true,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -19,17 +19,17 @@
     "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.100",
-    "@tamagui/core": "^1.0.1-beta.100"
+    "@tamagui/compose-refs": "^1.0.1-beta.103",
+    "@tamagui/core": "^1.0.1-beta.103",
+    "@tamagui/use-event": "^1.0.1-beta.103"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.100",
+    "@tamagui/build": "^1.0.1-beta.103",
     "react": "*",
     "react-dom": "*"
   },

package/src/Dismissable.tsx

@@ -1,10 +1,10 @@
 // forked from radix-ui
 // https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324
 
-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 { useEvent } from '@tamagui/use-event'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 
@@ -198,7 +198,7 @@ export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
  * Returns props to pass to the node we want to check for outside events.
  */
 function usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {
-  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener
+  const handlePointerDownOutside = useEvent(onPointerDownOutside) as EventListener
   const isPointerInsideReactTreeRef = React.useRef(false)
   const handleClickRef = React.useRef(() => {})
 
@@ -272,7 +272,7 @@ function usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutside
  * Returns props to pass to the root (node) of the subtree we want to check.
  */
 function useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {
-  const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener
+  const handleFocusOutside = useEvent(onFocusOutside) as EventListener
   const isFocusInsideReactTreeRef = React.useRef(false)
 
   React.useEffect(() => {