@zauru-sdk/components 6.16.0 → 6.17.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.17.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.16.1...@zauru-sdk/components@6.17.0) (2026-10-29)
+
+
+### Features
+
+* reportar ErrorBoundaryAlert a CloudWatch ([de3c326](https://github.com/intuitiva/zauru-typescript-sdk/commit/de3c32674da2ebbbff53dc307e11ca213043d1c5))
+
+
+
+
+
+## [6.16.1](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.16.0...@zauru-sdk/components@6.16.1) (2026-10-29)
+
+
+### Bug Fixes
+
+* navegar al elegir un ítem del submenu del NavBar ([75ba139](https://github.com/intuitiva/zauru-typescript-sdk/commit/75ba1395615f2c5dde2bd00d6e404296b45c0b3b))
+
+
+
+
+
 # [6.16.0](https://github.com/intuitiva/zauru-typescript-sdk/compare/@zauru-sdk/components@6.15.1...@zauru-sdk/components@6.16.0) (2026-10-29)
 
 

package/dist/esm/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.js

@@ -1,5 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//<reference> https://tailwindtemplates.io/templates?category=alert
+import { useEffect } from "react";
+import { sendClientError } from "../../observability/sendClientError.js";
 export const ErrorBoundaryAlert = (props) => {
     const { title, description } = props;
+    useEffect(() => {
+        const message = [title, description].filter(Boolean).join(" — ");
+        if (!message)
+            return;
+        sendClientError({
+            message,
+            source: "errorBoundary",
+        });
+    }, [title, description]);
     return (_jsx("div", { className: "rounded-full top-20 mx-auto p-3", children: _jsx("div", { className: "p-4 text-red-900 bg-red-100 border border-red-200 rounded-md", children: _jsxs("div", { className: "flex justify-between flex-wrap", children: [_jsxs("div", { className: "w-0 flex-1 flex", children: [_jsx("div", { className: "mr-3 pt-1", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z" }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-md leading-6 font-medium", children: title?.toString() }), _jsx("p", { className: "text-sm", children: description?.toString() })] })] }), _jsx("div", { children: _jsx("button", { type: "button", className: "rounded-md focus:outline-none focus:ring-2 focus:ring-red-500", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }) }) })] }) }) }));
 };

package/dist/esm/NavBar/NavBar.js

@@ -78,14 +78,15 @@ const NavItems = ({ items, color, layout, openMenuId, setOpenMenuId, onNavigate,
         const children = visibleChildrenOf(item);
         const menuKey = `${item.name}-${index}`;
         if (children.length > 0) {
-            return (_jsx(NavItemGroup, { item: item, color: color, layout: layout, open: openMenuId === menuKey, onToggle: () => setOpenMenuId(openMenuId === menuKey ? null : menuKey), onNavigate: onNavigate }, menuKey));
+            return (_jsx(NavItemGroup, { item: item, color: color, layout: layout, open: openMenuId === menuKey, onToggle: () => setOpenMenuId((current) => (current === menuKey ? null : menuKey)), onNavigate: onNavigate }, menuKey));
         }
         return (_jsx(NavLinkItem, { item: item, color: color, layout: layout, onNavigate: onNavigate }, menuKey));
     }) }));
 export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadCatalogsOption, settingsOption, showDarkModeToggle = false, }) => {
     const color = COLORS[selectedColor];
     const [navOpen, setNavOpen] = useState(false);
-    const [openMenuId, setOpenMenuId] = useState(null);
+    const [desktopMenuId, setDesktopMenuId] = useState(null);
+    const [mobileAccordionId, setMobileAccordionId] = useState(null);
     const [currentVersion, setCurrentVersion] = useState(version);
     const [isDarkMode, setIsDarkMode] = useState(false);
     const navigate = useNavigate();
@@ -105,7 +106,8 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
     }, [version, currentVersion]);
     useEffect(() => {
         setNavOpen(false);
-        setOpenMenuId(null);
+        setDesktopMenuId(null);
+        setMobileAccordionId(null);
     }, [location.pathname]);
     useEffect(() => {
         if (!navOpen)
@@ -132,24 +134,33 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
             if (event.key !== "Escape")
                 return;
             setNavOpen(false);
-            setOpenMenuId(null);
+            setDesktopMenuId(null);
+            setMobileAccordionId(null);
         };
         document.addEventListener("keydown", onKeyDown);
         return () => document.removeEventListener("keydown", onKeyDown);
     }, []);
     useEffect(() => {
+        if (!desktopMenuId)
+            return;
         const onPointerDown = (event) => {
-            if (desktopMenuRef.current &&
-                !desktopMenuRef.current.contains(event.target)) {
-                setOpenMenuId(null);
-            }
+            const target = event.target;
+            if (mobileDrawerRef.current?.contains(target))
+                return;
+            if (desktopMenuRef.current?.contains(target))
+                return;
+            setDesktopMenuId(null);
         };
         document.addEventListener("mousedown", onPointerDown);
         return () => document.removeEventListener("mousedown", onPointerDown);
-    }, []);
+    }, [desktopMenuId]);
     const closeMenus = () => {
         setNavOpen(false);
-        setOpenMenuId(null);
+        setDesktopMenuId(null);
+        setMobileAccordionId(null);
+    };
+    const onLinkNavigate = () => {
+        window.setTimeout(closeMenus, 0);
     };
     const userEntries = useMemo(() => {
         if (!loggedIn)
@@ -202,8 +213,11 @@ export const NavBar = ({ title, loggedIn, items, selectedColor, version, reloadC
         if (!activeGroup)
             return;
         const index = visibleItems.indexOf(activeGroup);
-        setOpenMenuId(`${activeGroup.name}-${index}`);
+        setMobileAccordionId(`${activeGroup.name}-${index}`);
     }, [navOpen, visibleItems, location.pathname]);
-    const renderCluster = (layout) => (_jsxs(_Fragment, { children: [_jsx(NavItems, { items: visibleItems, color: color, layout: layout, openMenuId: openMenuId, setOpenMenuId: setOpenMenuId, onNavigate: closeMenus }), _jsx(UserMenu, { color: color, layout: layout, open: openMenuId === "user", onToggle: () => setOpenMenuId(openMenuId === "user" ? null : "user"), onNavigate: closeMenus, entries: userEntries })] }));
+    const renderCluster = (layout) => {
+        const isMobile = layout === "mobile";
+        return (_jsxs(_Fragment, { children: [_jsx(NavItems, { items: visibleItems, color: color, layout: layout, openMenuId: isMobile ? mobileAccordionId : desktopMenuId, setOpenMenuId: isMobile ? setMobileAccordionId : setDesktopMenuId, onNavigate: onLinkNavigate }), _jsx(UserMenu, { color: color, layout: layout, open: desktopMenuId === "user", onToggle: () => setDesktopMenuId((current) => (current === "user" ? null : "user")), onNavigate: onLinkNavigate, entries: userEntries })] }));
+    };
     return (_jsx("nav", { className: `py-2 ${color.bg600}`, "aria-label": "Principal", children: _jsxs("div", { className: "flex items-center justify-between gap-3 px-4 sm:px-5", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-2 lg:w-auto lg:flex-none", children: [_jsxs(Link, { className: `inline-flex min-h-11 min-w-0 cursor-pointer items-center gap-2 truncate text-sm font-bold uppercase text-white ${focusRing}`, to: "/home", children: [_jsx("img", { className: "h-7 w-auto shrink-0", src: "/logo.png", alt: "" }), _jsx("span", { className: "truncate", children: title })] }), version !== currentVersion && (_jsx("button", { type: "button", className: `shrink-0 cursor-pointer rounded-full px-3 py-2 text-xs text-white ${color.bg700} hover:opacity-90 ${focusRing}`, onClick: () => navigate(0), children: "Actualizar versi\u00F3n" })), _jsx("button", { type: "button", className: `inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-md text-white lg:hidden ${focusRing} ${navOpen ? "pointer-events-none invisible" : ""}`, "aria-label": "Abrir men\u00FA", "aria-expanded": navOpen, "aria-controls": mobileNavId, "aria-hidden": navOpen, tabIndex: navOpen ? -1 : undefined, onClick: () => setNavOpen(true), children: _jsx(MenuAlt4Svg, { open: false }) })] }), navOpen && (_jsx("button", { type: "button", "aria-label": "Cerrar men\u00FA", className: "fixed inset-0 z-40 cursor-pointer bg-black/40 lg:hidden", onClick: closeMenus })), _jsxs("div", { ref: mobileDrawerRef, id: mobileNavId, "aria-hidden": !navOpen, className: `fixed inset-y-0 left-0 z-50 flex w-[min(20rem,86vw)] flex-col ${color.bg700} shadow-lg transition-transform duration-200 ease-out motion-reduce:transition-none lg:hidden ${navOpen ? "translate-x-0" : "pointer-events-none -translate-x-full"}`, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-white/15 px-4 py-3", children: [_jsx("p", { className: "truncate text-sm font-bold uppercase text-white", children: title }), _jsx("button", { type: "button", className: `inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-md text-white ${focusRing}`, "aria-label": "Cerrar men\u00FA", onClick: closeMenus, children: _jsx(ExitSvg, {}) })] }), _jsx("div", { className: "flex-1 overflow-y-auto overscroll-contain p-3", children: renderCluster("mobile") })] }), _jsx("div", { ref: desktopMenuRef, className: "hidden min-w-0 flex-1 items-center gap-2 lg:flex", children: renderCluster("desktop") })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "6.16.0",
+  "version": "6.17.0",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -44,12 +44,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/node": "^2.8.1",
     "@remix-run/react": "^2.8.1",
-    "@zauru-sdk/common": "^6.12.0",
+    "@zauru-sdk/common": "^6.13.0",
     "@zauru-sdk/hooks": "^6.4.1",
     "@zauru-sdk/icons": "^6.2.0",
     "@zauru-sdk/redux": "^6.8.2",
-    "@zauru-sdk/types": "^6.28.0",
-    "@zauru-sdk/utils": "^6.27.0",
+    "@zauru-sdk/types": "^6.29.0",
+    "@zauru-sdk/utils": "^6.29.0",
     "browser-image-compression": "^2.0.2",
     "framer-motion": "^12.0.0",
     "jsonwebtoken": "^9.0.2",
@@ -62,5 +62,5 @@
     "styled-components": "^5.3.5",
     "zod": "^3.23.8"
   },
-  "gitHead": "5a47bf012ebb44d51bc409fb3828b2512befb8dd"
+  "gitHead": "4355159e008ace641976ba4c5598fc3c7a8e8263"
 }

package/src/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.tsx

@@ -1,10 +1,21 @@
 //<reference> https://tailwindtemplates.io/templates?category=alert
-import React from "react";
+import React, { useEffect } from "react";
+import { sendClientError } from "../../observability/sendClientError.js";
 
 type Props = { title: string; description: string };
 
 export const ErrorBoundaryAlert = (props: Props) => {
   const { title, description } = props;
+
+  useEffect(() => {
+    const message = [title, description].filter(Boolean).join(" — ");
+    if (!message) return;
+    sendClientError({
+      message,
+      source: "errorBoundary",
+    });
+  }, [title, description]);
+
   return (
     <div className="rounded-full top-20 mx-auto p-3">
       <div className="p-4 text-red-900 bg-red-100 border border-red-200 rounded-md">

package/src/NavBar/NavBar.tsx

@@ -4,7 +4,9 @@ import {
   useMemo,
   useRef,
   useState,
+  type Dispatch,
   type ReactNode,
+  type SetStateAction,
 } from "react";
 import {
   DropDownArrowSvgIcon,
@@ -383,7 +385,7 @@ const NavItems = ({
   color: ColorInterface;
   layout: NavLayout;
   openMenuId: string | null;
-  setOpenMenuId: (id: string | null) => void;
+  setOpenMenuId: Dispatch<SetStateAction<string | null>>;
   onNavigate?: () => void;
 }) => (
   <ul
@@ -405,7 +407,7 @@ const NavItems = ({
             layout={layout}
             open={openMenuId === menuKey}
             onToggle={() =>
-              setOpenMenuId(openMenuId === menuKey ? null : menuKey)
+              setOpenMenuId((current) => (current === menuKey ? null : menuKey))
             }
             onNavigate={onNavigate}
           />
@@ -436,7 +438,10 @@ export const NavBar = ({
 }: NavBarProps) => {
   const color: ColorInterface = COLORS[selectedColor];
   const [navOpen, setNavOpen] = useState(false);
-  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
+  const [desktopMenuId, setDesktopMenuId] = useState<string | null>(null);
+  const [mobileAccordionId, setMobileAccordionId] = useState<string | null>(
+    null
+  );
   const [currentVersion, setCurrentVersion] = useState(version);
   const [isDarkMode, setIsDarkMode] = useState(false);
   const navigate = useNavigate();
@@ -464,7 +469,8 @@ export const NavBar = ({
 
   useEffect(() => {
     setNavOpen(false);
-    setOpenMenuId(null);
+    setDesktopMenuId(null);
+    setMobileAccordionId(null);
   }, [location.pathname]);
 
   useEffect(() => {
@@ -490,28 +496,33 @@ export const NavBar = ({
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== "Escape") return;
       setNavOpen(false);
-      setOpenMenuId(null);
+      setDesktopMenuId(null);
+      setMobileAccordionId(null);
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, []);
 
   useEffect(() => {
+    if (!desktopMenuId) return;
     const onPointerDown = (event: MouseEvent) => {
-      if (
-        desktopMenuRef.current &&
-        !desktopMenuRef.current.contains(event.target as Node)
-      ) {
-        setOpenMenuId(null);
-      }
+      const target = event.target as Node;
+      if (mobileDrawerRef.current?.contains(target)) return;
+      if (desktopMenuRef.current?.contains(target)) return;
+      setDesktopMenuId(null);
     };
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
-  }, []);
+  }, [desktopMenuId]);
 
   const closeMenus = () => {
     setNavOpen(false);
-    setOpenMenuId(null);
+    setDesktopMenuId(null);
+    setMobileAccordionId(null);
+  };
+
+  const onLinkNavigate = () => {
+    window.setTimeout(closeMenus, 0);
   };
 
   const userEntries = useMemo<UserMenuEntry[]>(() => {
@@ -602,29 +613,34 @@ export const NavBar = ({
     );
     if (!activeGroup) return;
     const index = visibleItems.indexOf(activeGroup);
-    setOpenMenuId(`${activeGroup.name}-${index}`);
+    setMobileAccordionId(`${activeGroup.name}-${index}`);
   }, [navOpen, visibleItems, location.pathname]);
 
-  const renderCluster = (layout: NavLayout) => (
-    <>
-      <NavItems
-        items={visibleItems}
-        color={color}
-        layout={layout}
-        openMenuId={openMenuId}
-        setOpenMenuId={setOpenMenuId}
-        onNavigate={closeMenus}
-      />
-      <UserMenu
-        color={color}
-        layout={layout}
-        open={openMenuId === "user"}
-        onToggle={() => setOpenMenuId(openMenuId === "user" ? null : "user")}
-        onNavigate={closeMenus}
-        entries={userEntries}
-      />
-    </>
-  );
+  const renderCluster = (layout: NavLayout) => {
+    const isMobile = layout === "mobile";
+    return (
+      <>
+        <NavItems
+          items={visibleItems}
+          color={color}
+          layout={layout}
+          openMenuId={isMobile ? mobileAccordionId : desktopMenuId}
+          setOpenMenuId={isMobile ? setMobileAccordionId : setDesktopMenuId}
+          onNavigate={onLinkNavigate}
+        />
+        <UserMenu
+          color={color}
+          layout={layout}
+          open={desktopMenuId === "user"}
+          onToggle={() =>
+            setDesktopMenuId((current) => (current === "user" ? null : "user"))
+          }
+          onNavigate={onLinkNavigate}
+          entries={userEntries}
+        />
+      </>
+    );
+  };
 
   return (
     <nav className={`py-2 ${color.bg600}`} aria-label="Principal">