"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "useFlatTreeNavigation", { enumerable: true, get: function() { return useFlatTreeNavigation; } }); const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard"); const _reactutilities = require("@fluentui/react-utilities"); const _nextTypeAheadElement = require("../utils/nextTypeAheadElement"); const _tokens = require("../utils/tokens"); const _useRovingTabIndexes = require("./useRovingTabIndexes"); const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement"); const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react")); const _useHTMLElementWalkerRef = require("./useHTMLElementWalkerRef"); function useFlatTreeNavigation() { 'use no memo'; const { walkerRef, rootRef: walkerRootRef } = (0, _useHTMLElementWalkerRef.useHTMLElementWalkerRef)(); const { rove, initialize: initializeRovingTabIndex } = (0, _useRovingTabIndexes.useRovingTabIndex)(); const rootRefCallback = _react.useCallback((root)=>{ if (walkerRef.current && root) { initializeRovingTabIndex(walkerRef.current); } }, [ initializeRovingTabIndex, walkerRef ]); function getNextElement(data) { if (!walkerRef.current) { return null; } switch(data.type){ case _tokens.treeDataTypes.Click: return data.target; case _tokens.treeDataTypes.TypeAhead: walkerRef.current.currentElement = data.target; return (0, _nextTypeAheadElement.nextTypeAheadElement)(walkerRef.current, data.event.key); case _tokens.treeDataTypes.ArrowLeft: { const nextElement = parentElement(data.parentValue, walkerRef.current); if (!nextElement && process.env.NODE_ENV !== 'production') { // eslint-disable-next-line no-console console.warn(`@fluentui/react-tree [useFlatTreeNavigation]: \'ArrowLeft\' navigation was not possible. No parent element found for the current element:`, data.target); } return nextElement; } case _tokens.treeDataTypes.ArrowRight: { walkerRef.current.currentElement = data.target; const nextElement = firstChild(data.target, walkerRef.current); if (!nextElement && process.env.NODE_ENV !== 'production') { const ariaLevel = Number(data.target.getAttribute('aria-level')); // eslint-disable-next-line no-console console.warn(`@fluentui/react-tree [useFlatTreeNavigation]: \'ArrowRight\' navigation was not possible. No element with "aria-posinset=1" and "aria-level=${ariaLevel + 1}" was found after the current element!`, data.target); } return nextElement; } case _tokens.treeDataTypes.End: walkerRef.current.currentElement = walkerRef.current.root; return walkerRef.current.lastChild(); case _tokens.treeDataTypes.Home: walkerRef.current.currentElement = walkerRef.current.root; return walkerRef.current.firstChild(); case _tokens.treeDataTypes.ArrowDown: walkerRef.current.currentElement = data.target; return walkerRef.current.nextElement(); case _tokens.treeDataTypes.ArrowUp: walkerRef.current.currentElement = data.target; return walkerRef.current.previousElement(); } } const navigate = (0, _reactutilities.useEventCallback)((data)=>{ const nextElement = getNextElement(data); if (nextElement) { rove(nextElement); } }); return { navigate, rootRef: (0, _reactutilities.useMergedRefs)(walkerRootRef, rootRefCallback) }; } function firstChild(target, treeWalker) { const nextElement = treeWalker.nextElement(); if (!nextElement) { return null; } const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset'); const nextElementAriaLevel = nextElement.getAttribute('aria-level'); const targetAriaLevel = target.getAttribute('aria-level'); if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) { return nextElement; } return null; } function parentElement(parentValue, treeWalker) { if (parentValue === undefined) { return null; } return treeWalker.root.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${parentValue}"]`); }