96 lines
4.3 KiB
JavaScript
96 lines
4.3 KiB
JavaScript
'use client';
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
Object.defineProperty(exports, "useToasterFocusManagement_unstable", {
|
|
enumerable: true,
|
|
get: function() {
|
|
return useToasterFocusManagement_unstable;
|
|
}
|
|
});
|
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
const _ToastContainer = require("../ToastContainer");
|
|
const noop = ()=>undefined;
|
|
function useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts) {
|
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
const cleanupListenersRef = _react.useRef(noop);
|
|
return _react.useCallback((el)=>{
|
|
if (!el || !targetDocument) {
|
|
cleanupListenersRef.current();
|
|
cleanupListenersRef.current = noop;
|
|
return;
|
|
}
|
|
const toastContainerWalker = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode (node) {
|
|
if ((0, _reactutilities.isHTMLElement)(node) && node.classList.contains(_ToastContainer.toastContainerClassNames.root)) {
|
|
return NodeFilter.FILTER_ACCEPT;
|
|
}
|
|
return NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
/**
|
|
* FIXME: https://github.com/microsoft/tabster/issues/299
|
|
* Toasts should be arrow navigable and focus should be trapped in a stack of tasts
|
|
* This is a temporary measure, Tabster does not have an API yet to enable mover arrow keys from within grouppers
|
|
* Once tabster fully supports this use case, remove this hook
|
|
*/ const keydownListener = (e)=>{
|
|
const { target, key } = e;
|
|
if (!(0, _reactutilities.isHTMLElement)(target)) {
|
|
return;
|
|
}
|
|
if (key === _keyboardkeys.ArrowDown) {
|
|
toastContainerWalker.currentNode = target;
|
|
let nextToastContainer = toastContainerWalker.nextNode();
|
|
if (!nextToastContainer) {
|
|
toastContainerWalker.currentNode = el;
|
|
nextToastContainer = toastContainerWalker.nextNode();
|
|
}
|
|
if ((0, _reactutilities.isHTMLElement)(nextToastContainer)) {
|
|
nextToastContainer.focus();
|
|
}
|
|
}
|
|
if (key === _keyboardkeys.ArrowUp) {
|
|
toastContainerWalker.currentNode = target;
|
|
let prevToastContainer = toastContainerWalker.previousNode();
|
|
if (prevToastContainer && prevToastContainer.contains(target)) {
|
|
prevToastContainer = toastContainerWalker.previousNode();
|
|
}
|
|
if (!prevToastContainer) {
|
|
toastContainerWalker.currentNode = el;
|
|
prevToastContainer = toastContainerWalker.lastChild();
|
|
}
|
|
if ((0, _reactutilities.isHTMLElement)(prevToastContainer)) {
|
|
prevToastContainer.focus();
|
|
}
|
|
}
|
|
};
|
|
const focusInListener = (e)=>{
|
|
if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
|
|
pauseAllToasts();
|
|
}
|
|
};
|
|
const focusOutListener = (e)=>{
|
|
if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
|
|
playAllToasts();
|
|
}
|
|
};
|
|
el.addEventListener('keydown', keydownListener);
|
|
el.addEventListener('focusin', focusInListener);
|
|
el.addEventListener('focusout', focusOutListener);
|
|
cleanupListenersRef.current = ()=>{
|
|
el.removeEventListener('keydown', keydownListener);
|
|
el.removeEventListener('focusin', focusInListener);
|
|
el.removeEventListener('focusout', focusOutListener);
|
|
};
|
|
}, [
|
|
targetDocument,
|
|
pauseAllToasts,
|
|
playAllToasts
|
|
]);
|
|
}
|