@radix-ui/react-dismissable-layer
Advanced tools
Comparing version 0.0.13 to 0.0.14
@@ -1,6 +0,6 @@ | ||
import * as React from "react"; | ||
type DismissableLayerProps = { | ||
children: (args: ReturnType<typeof usePointerDownOutside> & ReturnType<typeof useFocusOutside> & { | ||
style: React.CSSProperties; | ||
}) => React.ReactElement; | ||
import { Primitive } from "@radix-ui/react-primitive"; | ||
import * as Polymorphic from "@radix-ui/react-polymorphic"; | ||
type DismissableLayerPrimitive = Polymorphic.ForwardRefComponent<Polymorphic.IntrinsicElement<typeof DismissableLayerImpl>, Polymorphic.OwnProps<typeof DismissableLayerImpl>>; | ||
export const DismissableLayer: DismissableLayerPrimitive; | ||
type DismissableLayerImplOwnProps = Polymorphic.Merge<Polymorphic.OwnProps<typeof Primitive>, { | ||
/** | ||
@@ -21,3 +21,3 @@ * When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. | ||
*/ | ||
onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void; | ||
onPointerDownOutside?: (event: PointerDownOutsideEvent) => void; | ||
/** | ||
@@ -27,3 +27,3 @@ * Event handler called when the focus moves outside of the `DismissableLayer`. | ||
*/ | ||
onFocusOutside?: (event: React.FocusEvent) => void; | ||
onFocusOutside?: (event: FocusOutsideEvent) => void; | ||
/** | ||
@@ -34,30 +34,16 @@ * Event handler called when an interaction happens outside the `DismissableLayer`. | ||
*/ | ||
onInteractOutside?: (event: MouseEvent | TouchEvent | React.FocusEvent) => void; | ||
onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void; | ||
/** Callback called when the `DismissableLayer` should be dismissed */ | ||
onDismiss?: () => void; | ||
}; | ||
export function DismissableLayer(props: DismissableLayerProps): JSX.Element; | ||
/** | ||
* Sets up mousedown/touchstart listeners which listens for pointer down events outside a react subtree. | ||
* | ||
* We use `mousedown` rather than click` for 2 reasons: | ||
* - to mimic layer dismissing behaviour present in OS which usually happens on mousedown | ||
* - to enable to us call `event.preventDefault()` and prevent focus from happening. | ||
* | ||
* Returns props to pass to the node we want to check for outside events. | ||
*/ | ||
declare function usePointerDownOutside(onPointerDownOutsideProp?: (event: MouseEvent | TouchEvent) => void): { | ||
onMouseDownCapture: (event: React.MouseEvent<Element, MouseEvent>) => void; | ||
onTouchStartCapture: (event: React.TouchEvent<Element>) => void; | ||
}; | ||
/** | ||
* Listens for when focus moves outside a react subtree. | ||
* Returns props to pass to the root (node) of the subtree we want to check. | ||
*/ | ||
declare function useFocusOutside(onFocusOutside?: (event: React.FocusEvent) => void): { | ||
onBlurCapture: (event: React.FocusEvent) => void; | ||
onFocusCapture: () => void; | ||
}; | ||
export const Root: typeof DismissableLayer; | ||
}>; | ||
type DismissableLayerImplPrimitive = Polymorphic.ForwardRefComponent<Polymorphic.IntrinsicElement<typeof Primitive>, DismissableLayerImplOwnProps>; | ||
declare const DismissableLayerImpl: DismissableLayerImplPrimitive; | ||
type PointerDownOutsideEvent = CustomEvent<{ | ||
originalEvent: PointerEvent; | ||
}>; | ||
type FocusOutsideEvent = CustomEvent<{ | ||
originalEvent: FocusEvent; | ||
}>; | ||
export const Root: DismissableLayerPrimitive; | ||
//# sourceMappingURL=index.d.ts.map |
@@ -1,2 +0,2 @@ | ||
var e,t,n=require("@radix-ui/react-use-escape-keydown").useEscapeKeydown,r=require("@radix-ui/react-use-callback-ref").useCallbackRef,u=require("@radix-ui/react-use-body-pointer-events").useBodyPointerEvents,o=(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);const[s,c]=C(),[i,a]=p(),[l,d]=C("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[f,m]=p("RunningLayerCountWithDisabledOutsidePointerEventsProvider");function v(e){const t=0===a(),n=/*#__PURE__*/o.createElement(E,e);return t?/*#__PURE__*/o.createElement(s,null,/*#__PURE__*/o.createElement(l,null,n)):n}function E(e){const{children:t,disableOutsidePointerEvents:s=!1,onEscapeKeyDown:l,onPointerDownOutside:v,onFocusOutside:E,onInteractOutside:C,onDismiss:p}=e,w=c(),P=a()+1,y=P===w,b=d(s),h=m()+(s?1:0),x=h<b;u({disabled:s}),n((e=>{y&&(null==l||l(e),e.defaultPrevented||null==p||p())}));const L=function(e){const t=r(e),n=o.useRef(!1);o.useEffect((()=>{const e=e=>{n.current||t(e),n.current=!1};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[t]);const u=()=>{n.current=!0};return{onMouseDownCapture:u,onTouchStartCapture:u}}((e=>{x||(null==v||v(e),null==C||C(e),e.defaultPrevented||null==p||p())})),O=function(e){const t=o.useRef(0);return o.useEffect((()=>()=>window.clearTimeout(t.current)),[]),{onBlurCapture:n=>{n.persist(),t.current=window.setTimeout((()=>{null==e||e(n)}),0)},onFocusCapture:()=>{window.clearTimeout(t.current)}}}((e=>{null==E||E(e),null==C||C(e),e.defaultPrevented||null==p||p()})),T=b>0&&!x;/*#__PURE__*/return o.createElement(i,{runningCount:P},/*#__PURE__*/o.createElement(f,{runningCount:h},t({style:T?{pointerEvents:"auto"}:{},...L,...O})))}function C(e){const t=/*#__PURE__*/o.createContext({total:0,setTotal:()=>{}}),n=({children:e})=>{const[n,r]=o.useState(0),u=o.useMemo((()=>({total:n,setTotal:r})),[n,r]);/*#__PURE__*/return o.createElement(t.Provider,{value:u},e)};return[n,function(e=!0){const{total:n,setTotal:r}=o.useContext(t);return o.useLayoutEffect((()=>{if(e)return r((e=>e+1)),()=>r((e=>e-1))}),[e,r]),n}]}function p(e){const t=/*#__PURE__*/o.createContext(0),n=e=>{const{children:n,runningCount:r}=e;/*#__PURE__*/return o.createElement(t.Provider,{value:r},n)};return[n,function(){return o.useContext(t)||0}]}exports.DismissableLayer=v;const w=v;exports.Root=w; | ||
var e,t,n,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,s=require("@radix-ui/react-primitive").Primitive,i=require("@radix-ui/primitive").composeEventHandlers,a=(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,d]=y(),[f,v]=w(),[E,p]=y("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[m,b]=w("RunningLayerCountWithDisabledOutsidePointerEventsProvider"),C=/*#__PURE__*/a.forwardRef(((e,t)=>{const n=0===v(),r=/*#__PURE__*/a.createElement(P,c({},e,{ref:t}));return n?/*#__PURE__*/a.createElement(l,null,/*#__PURE__*/a.createElement(E,null,r)):r}));exports.DismissableLayer=C;const P=/*#__PURE__*/a.forwardRef(((e,t)=>{const{disableOutsidePointerEvents:n=!1,onEscapeKeyDown:l,onPointerDownOutside:E,onFocusOutside:C,onInteractOutside:P,onDismiss:y,...w}=e,L=d(),x=v()+1,D=x===L,O=p(n),g=b()+(n?1:0),h=g<O;u({disabled:n}),r((e=>{D&&(null==l||l(e),e.defaultPrevented||null==y||y())}));const{onPointerDownCapture:q}=function(e){const t=o(e),n=a.useRef(!1);return a.useEffect((()=>{const e=e=>{const r=e.target;if(r&&!n.current){const n=new CustomEvent("dismissableLayer.pointerDownOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});r.addEventListener("dismissableLayer.pointerDownOutside",t,{once:!0}),r.dispatchEvent(n)}n.current=!1};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)}),[t]),{onPointerDownCapture:()=>n.current=!0}}((e=>{h||(null==E||E(e),null==P||P(e),e.defaultPrevented||null==y||y())})),{onBlurCapture:R,onFocusCapture:B}=function(e){const t=o(e),n=a.useRef(!1);return a.useEffect((()=>{const e=e=>{const r=e.target;if(r&&!n.current){const n=new CustomEvent("dismissableLayer.focusOutside",{bubbles:!1,cancelable:!0,detail:{originalEvent:e}});r.addEventListener("dismissableLayer.focusOutside",t,{once:!0}),r.dispatchEvent(n)}};return document.addEventListener("focusin",e),()=>document.removeEventListener("focusin",e)}),[t]),{onFocusCapture:()=>n.current=!0,onBlurCapture:()=>n.current=!1}}((e=>{null==C||C(e),null==P||P(e),e.defaultPrevented||null==y||y()})),F=O>0&&!h;/*#__PURE__*/return a.createElement(f,{runningCount:x},/*#__PURE__*/a.createElement(m,{runningCount:g},/*#__PURE__*/a.createElement(s,c({},w,{ref:t,style:{pointerEvents:F?"auto":void 0,...w.style},onPointerDownCapture:i(e.onPointerDownCapture,q),onBlurCapture:i(e.onBlurCapture,R),onFocusCapture:i(e.onFocusCapture,B)}))))}));function y(e){const t=/*#__PURE__*/a.createContext({total:0,setTotal:()=>{}}),n=({children:e})=>{const[n,r]=a.useState(0),o=a.useMemo((()=>({total:n,setTotal:r})),[n,r]);/*#__PURE__*/return a.createElement(t.Provider,{value:o},e)};return[n,function(e=!0){const{total:n,setTotal:r}=a.useContext(t);return a.useLayoutEffect((()=>{if(e)return r((e=>e+1)),()=>r((e=>e-1))}),[e,r]),n}]}function w(e){const t=/*#__PURE__*/a.createContext(0),n=e=>{const{children:n,runningCount:r}=e;/*#__PURE__*/return a.createElement(t.Provider,{value:r},n)};return[n,function(){return a.useContext(t)||0}]}const L=C;exports.Root=L; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,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*as r from"react";const[o,u]=f(),[s,i]=v(),[c,a]=f("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[l,d]=v("RunningLayerCountWithDisabledOutsidePointerEventsProvider");export function DismissableLayer(e){const t=0===i(),n=/*#__PURE__*/r.createElement(m,e);return t?/*#__PURE__*/r.createElement(o,null,/*#__PURE__*/r.createElement(c,null,n)):n}function m(o){const{children:c,disableOutsidePointerEvents:m=!1,onEscapeKeyDown:f,onPointerDownOutside:v,onFocusOutside:E,onInteractOutside:p,onDismiss:C}=o,w=u(),P=i()+1,x=P===w,y=a(m),L=d()+(m?1:0),b=L<y;n({disabled:m}),e((e=>{x&&(null==f||f(e),e.defaultPrevented||null==C||C())}));const h=function(e){const n=t(e),o=r.useRef(!1);r.useEffect((()=>{const e=e=>{o.current||n(e),o.current=!1};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[n]);const u=()=>{o.current=!0};return{onMouseDownCapture:u,onTouchStartCapture:u}}((e=>{b||(null==v||v(e),null==p||p(e),e.defaultPrevented||null==C||C())})),D=function(e){const t=r.useRef(0);return r.useEffect((()=>()=>window.clearTimeout(t.current)),[]),{onBlurCapture:n=>{n.persist(),t.current=window.setTimeout((()=>{null==e||e(n)}),0)},onFocusCapture:()=>{window.clearTimeout(t.current)}}}((e=>{null==E||E(e),null==p||p(e),e.defaultPrevented||null==C||C()})),T=y>0&&!b;/*#__PURE__*/return r.createElement(s,{runningCount:P},/*#__PURE__*/r.createElement(l,{runningCount:L},c({style:T?{pointerEvents:"auto"}:{},...h,...D})))}function f(e){const t=/*#__PURE__*/r.createContext({total:0,setTotal:()=>{}}),n=({children:e})=>{const[n,o]=r.useState(0),u=r.useMemo((()=>({total:n,setTotal:o})),[n,o]);/*#__PURE__*/return r.createElement(t.Provider,{value:u},e)};return[n,function(e=!0){const{total:n,setTotal:o}=r.useContext(t);return r.useLayoutEffect((()=>{if(e)return o((e=>e+1)),()=>o((e=>e-1))}),[e,o]),n}]}function v(e){const t=/*#__PURE__*/r.createContext(0),n=e=>{const{children:n,runningCount:o}=e;/*#__PURE__*/return r.createElement(t.Provider,{value:o},n)};return[n,function(){return r.useContext(t)||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{Primitive as r}from"@radix-ui/react-primitive";import{composeEventHandlers as o}from"@radix-ui/primitive";import*as u from"react";import i from"@babel/runtime/helpers/esm/extends";const[s,a]=E(),[c,l]=C(),[d,m]=E("TotalLayerCountWithDisabledOutsidePointerEventsProvider"),[f,p]=C("RunningLayerCountWithDisabledOutsidePointerEventsProvider");export const DismissableLayer=/*#__PURE__*/u.forwardRef(((e,t)=>{const n=0===l(),r=/*#__PURE__*/u.createElement(v,i({},e,{ref:t}));return n?/*#__PURE__*/u.createElement(s,null,/*#__PURE__*/u.createElement(d,null,r)):r}));/*#__PURE__*/const v=/*#__PURE__*/u.forwardRef(((s,d)=>{const{disableOutsidePointerEvents:v=!1,onEscapeKeyDown:E,onPointerDownOutside:C,onFocusOutside:b,onInteractOutside:w,onDismiss:L,...P}=s,y=a(),D=l()+1,x=D===y,O=m(v),g=p()+(v?1:0),h=g<O;n({disabled:v}),e((e=>{x&&(null==E||E(e),e.defaultPrevented||null==L||L())}));const{onPointerDownCapture:R}=function(e){const n=t(e),r=u.useRef(!1);return u.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};return document.addEventListener("pointerdown",e),()=>document.removeEventListener("pointerdown",e)}),[n]),{onPointerDownCapture:()=>r.current=!0}}((e=>{h||(null==C||C(e),null==w||w(e),e.defaultPrevented||null==L||L())})),{onBlurCapture:F,onFocusCapture:B}=function(e){const n=t(e),r=u.useRef(!1);return u.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()})),T=O>0&&!h;/*#__PURE__*/return u.createElement(c,{runningCount:D},/*#__PURE__*/u.createElement(f,{runningCount:g},/*#__PURE__*/u.createElement(r,i({},P,{ref:d,style:{pointerEvents:T?"auto":void 0,...P.style},onPointerDownCapture:o(s.onPointerDownCapture,R),onBlurCapture:o(s.onBlurCapture,F),onFocusCapture:o(s.onFocusCapture,B)}))))}));function E(e){const t=/*#__PURE__*/u.createContext({total:0,setTotal:()=>{}}),n=({children:e})=>{const[n,r]=u.useState(0),o=u.useMemo((()=>({total:n,setTotal:r})),[n,r]);/*#__PURE__*/return u.createElement(t.Provider,{value:o},e)};return[n,function(e=!0){const{total:n,setTotal:r}=u.useContext(t);return u.useLayoutEffect((()=>{if(e)return r((e=>e+1)),()=>r((e=>e-1))}),[e,r]),n}]}function C(e){const t=/*#__PURE__*/u.createContext(0),n=e=>{const{children:n,runningCount:r}=e;/*#__PURE__*/return u.createElement(t.Provider,{value:r},n)};return[n,function(){return u.useContext(t)||0}]}export const Root=DismissableLayer; | ||
//# sourceMappingURL=index.module.js.map |
{ | ||
"name": "@radix-ui/react-dismissable-layer", | ||
"version": "0.0.13", | ||
"version": "0.0.14", | ||
"license": "MIT", | ||
@@ -21,2 +21,5 @@ "source": "src/index.ts", | ||
"@babel/runtime": "^7.13.10", | ||
"@radix-ui/primitive": "0.0.5", | ||
"@radix-ui/react-polymorphic": "0.0.12", | ||
"@radix-ui/react-primitive": "0.0.14", | ||
"@radix-ui/react-use-body-pointer-events": "0.0.6", | ||
@@ -23,0 +26,0 @@ "@radix-ui/react-use-callback-ref": "0.0.5", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
51334
8
73
+ Added@radix-ui/primitive@0.0.5
+ Added@radix-ui/primitive@0.0.5(transitive)
+ Added@radix-ui/react-polymorphic@0.0.12(transitive)
+ Added@radix-ui/react-primitive@0.0.14(transitive)