@radix-ui/react-dismissable-layer 0.1.4-rc.8 → 0.1.5-rc.1

package/dist/index.d.ts

@@ -1,11 +1,8 @@
 import * as React from "react";
 import * as Radix from "@radix-ui/react-primitive";
 import { Primitive } from "@radix-ui/react-primitive";
-export interface DismissableLayerProps extends DismissableLayerImplProps {
-}
-export const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
 type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface DismissableLayerImplProps extends PrimitiveDivProps {
+export interface DismissableLayerProps extends PrimitiveDivProps {
     /**
      * When `true`, hover/focus/click interactions will be disabled on elements outside
      * the `DismissableLayer`. Users will need to click twice on outside elements to
@@ -33,9 +30,15 @@ interface DismissableLayerImplProps extends PrimitiveDivProps {
      * Can be prevented.
      */
     onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
-    /** Callback called when the `DismissableLayer` should be dismissed */
+    /**
+     * Handler called when the `DismissableLayer` should be dismissed
+     */
     onDismiss?: () => void;
 }
+export const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
+interface DismissableLayerBranchProps extends PrimitiveDivProps {
+}
+export const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
 type PointerDownOutsideEvent = CustomEvent<{
     originalEvent: PointerEvent;
 }>;
@@ -43,5 +46,6 @@ type FocusOutsideEvent = CustomEvent<{
     originalEvent: FocusEvent;
 }>;
 export const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
+export const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
 
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"A;A;A;AAqCA,sCAAgC,SAAQ,yBAAyB;CAAG;AAEpE,OAAA,MAAM,8GAkBL,CAAC;AAOF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,mCAAoC,SAAQ,iBAAiB;IAC3D;A;A;A;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;A;A;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAEjD;A;A;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAEhE;A;A;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEpD;A;A;A;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAC;IAEjF,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgHD,+BAA+B,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAC5E,yBAAyB,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AA0JpE,OAAA,MAAM,kGAAuB,CAAC","sources":["./packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/DismissableLayer.tsx","./packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"A;A;A;AA0BA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,sCAAgC,SAAQ,iBAAiB;IACvD;A;A;A;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;A;A;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD;A;A;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE;A;A;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD;A;A;A;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAC;IACjF;A;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAA,MAAM,8GAkGL,CAAC;AAWF,qCAAsC,SAAQ,iBAAiB;CAAG;AAElE,OAAA,MAAM,0HAmBJ,CAAC;AAMH,+BAA+B,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAC5E,yBAAyB,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AAwFpE,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,0GAA+B,CAAC","sources":["./packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/DismissableLayer.tsx","./packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/index.ts"],"sourcesContent":[null,null],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e,n,t,r=require("@radix-ui/react-use-escape-keydown").useEscapeKeydown,o=require("@radix-ui/react-use-callback-ref").useCallbackRef,u=require("@radix-ui/react-use-body-pointer-events").useBodyPointerEvents,i=require("@radix-ui/react-context").createContext,a=require("@radix-ui/react-primitive").Primitive,s=require("@radix-ui/primitive").composeEventHandlers,c=(e={},n=require("react"),Object.keys(n).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})})),e),l=(t=require("@babel/runtime/helpers/extends"))&&t.__esModule?t.default:t;const[d,f]=L(),[m,v]=P(),[E,p]=L("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[C,b]=P("RunningLayerCountWithDisabledOutsidePointerEventsProvider"),y=/*#__PURE__*/c.forwardRef(((e,n)=>{const t=0===v(),r=/*#__PURE__*/c.createElement(w,l({},e,{ref:n}));return t?/*#__PURE__*/c.createElement(d,null,/*#__PURE__*/c.createElement(E,null,r)):r}));exports.DismissableLayer=y;const w=/*#__PURE__*/c.forwardRef(((e,n)=>{const{disableOutsidePointerEvents:t=!1,onEscapeKeyDown:i,onPointerDownOutside:d,onFocusOutside:E,onInteractOutside:y,onDismiss:w,...L}=e,P=f(),D=v()+1,O=D===P,g=p(t),x=b()+(t?1:0),T=x<g;u({disabled:t}),r((e=>{O&&(null==i||i(e),e.defaultPrevented||null==w||w())}));const{onPointerDownCapture:R}=function(e){const n=o(e),t=c.useRef(!1);return c.useEffect((()=>{const e=e=>{const r=e.target;if(r&&!t.current){const t=new CustomEvent("dismissableLayer.pointerDownOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});r.addEventListener("dismissableLayer.pointerDownOutside",n,{once:!0}),r.dispatchEvent(t)}t.current=!1},r=window.setTimeout((()=>{document.addEventListener("pointerdown",e)}),0);return()=>{window.clearTimeout(r),document.removeEventListener("pointerdown",e)}}),[n]),{onPointerDownCapture:()=>t.current=!0}}((e=>{T||(null==d||d(e),null==y||y(e),e.defaultPrevented||null==w||w())})),{onBlurCapture:h,onFocusCapture:q}=function(e){const n=o(e),t=c.useRef(!1);return c.useEffect((()=>{const e=e=>{const r=e.target;if(r&&!t.current){const t=new CustomEvent("dismissableLayer.focusOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});r.addEventListener("dismissableLayer.focusOutside",n,{once:!0}),r.dispatchEvent(t)}};return document.addEventListener("focusin",e),()=>document.removeEventListener("focusin",e)}),[n]),{onFocusCapture:()=>t.current=!0,onBlurCapture:()=>t.current=!1}}((e=>{null==E||E(e),null==y||y(e),e.defaultPrevented||null==w||w()})),k=g>0;/*#__PURE__*/return c.createElement(m,{runningCount:D},/*#__PURE__*/c.createElement(C,{runningCount:x},/*#__PURE__*/c.createElement(a.div,l({},L,{ref:n,style:{pointerEvents:k?T?"none":"auto":void 0,...L.style},onPointerDownCapture:s(e.onPointerDownCapture,R),onBlurCapture:s(e.onBlurCapture,h),onFocusCapture:s(e.onFocusCapture,q)}))))}));function L(e){const[n,t]=i("TotalLayerCount",{total:0,onTotalIncrease:()=>{},onTotalDecrease:()=>{}}),r=({children:e})=>{const[t,r]=c.useState(0);/*#__PURE__*/return c.createElement(n,{total:t,onTotalIncrease:c.useCallback((()=>r((e=>e+1))),[]),onTotalDecrease:c.useCallback((()=>r((e=>e-1))),[])},e)};return[r,function(e=!0){const{total:n,onTotalIncrease:r,onTotalDecrease:o}=t("TotalLayerCountConsumer");return c.useLayoutEffect((()=>{if(e)return r(),()=>o()}),[e,r,o]),n}]}function P(e){const[n,t]=i("RunningLayerCount",{count:0}),r=e=>{const{children:t,runningCount:r}=e;/*#__PURE__*/return c.createElement(n,{count:r},t)};return[r,function(){return t("RunningLayerCountConsumer").count||0}]}const D=y;exports.Root=D;
+var e,t,n,r=require("@radix-ui/react-use-escape-keydown").useEscapeKeydown,s=require("@radix-ui/react-use-callback-ref").useCallbackRef,i=require("@radix-ui/react-use-body-pointer-events").useBodyPointerEvents,u=require("@radix-ui/react-compose-refs").useComposedRefs,o=require("@radix-ui/react-primitive").Primitive,a=require("@radix-ui/primitive").composeEventHandlers,d=(e={},t=require("react"),Object.keys(t).forEach((function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),e),c=(n=require("@babel/runtime/helpers/extends"))&&n.__esModule?n.default:n;const l=/*#__PURE__*/d.createContext({layers:new Set,layersWithOutsidePointerEventsDisabled:new Set,branches:new Set}),f=/*#__PURE__*/d.forwardRef(((e,t)=>{const{disableOutsidePointerEvents:n=!1,onEscapeKeyDown:f,onPointerDownOutside:v,onFocusOutside:E,onInteractOutside:b,onDismiss:y,...w}=e,C=d.useContext(l),[h,P]=d.useState(null),[,x]=d.useState({}),D=u(t,(e=>P(e))),O=Array.from(C.layers),[L]=[...C.layersWithOutsidePointerEventsDisabled].slice(-1),g=O.indexOf(L),q=h?O.indexOf(h):-1,R=C.layersWithOutsidePointerEventsDisabled.size>0,B=q>=g,F=function(e){const t=s(e),n=d.useRef(!1);return d.useEffect((()=>{const e=e=>{if(e.target&&!n.current){m("dismissableLayer.pointerDownOutside",t,{originalEvent:e})}n.current=!1},r=window.setTimeout((()=>{document.addEventListener("pointerdown",e)}),0);return()=>{window.clearTimeout(r),document.removeEventListener("pointerdown",e)}}),[t]),{onPointerDownCapture:()=>n.current=!0}}((e=>{const t=e.target,n=[...C.branches].some((e=>e.contains(t)));B&&!n&&(null==v||v(e),null==b||b(e),e.defaultPrevented||null==y||y())})),S=function(e){const t=s(e),n=d.useRef(!1);return d.useEffect((()=>{const e=e=>{if(e.target&&!n.current){m("dismissableLayer.focusOutside",t,{originalEvent:e})}};return document.addEventListener("focusin",e),()=>document.removeEventListener("focusin",e)}),[t]),{onFocusCapture:()=>n.current=!0,onBlurCapture:()=>n.current=!1}}((e=>{const t=e.target;[...C.branches].some((e=>e.contains(t)))||(null==E||E(e),null==b||b(e),e.defaultPrevented||null==y||y())}));return r((e=>{q===C.layers.size-1&&(null==f||f(e),e.defaultPrevented||null==y||y())})),i({disabled:n}),d.useEffect((()=>{h&&(n&&C.layersWithOutsidePointerEventsDisabled.add(h),C.layers.add(h),p())}),[h,n,C]),d.useEffect((()=>()=>{h&&(C.layers.delete(h),C.layersWithOutsidePointerEventsDisabled.delete(h),p())}),[h,C]),d.useEffect((()=>{const e=()=>x({});return document.addEventListener("dismissableLayer.update",e),()=>document.removeEventListener("dismissableLayer.update",e)}),[]),/*#__PURE__*/d.createElement(o.div,c({},w,{ref:D,style:{pointerEvents:R?B?"auto":"none":void 0,...e.style},onFocusCapture:a(e.onFocusCapture,S.onFocusCapture),onBlurCapture:a(e.onBlurCapture,S.onBlurCapture),onPointerDownCapture:a(e.onPointerDownCapture,F.onPointerDownCapture)}))}));exports.DismissableLayer=f;const v=/*#__PURE__*/d.forwardRef(((e,t)=>{const n=d.useContext(l),r=d.useRef(null),s=u(t,r);return d.useEffect((()=>{const e=r.current;if(e)return n.branches.add(e),()=>{n.branches.delete(e)}}),[n.branches]),/*#__PURE__*/d.createElement(o.div,c({},e,{ref:s}))}));function p(){const e=new Event("dismissableLayer.update");document.dispatchEvent(e)}function m(e,t,n){const r=n.originalEvent.target,s=new CustomEvent(e,{bubbles:!1,cancelable:!0,detail:n});return t&&r.addEventListener(e,t,{once:!0}),!r.dispatchEvent(s)}exports.DismissableLayerBranch=v;const E=f;exports.Root=E;const b=v;exports.Branch=b;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n// We need to compute the total count of layers AND a running count of all layers\n// in order to find which layer is the deepest one.\n// This is use to only dismiss the deepest layer when using the escape key\n// because we bind the key listener to document so cannot take advantage of event.stopPropagation()\nconst [TotalLayerCountProvider, useTotalLayerCount] = createTotalLayerCount();\nconst [RunningLayerCountProvider, usePreviousRunningLayerCount] = createRunningLayerCount();\n\n// We need to compute the total count of layers which set `disableOutsidePointerEvents` to `true` AND\n// a running count of all the layers which set `disableOutsidePointerEvents` to `true` in order to determine\n// which layers should be dismissed when interacting outside.\n// (ie. all layers that do not have a child layer which sets `disableOutsidePointerEvents` to `true`)\nconst [\n  TotalLayerCountWithDisabledOutsidePointerEventsProvider,\n  useTotalLayerCountWithDisabledOutsidePointerEvents,\n] = createTotalLayerCount('TotalLayerCountWithDisabledOutsidePointerEventsProvider');\nconst [\n  RunningLayerCountWithDisabledOutsidePointerEventsProvider,\n  usePreviousRunningLayerCountWithDisabledOutsidePointerEvents,\n] = createRunningLayerCount('RunningLayerCountWithDisabledOutsidePointerEventsProvider');\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\n\ntype DismissableLayerElement = DismissableLayerImplElement;\ninterface DismissableLayerProps extends DismissableLayerImplProps {}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n  (props, forwardedRef) => {\n    const runningLayerCount = usePreviousRunningLayerCount();\n    const isRootLayer = runningLayerCount === 0;\n    const layer = <DismissableLayerImpl {...props} ref={forwardedRef} />;\n\n    // if it's the root layer, we wrap it with our necessary root providers\n    // (effectively we wrap the whole tree of nested layers)\n    return isRootLayer ? (\n      <TotalLayerCountProvider>\n        <TotalLayerCountWithDisabledOutsidePointerEventsProvider>\n          {layer}\n        </TotalLayerCountWithDisabledOutsidePointerEventsProvider>\n      </TotalLayerCountProvider>\n    ) : (\n      layer\n    );\n  }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DismissableLayerImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerImplProps extends PrimitiveDivProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean;\n\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void;\n\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\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  /** Callback called when the `DismissableLayer` should be dismissed */\n  onDismiss?: () => void;\n}\n\nconst DismissableLayerImpl = React.forwardRef<\n  DismissableLayerImplElement,\n  DismissableLayerImplProps\n>((props, forwardedRef) => {\n  const {\n    disableOutsidePointerEvents = false,\n    onEscapeKeyDown,\n    onPointerDownOutside,\n    onFocusOutside,\n    onInteractOutside,\n    onDismiss,\n    ...layerProps\n  } = props;\n\n  const totalLayerCount = useTotalLayerCount();\n  const prevRunningLayerCount = usePreviousRunningLayerCount();\n  const runningLayerCount = prevRunningLayerCount + 1;\n  const isDeepestLayer = runningLayerCount === totalLayerCount;\n\n  const totalLayerCountWithDisabledOutsidePointerEvents =\n    useTotalLayerCountWithDisabledOutsidePointerEvents(disableOutsidePointerEvents);\n  const prevRunningLayerCountWithDisabledOutsidePointerEvents =\n    usePreviousRunningLayerCountWithDisabledOutsidePointerEvents();\n  const runningLayerCountWithDisabledOutsidePointerEvents =\n    prevRunningLayerCountWithDisabledOutsidePointerEvents + (disableOutsidePointerEvents ? 1 : 0);\n  const containsChildLayerWithDisabledOutsidePointerEvents =\n    runningLayerCountWithDisabledOutsidePointerEvents <\n    totalLayerCountWithDisabledOutsidePointerEvents;\n\n  // Disable pointer-events on `document.body` when at least one layer is disabling outside pointer events\n  useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n  // Dismiss on escape\n  useEscapeKeydown((event) => {\n    // Only dismiss if it's the deepest layer. his is effectively mimicking\n    // event.stopPropagation from the layer with disabled outside pointer events.\n    if (isDeepestLayer) {\n      onEscapeKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  });\n\n  // Dismiss on pointer down outside\n  const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside((event) => {\n    // Only dismiss if there's no deeper layer which disabled pointer events outside itself\n    if (!containsChildLayerWithDisabledOutsidePointerEvents) {\n      onPointerDownOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  });\n\n  // Dismiss on focus outside\n  const { onBlurCapture: handleBlurCapture, onFocusCapture: handleFocusCapture } = useFocusOutside(\n    (event) => {\n      onFocusOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  );\n\n  // If we have disabled pointer events on body, we need to reset `pointerEvents: 'auto'`\n  // on some layers. This depends on which layers set `disableOutsidePointerEvents` to `true`.\n  //\n  // NOTE: it's important we set it on ALL layers that need it as we cannot simply\n  // set it on the deepest layer which sets `disableOutsidePointerEvents` to `true` and rely\n  // on inheritence. This is because layers may be rendered in different portals where\n  // inheritence wouldn't apply, so we need to set it explicity on its children too.\n  const isBodyPointerEventsDisabled = totalLayerCountWithDisabledOutsidePointerEvents > 0;\n\n  return (\n    <RunningLayerCountProvider runningCount={runningLayerCount}>\n      <RunningLayerCountWithDisabledOutsidePointerEventsProvider\n        runningCount={runningLayerCountWithDisabledOutsidePointerEvents}\n      >\n        <Primitive.div\n          {...layerProps}\n          ref={forwardedRef}\n          style={{\n            pointerEvents: isBodyPointerEventsDisabled\n              ? containsChildLayerWithDisabledOutsidePointerEvents\n                ? 'none'\n                : 'auto'\n              : undefined,\n            ...layerProps.style,\n          }}\n          onPointerDownCapture={composeEventHandlers(\n            props.onPointerDownCapture,\n            handlePointerDownCapture\n          )}\n          onBlurCapture={composeEventHandlers(props.onBlurCapture, handleBlurCapture)}\n          onFocusCapture={composeEventHandlers(props.onFocusCapture, handleFocusCapture)}\n        />\n      </RunningLayerCountWithDisabledOutsidePointerEventsProvider>\n    </RunningLayerCountProvider>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Utility hooks\n * -----------------------------------------------------------------------------------------------*/\n\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Sets up `pointerdown` listener which listens for events outside a react subtree.\n *\n * We use `pointerdown` rather than `pointerup` to mimic layer dismissing behaviour\n * present in OS which usually happens on `pointerdown`.\n *\n * Returns props to pass to the node we want to check for outside events.\n */\n\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n  const isPointerInsideReactTreeRef = React.useRef(false);\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target;\n      if (target && !isPointerInsideReactTreeRef.current) {\n        const pointerDownOutsideEvent: PointerDownOutsideEvent = new CustomEvent(\n          POINTER_DOWN_OUTSIDE,\n          { bubbles: false, cancelable: true, detail: { originalEvent: event } }\n        );\n        target.addEventListener(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, { once: true });\n        target.dispatchEvent(pointerDownOutsideEvent);\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    };\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 */\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      const target = event.target;\n      if (target && !isFocusInsideReactTreeRef.current) {\n        const focusOutsideEvent: FocusOutsideEvent = new CustomEvent(FOCUS_OUTSIDE, {\n          bubbles: false,\n          cancelable: true,\n          detail: { originalEvent: event },\n        });\n        target.addEventListener(FOCUS_OUTSIDE, handleFocusOutside, { once: true });\n        target.dispatchEvent(focusOutsideEvent);\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\n/* -------------------------------------------------------------------------------------------------\n * Layer counting utilities\n * -----------------------------------------------------------------------------------------------*/\n\nfunction createTotalLayerCount(displayName?: string) {\n  const [TotalLayerCountProviderImpl, useTotalLayerCountContext] = createContext(\n    'TotalLayerCount',\n    { total: 0, onTotalIncrease: () => {}, onTotalDecrease: () => {} }\n  );\n\n  const TotalLayerCountProvider: React.FC = ({ children }) => {\n    const [total, setTotal] = React.useState(0);\n    return (\n      <TotalLayerCountProviderImpl\n        total={total}\n        onTotalIncrease={React.useCallback(() => setTotal((n) => n + 1), [])}\n        onTotalDecrease={React.useCallback(() => setTotal((n) => n - 1), [])}\n      >\n        {children}\n      </TotalLayerCountProviderImpl>\n    );\n  };\n  if (displayName) {\n    TotalLayerCountProvider.displayName = displayName;\n  }\n\n  function useTotalLayerCount(counted = true) {\n    const { total, onTotalIncrease, onTotalDecrease } =\n      useTotalLayerCountContext('TotalLayerCountConsumer');\n\n    React.useLayoutEffect(() => {\n      if (counted) {\n        onTotalIncrease();\n        return () => onTotalDecrease();\n      }\n    }, [counted, onTotalIncrease, onTotalDecrease]);\n\n    return total;\n  }\n\n  return [TotalLayerCountProvider, useTotalLayerCount] as const;\n}\n\nfunction createRunningLayerCount(displayName?: string) {\n  const [RunningLayerCountProviderImp, useRunningLayerCount] = createContext('RunningLayerCount', {\n    count: 0,\n  });\n\n  const RunningLayerCountProvider: React.FC<{ runningCount: number }> = (props) => {\n    const { children, runningCount } = props;\n    return (\n      <RunningLayerCountProviderImp count={runningCount}>{children}</RunningLayerCountProviderImp>\n    );\n  };\n  if (displayName) {\n    RunningLayerCountProvider.displayName = displayName;\n  }\n\n  function usePreviousRunningLayerCount() {\n    const context = useRunningLayerCount('RunningLayerCountConsumer');\n    return context.count || 0;\n  }\n\n  return [RunningLayerCountProvider, usePreviousRunningLayerCount] as const;\n}\n\nconst Root = DismissableLayer;\n\nexport {\n  DismissableLayer,\n  //\n  Root,\n};\nexport type { DismissableLayerProps };\n"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","TotalLayerCountProvider","useTotalLayerCount","createTotalLayerCount","RunningLayerCountProvider","usePreviousRunningLayerCount","createRunningLayerCount","TotalLayerCountWithDisabledOutsidePointerEventsProvider","useTotalLayerCountWithDisabledOutsidePointerEvents","RunningLayerCountWithDisabledOutsidePointerEventsProvider","usePreviousRunningLayerCountWithDisabledOutsidePointerEvents","DismissableLayer","React","forwardRef","props","forwardedRef","isRootLayer","layer","_react","createElement","$cf1f9d06ae8d213f1b082610036f62b$var$DismissableLayerImpl","_babelRuntimeHelpersExtends","ref","$cf1f9d06ae8d213f1b082610036f62b$var$TotalLayerCountProvider","$cf1f9d06ae8d213f1b082610036f62b$var$TotalLayerCountWithDisabledOutsidePointerEventsProvider","DismissableLayerImpl","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","totalLayerCount","runningLayerCount","isDeepestLayer","totalLayerCountWithDisabledOutsidePointerEvents","runningLayerCountWithDisabledOutsidePointerEvents","containsChildLayerWithDisabledOutsidePointerEvents","useBodyPointerEvents","disabled","useEscapeKeydown","event","defaultPrevented","onPointerDownCapture","handlePointerDownCapture","handlePointerDownOutside","useCallbackRef","isPointerInsideReactTreeRef","useRef","useEffect","handlePointerDown","target","current","pointerDownOutsideEvent","CustomEvent","bubbles","cancelable","detail","originalEvent","addEventListener","once","dispatchEvent","timerId","window","setTimeout","document","clearTimeout","removeEventListener","usePointerDownOutside","onBlurCapture","handleBlurCapture","onFocusCapture","handleFocusCapture","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","focusOutsideEvent","useFocusOutside","isBodyPointerEventsDisabled","$cf1f9d06ae8d213f1b082610036f62b$var$RunningLayerCountProvider","runningCount","$cf1f9d06ae8d213f1b082610036f62b$var$RunningLayerCountWithDisabledOutsidePointerEventsProvider","Primitive","div","style","pointerEvents","undefined","composeEventHandlers","displayName","TotalLayerCountProviderImpl","useTotalLayerCountContext","createContext","total","onTotalIncrease","onTotalDecrease","children","setTotal","useState","useCallback","n","counted","useLayoutEffect","RunningLayerCountProviderImp","useRunningLayerCount","count","Root"],"version":3,"file":"index.js.map"}
+{"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["function $parcel$interopDefault(a) {\n  return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$reexport(e, n, v) {\n  Object.defineProperty(e, n, {get: v, enumerable: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n  Object.keys(source).forEach(function(key) {\n    if (key === 'default' || key === '__esModule') {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function get() {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n}\n\nfunction $parcel$missingModule(name) {\n  var err = new Error(\"Cannot find module '\" + name + \"'\");\n  err.code = 'MODULE_NOT_FOUND';\n  throw err;\n}\n\nvar $parcel$global =\n  typeof globalThis !== 'undefined'\n    ? globalThis\n    : typeof self !== 'undefined'\n    ? self\n    : typeof window !== 'undefined'\n    ? window\n    : typeof global !== 'undefined'\n    ? global\n    : {};\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nconst DismissableLayerContext = React.createContext({\n  layers: new Set<DismissableLayerElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n  branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, 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 `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void;\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\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 `DismissableLayer` should be dismissed\n   */\n  onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n  (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(DismissableLayerContext);\n    const [node, setNode] = React.useState<DismissableLayerElement | 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 HTMLElement;\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 HTMLElement;\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    });\n\n    useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n    React.useEffect(() => {\n      if (!node) return;\n      if (disableOutsidePointerEvents) context.layersWithOutsidePointerEventsDisabled.add(node);\n      context.layers.add(node);\n      dispatchUpdate();\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      <Primitive.div\n        {...layerProps}\n        ref={composedRefs}\n        style={{\n          pointerEvents: isBodyPointerEventsDisabled\n            ? isPointerEventsEnabled\n              ? 'auto'\n              : 'none'\n            : undefined,\n          ...props.style,\n        }}\n        onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n        onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n        onPointerDownCapture={composeEventHandlers(\n          props.onPointerDownCapture,\n          pointerDownOutside.onPointerDownCapture\n        )}\n      />\n    );\n  }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n  DismissableLayerBranchElement,\n  DismissableLayerBranchProps\n>((props, forwardedRef) => {\n  const context = React.useContext(DismissableLayerContext);\n  const ref = React.useRef<DismissableLayerBranchElement>(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 <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype 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\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.target && !isPointerInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event };\n        dispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail);\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    };\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        dispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail);\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 Event(CONTEXT_UPDATE);\n  document.dispatchEvent(event);\n}\n\nfunction dispatchCustomEvent<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) {\n  const target = detail.originalEvent.target as HTMLElement;\n  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n  if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n  return !target.dispatchEvent(event);\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n  DismissableLayer,\n  DismissableLayerBranch,\n  //\n  Root,\n  Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["dest","source","a","Object","keys","forEach","key","defineProperty","enumerable","get","__esModule","default","DismissableLayerContext","React","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","useComposedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","handlePointerDownOutside","useCallbackRef","isPointerInsideReactTreeRef","useRef","useEffect","handlePointerDown","event","target","current","dispatchCustomEvent","originalEvent","timerId","window","setTimeout","document","addEventListener","clearTimeout","removeEventListener","onPointerDownCapture","usePointerDownOutside","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","onFocusCapture","onBlurCapture","useFocusOutside","useEscapeKeydown","useBodyPointerEvents","disabled","add","dispatchUpdate","delete","handleUpdate","_react","createElement","Primitive","div","_babelRuntimeHelpersExtends","ref","style","pointerEvents","undefined","composeEventHandlers","DismissableLayerBranch","Event","dispatchEvent","name","handler","detail","CustomEvent","bubbles","cancelable","once","Root","Branch"],"version":3,"file":"index.js.map"}

package/dist/index.module.js

@@ -1,2 +1,2 @@
-import{useEscapeKeydown as e}from"@radix-ui/react-use-escape-keydown";import{useCallbackRef as t}from"@radix-ui/react-use-callback-ref";import{useBodyPointerEvents as n}from"@radix-ui/react-use-body-pointer-events";import{createContext as r}from"@radix-ui/react-context";import{Primitive as o}from"@radix-ui/react-primitive";import{composeEventHandlers as u}from"@radix-ui/primitive";import*as i from"react";import s from"@babel/runtime/helpers/esm/extends";const[a,c]=C(),[l,d]=b(),[m,f]=C("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[p,v]=b("RunningLayerCountWithDisabledOutsidePointerEventsProvider");export const DismissableLayer=/*#__PURE__*/i.forwardRef(((e,t)=>{const n=0===d(),r=/*#__PURE__*/i.createElement(E,s({},e,{ref:t}));return n?/*#__PURE__*/i.createElement(a,null,/*#__PURE__*/i.createElement(m,null,r)):r}));/*#__PURE__*/const E=/*#__PURE__*/i.forwardRef(((r,a)=>{const{disableOutsidePointerEvents:m=!1,onEscapeKeyDown:E,onPointerDownOutside:C,onFocusOutside:b,onInteractOutside:w,onDismiss:L,...y}=r,D=c(),P=d()+1,T=P===D,g=f(m),x=v()+(m?1:0),O=x<g;n({disabled:m}),e((e=>{T&&(null==E||E(e),e.defaultPrevented||null==L||L())}));const{onPointerDownCapture:R}=function(e){const n=t(e),r=i.useRef(!1);return i.useEffect((()=>{const e=e=>{const t=e.target;if(t&&!r.current){const r=new CustomEvent("dismissableLayer.pointerDownOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});t.addEventListener("dismissableLayer.pointerDownOutside",n,{once:!0}),t.dispatchEvent(r)}r.current=!1},t=window.setTimeout((()=>{document.addEventListener("pointerdown",e)}),0);return()=>{window.clearTimeout(t),document.removeEventListener("pointerdown",e)}}),[n]),{onPointerDownCapture:()=>r.current=!0}}((e=>{O||(null==C||C(e),null==w||w(e),e.defaultPrevented||null==L||L())})),{onBlurCapture:h,onFocusCapture:F}=function(e){const n=t(e),r=i.useRef(!1);return i.useEffect((()=>{const e=e=>{const t=e.target;if(t&&!r.current){const r=new CustomEvent("dismissableLayer.focusOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});t.addEventListener("dismissableLayer.focusOutside",n,{once:!0}),t.dispatchEvent(r)}};return document.addEventListener("focusin",e),()=>document.removeEventListener("focusin",e)}),[n]),{onFocusCapture:()=>r.current=!0,onBlurCapture:()=>r.current=!1}}((e=>{null==b||b(e),null==w||w(e),e.defaultPrevented||null==L||L()})),k=g>0;/*#__PURE__*/return i.createElement(l,{runningCount:P},/*#__PURE__*/i.createElement(p,{runningCount:x},/*#__PURE__*/i.createElement(o.div,s({},y,{ref:a,style:{pointerEvents:k?O?"none":"auto":void 0,...y.style},onPointerDownCapture:u(r.onPointerDownCapture,R),onBlurCapture:u(r.onBlurCapture,h),onFocusCapture:u(r.onFocusCapture,F)}))))}));function C(e){const[t,n]=r("TotalLayerCount",{total:0,onTotalIncrease:()=>{},onTotalDecrease:()=>{}}),o=({children:e})=>{const[n,r]=i.useState(0);/*#__PURE__*/return i.createElement(t,{total:n,onTotalIncrease:i.useCallback((()=>r((e=>e+1))),[]),onTotalDecrease:i.useCallback((()=>r((e=>e-1))),[])},e)};return[o,function(e=!0){const{total:t,onTotalIncrease:r,onTotalDecrease:o}=n("TotalLayerCountConsumer");return i.useLayoutEffect((()=>{if(e)return r(),()=>o()}),[e,r,o]),t}]}function b(e){const[t,n]=r("RunningLayerCount",{count:0}),o=e=>{const{children:n,runningCount:r}=e;/*#__PURE__*/return i.createElement(t,{count:r},n)};return[o,function(){return n("RunningLayerCountConsumer").count||0}]}export const Root=DismissableLayer;
+import{useEscapeKeydown as e}from"@radix-ui/react-use-escape-keydown";import{useCallbackRef as t}from"@radix-ui/react-use-callback-ref";import{useBodyPointerEvents as n}from"@radix-ui/react-use-body-pointer-events";import{useComposedRefs as r}from"@radix-ui/react-compose-refs";import{Primitive as s}from"@radix-ui/react-primitive";import{composeEventHandlers as o}from"@radix-ui/primitive";import*as i from"react";import a from"@babel/runtime/helpers/esm/extends";const u=/*#__PURE__*/i.createContext({layers:new Set,layersWithOutsidePointerEventsDisabled:new Set,branches:new Set});export const DismissableLayer=/*#__PURE__*/i.forwardRef(((l,m)=>{const{disableOutsidePointerEvents:f=!1,onEscapeKeyDown:p,onPointerDownOutside:v,onFocusOutside:b,onInteractOutside:E,onDismiss:y,...w}=l,h=i.useContext(u),[D,x]=i.useState(null),[,C]=i.useState({}),L=r(m,(e=>x(e))),P=Array.from(h.layers),[O]=[...h.layersWithOutsidePointerEventsDisabled].slice(-1),g=P.indexOf(O),B=D?P.indexOf(D):-1,R=h.layersWithOutsidePointerEventsDisabled.size>0,F=B>=g,S=function(e){const n=t(e),r=i.useRef(!1);return i.useEffect((()=>{const e=e=>{if(e.target&&!r.current){d("dismissableLayer.pointerDownOutside",n,{originalEvent:e})}r.current=!1},t=window.setTimeout((()=>{document.addEventListener("pointerdown",e)}),0);return()=>{window.clearTimeout(t),document.removeEventListener("pointerdown",e)}}),[n]),{onPointerDownCapture:()=>r.current=!0}}((e=>{const t=e.target,n=[...h.branches].some((e=>e.contains(t)));F&&!n&&(null==v||v(e),null==E||E(e),e.defaultPrevented||null==y||y())})),W=function(e){const n=t(e),r=i.useRef(!1);return i.useEffect((()=>{const e=e=>{if(e.target&&!r.current){d("dismissableLayer.focusOutside",n,{originalEvent:e})}};return document.addEventListener("focusin",e),()=>document.removeEventListener("focusin",e)}),[n]),{onFocusCapture:()=>r.current=!0,onBlurCapture:()=>r.current=!1}}((e=>{const t=e.target;[...h.branches].some((e=>e.contains(t)))||(null==b||b(e),null==E||E(e),e.defaultPrevented||null==y||y())}));return e((e=>{B===h.layers.size-1&&(null==p||p(e),e.defaultPrevented||null==y||y())})),n({disabled:f}),i.useEffect((()=>{D&&(f&&h.layersWithOutsidePointerEventsDisabled.add(D),h.layers.add(D),c())}),[D,f,h]),i.useEffect((()=>()=>{D&&(h.layers.delete(D),h.layersWithOutsidePointerEventsDisabled.delete(D),c())}),[D,h]),i.useEffect((()=>{const e=()=>C({});return document.addEventListener("dismissableLayer.update",e),()=>document.removeEventListener("dismissableLayer.update",e)}),[]),/*#__PURE__*/i.createElement(s.div,a({},w,{ref:L,style:{pointerEvents:R?F?"auto":"none":void 0,...l.style},onFocusCapture:o(l.onFocusCapture,W.onFocusCapture),onBlurCapture:o(l.onBlurCapture,W.onBlurCapture),onPointerDownCapture:o(l.onPointerDownCapture,S.onPointerDownCapture)}))}));/*#__PURE__*/export const DismissableLayerBranch=/*#__PURE__*/i.forwardRef(((e,t)=>{const n=i.useContext(u),o=i.useRef(null),c=r(t,o);return i.useEffect((()=>{const e=o.current;if(e)return n.branches.add(e),()=>{n.branches.delete(e)}}),[n.branches]),/*#__PURE__*/i.createElement(s.div,a({},e,{ref:c}))}));/*#__PURE__*/function c(){const e=new Event("dismissableLayer.update");document.dispatchEvent(e)}function d(e,t,n){const r=n.originalEvent.target,s=new CustomEvent(e,{bubbles:!1,cancelable:!0,detail:n});return t&&r.addEventListener(e,t,{once:!0}),!r.dispatchEvent(s)}export const Root=DismissableLayer;export const Branch=DismissableLayerBranch;
 //# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createContext } from '@radix-ui/react-context';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n// We need to compute the total count of layers AND a running count of all layers\n// in order to find which layer is the deepest one.\n// This is use to only dismiss the deepest layer when using the escape key\n// because we bind the key listener to document so cannot take advantage of event.stopPropagation()\nconst [TotalLayerCountProvider, useTotalLayerCount] = createTotalLayerCount();\nconst [RunningLayerCountProvider, usePreviousRunningLayerCount] = createRunningLayerCount();\n\n// We need to compute the total count of layers which set `disableOutsidePointerEvents` to `true` AND\n// a running count of all the layers which set `disableOutsidePointerEvents` to `true` in order to determine\n// which layers should be dismissed when interacting outside.\n// (ie. all layers that do not have a child layer which sets `disableOutsidePointerEvents` to `true`)\nconst [\n  TotalLayerCountWithDisabledOutsidePointerEventsProvider,\n  useTotalLayerCountWithDisabledOutsidePointerEvents,\n] = createTotalLayerCount('TotalLayerCountWithDisabledOutsidePointerEventsProvider');\nconst [\n  RunningLayerCountWithDisabledOutsidePointerEventsProvider,\n  usePreviousRunningLayerCountWithDisabledOutsidePointerEvents,\n] = createRunningLayerCount('RunningLayerCountWithDisabledOutsidePointerEventsProvider');\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\n\ntype DismissableLayerElement = DismissableLayerImplElement;\ninterface DismissableLayerProps extends DismissableLayerImplProps {}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n  (props, forwardedRef) => {\n    const runningLayerCount = usePreviousRunningLayerCount();\n    const isRootLayer = runningLayerCount === 0;\n    const layer = <DismissableLayerImpl {...props} ref={forwardedRef} />;\n\n    // if it's the root layer, we wrap it with our necessary root providers\n    // (effectively we wrap the whole tree of nested layers)\n    return isRootLayer ? (\n      <TotalLayerCountProvider>\n        <TotalLayerCountWithDisabledOutsidePointerEventsProvider>\n          {layer}\n        </TotalLayerCountWithDisabledOutsidePointerEventsProvider>\n      </TotalLayerCountProvider>\n    ) : (\n      layer\n    );\n  }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DismissableLayerImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerImplProps extends PrimitiveDivProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean;\n\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void;\n\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\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  /** Callback called when the `DismissableLayer` should be dismissed */\n  onDismiss?: () => void;\n}\n\nconst DismissableLayerImpl = React.forwardRef<\n  DismissableLayerImplElement,\n  DismissableLayerImplProps\n>((props, forwardedRef) => {\n  const {\n    disableOutsidePointerEvents = false,\n    onEscapeKeyDown,\n    onPointerDownOutside,\n    onFocusOutside,\n    onInteractOutside,\n    onDismiss,\n    ...layerProps\n  } = props;\n\n  const totalLayerCount = useTotalLayerCount();\n  const prevRunningLayerCount = usePreviousRunningLayerCount();\n  const runningLayerCount = prevRunningLayerCount + 1;\n  const isDeepestLayer = runningLayerCount === totalLayerCount;\n\n  const totalLayerCountWithDisabledOutsidePointerEvents =\n    useTotalLayerCountWithDisabledOutsidePointerEvents(disableOutsidePointerEvents);\n  const prevRunningLayerCountWithDisabledOutsidePointerEvents =\n    usePreviousRunningLayerCountWithDisabledOutsidePointerEvents();\n  const runningLayerCountWithDisabledOutsidePointerEvents =\n    prevRunningLayerCountWithDisabledOutsidePointerEvents + (disableOutsidePointerEvents ? 1 : 0);\n  const containsChildLayerWithDisabledOutsidePointerEvents =\n    runningLayerCountWithDisabledOutsidePointerEvents <\n    totalLayerCountWithDisabledOutsidePointerEvents;\n\n  // Disable pointer-events on `document.body` when at least one layer is disabling outside pointer events\n  useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n  // Dismiss on escape\n  useEscapeKeydown((event) => {\n    // Only dismiss if it's the deepest layer. his is effectively mimicking\n    // event.stopPropagation from the layer with disabled outside pointer events.\n    if (isDeepestLayer) {\n      onEscapeKeyDown?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  });\n\n  // Dismiss on pointer down outside\n  const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside((event) => {\n    // Only dismiss if there's no deeper layer which disabled pointer events outside itself\n    if (!containsChildLayerWithDisabledOutsidePointerEvents) {\n      onPointerDownOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  });\n\n  // Dismiss on focus outside\n  const { onBlurCapture: handleBlurCapture, onFocusCapture: handleFocusCapture } = useFocusOutside(\n    (event) => {\n      onFocusOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) {\n        onDismiss?.();\n      }\n    }\n  );\n\n  // If we have disabled pointer events on body, we need to reset `pointerEvents: 'auto'`\n  // on some layers. This depends on which layers set `disableOutsidePointerEvents` to `true`.\n  //\n  // NOTE: it's important we set it on ALL layers that need it as we cannot simply\n  // set it on the deepest layer which sets `disableOutsidePointerEvents` to `true` and rely\n  // on inheritence. This is because layers may be rendered in different portals where\n  // inheritence wouldn't apply, so we need to set it explicity on its children too.\n  const isBodyPointerEventsDisabled = totalLayerCountWithDisabledOutsidePointerEvents > 0;\n\n  return (\n    <RunningLayerCountProvider runningCount={runningLayerCount}>\n      <RunningLayerCountWithDisabledOutsidePointerEventsProvider\n        runningCount={runningLayerCountWithDisabledOutsidePointerEvents}\n      >\n        <Primitive.div\n          {...layerProps}\n          ref={forwardedRef}\n          style={{\n            pointerEvents: isBodyPointerEventsDisabled\n              ? containsChildLayerWithDisabledOutsidePointerEvents\n                ? 'none'\n                : 'auto'\n              : undefined,\n            ...layerProps.style,\n          }}\n          onPointerDownCapture={composeEventHandlers(\n            props.onPointerDownCapture,\n            handlePointerDownCapture\n          )}\n          onBlurCapture={composeEventHandlers(props.onBlurCapture, handleBlurCapture)}\n          onFocusCapture={composeEventHandlers(props.onFocusCapture, handleFocusCapture)}\n        />\n      </RunningLayerCountWithDisabledOutsidePointerEventsProvider>\n    </RunningLayerCountProvider>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * Utility hooks\n * -----------------------------------------------------------------------------------------------*/\n\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Sets up `pointerdown` listener which listens for events outside a react subtree.\n *\n * We use `pointerdown` rather than `pointerup` to mimic layer dismissing behaviour\n * present in OS which usually happens on `pointerdown`.\n *\n * Returns props to pass to the node we want to check for outside events.\n */\n\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n  const isPointerInsideReactTreeRef = React.useRef(false);\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target;\n      if (target && !isPointerInsideReactTreeRef.current) {\n        const pointerDownOutsideEvent: PointerDownOutsideEvent = new CustomEvent(\n          POINTER_DOWN_OUTSIDE,\n          { bubbles: false, cancelable: true, detail: { originalEvent: event } }\n        );\n        target.addEventListener(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, { once: true });\n        target.dispatchEvent(pointerDownOutsideEvent);\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    };\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 */\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      const target = event.target;\n      if (target && !isFocusInsideReactTreeRef.current) {\n        const focusOutsideEvent: FocusOutsideEvent = new CustomEvent(FOCUS_OUTSIDE, {\n          bubbles: false,\n          cancelable: true,\n          detail: { originalEvent: event },\n        });\n        target.addEventListener(FOCUS_OUTSIDE, handleFocusOutside, { once: true });\n        target.dispatchEvent(focusOutsideEvent);\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\n/* -------------------------------------------------------------------------------------------------\n * Layer counting utilities\n * -----------------------------------------------------------------------------------------------*/\n\nfunction createTotalLayerCount(displayName?: string) {\n  const [TotalLayerCountProviderImpl, useTotalLayerCountContext] = createContext(\n    'TotalLayerCount',\n    { total: 0, onTotalIncrease: () => {}, onTotalDecrease: () => {} }\n  );\n\n  const TotalLayerCountProvider: React.FC = ({ children }) => {\n    const [total, setTotal] = React.useState(0);\n    return (\n      <TotalLayerCountProviderImpl\n        total={total}\n        onTotalIncrease={React.useCallback(() => setTotal((n) => n + 1), [])}\n        onTotalDecrease={React.useCallback(() => setTotal((n) => n - 1), [])}\n      >\n        {children}\n      </TotalLayerCountProviderImpl>\n    );\n  };\n  if (displayName) {\n    TotalLayerCountProvider.displayName = displayName;\n  }\n\n  function useTotalLayerCount(counted = true) {\n    const { total, onTotalIncrease, onTotalDecrease } =\n      useTotalLayerCountContext('TotalLayerCountConsumer');\n\n    React.useLayoutEffect(() => {\n      if (counted) {\n        onTotalIncrease();\n        return () => onTotalDecrease();\n      }\n    }, [counted, onTotalIncrease, onTotalDecrease]);\n\n    return total;\n  }\n\n  return [TotalLayerCountProvider, useTotalLayerCount] as const;\n}\n\nfunction createRunningLayerCount(displayName?: string) {\n  const [RunningLayerCountProviderImp, useRunningLayerCount] = createContext('RunningLayerCount', {\n    count: 0,\n  });\n\n  const RunningLayerCountProvider: React.FC<{ runningCount: number }> = (props) => {\n    const { children, runningCount } = props;\n    return (\n      <RunningLayerCountProviderImp count={runningCount}>{children}</RunningLayerCountProviderImp>\n    );\n  };\n  if (displayName) {\n    RunningLayerCountProvider.displayName = displayName;\n  }\n\n  function usePreviousRunningLayerCount() {\n    const context = useRunningLayerCount('RunningLayerCountConsumer');\n    return context.count || 0;\n  }\n\n  return [RunningLayerCountProvider, usePreviousRunningLayerCount] as const;\n}\n\nconst Root = DismissableLayer;\n\nexport {\n  DismissableLayer,\n  //\n  Root,\n};\nexport type { DismissableLayerProps };\n"],"names":["TotalLayerCountProvider","useTotalLayerCount","createTotalLayerCount","RunningLayerCountProvider","usePreviousRunningLayerCount","createRunningLayerCount","TotalLayerCountWithDisabledOutsidePointerEventsProvider","useTotalLayerCountWithDisabledOutsidePointerEvents","RunningLayerCountWithDisabledOutsidePointerEventsProvider","usePreviousRunningLayerCountWithDisabledOutsidePointerEvents","DismissableLayer","React","forwardRef","props","forwardedRef","isRootLayer","layer","_react","createElement","$b3ca5e0c42ec5d7395c8cb24157$var$DismissableLayerImpl","_babelRuntimeHelpersEsmExtends","ref","$b3ca5e0c42ec5d7395c8cb24157$var$TotalLayerCountProvider","$b3ca5e0c42ec5d7395c8cb24157$var$TotalLayerCountWithDisabledOutsidePointerEventsProvider","DismissableLayerImpl","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","totalLayerCount","runningLayerCount","isDeepestLayer","totalLayerCountWithDisabledOutsidePointerEvents","runningLayerCountWithDisabledOutsidePointerEvents","containsChildLayerWithDisabledOutsidePointerEvents","useBodyPointerEvents","disabled","useEscapeKeydown","event","defaultPrevented","onPointerDownCapture","handlePointerDownCapture","handlePointerDownOutside","useCallbackRef","isPointerInsideReactTreeRef","useRef","useEffect","handlePointerDown","target","current","pointerDownOutsideEvent","CustomEvent","bubbles","cancelable","detail","originalEvent","addEventListener","once","dispatchEvent","timerId","window","setTimeout","document","clearTimeout","removeEventListener","usePointerDownOutside","onBlurCapture","handleBlurCapture","onFocusCapture","handleFocusCapture","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","focusOutsideEvent","useFocusOutside","isBodyPointerEventsDisabled","$b3ca5e0c42ec5d7395c8cb24157$var$RunningLayerCountProvider","runningCount","$b3ca5e0c42ec5d7395c8cb24157$var$RunningLayerCountWithDisabledOutsidePointerEventsProvider","Primitive","div","style","pointerEvents","undefined","composeEventHandlers","displayName","TotalLayerCountProviderImpl","useTotalLayerCountContext","createContext","total","onTotalIncrease","onTotalDecrease","children","setTotal","useState","useCallback","n","counted","useLayoutEffect","RunningLayerCountProviderImp","useRunningLayerCount","count","Root"],"version":3,"file":"index.module.js.map"}
+{"mappings":"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","sources":["./packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nconst DismissableLayerContext = React.createContext({\n  layers: new Set<DismissableLayerElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n  branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, 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 `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void;\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\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 `DismissableLayer` should be dismissed\n   */\n  onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n  (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(DismissableLayerContext);\n    const [node, setNode] = React.useState<DismissableLayerElement | 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 HTMLElement;\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 HTMLElement;\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    });\n\n    useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n    React.useEffect(() => {\n      if (!node) return;\n      if (disableOutsidePointerEvents) context.layersWithOutsidePointerEventsDisabled.add(node);\n      context.layers.add(node);\n      dispatchUpdate();\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      <Primitive.div\n        {...layerProps}\n        ref={composedRefs}\n        style={{\n          pointerEvents: isBodyPointerEventsDisabled\n            ? isPointerEventsEnabled\n              ? 'auto'\n              : 'none'\n            : undefined,\n          ...props.style,\n        }}\n        onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n        onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n        onPointerDownCapture={composeEventHandlers(\n          props.onPointerDownCapture,\n          pointerDownOutside.onPointerDownCapture\n        )}\n      />\n    );\n  }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n  DismissableLayerBranchElement,\n  DismissableLayerBranchProps\n>((props, forwardedRef) => {\n  const context = React.useContext(DismissableLayerContext);\n  const ref = React.useRef<DismissableLayerBranchElement>(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 <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype 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\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.target && !isPointerInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event };\n        dispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail);\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    };\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        dispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail);\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 Event(CONTEXT_UPDATE);\n  document.dispatchEvent(event);\n}\n\nfunction dispatchCustomEvent<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) {\n  const target = detail.originalEvent.target as HTMLElement;\n  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n  if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n  return !target.dispatchEvent(event);\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n  DismissableLayer,\n  DismissableLayerBranch,\n  //\n  Root,\n  Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["DismissableLayerContext","React","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","useComposedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","handlePointerDownOutside","useCallbackRef","isPointerInsideReactTreeRef","useRef","useEffect","handlePointerDown","event","target","current","dispatchCustomEvent","originalEvent","timerId","window","setTimeout","document","addEventListener","clearTimeout","removeEventListener","onPointerDownCapture","usePointerDownOutside","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","onFocusCapture","onBlurCapture","useFocusOutside","useEscapeKeydown","useBodyPointerEvents","disabled","add","dispatchUpdate","delete","handleUpdate","_react","createElement","Primitive","div","_babelRuntimeHelpersEsmExtends","ref","style","pointerEvents","undefined","composeEventHandlers","DismissableLayerBranch","Event","dispatchEvent","name","handler","detail","CustomEvent","bubbles","cancelable","once","Root","Branch"],"version":3,"file":"index.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-dismissable-layer",
-  "version": "0.1.4-rc.8",
+  "version": "0.1.5-rc.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -18,9 +18,9 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@radix-ui/primitive": "0.1.0",
-    "@radix-ui/react-context": "0.1.1",
-    "@radix-ui/react-primitive": "0.1.4-rc.8",
-    "@radix-ui/react-use-body-pointer-events": "0.1.0",
+    "@radix-ui/react-compose-refs": "0.1.0",
+    "@radix-ui/react-primitive": "0.1.4",
+    "@radix-ui/react-use-body-pointer-events": "0.1.1-rc.1",
     "@radix-ui/react-use-callback-ref": "0.1.0",
     "@radix-ui/react-use-escape-keydown": "0.1.0"
   },
@@ -38,5 +38,5 @@
   "bugs": {
     "url": "https://github.com/radix-ui/primitives/issues"
   },
-  "stableVersion": "0.1.3"
+  "stableVersion": "0.1.4"
 }