@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
239 lines • 11.6 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef, useContext, useEffect, useState } from "react";
import { Slot } from "../../slot/Slot.js";
import { composeEventHandlers } from "../../util/composeEventHandlers.js";
import { useMergeRefs } from "../../util/hooks/index.js";
import { ownerDocument } from "../../util/owner.js";
import { getSortedLayers } from "./util/sort-layers.js";
import { useEscapeKeydown } from "./util/useEscapeKeydown.js";
import { useFocusOutside } from "./util/useFocusOutside.js";
import { usePointerDownOutside } from "./util/usePointerDownOutside.js";
const BranchedLayerContext = React.createContext(null);
/* ------------------------ DismissableLayerInternal ------------------------ */
const CONTEXT_UPDATE_EVENT = "dismissableLayer.update";
let originalBodyPointerEvents;
const DismissableLayerContext = React.createContext({
layers: new Set(),
branchedLayers: new Map(),
layersWithOutsidePointerEventsDisabled: new Set(),
});
const DismissableLayer = forwardRef((_a, forwardedRef) => {
var { children, disableOutsidePointerEvents, onDismiss, onInteractOutside, onEscapeKeyDown, onFocusOutside, onPointerDownOutside, safeZone, asChild, enabled = true } = _a, restProps = __rest(_a, ["children", "disableOutsidePointerEvents", "onDismiss", "onInteractOutside", "onEscapeKeyDown", "onFocusOutside", "onPointerDownOutside", "safeZone", "asChild", "enabled"]);
const context = useContext(DismissableLayerContext);
const [, forceRerender] = useState({});
const [node, setNode] = React.useState(null);
const mergedRefs = useMergeRefs(forwardedRef, setNode);
const ownerDoc = ownerDocument(node);
/* Layer handling */
const layers = getSortedLayers(context.layers, context.branchedLayers);
const highestLayerWithOutsidePointerEventsDisabledIndex = findHighestLayerIndex(layers, context.layersWithOutsidePointerEventsDisabled);
const index = node ? layers.indexOf(node) : -1;
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
const shouldEnablePointerEvents = highestLayerWithOutsidePointerEventsDisabledIndex === -1 ||
index >= highestLayerWithOutsidePointerEventsDisabledIndex;
/**
* We want to prevent the Layer from closing when the trigger/anchor element or its child elements are interacted with.
* To achieve this, we check if the event target is the trigger/anchor or a child. If it is, we prevent default event behavior.
*/
function handleOutsideEvent(event) {
if (!(safeZone === null || safeZone === void 0 ? void 0 : safeZone.anchor)) {
return;
}
let hasPointerDownOutside = false;
if (!event.defaultPrevented) {
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutside = true;
}
}
const target = event.target;
const targetIsAnchor = safeZone.anchor.contains(target) || target === safeZone.anchor;
if (targetIsAnchor) {
event.preventDefault();
}
/**
* In Safari, if the trigger element is inside a container with tabIndex={0}, a click on the trigger
* will first fire a 'pointerdownoutside' event on the trigger itself. However, it will then fire a
* 'focusoutside' event on the container.
*
* To handle this, we ignore any 'focusoutside' events if a 'pointerdownoutside' event has already occurred.
* 'pointerdownoutside' event is sufficient to indicate interaction outside the DismissableLayer.
*/
if (event.detail.originalEvent.type === "focusin" &&
hasPointerDownOutside) {
event.preventDefault();
}
}
const pointerDownOutside = usePointerDownOutside((event) => {
if (!shouldEnablePointerEvents) {
return;
}
/**
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
*/
onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(event);
onInteractOutside === null || onInteractOutside === void 0 ? void 0 : onInteractOutside(event);
/**
* Add safeZone to prevent closing when interacting with trigger/anchor or its children.
*/
safeZone && handleOutsideEvent(event);
if (!event.defaultPrevented && onDismiss) {
onDismiss();
}
}, ownerDoc, enabled);
const focusOutside = useFocusOutside((event) => {
/**
* We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault.
*/
onFocusOutside === null || onFocusOutside === void 0 ? void 0 : onFocusOutside(event);
onInteractOutside === null || onInteractOutside === void 0 ? void 0 : onInteractOutside(event);
/**
* Add safeZone to prevent closing when interacting with trigger/anchor or its children.
*/
safeZone && handleOutsideEvent(event);
if (!event.defaultPrevented && onDismiss) {
onDismiss();
}
}, ownerDoc, enabled);
useEscapeKeydown((event) => {
/**
* The deepest nested element will always be last in the descendants list.
* This allows us to only close the highest layer when pressing escape.
*/
const isHighestLayer = index === context.layers.size - 1;
if (!isHighestLayer) {
return;
}
/**
* We call this before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
*/
onEscapeKeyDown === null || onEscapeKeyDown === void 0 ? void 0 : onEscapeKeyDown(event);
/**
* `onEscapeKeyDown` is able to preventDefault the event, thus stopping call for `onDismiss`.
* We want to `preventDefault` the escape-event to avoid sideeffect from other elements on screen
*/
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
}
}, ownerDoc, enabled);
/**
* Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
*/
useEffect(() => {
if (!node || !enabled) {
return;
}
if (disableOutsidePointerEvents) {
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
ownerDoc.body.style.pointerEvents = "none";
}
context.layersWithOutsidePointerEventsDisabled.add(node);
}
context.layers.add(node);
dispatchUpdate();
return () => {
if (disableOutsidePointerEvents &&
context.layersWithOutsidePointerEventsDisabled.size === 1) {
ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
}
};
}, [node, enabled, disableOutsidePointerEvents, context, ownerDoc]);
/**
* 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.
*
* We depend on `enabled` to clean up when the layer is disabled.
*/
// biome-ignore lint/correctness/useExhaustiveDependencies: We need to clean up after enabled changes.
useEffect(() => {
return () => {
if (!node) {
return;
}
if (context.layers.has(node) ||
context.layersWithOutsidePointerEventsDisabled.has(node)) {
context.layers.delete(node);
context.layersWithOutsidePointerEventsDisabled.delete(node);
dispatchUpdate();
}
};
}, [node, context, enabled]);
const parentBranchedLayer = useContext(BranchedLayerContext);
/**
* Handles registering and unregistering branched (nested) layers.
* When this layer has a parent, we register it as a child of the parent.
*/
useEffect(() => {
if (!node ||
!enabled ||
!parentBranchedLayer ||
node === parentBranchedLayer) {
return;
}
if (!context.branchedLayers.has(parentBranchedLayer)) {
context.branchedLayers.set(parentBranchedLayer, new Set());
}
const branchedChildren = context.branchedLayers.get(parentBranchedLayer);
branchedChildren.add(node);
dispatchUpdate();
return () => {
// Remove this node from the parent's children
branchedChildren.delete(node);
// If the parent has no more children, remove the parent from branchedLayers
if (branchedChildren.size === 0) {
context.branchedLayers.delete(parentBranchedLayer);
}
dispatchUpdate();
};
}, [node, enabled, parentBranchedLayer, context]);
/**
* Synchronizes layer state across all mounted `DismissableLayer` instances.
* All layers re-render on every context change to recalculate their position and pointer-events.
*/
useEffect(() => {
const handleUpdate = () => forceRerender({});
document.addEventListener(CONTEXT_UPDATE_EVENT, handleUpdate);
return () => document.removeEventListener(CONTEXT_UPDATE_EVENT, handleUpdate);
}, []);
const Comp = asChild ? Slot : "div";
return (React.createElement(BranchedLayerContext.Provider, { value: node },
React.createElement(Comp, Object.assign({}, restProps, { ref: mergedRefs, style: Object.assign({ pointerEvents: isBodyPointerEventsDisabled
? shouldEnablePointerEvents
? "auto"
: "none"
: undefined }, restProps.style), onFocusCapture: composeEventHandlers(restProps.onFocusCapture, focusOutside.onFocusCapture), onBlurCapture: composeEventHandlers(restProps.onBlurCapture, focusOutside.onBlurCapture), onPointerDownCapture: composeEventHandlers(restProps.onPointerDownCapture, pointerDownOutside.onPointerDownCapture) }), children)));
});
/**
* Dispatches a custom event to inform all `DismissableLayer` components to update.
*/
function dispatchUpdate() {
const event = new CustomEvent(CONTEXT_UPDATE_EVENT);
document.dispatchEvent(event);
}
/**
* Returns the index of the last layer that is found in the given subset.
* Returns -1 if no layers are found.
*/
function findHighestLayerIndex(orderedLayers, layersWithOutsidePointerEventsDisabled) {
for (let i = orderedLayers.length - 1; i >= 0; i -= 1) {
if (layersWithOutsidePointerEventsDisabled.has(orderedLayers[i])) {
return i;
}
}
return -1;
}
export { DismissableLayer };
//# sourceMappingURL=DismissableLayer.js.map