@redocly/theme
Version:
Shared UI components lib
43 lines • 1.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDialogHotKeys = useDialogHotKeys;
const react_1 = require("react");
function useDialogHotKeys(ref, onClose) {
const firstFocusableRef = (0, react_1.useRef)(null);
const lastFocusableRef = (0, react_1.useRef)(null);
const onKeyDownHandler = (event) => {
var _a, _b;
if (event.key === 'Escape') {
onClose();
}
else if (event.key === 'Tab') {
if (!event.shiftKey && document.activeElement === lastFocusableRef.current) {
event.preventDefault();
(_a = firstFocusableRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
else if (event.shiftKey && document.activeElement === firstFocusableRef.current) {
event.preventDefault();
(_b = lastFocusableRef.current) === null || _b === void 0 ? void 0 : _b.focus();
}
}
};
const onFocusableElementsHandler = () => {
var _a;
const focusableElements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input, [href], [tabindex]:not([tabindex="-1"])');
if (focusableElements && focusableElements.length > 0) {
firstFocusableRef.current = focusableElements[0];
lastFocusableRef.current = focusableElements[focusableElements.length - 1];
}
};
(0, react_1.useEffect)(() => {
document.addEventListener('keydown', onKeyDownHandler);
return () => {
document.removeEventListener('keydown', onKeyDownHandler);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
(0, react_1.useEffect)(() => {
onFocusableElementsHandler();
});
}
//# sourceMappingURL=use-dialog-hotkeys.js.map