"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); 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 _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 _getRequireWildcardCache(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; } // eslint-disable-next-line @typescript-eslint/no-empty-function var noop = function noop() {}; var AbstractNav = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) { var _ref$as = _ref.as, Component = _ref$as === void 0 ? 'ul' : _ref$as, onSelect = _ref.onSelect, activeKey = _ref.activeKey, role = _ref.role, onKeyDown = _ref.onKeyDown, props = (0, _objectWithoutPropertiesLoose2.default)(_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 var forceUpdate = (0, _useForceUpdate.default)(); var needsRefocusRef = (0, _react.useRef)(false); var parentOnSelect = (0, _react.useContext)(_SelectableContext.default); var tabContext = (0, _react.useContext)(_TabContext.default); var getControlledId, getControllerId; if (tabContext) { role = role || 'tablist'; activeKey = tabContext.activeKey; getControlledId = tabContext.getControlledId; getControllerId = tabContext.getControllerId; } var listNode = (0, _react.useRef)(null); var getNextActiveChild = function getNextActiveChild(offset) { var currentListNode = listNode.current; if (!currentListNode) return null; var items = (0, _querySelectorAll.default)(currentListNode, '[data-rb-event-key]:not(.disabled)'); var activeChild = currentListNode.querySelector('.active'); if (!activeChild) return null; var index = items.indexOf(activeChild); if (index === -1) return null; var nextIndex = index + offset; if (nextIndex >= items.length) nextIndex = 0; if (nextIndex < 0) nextIndex = items.length - 1; return items[nextIndex]; }; var handleSelect = function handleSelect(key, event) { if (key == null) return; if (onSelect) onSelect(key, event); if (parentOnSelect) parentOnSelect(key, event); }; var handleKeyDown = function handleKeyDown(event) { if (onKeyDown) onKeyDown(event); var nextActiveChild; switch (event.key) { case 'ArrowLeft': case 'ArrowUp': nextActiveChild = getNextActiveChild(-1); break; case 'ArrowRight': case 'ArrowDown': nextActiveChild = getNextActiveChild(1); break; default: return; } if (!nextActiveChild) return; event.preventDefault(); handleSelect(nextActiveChild.dataset.rbEventKey, event); needsRefocusRef.current = true; forceUpdate(); }; (0, _react.useEffect)(function () { if (listNode.current && needsRefocusRef.current) { var activeChild = listNode.current.querySelector('[data-rb-event-key].active'); if (activeChild) activeChild.focus(); } needsRefocusRef.current = false; }); var mergedRef = (0, _useMergedRefs.default)(ref, listNode); return /*#__PURE__*/_react.default.createElement(_SelectableContext.default.Provider, { value: handleSelect }, /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, { value: { role: role, // used by NavLink to determine it's role activeKey: (0, _SelectableContext.makeEventKey)(activeKey), getControlledId: getControlledId || noop, getControllerId: getControllerId || noop } }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, { onKeyDown: handleKeyDown, ref: mergedRef, role: role })))); }); var _default = AbstractNav; exports.default = _default; module.exports = exports["default"];