@scripso-homepad/ui 0.4.39 → 0.4.41

package/dist/web/index.d.cts

@@ -396,7 +396,7 @@ type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
     onSort?: () => void;
     children?: ReactNode;
 };
-declare function TableHead({ className, align, sortable, sortDirection, onSort, children, ...props }: TableHeadProps): react.JSX.Element;
+declare function TableHead({ className, align, sortable, sortDirection, onSort, children, onClick, onKeyDown, ...props }: TableHeadProps): react.JSX.Element;
 
 type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
     variant?: TableCellVariant;

package/dist/web/index.d.ts

@@ -396,7 +396,7 @@ type TableHeadProps = ThHTMLAttributes<HTMLTableCellElement> & {
     onSort?: () => void;
     children?: ReactNode;
 };
-declare function TableHead({ className, align, sortable, sortDirection, onSort, children, ...props }: TableHeadProps): react.JSX.Element;
+declare function TableHead({ className, align, sortable, sortDirection, onSort, children, onClick, onKeyDown, ...props }: TableHeadProps): react.JSX.Element;
 
 type TableCellProps = TdHTMLAttributes<HTMLTableCellElement> & {
     variant?: TableCellVariant;

package/dist/web/index.js

@@ -27528,7 +27528,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal3(children, containerInfo, implementation) {
+        function createPortal4(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28384,7 +28384,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal3(children, container, null, key);
+          return createPortal4(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -29254,12 +29254,12 @@ function Sidebar({
         )
       }
     ),
-    showCollapsedRail && mobileOpen ? /* @__PURE__ */ jsx("div", { className: "h-screen w-[76px] shrink-0", "aria-hidden": true }) : null,
+    showCollapsedRail && mobileOpen ? /* @__PURE__ */ jsx("div", { className: "h-dvh w-[76px] shrink-0", "aria-hidden": true }) : null,
     /* @__PURE__ */ jsxs(
       "aside",
       {
         className: cn(
-          "fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
+          "fixed inset-y-0 left-0 z-50 flex h-dvh w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
           "transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]",
           mobileOpen ? "translate-x-0" : "-translate-x-full pointer-events-none",
           "md:relative md:z-auto md:w-[76px] md:translate-x-0 md:pointer-events-auto md:shadow-none md:items-center md:gap-2 md:px-3 md:py-4",
@@ -29392,9 +29392,9 @@ function DashboardLayout({
   className,
   mainClassName
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "max-md:contents md:h-screen md:shrink-0", children: /* @__PURE__ */ jsx(Sidebar, { ...sidebar }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-dvh min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "max-md:contents md:h-dvh md:shrink-0", children: /* @__PURE__ */ jsx(Sidebar, { ...sidebar }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-dvh min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsx(SidebarMobileHeader, { ...mobileHeader }),
       /* @__PURE__ */ jsx(AppHeader, { ...header }),
       /* @__PURE__ */ jsx("main", { className: mainClassName ?? "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6", children })
@@ -29926,16 +29926,16 @@ function TableHead({
   sortDirection = null,
   onSort,
   children,
+  onClick,
+  onKeyDown,
   ...props
 }) {
   const isSortable = sortable && onSort != null;
   const content = isSortable ? /* @__PURE__ */ jsxs(
-    "button",
+    "span",
     {
-      type: "button",
-      onClick: onSort,
       className: cn(
-        "inline-flex w-full cursor-pointer items-center gap-2.5 border-0 bg-transparent p-0 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit transition-colors hover:text-storm-gray-500",
+        "inline-flex w-full items-center gap-2.5 font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-inherit",
         tableHeadSortButtonAlignClasses[align]
       ),
       children: [
@@ -29952,10 +29952,29 @@ function TableHead({
         tableHeadPaddingClassName,
         tableHeaderClassName,
         !isSortable && tableAlignClasses[align],
+        isSortable && "cursor-pointer select-none hover:text-storm-gray-500",
         className
       ),
       "aria-sort": resolveAriaSort(sortDirection, isSortable),
+      tabIndex: isSortable ? 0 : void 0,
       ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+        onSort();
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !isSortable) {
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSort();
+        }
+      },
       children: content
     }
   );
@@ -30562,16 +30581,22 @@ function Modal({
   );
   return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
+
+// src/web/components/Drawer.tsx
+var import_react_dom3 = __toESM(require_react_dom(), 1);
 var DRAWER_TRANSITION_MS = 300;
 var bodyScrollLockCount = 0;
 var previousBodyOverflow = "";
+var previousHtmlOverflow = "";
 function lockBodyScroll() {
   if (typeof document === "undefined") {
     return;
   }
   if (bodyScrollLockCount === 0) {
     previousBodyOverflow = document.body.style.overflow;
+    previousHtmlOverflow = document.documentElement.style.overflow;
     document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
   }
   bodyScrollLockCount += 1;
 }
@@ -30582,7 +30607,9 @@ function unlockBodyScroll() {
   bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
   if (bodyScrollLockCount === 0) {
     document.body.style.overflow = previousBodyOverflow;
+    document.documentElement.style.overflow = previousHtmlOverflow;
     previousBodyOverflow = "";
+    previousHtmlOverflow = "";
   }
 }
 function Drawer({
@@ -30656,10 +30683,10 @@ function Drawer({
   if (!isPresent) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
+  const drawer = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "fixed inset-0 z-50 flex justify-end p-2 max-md:p-0",
+      className: "fixed inset-0 z-50 flex justify-end overscroll-none p-2 max-md:p-0",
       role: "presentation",
       children: [
         /* @__PURE__ */ jsx(
@@ -30683,7 +30710,7 @@ function Drawer({
             "aria-labelledby": "homepad-drawer-title",
             ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
             className: cn(
-              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none",
+              "relative z-10 flex h-full max-h-full min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:rounded-none",
               // Keep GPU transform only while animating — settled translate-x-0 blurs text.
               !isTransformSettled && "will-change-transform",
               isAnimatedIn ? isTransformSettled ? "transform-none" : "translate-x-0" : "translate-x-full",
@@ -30750,6 +30777,7 @@ function Drawer({
       ]
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(drawer, document.body) : drawer;
 }
 function TimelineCheckIcon({ className, ...props }) {
   return /* @__PURE__ */ jsx(