"use strict"; exports.__esModule = true; exports.default = void 0; var _querySelectorAll = _interopRequireDefault(require("dom-helpers/querySelectorAll")); var React = _interopRequireWildcard(require("react")); var _useForceUpdate = _interopRequireDefault(require("@restart/hooks/useForceUpdate")); var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs")); var _NavContext = _interopRequireDefault(require("./NavContext")); var _SelectableContext = _interopRequireWildcard(require("./SelectableContext")); var _TabContext = _interopRequireDefault(require("./TabContext")); var _DataKey = require("./DataKey"); var _NavItem = _interopRequireDefault(require("./NavItem")); var _jsxRuntime = require("react/jsx-runtime"); const _excluded = ["as", "onSelect", "activeKey", "role", "onKeyDown"]; function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } // eslint-disable-next-line @typescript-eslint/no-empty-function const noop = () => {}; const EVENT_KEY_ATTR = (0, _DataKey.dataAttr)('event-key'); const Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => { let { // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595 as: Component = 'div', onSelect, activeKey, role, onKeyDown } = _ref, props = _objectWithoutPropertiesLoose(_ref, _excluded); // A ref and forceUpdate for refocus, b/c we only want to trigger when needed // and don't want to reset the set in the effect const forceUpdate = (0, _useForceUpdate.default)(); const needsRefocusRef = (0, React.useRef)(false); const parentOnSelect = (0, React.useContext)(_SelectableContext.default); const tabContext = (0, React.useContext)(_TabContext.default); let getControlledId, getControllerId; if (tabContext) { role = role || 'tablist'; activeKey = tabContext.activeKey; // TODO: do we need to duplicate these? getControlledId = tabContext.getControlledId; getControllerId = tabContext.getControllerId; } const listNode = (0, React.useRef)(null); const getNextActiveTab = offset => { const currentListNode = listNode.current; if (!currentListNode) return null; const items = (0, _querySelectorAll.default)(currentListNode, `[${EVENT_KEY_ATTR}]:not([aria-disabled=true])`); const activeChild = currentListNode.querySelector('[aria-selected=true]'); if (!activeChild || activeChild !== document.activeElement) return null; const index = items.indexOf(activeChild); if (index === -1) return null; let nextIndex = index + offset; if (nextIndex >= items.length) nextIndex = 0; if (nextIndex < 0) nextIndex = items.length - 1; return items[nextIndex]; }; const handleSelect = (key, event) => { if (key == null) return; onSelect == null ? void 0 : onSelect(key, event); parentOnSelect == null ? void 0 : parentOnSelect(key, event); }; const handleKeyDown = event => { onKeyDown == null ? void 0 : onKeyDown(event); if (!tabContext) { return; } let nextActiveChild; switch (event.key) { case 'ArrowLeft': case 'ArrowUp': nextActiveChild = getNextActiveTab(-1); break; case 'ArrowRight': case 'ArrowDown': nextActiveChild = getNextActiveTab(1); break; default: return; } if (!nextActiveChild) return; event.preventDefault(); handleSelect(nextActiveChild.dataset[(0, _DataKey.dataProp)('EventKey')] || null, event); needsRefocusRef.current = true; forceUpdate(); }; (0, React.useEffect)(() => { if (listNode.current && needsRefocusRef.current) { const activeChild = listNode.current.querySelector(`[${EVENT_KEY_ATTR}][aria-selected=true]`); activeChild == null ? void 0 : activeChild.focus(); } needsRefocusRef.current = false; }); const mergedRef = (0, _useMergedRefs.default)(ref, listNode); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableContext.default.Provider, { value: handleSelect, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavContext.default.Provider, { value: { role, // used by NavLink to determine it's role activeKey: (0, _SelectableContext.makeEventKey)(activeKey), getControlledId: getControlledId || noop, getControllerId: getControllerId || noop }, children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, props, { onKeyDown: handleKeyDown, ref: mergedRef, role: role })) }) }); }); Nav.displayName = 'Nav'; var _default = Object.assign(Nav, { Item: _NavItem.default }); exports.default = _default;