@postenbring/hedwig-react 2.1.2 → 2.1.3

package/dist/{chunk-ZV4GTALL.mjs → chunk-DRSAVDIE.mjs}

@@ -60,17 +60,6 @@ var NavbarExpandableMenuTrigger = forwardRef(
       "className"
     ]);
     const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
-    const [textWidth, setTextWidth] = useState(void 0);
-    const measurementId = useId();
-    useEffect(() => {
-      var _a2, _b2, _c, _d;
-      const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
-      const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
-      setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);
-    }, [measurementId]);
-    const text = open ? whenOpenText : whenClosedText;
-    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
-    const icon = open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {});
     function toggleOpen() {
       setOpen(!open);
     }
@@ -79,51 +68,23 @@ var NavbarExpandableMenuTrigger = forwardRef(
       __spreadProps(__spreadValues({
         "aria-expanded": open,
         "aria-controls": contentId,
-        className: clsx("hds-navbar__item", className),
+        className: clsx(
+          "hds-navbar__item",
+          className,
+          open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
+        ),
         onClick: toggleOpen,
         ref,
-        title,
+        title: open ? whenOpenHelperTitle : whenClosedHelperTitle,
         type: "button",
         style: __spreadValues({ position: "relative" }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: `${measurementId}-when-closed`,
-              "aria-hidden": true,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none",
-                whiteSpace: "nowrap"
-              },
-              children: whenOpenText
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: `${measurementId}-when-open`,
-              "aria-hidden": true,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none",
-                whiteSpace: "nowrap"
-              },
-              children: whenClosedText
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: { width: textWidth, whiteSpace: "nowrap" },
-              className: clsx("hds-navbar__item-responsive-text"),
-              children: text
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { width: 32, height: 32 }, children: icon })
+          /* @__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, {}) })
         ]
       })
     );
@@ -153,4 +114,4 @@ export {
   NavbarExpandableMenuTrigger,
   NavbarExpandableMenuContent
 };
-//# sourceMappingURL=chunk-ZV4GTALL.mjs.map
+//# sourceMappingURL=chunk-DRSAVDIE.mjs.map

package/dist/chunk-DRSAVDIE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\ninterface ExpandableMenuContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n}\n\nconst ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);\nexport const useNavbarExpendableMenuContext = () => {\n  const value = useContext(ExpandableMenuContext);\n  if (value === null) {\n    throw new Error(\"useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu\");\n  }\n  return value;\n};\n\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const contentId = useId();\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n      const releaseFocusTrap = focusTrap(\n        document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n      );\n\n      return () => {\n        document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n        releaseFocusTrap();\n      };\n    }\n  }, [open]);\n\n  return (\n    <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>\n      {children}\n    </ExpandableMenuContext.Provider>\n  );\n}\n\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\n\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      style,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { contentId, open, setOpen } = useNavbarExpendableMenuContext();\n\n    function toggleOpen() {\n      setOpen(!open);\n    }\n\n    return (\n      <button\n        aria-expanded={open}\n        aria-controls={contentId}\n        className={clsx(\n          \"hds-navbar__item\",\n          className as undefined,\n          open ? \"hds-navbar__item--open\" : \"hds-navbar__item--closed\",\n        )}\n        onClick={toggleOpen}\n        ref={ref}\n        title={open ? whenOpenHelperTitle : whenClosedHelperTitle}\n        type=\"button\"\n        style={{ position: \"relative\", ...style }}\n        {...rest}\n      >\n        <span className=\"hds-navbar__item-responsive-text\">\n          <span aria-hidden={!open} className={clsx(\"hds-navbar__item-whenopentext\")}>\n            {whenOpenText}\n          </span>\n          <span aria-hidden={open} className={clsx(\"hds-navbar__item-whenclosedtext\")}>\n            {whenClosedText}\n          </span>\n        </span>\n        <span style={{ width: 32, height: 32 }}>{open ? <CloseIcon /> : <MenuIcon />}</span>\n      </button>\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const NavbarExpandableMenuContent = forwardRef<\n  HTMLDivElement,\n  NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n  const { contentId, open } = useNavbarExpendableMenuContext();\n  return (\n    <section\n      {...rest}\n      id={contentId}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      {...{ inert: open ? undefined : \"true\" }}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </section>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,eAAe,YAAY,YAAY,UAAU,WAAW,aAAa;AAClF,SAAS,YAAY;AAkDjB,cA4DI,YA5DJ;AAxCJ,IAAM,wBAAwB,cAAiD,IAAI;AAC5E,IAAM,iCAAiC,MAAM;AAClD,QAAM,QAAQ,WAAW,qBAAqB;AAC9C,MAAI,UAAU,MAAM;AAClB,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AACA,SAAO;AACT;AAaO,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,YAAY,MAAM;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,MAAM;AACR,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,IAAI,KAAK,wBAAwB,CAAC;AAC1D,YAAM,mBAAmB;AAAA,QACvB,SAAS,uBAAuB,KAAK,YAAY,CAAC,EAAE,CAAC;AAAA,MACvD;AAEA,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,KAAK,wBAAwB,CAAC;AAC7D,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,WAAW,MAAM,QAAQ,GAC/D,UACH;AAEJ;AAEA,qBAAqB,cAAc;AAc5B,IAAM,8BAA8B;AAAA,EAIzC,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,IApFN,IA4EI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAKF,UAAM,EAAE,WAAW,MAAM,QAAQ,IAAI,+BAA+B;AAEpE,aAAS,aAAa;AACpB,cAAQ,CAAC,IAAI;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,OAAO,2BAA2B;AAAA,QACpC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,OAAO,OAAO,sBAAsB;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,iBAAE,UAAU,cAAe;AAAA,SAC9B,OAbL;AAAA,QAeC;AAAA,+BAAC,UAAK,WAAU,oCACd;AAAA,gCAAC,UAAK,eAAa,CAAC,MAAM,WAAW,KAAK,+BAA+B,GACtE,wBACH;AAAA,YACA,oBAAC,UAAK,eAAa,MAAM,WAAW,KAAK,iCAAiC,GACvE,0BACH;AAAA,aACF;AAAA,UACA,oBAAC,UAAK,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAI,iBAAO,oBAAC,aAAU,IAAK,oBAAC,YAAS,GAAG;AAAA;AAAA;AAAA,IAC/E;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AAUnC,IAAM,8BAA8B,WAGzC,CAAC,IAAkC,QAAQ;AAA1C,eAAE,YAAU,UAzIf,IAyIG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACb,QAAM,EAAE,WAAW,KAAK,IAAI,+BAA+B;AAC3D,SACE;AAAA,IAAC;AAAA,kEACK,OADL;AAAA,MAEC,IAAI;AAAA,MACJ,WAAW,KAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,QACxB,EAAE,OAAO,OAAO,SAAY,OAAO,IALxC;AAAA,MAMC;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":[]}

package/dist/{chunk-AQZALI2J.mjs → chunk-DTU7AXY3.mjs}

@@ -2,7 +2,7 @@ import {
   NavbarExpandableMenu,
   NavbarExpandableMenuContent,
   NavbarExpandableMenuTrigger
-} from "./chunk-ZV4GTALL.mjs";
+} from "./chunk-DRSAVDIE.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -133,4 +133,4 @@ export {
   NavbarNavigation,
   Navbar
 };
-//# sourceMappingURL=chunk-AQZALI2J.mjs.map
+//# sourceMappingURL=chunk-DTU7AXY3.mjs.map

package/dist/index.js

@@ -2056,17 +2056,6 @@ var NavbarExpandableMenuTrigger = (0, import_react38.forwardRef)(
       "className"
     ]);
     const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
-    const [textWidth, setTextWidth] = (0, import_react38.useState)(void 0);
-    const measurementId = (0, import_react38.useId)();
-    (0, import_react38.useEffect)(() => {
-      var _a2, _b2, _c, _d;
-      const widthWhenOpen = (_b2 = (_a2 = document.getElementById(`${measurementId}-when-open`)) == null ? void 0 : _a2.getBoundingClientRect().width) != null ? _b2 : 0;
-      const widthWhenClosed = (_d = (_c = document.getElementById(`${measurementId}-when-closed`)) == null ? void 0 : _c.getBoundingClientRect().width) != null ? _d : 0;
-      setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);
-    }, [measurementId]);
-    const text = open ? whenOpenText : whenClosedText;
-    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
-    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuIcon, {});
     function toggleOpen() {
       setOpen(!open);
     }
@@ -2075,51 +2064,23 @@ var NavbarExpandableMenuTrigger = (0, import_react38.forwardRef)(
       __spreadProps(__spreadValues({
         "aria-expanded": open,
         "aria-controls": contentId,
-        className: (0, import_typed_classname33.clsx)("hds-navbar__item", className),
+        className: (0, import_typed_classname33.clsx)(
+          "hds-navbar__item",
+          className,
+          open ? "hds-navbar__item--open" : "hds-navbar__item--closed"
+        ),
         onClick: toggleOpen,
         ref,
-        title,
+        title: open ? whenOpenHelperTitle : whenClosedHelperTitle,
         type: "button",
         style: __spreadValues({ position: "relative" }, style)
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            "span",
-            {
-              id: `${measurementId}-when-closed`,
-              "aria-hidden": true,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none",
-                whiteSpace: "nowrap"
-              },
-              children: whenOpenText
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            "span",
-            {
-              id: `${measurementId}-when-open`,
-              "aria-hidden": true,
-              style: {
-                position: "absolute",
-                visibility: "hidden",
-                pointerEvents: "none",
-                whiteSpace: "nowrap"
-              },
-              children: whenClosedText
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            "span",
-            {
-              style: { width: textWidth, whiteSpace: "nowrap" },
-              className: (0, import_typed_classname33.clsx)("hds-navbar__item-responsive-text"),
-              children: text
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "hds-navbar__item-responsive-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": !open, className: (0, import_typed_classname33.clsx)("hds-navbar__item-whenopentext"), children: whenOpenText }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": open, className: (0, import_typed_classname33.clsx)("hds-navbar__item-whenclosedtext"), children: whenClosedText })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { style: { width: 32, height: 32 }, children: open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MenuIcon, {}) })
         ]
       })
     );