@scripso-homepad/ui 0.4.16 → 0.4.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/web/components/Drawer.tsx

@@ -7,6 +7,35 @@ import './drawer-scroll.css';
 
 const DRAWER_TRANSITION_MS = 300;
 
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = '';
+
+function lockBodyScroll() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+
+  bodyScrollLockCount += 1;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = '';
+  }
+}
+
 export type DrawerProps = {
   open: boolean;
   title: string;
@@ -70,8 +99,7 @@ export function Drawer({
       return;
     }
 
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
+    lockBodyScroll();
 
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
@@ -82,7 +110,7 @@ export function Drawer({
     window.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.body.style.overflow = previousOverflow;
+      unlockBodyScroll();
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [isPresent, onClose]);

package/src/web/layout/SidebarNavItem.tsx

@@ -10,38 +10,29 @@ export type SidebarNavItemProps = {
   onNavigate?: (item: AdminNavItem) => void;
 };
 
-function isModifiedClick(event: MouseEvent<HTMLAnchorElement>): boolean {
-  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
-}
-
 export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNavItemProps) {
   if (item.hidden) {
     return null;
   }
 
-  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    if (item.disabled) {
-      event.preventDefault();
-      return;
-    }
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
 
-    // Keep routing in the host app's React Router instance so workspace /
-    // published UI copies never fight over duplicate router contexts.
-    if (event.defaultPrevented || isModifiedClick(event)) {
+    if (item.disabled) {
       return;
     }
 
-    event.preventDefault();
     item.onClick?.();
     onNavigate?.(item);
   };
 
   return (
-    <a
-      href={item.to}
+    <button
+      type="button"
       onClick={handleClick}
       aria-current={isActive ? 'page' : undefined}
       aria-disabled={item.disabled}
+      disabled={item.disabled}
       tabIndex={item.disabled ? -1 : undefined}
       className={cn(
         'relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out',
@@ -66,6 +57,6 @@ export function SidebarNavItem({ item, isOpen, isActive, onNavigate }: SidebarNa
       >
         {item.label}
       </span>
-    </a>
+    </button>
   );
 }