UNPKG

@mantine/utils

Version:

[![npm](https://img.shields.io/npm/dm/@mantine/utils)](https://www.npmjs.com/package/@mantine/utils)

110 lines (107 loc) 3.32 kB
import { findElementAncestor } from '../find-element-ancestor/find-element-ancestor.js'; 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; } function onSameLevel(target, sibling, parentSelector) { return findElementAncestor(target, parentSelector) === findElementAncestor(sibling, parentSelector); } function createScopedKeydownHandler({ parentSelector, siblingSelector, onKeyDown, loop = true, activateOnFocus = false, dir = "rtl", orientation }) { return (event) => { var _a; onKeyDown == null ? void 0 : onKeyDown(event); const elements = Array.from(((_a = findElementAncestor(event.currentTarget, parentSelector)) == null ? void 0 : _a.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; } } }; } export { createScopedKeydownHandler }; //# sourceMappingURL=create-scoped-keydown-handler.js.map