Socket
Socket
Sign inDemoInstall

@radix-ui/react-dismissable-layer

Package Overview
Dependencies
Maintainers
6
Versions
190
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.0.6-rc.6 to 1.1.0-rc.1

25

dist/index.d.ts

@@ -1,6 +0,7 @@

import * as React from "react";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
export interface DismissableLayerProps extends PrimitiveDivProps {
import * as React from 'react';
import * as Radix from '@radix-ui/react-primitive';
import { Primitive } from '@radix-ui/react-primitive';
declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
interface DismissableLayerProps extends PrimitiveDivProps {
/**

@@ -38,15 +39,15 @@ * When `true`, hover/focus/click interactions will be disabled on elements outside

}
export const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
declare const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
interface DismissableLayerBranchProps extends PrimitiveDivProps {
}
export const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
type PointerDownOutsideEvent = CustomEvent<{
declare const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
declare type PointerDownOutsideEvent = CustomEvent<{
originalEvent: PointerEvent;
}>;
type FocusOutsideEvent = CustomEvent<{
declare type FocusOutsideEvent = CustomEvent<{
originalEvent: FocusEvent;
}>;
export const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
export const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
declare const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
declare const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=index.d.ts.map
export { Branch, DismissableLayer, DismissableLayerBranch, type DismissableLayerProps, Root };

492

dist/index.js

@@ -1,293 +0,245 @@

var $g2vWm$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $g2vWm$react = require("react");
var $g2vWm$radixuiprimitive = require("@radix-ui/primitive");
var $g2vWm$radixuireactprimitive = require("@radix-ui/react-primitive");
var $g2vWm$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $g2vWm$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
var $g2vWm$radixuireactuseescapekeydown = require("@radix-ui/react-use-escape-keydown");
"use strict";
(() => {
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
if (typeof require !== "undefined") return require.apply(this, arguments);
throw Error('Dynamic require of "' + x + '" is not supported');
});
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "DismissableLayer", () => $d715e0554b679f1f$export$177fb62ff3ec1f22);
$parcel$export(module.exports, "DismissableLayerBranch", () => $d715e0554b679f1f$export$4d5eb2109db14228);
$parcel$export(module.exports, "Root", () => $d715e0554b679f1f$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Branch", () => $d715e0554b679f1f$export$aecb2ddcb55c95be);
/* -------------------------------------------------------------------------------------------------
* DismissableLayer
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
const $d715e0554b679f1f$var$CONTEXT_UPDATE = 'dismissableLayer.update';
const $d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
const $d715e0554b679f1f$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
let $d715e0554b679f1f$var$originalBodyPointerEvents;
const $d715e0554b679f1f$var$DismissableLayerContext = /*#__PURE__*/ $g2vWm$react.createContext({
layers: new Set(),
layersWithOutsidePointerEventsDisabled: new Set(),
branches: new Set()
});
const $d715e0554b679f1f$export$177fb62ff3ec1f22 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
var _node$ownerDocument;
const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
const [node1, setNode] = $g2vWm$react.useState(null);
const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document;
const [, force] = $g2vWm$react.useState({});
const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNode(node)
);
const layers = Array.from(context.layers);
const [highestLayerWithOutsidePointerEventsDisabled] = [
...context.layersWithOutsidePointerEventsDisabled
].slice(-1); // prettier-ignore
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
const index = node1 ? layers.indexOf(node1) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
const pointerDownOutside = $d715e0554b679f1f$var$usePointerDownOutside((event)=>{
// packages/react/dismissable-layer/src/DismissableLayer.tsx
var React = __toESM(__require("react"));
var import_primitive = __require("@radix-ui/primitive");
var import_react_primitive = __require("@radix-ui/react-primitive");
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
var import_react_use_escape_keydown = __require("@radix-ui/react-use-escape-keydown");
var import_jsx_runtime = __require("react/jsx-runtime");
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
var CONTEXT_UPDATE = "dismissableLayer.update";
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
var originalBodyPointerEvents;
var DismissableLayerContext = React.createContext({
layers: /* @__PURE__ */ new Set(),
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
branches: /* @__PURE__ */ new Set()
});
var DismissableLayer = React.forwardRef(
(props, forwardedRef) => {
const {
disableOutsidePointerEvents = false,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
onDismiss,
...layerProps
} = props;
const context = React.useContext(DismissableLayerContext);
const [node, setNode] = React.useState(null);
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
const [, force] = React.useState({});
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node2) => setNode(node2));
const layers = Array.from(context.layers);
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
const index = node ? layers.indexOf(node) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
const pointerDownOutside = usePointerDownOutside((event) => {
const target = event.target;
const isPointerDownOnBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
const focusOutside = $d715e0554b679f1f$var$useFocusOutside((event)=>{
onPointerDownOutside?.(event);
onInteractOutside?.(event);
if (!event.defaultPrevented) onDismiss?.();
}, ownerDocument);
const focusOutside = useFocusOutside((event) => {
const target = event.target;
const isFocusInBranch = [
...context.branches
].some((branch)=>branch.contains(target)
);
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
if (isFocusInBranch) return;
onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event);
onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event);
if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
}, ownerDocument);
$g2vWm$radixuireactuseescapekeydown.useEscapeKeydown((event)=>{
onFocusOutside?.(event);
onInteractOutside?.(event);
if (!event.defaultPrevented) onDismiss?.();
}, ownerDocument);
(0, import_react_use_escape_keydown.useEscapeKeydown)((event) => {
const isHighestLayer = index === context.layers.size - 1;
if (!isHighestLayer) return;
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
onEscapeKeyDown?.(event);
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
event.preventDefault();
onDismiss();
}
}, ownerDocument);
$g2vWm$react.useEffect(()=>{
if (!node1) return;
}, ownerDocument);
React.useEffect(() => {
if (!node) return;
if (disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
$d715e0554b679f1f$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
ownerDocument.body.style.pointerEvents = 'none';
}
context.layersWithOutsidePointerEventsDisabled.add(node1);
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
ownerDocument.body.style.pointerEvents = "none";
}
context.layersWithOutsidePointerEventsDisabled.add(node);
}
context.layers.add(node1);
$d715e0554b679f1f$var$dispatchUpdate();
return ()=>{
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $d715e0554b679f1f$var$originalBodyPointerEvents;
context.layers.add(node);
dispatchUpdate();
return () => {
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
}
};
}, [
node1,
ownerDocument,
disableOutsidePointerEvents,
context
]);
/**
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
* and add it to the end again so the layering order wouldn't be _creation order_.
* We only want them to be removed from context stacks when unmounted.
*/ $g2vWm$react.useEffect(()=>{
return ()=>{
if (!node1) return;
context.layers.delete(node1);
context.layersWithOutsidePointerEventsDisabled.delete(node1);
$d715e0554b679f1f$var$dispatchUpdate();
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
React.useEffect(() => {
return () => {
if (!node) return;
context.layers.delete(node);
context.layersWithOutsidePointerEventsDisabled.delete(node);
dispatchUpdate();
};
}, [
node1,
context
]);
$g2vWm$react.useEffect(()=>{
const handleUpdate = ()=>force({})
;
document.addEventListener($d715e0554b679f1f$var$CONTEXT_UPDATE, handleUpdate);
return ()=>document.removeEventListener($d715e0554b679f1f$var$CONTEXT_UPDATE, handleUpdate)
;
}, []);
return /*#__PURE__*/ $g2vWm$react.createElement($g2vWm$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($g2vWm$babelruntimehelpersextends))({}, layerProps, {
ref: composedRefs,
style: {
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
}, [node, context]);
React.useEffect(() => {
const handleUpdate = () => force({});
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.div,
{
...layerProps,
ref: composedRefs,
style: {
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
...props.style
},
onFocusCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
onBlurCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
onPointerDownCapture: $g2vWm$radixuiprimitive.composeEventHandlers(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture)
}));
});
/*#__PURE__*/ Object.assign($d715e0554b679f1f$export$177fb62ff3ec1f22, {
displayName: $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME
});
/* -------------------------------------------------------------------------------------------------
* DismissableLayerBranch
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$BRANCH_NAME = 'DismissableLayerBranch';
const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
const ref = $g2vWm$react.useRef(null);
const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
$g2vWm$react.useEffect(()=>{
const node = ref.current;
if (node) {
context.branches.add(node);
return ()=>{
context.branches.delete(node);
};
},
onFocusCapture: (0, import_primitive.composeEventHandlers)(props.onFocusCapture, focusOutside.onFocusCapture),
onBlurCapture: (0, import_primitive.composeEventHandlers)(props.onBlurCapture, focusOutside.onBlurCapture),
onPointerDownCapture: (0, import_primitive.composeEventHandlers)(
props.onPointerDownCapture,
pointerDownOutside.onPointerDownCapture
)
}
}, [
context.branches
]);
return /*#__PURE__*/ $g2vWm$react.createElement($g2vWm$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($g2vWm$babelruntimehelpersextends))({}, props, {
ref: composedRefs
}));
});
/*#__PURE__*/ Object.assign($d715e0554b679f1f$export$4d5eb2109db14228, {
displayName: $d715e0554b679f1f$var$BRANCH_NAME
});
/* -----------------------------------------------------------------------------------------------*/ /**
* Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`
* to mimic layer dismissing behaviour present in OS.
* Returns props to pass to the node we want to check for outside events.
*/ function $d715e0554b679f1f$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handlePointerDownOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onPointerDownOutside);
const isPointerInsideReactTreeRef = $g2vWm$react.useRef(false);
const handleClickRef = $g2vWm$react.useRef(()=>{});
$g2vWm$react.useEffect(()=>{
const handlePointerDown = (event)=>{
if (event.target && !isPointerInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
function handleAndDispatchPointerDownOutsideEvent() {
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
discrete: true
});
}
/**
* On touch devices, we need to wait for a click event because browsers implement
* a ~350ms delay between the time the user stops touching the display and when the
* browser executres events. We need to ensure we don't reactivate pointer-events within
* this timeframe otherwise the browser may execute events that should have been prevented.
*
* Additionally, this also lets us deal automatically with cancellations when a click event
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
*
* This is why we also continuously remove the previous listener, because we cannot be
* certain that it was raised, and therefore cleaned-up.
*/ if (event.pointerType === 'touch') {
ownerDocument.removeEventListener('click', handleClickRef.current);
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
ownerDocument.addEventListener('click', handleClickRef.current, {
once: true
});
} else handleAndDispatchPointerDownOutsideEvent();
} else // We need to remove the event listener in case the outside click has been canceled.
// See: https://github.com/radix-ui/primitives/issues/2171
ownerDocument.removeEventListener('click', handleClickRef.current);
isPointerInsideReactTreeRef.current = false;
);
}
);
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
var BRANCH_NAME = "DismissableLayerBranch";
var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
const context = React.useContext(DismissableLayerContext);
const ref = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
React.useEffect(() => {
const node = ref.current;
if (node) {
context.branches.add(node);
return () => {
context.branches.delete(node);
};
/**
* if this hook executes in a component that mounts via a `pointerdown` event, the event
* would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
* this by delaying the event listener registration on the document.
* This is not React specific, but rather how the DOM works, ie:
* ```
* button.addEventListener('pointerdown', () => {
* console.log('I will log');
* document.addEventListener('pointerdown', () => {
* console.log('I will also log');
* })
* });
*/ const timerId = window.setTimeout(()=>{
ownerDocument.addEventListener('pointerdown', handlePointerDown);
}, 0);
return ()=>{
window.clearTimeout(timerId);
ownerDocument.removeEventListener('pointerdown', handlePointerDown);
ownerDocument.removeEventListener('click', handleClickRef.current);
};
}, [
ownerDocument,
handlePointerDownOutside
]);
}
}, [context.branches]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref: composedRefs });
});
DismissableLayerBranch.displayName = BRANCH_NAME;
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
const handlePointerDownOutside = (0, import_react_use_callback_ref.useCallbackRef)(onPointerDownOutside);
const isPointerInsideReactTreeRef = React.useRef(false);
const handleClickRef = React.useRef(() => {
});
React.useEffect(() => {
const handlePointerDown = (event) => {
if (event.target && !isPointerInsideReactTreeRef.current) {
let handleAndDispatchPointerDownOutsideEvent2 = function() {
handleAndDispatchCustomEvent(
POINTER_DOWN_OUTSIDE,
handlePointerDownOutside,
eventDetail,
{ discrete: true }
);
};
var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
const eventDetail = { originalEvent: event };
if (event.pointerType === "touch") {
ownerDocument.removeEventListener("click", handleClickRef.current);
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
} else {
handleAndDispatchPointerDownOutsideEvent2();
}
} else {
ownerDocument.removeEventListener("click", handleClickRef.current);
}
isPointerInsideReactTreeRef.current = false;
};
const timerId = window.setTimeout(() => {
ownerDocument.addEventListener("pointerdown", handlePointerDown);
}, 0);
return () => {
window.clearTimeout(timerId);
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
ownerDocument.removeEventListener("click", handleClickRef.current);
};
}, [ownerDocument, handlePointerDownOutside]);
return {
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
};
}
/**
* Listens for when focus happens outside a react subtree.
* Returns props to pass to the root (node) of the subtree we want to check.
*/ function $d715e0554b679f1f$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) {
const handleFocusOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onFocusOutside);
const isFocusInsideReactTreeRef = $g2vWm$react.useRef(false);
$g2vWm$react.useEffect(()=>{
const handleFocus = (event)=>{
if (event.target && !isFocusInsideReactTreeRef.current) {
const eventDetail = {
originalEvent: event
};
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
discrete: false
});
}
};
ownerDocument.addEventListener('focusin', handleFocus);
return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
;
}, [
ownerDocument,
handleFocusOutside
]);
}
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
const handleFocusOutside = (0, import_react_use_callback_ref.useCallbackRef)(onFocusOutside);
const isFocusInsideReactTreeRef = React.useRef(false);
React.useEffect(() => {
const handleFocus = (event) => {
if (event.target && !isFocusInsideReactTreeRef.current) {
const eventDetail = { originalEvent: event };
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
discrete: false
});
}
};
ownerDocument.addEventListener("focusin", handleFocus);
return () => ownerDocument.removeEventListener("focusin", handleFocus);
}, [ownerDocument, handleFocusOutside]);
return {
onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true
,
onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
};
}
function $d715e0554b679f1f$var$dispatchUpdate() {
const event = new CustomEvent($d715e0554b679f1f$var$CONTEXT_UPDATE);
}
function dispatchUpdate() {
const event = new CustomEvent(CONTEXT_UPDATE);
document.dispatchEvent(event);
}
function $d715e0554b679f1f$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
}
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
const target = detail.originalEvent.target;
const event = new CustomEvent(name, {
bubbles: false,
cancelable: true,
detail: detail
});
if (handler) target.addEventListener(name, handler, {
once: true
});
if (discrete) $g2vWm$radixuireactprimitive.dispatchDiscreteCustomEvent(target, event);
else target.dispatchEvent(event);
}
const $d715e0554b679f1f$export$be92b6f5f03c0fe9 = $d715e0554b679f1f$export$177fb62ff3ec1f22;
const $d715e0554b679f1f$export$aecb2ddcb55c95be = $d715e0554b679f1f$export$4d5eb2109db14228;
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
if (handler) target.addEventListener(name, handler, { once: true });
if (discrete) {
(0, import_react_primitive.dispatchDiscreteCustomEvent)(target, event);
} else {
target.dispatchEvent(event);
}
}
var Root = DismissableLayer;
var Branch = DismissableLayerBranch;
})();
//# sourceMappingURL=index.js.map

13

package.json
{
"name": "@radix-ui/react-dismissable-layer",
"version": "1.0.6-rc.6",
"version": "1.1.0-rc.1",
"license": "MIT",

@@ -31,8 +31,7 @@ "exports": {

"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-callback-ref": "1.0.1",
"@radix-ui/react-use-escape-keydown": "1.0.4-rc.6"
"@radix-ui/primitive": "1.1.0-rc.1",
"@radix-ui/react-compose-refs": "1.1.0-rc.1",
"@radix-ui/react-primitive": "1.1.0-rc.1",
"@radix-ui/react-use-callback-ref": "1.1.0-rc.1",
"@radix-ui/react-use-escape-keydown": "1.1.0-rc.1"
},

@@ -39,0 +38,0 @@ "devDependencies": {

dist/index.d.ts.map
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc