@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
73 lines (72 loc) • 2.83 kB
JavaScript
import e from "../node_modules/clsx/dist/clsx.js";
import { useProvidedRefOrCreate as t } from "../hooks/useRef.js";
import { ChevronDownIcon as n } from "../node_modules/@primer/octicons-react/dist/index.esm.js";
import { useWindowSize as r } from "../hooks/useWindowSize.js";
import { useVisibilityObserver as i } from "./useVisibilityObserver.js";
import { useOnClickOutside as a } from "../hooks/useOnClickOutside.js";
import o from "./SubdomainNavBar.module.js";
import { useKeyboardEscape as s } from "../hooks/useKeyboardEscape.js";
import c, { forwardRef as l, useCallback as u, useRef as d, useState as f } from "react";
import { jsx as p, jsxs as m } from "react/jsx-runtime";
//#region src/SubdomainNavBar/NavigationVisbilityObserver.tsx
var h = l(({ children: n, className: a, ...s }, l) => {
let u = t(l), [d] = i(u, n), { isMedium: f } = r(), h = Object.values(d).includes(!1);
return /* @__PURE__ */ m("ul", {
className: e(o["SubdomainNavBar-primary-nav-list"], a),
ref: u,
...s,
children: [c.Children.map(n, (t) => {
if (c.isValidElement(t)) {
let n = t.props["data-navitemid"];
if (!n) return t;
let r = d[n];
return c.cloneElement(t, { className: e(t.props.className, f && r && o["SubdomainNavBar-primary-nav-list-item--visible"], f && r === !1 && o["SubdomainNavBar-primary-nav-list-item--invisible"]) });
}
return t;
}), h && /* @__PURE__ */ p(g, {
visibilityMap: d,
children: n
})]
});
});
function g({ children: t, className: r, visibilityMap: i }) {
let [l, h] = f(null), g = d(null);
a(g, () => y());
let _ = !!l, v = (e) => {
l ? y() : h(e.currentTarget);
}, y = u(() => {
h(null);
}, []);
return s(y), /* @__PURE__ */ m("li", {
className: e(o["SubdomainNavBar-primary-nav-list-item--overflow"], r),
ref: g,
children: [/* @__PURE__ */ m("button", {
"aria-expanded": _ ? "true" : "false",
"aria-controls": "more-navigation",
"aria-haspopup": "true",
onClick: v,
className: e(o["SubdomainNavBar-link"], o["SubdomainNavBar-more-link"]),
children: ["More", /* @__PURE__ */ p(n, {})]
}), /* @__PURE__ */ p("div", {
id: "more-navigation",
style: { display: _ ? "block" : "none" },
className: e(o["SubdomainNavBar-overflow-menu"]),
children: /* @__PURE__ */ p("ul", {
className: e(o["SubdomainNavBar-overflow-menu-list"]),
children: c.Children.map(t, (t) => {
if (c.isValidElement(t)) {
let n = t.props["data-navitemid"];
return !n || i[n] ? null : /* @__PURE__ */ p(c.Fragment, { children: c.cloneElement(t, {
onClick: y,
className: e(o["SubdomainNavBar-overflow-menu-item"], t.props.className)
}) });
}
return null;
})
})
})]
});
}
//#endregion
export { h as NavigationVisbilityObserver };
//# sourceMappingURL=NavigationVisbilityObserver.js.map