@radix-ui/react-dismissable-layer - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

dist/index.d.ts

@@ -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

dist/index.js

@@ -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

dist/index.module.js

@@ -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

package.json

 {
   "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",

New alerts

Minified code

Quality

This 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

Fixed alerts

Minified code

Quality

This 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

Improved metrics

Total package byte prevSize

51334

15.74%

Worsened metrics

Dependency count

8

60%

Lines of code

73

-9.88%

Dependency changes

• + Added

  @radix-ui/primitive@0.0.5

• + Added

  @radix-ui/react-polymorphic@0.0.12

• + Added

  @radix-ui/react-primitive@0.0.14

• + 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)