@scripso-homepad/ui 0.4.24 → 0.4.26

package/dist/web/index.cjs

@@ -7408,7 +7408,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment4 = 7;
+        var Fragment3 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8563,7 +8563,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment4:
+            case Fragment3:
               return "Fragment";
             case HostComponent:
               return type;
@@ -16988,7 +16988,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment4) {
+            if (current2 === null || current2.tag !== Fragment3) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17391,7 +17391,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment4) {
+                  if (child.tag === Fragment3) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22865,7 +22865,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment4:
+            case Fragment3:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23137,7 +23137,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment4:
+            case Fragment3:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27389,7 +27389,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment4, elements, key, mode);
+          var fiber = createFiber(Fragment3, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29069,8 +29069,8 @@ var styles2 = reactNative.StyleSheet.create({
     gap: spacing.sm
   },
   iconSlot: {
-    width: INPUT_ICON_SIZE,
-    height: INPUT_ICON_SIZE,
+    minWidth: INPUT_ICON_SIZE,
+    minHeight: INPUT_ICON_SIZE,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -29212,6 +29212,24 @@ function useOnClickOutside(ref, handler, enabled = true) {
     };
   }, [enabled]);
 }
+function useTruncatedTitle(text) {
+  const ref = react.useRef(null);
+  const [isTruncated, setIsTruncated] = react.useState(false);
+  react.useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const update = () => {
+      setIsTruncated(element.scrollWidth > element.clientWidth + 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [text]);
+  return { ref, title: isTruncated ? text : void 0 };
+}
 function BuildingSelect({
   options,
   value,
@@ -29230,6 +29248,7 @@ function BuildingSelect({
   const selectedOption = options.find((option) => option.value === value);
   const displayLabel = selectedOption?.label ?? labels.selectBuilding;
   const selectableOptions = options.filter((option) => !option.disabled);
+  const { ref: labelRef, title: truncatedTitle } = useTruncatedTitle(displayLabel);
   const closeMenu = react.useCallback(() => {
     setOpen(false);
     setHighlightedIndex(-1);
@@ -29300,7 +29319,7 @@ function BuildingSelect({
         break;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative w-57.5", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative w-72", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -29310,17 +29329,25 @@ function BuildingSelect({
         "aria-expanded": open,
         "aria-controls": listboxId,
         "aria-label": labels.selectBuilding,
+        title: truncatedTitle,
         onClick: () => open ? closeMenu() : openMenu(),
         onKeyDown: handleTriggerKeyDown,
         className: cn(
-          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white p-3 text-left transition-colors",
+          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white px-3.5 py-3 text-left transition-colors",
           !disabled && "cursor-pointer hover:bg-storm-gray-50/60",
           open && "bg-storm-gray-50/60",
           disabled && "cursor-not-allowed opacity-60"
         ),
         children: [
-          buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue", children: displayLabel }),
+          buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "size-5 shrink-0 text-navy" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: labelRef,
+              className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue",
+              children: displayLabel
+            }
+          ),
           chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronsUpDown,
             {
@@ -29373,7 +29400,7 @@ function BuildingSelect({
                 (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
                 option.disabled && "cursor-not-allowed opacity-50"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", title: option.label, children: option.label })
             }
           ) }, option.value);
         })
@@ -29518,9 +29545,9 @@ function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
       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",
-        isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
+        isOpen ? "w-full gap-4" : "w-full justify-center gap-0 px-3",
         item.disabled && "pointer-events-none opacity-50",
-        isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
+        isActive ? "bg-black/12 text-white shadow-none" : "text-navy-100 shadow-none hover:bg-white/5"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -29555,6 +29582,7 @@ function getInitials(fullName, email) {
   }
   return email.slice(0, 2).toUpperCase();
 }
+var avatarCircleClassName = "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5";
 function SidebarUserCard({
   user,
   isOpen,
@@ -29563,39 +29591,110 @@ function SidebarUserCard({
   className
 }) {
   const initials = user.initials ?? getInitials(user.fullName, user.email);
+  const [logoutOpen, setLogoutOpen] = react.useState(false);
+  const rootRef = react.useRef(null);
+  const logoutMenuId = react.useId();
+  react.useEffect(() => {
+    if (isOpen) {
+      setLogoutOpen(false);
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (isOpen || !logoutOpen) {
+      return;
+    }
+    function handlePointerDown(event) {
+      if (rootRef.current && !rootRef.current.contains(event.target)) {
+        setLogoutOpen(false);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setLogoutOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, logoutOpen]);
+  const avatar = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(avatarCircleClassName, "typography-14 font-bold text-white"),
+      "aria-hidden": true,
+      children: initials
+    }
+  );
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: cn("flex w-full flex-col items-center gap-2", className),
+        children: [
+          logoutOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              id: logoutMenuId,
+              onClick: () => {
+                setLogoutOpen(false);
+                onLogout?.();
+              },
+              className: cn(
+                avatarCircleClassName,
+                "cursor-pointer bg-black/20 text-white",
+                "transition-[background-color,transform] duration-300 ease-in-out",
+                "hover:bg-white/10 active:scale-95"
+              ),
+              "aria-label": logoutLabel,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 20, strokeWidth: 1.75 })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setLogoutOpen((open) => !open),
+              className: "flex cursor-pointer items-center justify-center transition-transform duration-300 ease-in-out active:scale-95",
+              "aria-expanded": logoutOpen,
+              "aria-haspopup": "true",
+              "aria-controls": logoutOpen ? logoutMenuId : void 0,
+              "aria-label": user.fullName,
+              children: avatar
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex w-full items-center rounded-xl transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out",
-        isOpen ? "justify-between gap-3 bg-black/12 p-3" : "justify-center px-3 py-3",
+        "flex w-full items-center justify-between gap-3 rounded-xl bg-black/12 p-3",
+        "transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out",
         className
       ),
       children: [
+        avatar,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "button",
           {
-            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white",
-            "aria-hidden": true,
-            children: initials
+            type: "button",
+            onClick: () => onLogout?.(),
+            className: "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95",
+            "aria-label": logoutLabel,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 20, strokeWidth: 1.75 })
           }
-        ),
-        isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onLogout?.(),
-              className: "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95",
-              "aria-label": logoutLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { size: 20, strokeWidth: 1.75 })
-            }
-          )
-        ] }) : null
+        )
       ]
     }
   );
@@ -29753,18 +29852,8 @@ function Sidebar({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden", children: visibleNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-            SidebarNavItem,
-            {
-              item,
-              isOpen: isExpanded,
-              isActive: isNavItemActive(pathname, item),
-              onNavigate: handleNavItemNavigate
-            },
-            item.to
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col gap-4", children: [
-            visibleFooterNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex w-full min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto", children: [
+            visibleNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
               SidebarNavItem,
               {
                 item,
@@ -29774,15 +29863,27 @@ function Sidebar({
               },
               item.to
             )),
-            user ? /* @__PURE__ */ jsxRuntime.jsx(
-              SidebarUserCard,
-              {
-                user,
-                isOpen: isExpanded,
-                logoutLabel: labels.logout,
-                onLogout
-              }
-            ) : null
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-auto flex w-full flex-col gap-2", children: [
+              visibleFooterNavItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarNavItem,
+                {
+                  item,
+                  isOpen: isExpanded,
+                  isActive: isNavItemActive(pathname, item),
+                  onNavigate: handleNavItemNavigate
+                },
+                item.to
+              )),
+              user ? /* @__PURE__ */ jsxRuntime.jsx(
+                SidebarUserCard,
+                {
+                  user,
+                  isOpen: isExpanded,
+                  logoutLabel: labels.logout,
+                  onLogout
+                }
+              ) : null
+            ] })
           ] })
         ]
       }
@@ -30265,10 +30366,6 @@ function Pagination({
 
 // src/web/components/table/constants.ts
 var tableBorderClassName = "border-storm-gray-50";
-var tableStickyRightShadowClassName = "table-sticky-right-shadow";
-var tableStickyRightHeadClassName = "table-sticky-right-head";
-var tableScrollAtEndClassName = "table-scroll-at-end";
-var tableScrollHasOverflowClassName = "table-scroll-has-overflow";
 var tableRowDisabledCellClassName = "bg-[#ECEEF0]/30 [&>*]:opacity-70";
 var DEFAULT_TABLE_BODY_MIN_HEIGHT = 320;
 var tableCellPaddingClassName = "px-3 py-3";
@@ -30367,7 +30464,6 @@ function resolveAriaSort(sortDirection, isSortable) {
 function TableHead({
   className,
   align = "left",
-  stickyRight = false,
   sortable = false,
   sortDirection = null,
   onSort,
@@ -30397,11 +30493,6 @@ function TableHead({
         "sticky top-0 z-10",
         tableHeadPaddingClassName,
         tableHeaderClassName,
-        stickyRight && [
-          "sticky right-0 z-20",
-          tableStickyRightHeadClassName,
-          tableStickyRightShadowClassName
-        ],
         !isSortable && tableAlignClasses[align],
         className
       ),
@@ -30442,16 +30533,14 @@ function TableActionsCell({ className, children, ...props }) {
     "td",
     {
       className: cn(
-        "sticky right-0 z-10 whitespace-nowrap bg-white",
+        "whitespace-nowrap",
         tableCellPaddingClassName,
         tableBodyClassName,
-        tableStickyRightShadowClassName,
-        // Keep an opaque sticky background so scrolled cells never bleed through.
-        disabled && "bg-white [&>*]:opacity-70",
+        disabled && tableRowDisabledCellClassName,
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] flex items-center justify-end gap-2", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2", children })
     }
   );
 }
@@ -30688,57 +30777,6 @@ function TableStatusActionsCell({
     }
   );
 }
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
-function getHorizontalScrollState(element) {
-  const inner = element.firstElementChild;
-  const table = inner?.querySelector("table");
-  const contentWidth = table?.scrollWidth ?? inner?.scrollWidth ?? element.scrollWidth;
-  const viewportWidth = element.clientWidth;
-  const maxScrollLeft = element.scrollWidth - element.clientWidth;
-  const hasOverflow = contentWidth > viewportWidth + 1;
-  const atEnd = !hasOverflow || element.scrollLeft >= maxScrollLeft - 1;
-  return { hasOverflow, atEnd };
-}
-function useHorizontalScrollState() {
-  const scrollRef = react.useRef(null);
-  const [scrollState, setScrollState] = react.useState({
-    hasOverflow: false,
-    atEnd: true
-  });
-  const updateScrollState = react.useCallback(() => {
-    const element = scrollRef.current;
-    if (!element) {
-      return;
-    }
-    setScrollState(getHorizontalScrollState(element));
-  }, []);
-  useIsomorphicLayoutEffect2(() => {
-    const element = scrollRef.current;
-    if (!element) {
-      return;
-    }
-    updateScrollState();
-    element.addEventListener("scroll", updateScrollState, { passive: true });
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateScrollState);
-      return () => {
-        element.removeEventListener("scroll", updateScrollState);
-        window.removeEventListener("resize", updateScrollState);
-      };
-    }
-    const resizeObserver = new ResizeObserver(updateScrollState);
-    resizeObserver.observe(element);
-    const inner = element.firstElementChild;
-    if (inner) {
-      resizeObserver.observe(inner);
-    }
-    return () => {
-      element.removeEventListener("scroll", updateScrollState);
-      resizeObserver.disconnect();
-    };
-  }, [updateScrollState]);
-  return { scrollRef, scrollState };
-}
 function TableScrollArea({
   children,
   minWidth = 980,
@@ -30747,15 +30785,11 @@ function TableScrollArea({
   height,
   fillHeight = false
 }) {
-  const { scrollRef, scrollState } = useHorizontalScrollState();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: scrollRef,
       className: cn(
         "table-scroll-area w-full overflow-auto",
-        scrollState.hasOverflow && tableScrollHasOverflowClassName,
-        scrollState.atEnd && tableScrollAtEndClassName,
         fillHeight && "min-h-0 flex-1",
         className
       ),
@@ -31190,7 +31224,7 @@ function Modal({
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("drawer-scroll-area min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "footer",
               {