@scripso-homepad/ui 0.4.16 → 0.4.18

package/package.json

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

package/src/web/components/Drawer.tsx

@@ -7,10 +7,41 @@ 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;
   subtitle?: string;
+  subtitleClassName?: string;
+  headerBottom?: ReactNode;
   children: ReactNode;
   footer?: ReactNode;
   onClose: () => void;
@@ -26,6 +57,8 @@ export function Drawer({
   open,
   title,
   subtitle,
+  subtitleClassName,
+  headerBottom,
   children,
   footer,
   onClose,
@@ -70,8 +103,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 +114,7 @@ export function Drawer({
     window.addEventListener('keydown', handleKeyDown);
 
     return () => {
-      document.body.style.overflow = previousOverflow;
+      unlockBodyScroll();
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [isPresent, onClose]);
@@ -119,36 +151,42 @@ export function Drawer({
         )}
       >
         <header
-          className={cn(
-            'flex h-[87px] shrink-0 items-start justify-between border-b border-storm-gray-50 pt-6 pr-6 pb-4 pl-6',
-            headerClassName,
-          )}
+          className={cn('shrink-0 border-b border-storm-gray-50', headerClassName)}
         >
-          <div className="min-w-0 flex flex-col gap-1">
-            <h2
-              id="homepad-drawer-title"
-              className="typography-title-sm tracking-normal text-black"
-            >
-              {title}
-            </h2>
-            {subtitle ? (
-              <p
-                id="homepad-drawer-subtitle"
-                className="typography-body tracking-normal text-storm-gray-400"
+          <div className="flex items-start justify-between pt-6 pr-6 pb-4 pl-6">
+            <div className="min-w-0 flex flex-col gap-1">
+              <h2
+                id="homepad-drawer-title"
+                className="typography-title-sm tracking-normal text-black"
               >
-                {subtitle}
-              </p>
-            ) : null}
+                {title}
+              </h2>
+              {subtitle ? (
+                <p
+                  id="homepad-drawer-subtitle"
+                  className={cn(
+                    'typography-body tracking-normal text-storm-gray-400',
+                    subtitleClassName,
+                  )}
+                >
+                  {subtitle}
+                </p>
+              ) : null}
+            </div>
+
+            <button
+              type="button"
+              aria-label={closeAriaLabel}
+              className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600"
+              onClick={onClose}
+            >
+              <X className="size-5" strokeWidth={1.75} />
+            </button>
           </div>
 
-          <button
-            type="button"
-            aria-label={closeAriaLabel}
-            className="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600"
-            onClick={onClose}
-          >
-            <X className="size-5" strokeWidth={1.75} />
-          </button>
+          {headerBottom ? (
+            <div className="border-t border-storm-gray-50 px-6">{headerBottom}</div>
+          ) : null}
         </header>
 
         <div

package/src/web/icons/TableSortIcon.tsx

@@ -1,5 +1,3 @@
-import { cn } from '../utils/cn';
-
 export type TableSortDirection = 'asc' | 'desc';
 
 type TableSortIconProps = {
@@ -22,7 +20,7 @@ export function TableSortIcon({ direction = null, className }: TableSortIconProp
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden
-      className={cn('shrink-0', className)}
+      className={className}
     >
       <path
         d="M9.70277 11.4541L6.42668 15.2773C6.37387 15.3389 6.30837 15.3883 6.23466 15.4222C6.16095 15.4561 6.08078 15.4736 5.99965 15.4736C5.91852 15.4736 5.83835 15.4561 5.76464 15.4222C5.69093 15.3883 5.62542 15.3389 5.57262 15.2773L2.29652 11.4541C1.98387 11.0892 2.24309 10.5255 2.72355 10.5255H9.27668C9.75715 10.5255 10.0164 11.0892 9.70277 11.4541Z"

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>
   );
 }