@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
359 lines (352 loc) • 15.8 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/navbar/index.tsx
var navbar_exports = {};
__export(navbar_exports, {
Navbar: () => Navbar,
NavbarButtonItem: () => NavbarButtonItem,
NavbarExpandableMenu: () => NavbarExpandableMenu,
NavbarExpandableMenuContent: () => NavbarExpandableMenuContent,
NavbarExpandableMenuTrigger: () => NavbarExpandableMenuTrigger,
NavbarItem: () => NavbarItem,
NavbarItemIcon: () => NavbarItemIcon,
NavbarLinkItem: () => NavbarLinkItem,
NavbarLogo: () => NavbarLogo,
NavbarLogoAndServiceText: () => NavbarLogoAndServiceText,
NavbarNavigation: () => NavbarNavigation,
useNavbarExpendableMenuContext: () => useNavbarExpendableMenuContext
});
module.exports = __toCommonJS(navbar_exports);
// src/navbar/navbar.tsx
var import_react3 = require("react");
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
// src/navbar/navbar-expandable-menu.tsx
var import_react2 = require("react");
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
// src/utils/utils.ts
var React = __toESM(require("react"));
var import_react = require("react");
function focusTrap(element) {
var _a, _b;
if (element === document.body) return () => {
};
let inertElements = [];
for (let el = element; el; el = el.parentElement) {
if (el === document.body) break;
for (const sibling of (_b = (_a = el.parentElement) == null ? void 0 : _a.children) != null ? _b : []) {
if (sibling === el) continue;
if (!(sibling instanceof HTMLElement)) continue;
if (sibling.hasAttribute("inert")) continue;
sibling.setAttribute("inert", "true");
inertElements.push(sibling);
}
}
return () => {
releaseFocusTrap(inertElements);
inertElements = [];
};
}
function releaseFocusTrap(inertElements) {
for (const el of inertElements) {
el.removeAttribute("inert");
}
}
var inertBooleanSupported = Number(import_react.version.split(".")[0]) >= 19;
var inertPropValue = inertBooleanSupported ? (x) => x : (x) => x ? "" : void 0;
// src/navbar/icons.tsx
var import_jsx_runtime = require("react/jsx-runtime");
function CloseIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
fill: "currentColor"
}
) });
}
function MenuIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
fill: "currentColor",
d: "M25.938 10.146a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.562-.563-.562H6.063a.57.57 0 0 0-.562.562v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Zm0 7.5a.57.57 0 0 0 .562-.563v-1.5c0-.281-.281-.563-.563-.563H6.063a.57.57 0 0 0-.562.563v1.5c0 .328.234.563.563.563h19.875Z"
}
) });
}
// src/navbar/navbar-expandable-menu.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ExpandableMenuContext = (0, import_react2.createContext)(null);
var useNavbarExpendableMenuContext = () => {
const value = (0, import_react2.useContext)(ExpandableMenuContext);
if (value === null) {
throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
}
return value;
};
function NavbarExpandableMenu({ children }) {
const contentId = (0, import_react2.useId)();
const [open, setOpen] = (0, import_react2.useState)(false);
(0, import_react2.useEffect)(() => {
if (open) {
window.scrollTo(0, 0);
document.body.classList.add((0, import_typed_classname.clsx)("hds-navbar-scroll-lock"));
const releaseFocusTrap2 = focusTrap(
document.getElementsByClassName((0, import_typed_classname.clsx)("hds-navbar"))[0]
);
return () => {
document.body.classList.remove((0, import_typed_classname.clsx)("hds-navbar-scroll-lock"));
releaseFocusTrap2();
};
}
}, [open]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
}
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
var NavbarExpandableMenuTrigger = (0, import_react2.forwardRef)(
(_a, ref) => {
var _b = _a, {
whenClosedText,
whenClosedHelperTitle,
whenOpenText,
whenOpenHelperTitle,
style,
className
} = _b, rest = __objRest(_b, [
"whenClosedText",
"whenClosedHelperTitle",
"whenOpenText",
"whenOpenHelperTitle",
"style",
"className"
]);
const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
function toggleOpen() {
setOpen(!open);
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"button",
__spreadProps(__spreadValues({
"aria-expanded": open,
"aria-controls": contentId,
"aria-label": open ? whenOpenHelperTitle : whenClosedHelperTitle,
className: (0, import_typed_classname.clsx)(
"hds-navbar__item",
className,
open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
),
onClick: toggleOpen,
ref,
title: open ? whenOpenHelperTitle : whenClosedHelperTitle,
type: "button",
style: __spreadValues({ position: "relative" }, style)
}, rest), {
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "hds-navbar__item-responsive-text", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, {}) })
]
})
);
}
);
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
var NavbarExpandableMenuContent = (0, import_react2.forwardRef)((_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
const { contentId, open } = useNavbarExpendableMenuContext();
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"section",
__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
id: contentId,
className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content", className),
"data-state": open ? "open" : "closed"
}), { inert: inertPropValue(!open) }), {
ref,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-navbar__expandable-menu-content-inner"), children })
})
);
});
NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";
// src/navbar/navbar.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var NavbarLogo = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
const Component = asChild ? import_react_slot.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname2.clsx)(`hds-navbar__logo`, className), ref }, rest), { children }));
}
);
NavbarLogo.displayName = "Navbar.Logo";
var NavbarLogoAndServiceText = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, asChild, variant, className } = _b, rest = __objRest(_b, ["children", "asChild", "variant", "className"]);
const Component = asChild ? import_react_slot.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Component,
__spreadProps(__spreadValues({
ref,
className: (0, import_typed_classname2.clsx)(
"hds-navbar__logo-and-service-text",
`hds-navbar__logo-and-service-text--${variant}`,
className
)
}, rest), {
children
})
);
}
);
NavbarLogoAndServiceText.displayName = "Navbar.NavbarLogoAndText";
var NavbarItemIcon = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_slot.Slot, __spreadProps(__spreadValues({ className: (0, import_typed_classname2.clsx)("hds-navbar__item-icon", className), ref }, rest), { children }));
}
);
NavbarItemIcon.displayName = "Navbar.ItemIcon";
var NavbarItem = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
const Component = asChild ? import_react_slot.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname2.clsx)("hds-navbar__item", className), ref }, rest), { children }));
}
);
NavbarItem.displayName = "Navbar.Item";
var NavbarButtonItem = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
const Component = asChild ? import_react_slot.Slot : "button";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-navbar__item", className),
ref,
type: "button"
}, rest), {
children
})
);
}
);
NavbarButtonItem.displayName = "Navbar.ButtonItem";
var NavbarLinkItem = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, children, className } = _b, rest = __objRest(_b, ["asChild", "children", "className"]);
const Component = asChild ? import_react_slot.Slot : "a";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname2.clsx)("hds-navbar__item", className), ref }, rest), { children }));
}
);
NavbarLinkItem.displayName = "Navbar.LinkItem";
var NavbarNavigation = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Component,
__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-navbar__navigation", className),
ref
}, rest)
);
}
);
NavbarNavigation.displayName = "Navbar.Navigation";
var Navbar = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
const Component = asChild ? import_react_slot.Slot : "header";
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Component,
__spreadProps(__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-navbar", variant && `hds-navbar--${variant}`, className),
ref
}, rest), {
children
})
);
}
);
Navbar.displayName = "Navbar";
Navbar.Logo = NavbarLogo;
Navbar.LogoAndServiceText = NavbarLogoAndServiceText;
Navbar.ExpandableMenu = NavbarExpandableMenu;
Navbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
Navbar.ExpandableMenuContent = NavbarExpandableMenuContent;
Navbar.Item = NavbarItem;
Navbar.ButtonItem = NavbarButtonItem;
Navbar.LinkItem = NavbarLinkItem;
Navbar.ItemIcon = NavbarItemIcon;
Navbar.Navigation = NavbarNavigation;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Navbar,
NavbarButtonItem,
NavbarExpandableMenu,
NavbarExpandableMenuContent,
NavbarExpandableMenuTrigger,
NavbarItem,
NavbarItemIcon,
NavbarLinkItem,
NavbarLogo,
NavbarLogoAndServiceText,
NavbarNavigation,
useNavbarExpendableMenuContext
});
//# sourceMappingURL=index.js.map