File: //home/arjun/projects/propbase/propbase_website/node_modules/@restart/ui/cjs/Nav.js
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _querySelectorAll = _interopRequireDefault(require("dom-helpers/querySelectorAll"));
var _react = _interopRequireWildcard(require("react"));
var React = _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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
// 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 = exports.default = Object.assign(Nav, {
Item: _NavItem.default
});