@postenbring/hedwig-react 0.0.73 → 0.0.75

package/dist/index-no-css.mjs

@@ -23,11 +23,11 @@ import {
 } from "./chunk-PUESATBQ.mjs";
 import {
   TabsComponent
-} from "./chunk-CSFSJGLY.mjs";
+} from "./chunk-E2AG5TUR.mjs";
 import {
   TabsList,
   TabsTab
-} from "./chunk-B56JZJOS.mjs";
+} from "./chunk-SRLRTLHS.mjs";
 import "./chunk-XVFQWVHO.mjs";
 import {
   TabsContent,
@@ -42,15 +42,15 @@ import {
 } from "./chunk-ME66RUR6.mjs";
 import {
   ModalComponent
-} from "./chunk-QYSLVQ4F.mjs";
+} from "./chunk-4GSNPCNT.mjs";
 import {
   ModalContent,
   ModalFooter,
   ModalHeader
-} from "./chunk-2FXMUF6K.mjs";
+} from "./chunk-MKC7HZCM.mjs";
 import {
   NavbarComponent
-} from "./chunk-VM345XBI.mjs";
+} from "./chunk-MF2AREPQ.mjs";
 import {
   NavbarButton,
   NavbarLogo,
@@ -59,7 +59,7 @@ import {
 } from "./chunk-625SVQEP.mjs";
 import {
   useNavbarExpendableMenuContext
-} from "./chunk-3KZOKDKP.mjs";
+} from "./chunk-PYR6QEIS.mjs";
 import "./chunk-MGUYIOP2.mjs";
 import {
   FooterComponent
@@ -85,7 +85,7 @@ import "./chunk-YJOOSTJC.mjs";
 import "./chunk-TDLSHJ4Z.mjs";
 import {
   DatePicker
-} from "./chunk-G2SOAFGS.mjs";
+} from "./chunk-5YMUST7H.mjs";
 import "./chunk-7LPYJC6S.mjs";
 import {
   Input
@@ -210,8 +210,8 @@ import {
 } from "./chunk-ZDPU3N54.mjs";
 import {
   AutoAnimateHeight
-} from "./chunk-HSIL53A5.mjs";
-import "./chunk-ZL56N4UK.mjs";
+} from "./chunk-UXJIK76H.mjs";
+import "./chunk-JXA3B33M.mjs";
 import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton

package/dist/index.js

@@ -909,6 +909,36 @@ function useHydrated() {
     () => false
   );
 }
+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");
+  }
+}
 
 // src/form/date-picker/date-picker.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -1745,7 +1775,6 @@ NavbarNavigation.displayName = "Navbar.Navigation";
 var import_react30 = require("react");
 var import_client = require("react-dom/client");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
-var import_focus_trap_react = __toESM(require("focus-trap-react"));
 
 // src/navbar/icons.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -1778,28 +1807,23 @@ var expandableMenuContext = (0, import_react30.createContext)([
 var useNavbarExpendableMenuContext = () => (0, import_react30.useContext)(expandableMenuContext);
 function NavbarExpandableMenu({ children }) {
   const [open, setOpen] = (0, import_react30.useState)(false);
-  const isClientSide = useHydrated();
-  const toggleOpen = () => {
-    const nextOpenState = !open;
-    setOpen(nextOpenState);
-    if (nextOpenState) {
+  function toggleOpen() {
+    setOpen((prev) => !prev);
+  }
+  (0, import_react30.useEffect)(() => {
+    if (open) {
       window.scrollTo(0, 0);
       document.body.classList.add((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
-    } else {
-      document.body.classList.remove((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
+      const releaseFocusTrap2 = focusTrap(
+        document.getElementsByClassName((0, import_typed_classname31.clsx)("hds-navbar"))[0]
+      );
+      return () => {
+        document.body.classList.remove((0, import_typed_classname31.clsx)("hds-navbar-scroll-lock"));
+        releaseFocusTrap2();
+      };
     }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(expandableMenuContext.Provider, { value: [open, toggleOpen], children: [
-    open && isClientSide ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_focus_trap_react.default,
-      {
-        containerElements: [
-          document.getElementsByClassName((0, import_typed_classname31.clsx)("hds-navbar"))[0]
-        ]
-      }
-    ) : null,
-    children
-  ] });
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
 function RenderButton(_a) {