@postenbring/hedwig-react/dist/chunk-HOLFVKXQ.mjs

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import {
  CloseIcon,
  MenuIcon
} from "./chunk-XMDDGSCF.mjs";
import {
  focusTrap,
  inertPropValue
} from "./chunk-3V4GFS46.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-YOSPWY5K.mjs";

// src/navbar/navbar-expandable-menu.tsx
import { createContext, useContext, forwardRef, useState, useEffect, useId } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var ExpandableMenuContext = createContext(null);
var useNavbarExpendableMenuContext = () => {
  const value = useContext(ExpandableMenuContext);
  if (value === null) {
    throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
  }
  return value;
};
function NavbarExpandableMenu({ children }) {
  const contentId = useId();
  const [open, setOpen] = useState(false);
  useEffect(() => {
    if (open) {
      window.scrollTo(0, 0);
      document.body.classList.add(clsx("hds-navbar-scroll-lock"));
      const releaseFocusTrap = focusTrap(
        document.getElementsByClassName(clsx("hds-navbar"))[0]
      );
      return () => {
        document.body.classList.remove(clsx("hds-navbar-scroll-lock"));
        releaseFocusTrap();
      };
    }
  }, [open]);
  return /* @__PURE__ */ jsx(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
}
NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
var NavbarExpandableMenuTrigger = 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__ */ jsxs(
      "button",
      __spreadProps(__spreadValues({
        "aria-expanded": open,
        "aria-controls": contentId,
        "aria-label": open ? whenOpenHelperTitle : whenClosedHelperTitle,
        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__ */ jsxs("span", { className: "hds-navbar__item-responsive-text", children: [
            /* @__PURE__ */ jsx("span", { "aria-hidden": !open, className: clsx("hds-navbar__item-whenopentext"), children: whenOpenText }),
            /* @__PURE__ */ jsx("span", { "aria-hidden": open, className: clsx("hds-navbar__item-whenclosedtext"), children: whenClosedText })
          ] }),
          /* @__PURE__ */ jsx("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {}) })
        ]
      })
    );
  }
);
NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
var NavbarExpandableMenuContent = forwardRef((_a, ref) => {
  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
  const { contentId, open } = useNavbarExpendableMenuContext();
  return /* @__PURE__ */ jsx(
    "section",
    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
      id: contentId,
      className: clsx("hds-navbar__expandable-menu-content", className),
      "data-state": open ? "open" : "closed"
    }), { inert: inertPropValue(!open) }), {
      ref,
      children: /* @__PURE__ */ jsx("div", { className: clsx("hds-navbar__expandable-menu-content-inner"), children })
    })
  );
});
NavbarExpandableMenuContent.displayName = "Navbar.ExpandableMenuContent";

export {
  useNavbarExpendableMenuContext,
  NavbarExpandableMenu,
  NavbarExpandableMenuTrigger,
  NavbarExpandableMenuContent
};
//# sourceMappingURL=chunk-HOLFVKXQ.mjs.map