@postenbring/hedwig-react 0.0.78 → 0.0.80

package/dist/index-no-css.js

@@ -631,14 +631,15 @@ var import_typed_classname11 = require("@postenbring/hedwig-css/typed-classname"
 var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var ErrorMessage = (0, import_react12.forwardRef)(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "assertive",
         className: (0, import_typed_classname11.clsx)("hds-error-message", className),
-        id
+        id,
+        ref
       }, rest), {
         children
       })
@@ -1809,26 +1810,25 @@ NavbarNavigation.displayName = "Navbar.Navigation";
 
 // src/navbar/navbar-expandable-menu.tsx
 var import_react34 = require("react");
-var import_client = require("react-dom/client");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/navbar/icons.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, viewBox: "0 0 384 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "path",
     {
-      d: "M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z",
-      fill: "currentColor"
+      fill: "currentColor",
+      d: "m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z"
     }
   ) });
 }
 function MenuIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { role: "img", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "path",
     {
-      d: "M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z",
-      fill: "currentColor"
+      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"
     }
   ) });
 }
@@ -1862,31 +1862,6 @@ function NavbarExpandableMenu({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-var RenderButton = (0, import_react34.forwardRef)(
-  (_a, ref) => {
-    var _b = _a, { className, innerRef, open = false, text, title, toggleOpen, width } = _b, rest = __objRest(_b, ["className", "innerRef", "open", "text", "title", "toggleOpen", "width"]);
-    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
-    const style = width ? { width } : {};
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-      "button",
-      __spreadProps(__spreadValues({
-        className: (0, import_typed_classname31.clsx)("hds-navbar__item", className),
-        onClick: toggleOpen,
-        ref: ref != null ? ref : innerRef,
-        style,
-        title,
-        type: "button"
-      }, rest), {
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: (0, import_typed_classname31.clsx)("hds-navbar__item-responsive-text"), children: text }),
-          " ",
-          icon
-        ]
-      })
-    );
-  }
-);
-RenderButton.displayName = "Navbar.RenderButton";
 var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -1894,75 +1869,78 @@ var NavbarExpandableMenuTrigger = (0, import_react34.forwardRef)(
       whenClosedHelperTitle,
       whenOpenText,
       whenOpenHelperTitle,
+      style,
       className
     } = _b, rest = __objRest(_b, [
       "whenClosedText",
       "whenClosedHelperTitle",
       "whenOpenText",
       "whenOpenHelperTitle",
+      "style",
       "className"
     ]);
     const [open, toggleOpen] = useNavbarExpendableMenuContext();
-    const [width, setWidth] = (0, import_react34.useState)(0);
-    const measureButtonRef = (0, import_react34.useRef)(null);
+    const [textWidth, setTextWidth] = (0, import_react34.useState)(void 0);
+    const measurementId = (0, import_react34.useId)();
+    (0, import_react34.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 measureButton = (element, callback) => {
-      const container = document.createElement("div");
-      container.style.cssText = "display: inline-block; position: absolute; visibility: hidden";
-      const c = document.getElementsByClassName("hds-navbar__navigation")[0];
-      c.appendChild(container);
-      const root = (0, import_client.createRoot)(container);
-      root.render(element);
-      const getWidth = () => {
-        var _a2, _b2;
-        callback((_b2 = (_a2 = measureButtonRef.current) == null ? void 0 : _a2.offsetWidth) != null ? _b2 : 0);
-        root.unmount();
-        c.removeChild(container);
-      };
-      setTimeout(getWidth, 0);
-    };
-    (0, import_react34.useEffect)(() => {
-      measureButton(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          RenderButton,
-          __spreadValues({
-            className,
-            innerRef: measureButtonRef,
-            text: whenClosedText,
-            title
-          }, rest)
-        ),
-        (closedWidth) => {
-          measureButton(
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              RenderButton,
-              __spreadValues({
-                className,
-                innerRef: measureButtonRef,
-                open: true,
-                text: whenOpenText,
-                title
-              }, rest)
-            ),
-            (openWidth) => {
-              setWidth(Math.max(openWidth, closedWidth));
-            }
-          );
-        }
-      );
-    }, [className, rest, title, whenClosedText, whenOpenText]);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      RenderButton,
-      __spreadValues({
-        className,
-        open,
+    const icon = open ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({
+        className: (0, import_typed_classname31.clsx)("hds-navbar__item", className),
+        onClick: toggleOpen,
         ref,
-        text,
         title,
-        toggleOpen,
-        width
-      }, rest)
+        type: "button",
+        style: __spreadValues({ position: "relative" }, style)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "span",
+            {
+              id: `${measurementId}-when-closed`,
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                visibility: "hidden",
+                pointerEvents: "none",
+                whiteSpace: "nowrap"
+              },
+              children: whenOpenText
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "span",
+            {
+              id: `${measurementId}-when-open`,
+              "aria-hidden": true,
+              style: {
+                position: "absolute",
+                visibility: "hidden",
+                pointerEvents: "none",
+                whiteSpace: "nowrap"
+              },
+              children: whenClosedText
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "span",
+            {
+              style: { width: textWidth, whiteSpace: "nowrap" },
+              className: (0, import_typed_classname31.clsx)("hds-navbar__item-responsive-text"),
+              children: text
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { style: { width: 32, height: 32 }, children: icon })
+        ]
+      })
     );
   }
 );
@@ -1975,7 +1953,7 @@ var NavbarExpandableMenuContent = (0, import_react34.forwardRef)((_a, ref) => {
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
       className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
-    }), { inert: open ? "true" : void 0 }), {
+    }), { inert: open ? void 0 : "true" }), {
       ref,
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: (0, import_typed_classname31.clsx)("hds-navbar__expandable-menu-content-inner"), children })
     })
@@ -2086,7 +2064,8 @@ var AutoAnimateHeight = (0, import_react35.forwardRef)(
               ref: measurementRef,
               style: {
                 position: "absolute",
-                visibility: "hidden"
+                visibility: "hidden",
+                pointerEvents: "none"
               },
               children
             }
@@ -2341,10 +2320,11 @@ var import_react43 = require("react");
 var import_typed_classname38 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var TabsList = (0, import_react43.forwardRef)(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
     const { activeTabId } = useTabsContext();
     const tabsListRef = (0, import_react43.useRef)(null);
+    const mergedRef = useMergeRefs([tabsListRef, ref]);
     const { width: tabsWidth } = useResize(tabsListRef);
     const isClientSide = useHydrated();
     const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
@@ -2388,7 +2368,7 @@ var TabsList = (0, import_react43.forwardRef)(
           },
           className
         ),
-        ref: tabsListRef,
+        ref: mergedRef,
         role: "tablist"
       }, rest), {
         children