@launchpad-ui/overlay
Advanced tools
Comparing version 0.3.25 to 0.3.26
@@ -0,4 +1,4 @@ | ||
import { jsx } from "react/jsx-runtime"; | ||
import { Portal } from "@launchpad-ui/portal"; | ||
import { useState, useRef, useCallback, useEffect } from "react"; | ||
import { jsx } from "react/jsx-runtime"; | ||
const Overlay = ({ | ||
@@ -16,10 +16,13 @@ isOpen, | ||
const containerElement = useRef(null); | ||
const handleDocumentClick = useCallback((event) => { | ||
const eventTarget = event.target; | ||
const wasClickInOverlay = containerElement.current && containerElement.current.contains(eventTarget); | ||
const wasClickInBody = !!eventTarget.closest("body"); | ||
if (isOpen && canOutsideClickClose && !wasClickInOverlay && wasClickInBody) { | ||
typeof onClose === "function" && onClose(event); | ||
} | ||
}, [canOutsideClickClose, isOpen, onClose]); | ||
const handleDocumentClick = useCallback( | ||
(event) => { | ||
const eventTarget = event.target; | ||
const wasClickInOverlay = containerElement.current && containerElement.current.contains(eventTarget); | ||
const wasClickInBody = !!eventTarget.closest("body"); | ||
if (isOpen && canOutsideClickClose && !wasClickInOverlay && wasClickInBody) { | ||
typeof onClose === "function" && onClose(event); | ||
} | ||
}, | ||
[canOutsideClickClose, isOpen, onClose] | ||
); | ||
const focusContainer = useCallback(() => { | ||
@@ -31,4 +34,8 @@ requestAnimationFrame(() => { | ||
if (!containerElement.current.contains(document.activeElement)) { | ||
const autofocusElement = containerElement.current.querySelector("[autofocus]"); | ||
const tabbableElement = containerElement.current.querySelector("[tabindex]"); | ||
const autofocusElement = containerElement.current.querySelector( | ||
"[autofocus]" | ||
); | ||
const tabbableElement = containerElement.current.querySelector( | ||
"[tabindex]" | ||
); | ||
if (autofocusElement) { | ||
@@ -42,9 +49,12 @@ autofocusElement.focus(); | ||
}, [isOpen]); | ||
const handleDocumentFocus = useCallback((event) => { | ||
const eventTarget = event.target; | ||
if (enforceFocus && containerElement.current && !containerElement.current.contains(eventTarget)) { | ||
event.stopImmediatePropagation(); | ||
focusContainer(); | ||
} | ||
}, [enforceFocus, focusContainer]); | ||
const handleDocumentFocus = useCallback( | ||
(event) => { | ||
const eventTarget = event.target; | ||
if (enforceFocus && containerElement.current && !containerElement.current.contains(eventTarget)) { | ||
event.stopImmediatePropagation(); | ||
focusContainer(); | ||
} | ||
}, | ||
[enforceFocus, focusContainer] | ||
); | ||
const handleOverlayOpen = useCallback(() => { | ||
@@ -88,7 +98,3 @@ if (canOutsideClickClose) { | ||
} | ||
return /* @__PURE__ */ jsx(Portal, { | ||
onKeyDown: handleKeyDown, | ||
ref: containerElement, | ||
children: isOpen ? children : null | ||
}); | ||
return /* @__PURE__ */ jsx(Portal, { onKeyDown: handleKeyDown, ref: containerElement, children: isOpen ? children : null }); | ||
}; | ||
@@ -95,0 +101,0 @@ export { |
"use strict"; | ||
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } }); | ||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
const jsxRuntime = require("react/jsx-runtime"); | ||
const portal = require("@launchpad-ui/portal"); | ||
const react = require("react"); | ||
const jsxRuntime = require("react/jsx-runtime"); | ||
const Overlay = ({ | ||
@@ -18,10 +18,13 @@ isOpen, | ||
const containerElement = react.useRef(null); | ||
const handleDocumentClick = react.useCallback((event) => { | ||
const eventTarget = event.target; | ||
const wasClickInOverlay = containerElement.current && containerElement.current.contains(eventTarget); | ||
const wasClickInBody = !!eventTarget.closest("body"); | ||
if (isOpen && canOutsideClickClose && !wasClickInOverlay && wasClickInBody) { | ||
typeof onClose === "function" && onClose(event); | ||
} | ||
}, [canOutsideClickClose, isOpen, onClose]); | ||
const handleDocumentClick = react.useCallback( | ||
(event) => { | ||
const eventTarget = event.target; | ||
const wasClickInOverlay = containerElement.current && containerElement.current.contains(eventTarget); | ||
const wasClickInBody = !!eventTarget.closest("body"); | ||
if (isOpen && canOutsideClickClose && !wasClickInOverlay && wasClickInBody) { | ||
typeof onClose === "function" && onClose(event); | ||
} | ||
}, | ||
[canOutsideClickClose, isOpen, onClose] | ||
); | ||
const focusContainer = react.useCallback(() => { | ||
@@ -33,4 +36,8 @@ requestAnimationFrame(() => { | ||
if (!containerElement.current.contains(document.activeElement)) { | ||
const autofocusElement = containerElement.current.querySelector("[autofocus]"); | ||
const tabbableElement = containerElement.current.querySelector("[tabindex]"); | ||
const autofocusElement = containerElement.current.querySelector( | ||
"[autofocus]" | ||
); | ||
const tabbableElement = containerElement.current.querySelector( | ||
"[tabindex]" | ||
); | ||
if (autofocusElement) { | ||
@@ -44,9 +51,12 @@ autofocusElement.focus(); | ||
}, [isOpen]); | ||
const handleDocumentFocus = react.useCallback((event) => { | ||
const eventTarget = event.target; | ||
if (enforceFocus && containerElement.current && !containerElement.current.contains(eventTarget)) { | ||
event.stopImmediatePropagation(); | ||
focusContainer(); | ||
} | ||
}, [enforceFocus, focusContainer]); | ||
const handleDocumentFocus = react.useCallback( | ||
(event) => { | ||
const eventTarget = event.target; | ||
if (enforceFocus && containerElement.current && !containerElement.current.contains(eventTarget)) { | ||
event.stopImmediatePropagation(); | ||
focusContainer(); | ||
} | ||
}, | ||
[enforceFocus, focusContainer] | ||
); | ||
const handleOverlayOpen = react.useCallback(() => { | ||
@@ -90,9 +100,5 @@ if (canOutsideClickClose) { | ||
} | ||
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { | ||
onKeyDown: handleKeyDown, | ||
ref: containerElement, | ||
children: isOpen ? children : null | ||
}); | ||
return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { onKeyDown: handleKeyDown, ref: containerElement, children: isOpen ? children : null }); | ||
}; | ||
exports.Overlay = Overlay; | ||
//# sourceMappingURL=index.js.map |
import type { KeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react'; | ||
declare type OverlayProps = { | ||
type OverlayProps = { | ||
isOpen: boolean; | ||
@@ -4,0 +4,0 @@ isModal?: boolean; |
{ | ||
"name": "@launchpad-ui/overlay", | ||
"version": "0.3.25", | ||
"version": "0.3.26", | ||
"status": "beta", | ||
@@ -28,3 +28,3 @@ "publishConfig": { | ||
"dependencies": { | ||
"@launchpad-ui/portal": "~0.1.0" | ||
"@launchpad-ui/portal": "~0.1.1" | ||
}, | ||
@@ -31,0 +31,0 @@ "peerDependencies": { |
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
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
No License Found
License(Experimental) License information could not be found.
Found 1 instance in 1 package
11
0
216
22963
Updated@launchpad-ui/portal@~0.1.1