@scripso-homepad/ui 0.4.41 → 0.4.42

package/dist/web/index.cjs

@@ -29580,7 +29580,12 @@ function isNavItemActive(pathname, item) {
   }
   return pathname === item.to || pathname.startsWith(`${item.to}/`);
 }
-function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
+function SidebarNavItem({
+  item,
+  isOpen,
+  isActive,
+  onNavigate
+}) {
   if (item.hidden) {
     return null;
   }
@@ -29598,6 +29603,7 @@ function SidebarNavItem({ item, isOpen, isActive, onNavigate }) {
       type: "button",
       onClick: handleClick,
       "aria-current": isActive ? "page" : void 0,
+      "data-onboarding": item.onboardingId,
       "aria-disabled": item.disabled,
       disabled: item.disabled,
       tabIndex: item.disabled ? -1 : void 0,
@@ -30689,7 +30695,10 @@ function clampMenuLeft(left, menuWidth) {
     return left;
   }
   const minLeft = MENU_VIEWPORT_MARGIN_PX;
-  const maxLeft = Math.max(minLeft, window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX);
+  const maxLeft = Math.max(
+    minLeft,
+    window.innerWidth - menuWidth - MENU_VIEWPORT_MARGIN_PX
+  );
   return Math.min(Math.max(left, minLeft), maxLeft);
 }
 function resolveMenuItemIcon(item) {
@@ -30712,7 +30721,9 @@ function TableActionsMenu({
   menuClassName,
   triggerIcon,
   menuWidth = MENU_WIDTH_PX,
-  menuFitContent = true
+  menuFitContent = true,
+  forceOpen,
+  menuOnboardingId
 }) {
   const [open, setOpen] = react.useState(false);
   const [menuPosition, setMenuPosition] = react.useState(null);
@@ -30721,8 +30732,17 @@ function TableActionsMenu({
   const triggerRef = react.useRef(null);
   const menuId = react.useId();
   const closeMenu = react.useCallback(() => {
+    if (forceOpen) {
+      return;
+    }
     setOpen(false);
-  }, []);
+  }, [forceOpen]);
+  react.useEffect(() => {
+    if (forceOpen === void 0) {
+      return;
+    }
+    setOpen(forceOpen);
+  }, [forceOpen]);
   const updateMenuPosition = react.useCallback(() => {
     const trigger = triggerRef.current;
     const menuEl = menuRef.current;
@@ -30732,7 +30752,10 @@ function TableActionsMenu({
     const rect = trigger.getBoundingClientRect();
     const viewportMaxWidth = typeof window === "undefined" ? menuWidth : Math.max(menuWidth, window.innerWidth - MENU_VIEWPORT_MARGIN_PX * 2);
     const measuredWidth = menuFitContent ? menuEl?.offsetWidth || menuEl?.getBoundingClientRect().width || menuWidth : menuWidth;
-    const resolvedMenuWidth = Math.min(Math.max(measuredWidth, 1), viewportMaxWidth);
+    const resolvedMenuWidth = Math.min(
+      Math.max(measuredWidth, 1),
+      viewportMaxWidth
+    );
     setMenuPosition({
       top: rect.bottom + MENU_OFFSET_PX,
       left: clampMenuLeft(rect.right - resolvedMenuWidth, resolvedMenuWidth)
@@ -30751,6 +30774,9 @@ function TableActionsMenu({
       return;
     }
     const closeOnScroll = () => {
+      if (forceOpen) {
+        return;
+      }
       closeMenu();
     };
     window.addEventListener("resize", updateMenuPosition);
@@ -30767,7 +30793,7 @@ function TableActionsMenu({
       window.removeEventListener("scroll", closeOnScroll, true);
       document.removeEventListener("keydown", closeOnEscape);
     };
-  }, [closeMenu, open, updateMenuPosition]);
+  }, [closeMenu, forceOpen, open, updateMenuPosition]);
   if (items.length === 0) {
     return null;
   }
@@ -30787,6 +30813,7 @@ function TableActionsMenu({
         visibility: menuPosition != null ? "visible" : "hidden",
         pointerEvents: menuPosition != null ? "auto" : "none"
       },
+      ...menuOnboardingId ? { "data-onboarding": menuOnboardingId } : {},
       className: cn(
         "z-50 overflow-hidden rounded-2xl border border-storm-gray-50 bg-white shadow-[0_4px_20px_0_rgba(0,0,0,0.05)]",
         menuClassName
@@ -31265,6 +31292,7 @@ function Modal({
   closeOnBackdrop = true,
   closeOnEscape = true,
   containerClassName,
+  containerDataOnboarding,
   contentClassName,
   buttonClassName
 }) {
@@ -31289,14 +31317,11 @@ function Modal({
   if (!open) {
     return null;
   }
-  const sharedButtonClassName = cn(
-    "btn h-13 w-full! min-w-0! justify-center!",
-    buttonClassName
-  );
+  const sharedButtonClassName = cn("btn h-13 w-full! min-w-0! justify-center!", buttonClassName);
   const modal = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
+      className: "homepad-modal-in fixed inset-0 z-[100] flex items-center justify-center bg-storm-gray-850/40 p-4 backdrop-blur-[12px]",
       onPointerDown: backdropDismiss.onPointerDown,
       onClick: backdropDismiss.onClick,
       role: "presentation",
@@ -31307,6 +31332,7 @@ function Modal({
           "aria-modal": "true",
           "aria-labelledby": "homepad-modal-title",
           ...subtitle ? { "aria-describedby": "homepad-modal-subtitle" } : {},
+          ...containerDataOnboarding ? { "data-onboarding": containerDataOnboarding } : {},
           className: cn(
             "flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
             containerClassName
@@ -31345,7 +31371,16 @@ function Modal({
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("drawer-scroll-area 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",
               {
@@ -31487,7 +31522,7 @@ function Drawer({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [isPresent, onClose]);
-  if (!isPresent) {
+  if (!open && !isPresent) {
     return null;
   }
   const drawer = /* @__PURE__ */ jsxRuntime.jsxs(
@@ -31525,48 +31560,48 @@ function Drawer({
               className
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "header",
-                {
-                  className: cn("shrink-0 border-b border-storm-gray-50", headerClassName),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between pt-6 pr-6 pb-4 pl-6", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "h2",
-                          {
-                            id: "homepad-drawer-title",
-                            className: "typography-title-sm tracking-normal text-black",
-                            children: title
-                          }
+              /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("shrink-0 border-b border-storm-gray-50", headerClassName), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between pt-6 pr-6 pb-4 pl-6", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h2",
+                      {
+                        id: "homepad-drawer-title",
+                        className: "typography-title-sm tracking-normal text-black",
+                        children: title
+                      }
+                    ),
+                    subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        id: "homepad-drawer-subtitle",
+                        className: cn(
+                          "typography-body tracking-normal text-storm-gray-400",
+                          subtitleClassName
                         ),
-                        subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
-                          "p",
-                          {
-                            id: "homepad-drawer-subtitle",
-                            className: cn(
-                              "typography-body tracking-normal text-storm-gray-400",
-                              subtitleClassName
-                            ),
-                            children: subtitle
-                          }
-                        ) : null
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
+                        children: subtitle
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        lucideReact.X,
                         {
-                          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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5", strokeWidth: 1.75 })
+                          className: "size-5",
+                          strokeWidth: 1.75
                         }
                       )
-                    ] }),
-                    headerBottom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-storm-gray-50 px-6", children: headerBottom }) : null
-                  ]
-                }
-              ),
+                    }
+                  )
+                ] }),
+                headerBottom ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-storm-gray-50 px-6", children: headerBottom }) : null
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {