@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
82 lines (81 loc) • 3.26 kB
JavaScript
"use client";
const require_find_element_ancestor = require("../find-element-ancestor/find-element-ancestor.cjs");
//#region packages/@mantine/core/src/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.ts
function getPreviousIndex(current, elements, loop) {
for (let i = current - 1; i >= 0; i -= 1) if (!elements[i].disabled) return i;
if (loop) {
for (let i = elements.length - 1; i > -1; i -= 1) if (!elements[i].disabled) return i;
}
return current;
}
function getNextIndex(current, elements, loop) {
for (let i = current + 1; i < elements.length; i += 1) if (!elements[i].disabled) return i;
if (loop) {
for (let i = 0; i < elements.length; i += 1) if (!elements[i].disabled) return i;
}
return current;
}
/** Validates that target element is on the same level as sibling, used to filter out children that have the same sibling selector */
function onSameLevel(target, sibling, parentSelector) {
return require_find_element_ancestor.findElementAncestor(target, parentSelector) === require_find_element_ancestor.findElementAncestor(sibling, parentSelector);
}
function createScopedKeydownHandler({ parentSelector, siblingSelector, onKeyDown, loop = true, activateOnFocus = false, dir = "rtl", orientation }) {
return (event) => {
onKeyDown?.(event);
const elements = Array.from(require_find_element_ancestor.findElementAncestor(event.currentTarget, parentSelector)?.querySelectorAll(siblingSelector) || []).filter((node) => onSameLevel(event.currentTarget, node, parentSelector));
const current = elements.findIndex((el) => event.currentTarget === el);
const _nextIndex = getNextIndex(current, elements, loop);
const _previousIndex = getPreviousIndex(current, elements, loop);
const nextIndex = dir === "rtl" ? _previousIndex : _nextIndex;
const previousIndex = dir === "rtl" ? _nextIndex : _previousIndex;
switch (event.key) {
case "ArrowRight":
if (orientation === "horizontal") {
event.stopPropagation();
event.preventDefault();
elements[nextIndex].focus();
activateOnFocus && elements[nextIndex].click();
}
break;
case "ArrowLeft":
if (orientation === "horizontal") {
event.stopPropagation();
event.preventDefault();
elements[previousIndex].focus();
activateOnFocus && elements[previousIndex].click();
}
break;
case "ArrowUp":
if (orientation === "vertical") {
event.stopPropagation();
event.preventDefault();
elements[_previousIndex].focus();
activateOnFocus && elements[_previousIndex].click();
}
break;
case "ArrowDown":
if (orientation === "vertical") {
event.stopPropagation();
event.preventDefault();
elements[_nextIndex].focus();
activateOnFocus && elements[_nextIndex].click();
}
break;
case "Home":
event.stopPropagation();
event.preventDefault();
!elements[0].disabled && elements[0].focus();
break;
case "End": {
event.stopPropagation();
event.preventDefault();
const last = elements.length - 1;
!elements[last].disabled && elements[last].focus();
break;
}
}
};
}
//#endregion
exports.createScopedKeydownHandler = createScopedKeydownHandler;
//# sourceMappingURL=create-scoped-keydown-handler.cjs.map