@scripso-homepad/ui 0.4.16 → 0.4.18

package/dist/web/index.d.cts

@@ -459,6 +459,8 @@ type DrawerProps = {
     open: boolean;
     title: string;
     subtitle?: string;
+    subtitleClassName?: string;
+    headerBottom?: ReactNode;
     children: ReactNode;
     footer?: ReactNode;
     onClose: () => void;
@@ -469,7 +471,7 @@ type DrawerProps = {
     contentClassName?: string;
     footerClassName?: string;
 };
-declare function Drawer({ open, title, subtitle, children, footer, onClose, closeAriaLabel, widthClassName, className, headerClassName, contentClassName, footerClassName, }: DrawerProps): react.JSX.Element | null;
+declare function Drawer({ open, title, subtitle, subtitleClassName, headerBottom, children, footer, onClose, closeAriaLabel, widthClassName, className, headerClassName, contentClassName, footerClassName, }: DrawerProps): react.JSX.Element | null;
 
 type HistoryTimelineItem = {
     id: string;

package/dist/web/index.d.ts

@@ -459,6 +459,8 @@ type DrawerProps = {
     open: boolean;
     title: string;
     subtitle?: string;
+    subtitleClassName?: string;
+    headerBottom?: ReactNode;
     children: ReactNode;
     footer?: ReactNode;
     onClose: () => void;
@@ -469,7 +471,7 @@ type DrawerProps = {
     contentClassName?: string;
     footerClassName?: string;
 };
-declare function Drawer({ open, title, subtitle, children, footer, onClose, closeAriaLabel, widthClassName, className, headerClassName, contentClassName, footerClassName, }: DrawerProps): react.JSX.Element | null;
+declare function Drawer({ open, title, subtitle, subtitleClassName, headerBottom, children, footer, onClose, closeAriaLabel, widthClassName, className, headerClassName, contentClassName, footerClassName, }: DrawerProps): react.JSX.Element | null;
 
 type HistoryTimelineItem = {
     id: string;

package/dist/web/index.js

@@ -28882,32 +28882,26 @@ function isNavItemActive(pathname, item) {
   }
   return pathname === item.to || pathname.startsWith(`${item.to}/`);
 }
-function isModifiedClick(event) {
-  return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
-}
 function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
   if (item.hidden) {
     return null;
   }
   const handleClick = (event) => {
+    event.preventDefault();
     if (item.disabled) {
-      event.preventDefault();
-      return;
-    }
-    if (event.defaultPrevented || isModifiedClick(event)) {
       return;
     }
-    event.preventDefault();
     item.onClick?.();
     onNavigate?.(item);
   };
   return /* @__PURE__ */ jsxs(
-    "a",
+    "button",
     {
-      href: item.to,
+      type: "button",
       onClick: handleClick,
       "aria-current": isActive ? "page" : void 0,
       "aria-disabled": item.disabled,
+      disabled: item.disabled,
       tabIndex: item.disabled ? -1 : void 0,
       className: cn(
         "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
@@ -29296,7 +29290,7 @@ function TableSortIcon({ direction = null, className }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": true,
-      className: cn("shrink-0", className),
+      className,
       children: [
         /* @__PURE__ */ jsx(
           "path",
@@ -30433,10 +30427,34 @@ function Modal({
   return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
 var DRAWER_TRANSITION_MS = 300;
+var bodyScrollLockCount = 0;
+var 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 = "";
+  }
+}
 function Drawer({
   open,
   title,
   subtitle,
+  subtitleClassName,
+  headerBottom,
   children,
   footer,
   onClose,
@@ -30473,8 +30491,7 @@ function Drawer({
     if (!isPresent) {
       return;
     }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
+    lockBodyScroll();
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -30482,7 +30499,7 @@ function Drawer({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.body.style.overflow = previousOverflow;
+      unlockBodyScroll();
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isPresent, onClose]);
@@ -30524,39 +30541,42 @@ function Drawer({
               /* @__PURE__ */ jsxs(
                 "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),
                   children: [
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between pt-6 pr-6 pb-4 pl-6", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "h2",
+                          {
+                            id: "homepad-drawer-title",
+                            className: "typography-title-sm tracking-normal text-black",
+                            children: title
+                          }
+                        ),
+                        subtitle ? /* @__PURE__ */ jsx(
+                          "p",
+                          {
+                            id: "homepad-drawer-subtitle",
+                            className: cn(
+                              "typography-body tracking-normal text-storm-gray-400",
+                              subtitleClassName
+                            ),
+                            children: subtitle
+                          }
+                        ) : null
+                      ] }),
                       /* @__PURE__ */ jsx(
-                        "h2",
+                        "button",
                         {
-                          id: "homepad-drawer-title",
-                          className: "typography-title-sm tracking-normal text-black",
-                          children: title
+                          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,
+                          children: /* @__PURE__ */ jsx(X, { className: "size-5", strokeWidth: 1.75 })
                         }
-                      ),
-                      subtitle ? /* @__PURE__ */ jsx(
-                        "p",
-                        {
-                          id: "homepad-drawer-subtitle",
-                          className: "typography-body tracking-normal text-storm-gray-400",
-                          children: subtitle
-                        }
-                      ) : null
+                      )
                     ] }),
-                    /* @__PURE__ */ jsx(
-                      "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,
-                        children: /* @__PURE__ */ jsx(X, { className: "size-5", strokeWidth: 1.75 })
-                      }
-                    )
+                    headerBottom ? /* @__PURE__ */ jsx("div", { className: "border-t border-storm-gray-50 px-6", children: headerBottom }) : null
                   ]
                 }
               ),