@amaui/ui-react
Version:
UI for React
97 lines (96 loc) • 5.28 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.queryMatchFocusable = exports.matches = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const KEYCODES = {
tab: 'Tab'
};
const matches = (value) => {
const method = (0, utils_1.is)('element', value) && (value.matches || value['webkitMatchesSelector'] || value['mozMatchesSelector'] || value['oMatchesSelector'] || value['msMatchesSelector']);
if (!method)
return () => false;
return method.bind(value);
};
exports.matches = matches;
exports.queryMatchFocusable = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)';
const Focus = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiFocus) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const refs = {
focusStart: react_1.default.useRef(undefined),
focusEnd: react_1.default.useRef(undefined)
};
const { children } = props, other = __rest(props, ["children"]);
const getElements = (value = refs.focusStart.current) => {
// Setup siblings array and get the first sibling
const allElements = [];
let element = value.parentNode.firstChild;
// Loop through each sibling and push to the array
while (element) {
if (element.nodeType === 1 && element !== value)
allElements.push(element);
element = element.nextSibling;
}
const focusEndIndex = allElements.findIndex(item => item === refs.focusEnd.current);
return allElements.slice(0, focusEndIndex).flatMap(item => [(0, exports.matches)(item)(exports.queryMatchFocusable) ? item : undefined, ...Array.from(item.querySelectorAll(exports.queryMatchFocusable))].filter(Boolean));
};
const onKeyDownUp = (event) => {
const isTabPressed = event.key === 'Tab' || event.code === KEYCODES.tab;
if (!isTabPressed)
return;
if (event.shiftKey) {
if (document.activeElement === refs.focusStart.current) {
const elements = getElements();
if (elements.length)
elements[elements.length - 1].focus();
event.preventDefault();
}
}
else {
if (document.activeElement === refs.focusEnd.current || document.activeElement === refs.focusStart.current) {
const elements = getElements();
if (elements.length)
elements[0].focus();
event.preventDefault();
}
}
};
react_1.default.useEffect(() => {
var _a;
const rootDocument = ((_a = refs.focusStart.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document;
rootDocument.addEventListener('keydown', onKeyDownUp);
rootDocument.addEventListener('keyup', onKeyDownUp);
return () => {
rootDocument.removeEventListener('keydown', onKeyDownUp);
rootDocument.removeEventListener('keyup', onKeyDownUp);
};
}, []);
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.focusStart.current = item;
}, tabIndex: 0 }, other)), children, (0, jsx_runtime_1.jsx)("div", { ref: refs.focusEnd, tabIndex: 0 })] }));
});
Focus.displayName = 'amaui-Focus';
exports.default = Focus;