@ttn-shared/ui 1.2.8 → 1.4.0

package/dist/index.cjs

@@ -2444,13 +2444,14 @@ var HelpModal = ({ opened, onClose }) => {
 var MC2 = __toESM(require("@mantine/core"), 1);
 var TI3 = __toESM(require("@tabler/icons-react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var cloudImage = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 72'><path d='M-77.4698 71.426C-77.4698 71.426 -102.699 40.2305 -82.8905 21.109C-53.4064 -7.35147 -33.3402 33.0955 -21.9827 16.3565C-3.19499 -11.3325 58.2673 -4.22647 39.4625 30.2055C29.5967 48.27 62.6052 45.5705 49.1486 71.462L-77.4698 71.426Z' fill='%23EBF3FA'/></svg>`;
 var ChangeAccountModal = ({
   opened,
   onClose,
   accounts,
   onChangeAccount
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Modal, { opened, onClose, size: 1200, title: "Cambiar cuenta", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Grid, { px: "lg", children: accounts.map((account, accountIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Grid.Col, { span: 6, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(MC2.Menu, { position: "right", width: 210, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Modal, { opened, onClose, size: 1200, title: "Seleccionar cuenta", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Grid, { px: "lg", children: accounts.map((account, accountIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Grid.Col, { span: 6, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(MC2.Menu, { position: "right", width: 210, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MC2.Menu.Target, { "data-testid": `change-account-account-option-${accountIndex}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       MC2.Group,
       {
@@ -2462,7 +2463,10 @@ var ChangeAccountModal = ({
           border: `1px solid ${theme.colors.gray[3]}`,
           borderRadius: theme.radius.md,
           padding: "8px",
-          cursor: "pointer"
+          cursor: "pointer",
+          backgroundImage: `url("${cloudImage}")`,
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
         }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", {}),
@@ -2626,21 +2630,39 @@ var MC5 = __toESM(require("@mantine/core"), 1);
 var TI6 = __toESM(require("@tabler/icons-react"), 1);
 
 // src/components/sidebar/SidebarMenu.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MC4 = __toESM(require("@mantine/core"), 1);
 var TI5 = __toESM(require("@tabler/icons-react"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var normalizePath = (path) => {
+  if (!path) {
+    return "/";
+  }
+  const normalized = path.replace(/\/+$/, "");
+  return normalized || "/";
+};
+var isActiveScreen = (screenUrl, pathname) => {
+  const currentPath = normalizePath(pathname);
+  const targetPath = normalizePath(screenUrl);
+  return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
+};
 var SidebarMenu = ({
   id,
   label,
   icon,
   active,
+  currentPathname,
   screens,
   onClickMenu,
   onCloseSidebar,
-  onClickExternalScreen
+  onClickExternalScreen,
+  onClickScreen
 }) => {
+  const pathname = currentPathname || "";
+  const handleClickScreen = (screen) => {
+    onCloseSidebar();
+    onClickScreen(screen);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       MC4.UnstyledButton,
@@ -2664,13 +2686,21 @@ var SidebarMenu = ({
       }
     ),
     Boolean(screens?.length) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Collapse, { in: active ?? false, children: screens?.map((screen) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      screen.external && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Box, { onClick: () => onClickExternalScreen(screen), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label }) }),
+      screen.external && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        MC4.Box,
+        {
+          onClick: () => onClickExternalScreen(screen),
+          "data-testid": `sidebar-menu-${label}-screen-${screen.label}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label })
+        }
+      ),
       !screen.external && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        import_react_router_dom.NavLink,
+        MC4.Box,
         {
-          to: screen.url || "#",
-          onClick: onCloseSidebar,
-          className: (isActive) => isActive ? "ttn-sidebar-menu-item active" : "ttn-sidebar-menu-item",
+          onClick: () => handleClickScreen(screen),
+          className: isActiveScreen(screen.url || "", pathname) ? "ttn-sidebar-menu-item active" : "ttn-sidebar-menu-item",
+          style: { cursor: "pointer" },
+          "data-testid": `sidebar-menu-${label}-screen-${screen.label}`,
           children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label })
         }
       )
@@ -2680,7 +2710,12 @@ var SidebarMenu = ({
 
 // src/components/sidebar/Sidebar.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Sidebar = ({ modules, onClickExternalScreen }) => {
+var Sidebar = ({
+  modules,
+  currentPathname,
+  onClickExternalScreen,
+  onClickScreen
+}) => {
   const [opened, setOpened] = (0, import_react9.useState)(false);
   const [activeModuleId, setActiveModuleId] = (0, import_react9.useState)(null);
   const handleClickMenu = (id) => {
@@ -2693,10 +2728,10 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
     setActiveModuleId(null);
     setOpened(false);
   };
-  const handleClickExternalScreen = (item) => {
+  const handleClickExternalScreen = (module2, screen) => {
     setActiveModuleId(null);
     setOpened(false);
-    onClickExternalScreen(item);
+    onClickExternalScreen(module2, screen);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("aside", { className: opened ? "ttn-sidebar" : "ttn-sidebar closed", children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(MC5.Flex, { direction: "column", justify: "center", h: 56, children: [
@@ -2735,10 +2770,12 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
         label: module2.label,
         icon: module2.icon,
         active: activeModuleId === module2.id,
+        currentPathname,
         screens: module2.screens,
         onClickMenu: handleClickMenu,
         onCloseSidebar: handleCloseSidebar,
-        onClickExternalScreen: handleClickExternalScreen
+        onClickExternalScreen: (screen) => handleClickExternalScreen(module2, screen),
+        onClickScreen: (screen) => onClickScreen(module2, screen)
       },
       module2.id
     )),

package/dist/index.css

@@ -11,7 +11,6 @@
   transition: width 0.3s ease;
   &.closed {
     width: 80px;
-    overflow: hidden;
   }
 }
 .ttn-sidebar-menu {

package/dist/index.d.cts

@@ -292,9 +292,11 @@ interface SidebarModule {
 
 interface SidebarProps {
     modules: SidebarModule[];
-    onClickExternalScreen: (item: SidebarModuleScreen) => void;
+    currentPathname?: string;
+    onClickExternalScreen: (module: SidebarModule, screen: SidebarModuleScreen) => void;
+    onClickScreen: (module: SidebarModule, screen: SidebarModuleScreen) => void;
 }
-declare const Sidebar: ({ modules, onClickExternalScreen }: SidebarProps) => react_jsx_runtime.JSX.Element;
+declare const Sidebar: ({ modules, currentPathname, onClickExternalScreen, onClickScreen, }: SidebarProps) => react_jsx_runtime.JSX.Element;
 
 interface TTNSharedProviderProps {
     token: string;

package/dist/index.d.ts

@@ -292,9 +292,11 @@ interface SidebarModule {
 
 interface SidebarProps {
     modules: SidebarModule[];
-    onClickExternalScreen: (item: SidebarModuleScreen) => void;
+    currentPathname?: string;
+    onClickExternalScreen: (module: SidebarModule, screen: SidebarModuleScreen) => void;
+    onClickScreen: (module: SidebarModule, screen: SidebarModuleScreen) => void;
 }
-declare const Sidebar: ({ modules, onClickExternalScreen }: SidebarProps) => react_jsx_runtime.JSX.Element;
+declare const Sidebar: ({ modules, currentPathname, onClickExternalScreen, onClickScreen, }: SidebarProps) => react_jsx_runtime.JSX.Element;
 
 interface TTNSharedProviderProps {
     token: string;

package/dist/index.js

@@ -2456,13 +2456,14 @@ var HelpModal = ({ opened, onClose }) => {
 import * as MC2 from "@mantine/core";
 import * as TI3 from "@tabler/icons-react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var cloudImage = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 72'><path d='M-77.4698 71.426C-77.4698 71.426 -102.699 40.2305 -82.8905 21.109C-53.4064 -7.35147 -33.3402 33.0955 -21.9827 16.3565C-3.19499 -11.3325 58.2673 -4.22647 39.4625 30.2055C29.5967 48.27 62.6052 45.5705 49.1486 71.462L-77.4698 71.426Z' fill='%23EBF3FA'/></svg>`;
 var ChangeAccountModal = ({
   opened,
   onClose,
   accounts,
   onChangeAccount
 }) => {
-  return /* @__PURE__ */ jsx11(MC2.Modal, { opened, onClose, size: 1200, title: "Cambiar cuenta", children: /* @__PURE__ */ jsx11(MC2.Grid, { px: "lg", children: accounts.map((account, accountIndex) => /* @__PURE__ */ jsx11(MC2.Grid.Col, { span: 6, children: /* @__PURE__ */ jsxs10(MC2.Menu, { position: "right", width: 210, children: [
+  return /* @__PURE__ */ jsx11(MC2.Modal, { opened, onClose, size: 1200, title: "Seleccionar cuenta", children: /* @__PURE__ */ jsx11(MC2.Grid, { px: "lg", children: accounts.map((account, accountIndex) => /* @__PURE__ */ jsx11(MC2.Grid.Col, { span: 6, children: /* @__PURE__ */ jsxs10(MC2.Menu, { position: "right", width: 210, children: [
     /* @__PURE__ */ jsx11(MC2.Menu.Target, { "data-testid": `change-account-account-option-${accountIndex}`, children: /* @__PURE__ */ jsxs10(
       MC2.Group,
       {
@@ -2474,7 +2475,10 @@ var ChangeAccountModal = ({
           border: `1px solid ${theme.colors.gray[3]}`,
           borderRadius: theme.radius.md,
           padding: "8px",
-          cursor: "pointer"
+          cursor: "pointer",
+          backgroundImage: `url("${cloudImage}")`,
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
         }),
         children: [
           /* @__PURE__ */ jsx11("div", {}),
@@ -2638,21 +2642,39 @@ import * as MC5 from "@mantine/core";
 import * as TI6 from "@tabler/icons-react";
 
 // src/components/sidebar/SidebarMenu.tsx
+import { Fragment as Fragment4 } from "react/jsx-runtime";
 import * as MC4 from "@mantine/core";
 import * as TI5 from "@tabler/icons-react";
-import { Fragment as Fragment4 } from "react/jsx-runtime";
-import { NavLink } from "react-router-dom";
 import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var normalizePath = (path) => {
+  if (!path) {
+    return "/";
+  }
+  const normalized = path.replace(/\/+$/, "");
+  return normalized || "/";
+};
+var isActiveScreen = (screenUrl, pathname) => {
+  const currentPath = normalizePath(pathname);
+  const targetPath = normalizePath(screenUrl);
+  return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
+};
 var SidebarMenu = ({
   id,
   label,
   icon,
   active,
+  currentPathname,
   screens,
   onClickMenu,
   onCloseSidebar,
-  onClickExternalScreen
+  onClickExternalScreen,
+  onClickScreen
 }) => {
+  const pathname = currentPathname || "";
+  const handleClickScreen = (screen) => {
+    onCloseSidebar();
+    onClickScreen(screen);
+  };
   return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     /* @__PURE__ */ jsxs12(
       MC4.UnstyledButton,
@@ -2676,13 +2698,21 @@ var SidebarMenu = ({
       }
     ),
     Boolean(screens?.length) && /* @__PURE__ */ jsx13(MC4.Collapse, { in: active ?? false, children: screens?.map((screen) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
-      screen.external && /* @__PURE__ */ jsx13(MC4.Box, { onClick: () => onClickExternalScreen(screen), children: /* @__PURE__ */ jsx13(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label }) }),
+      screen.external && /* @__PURE__ */ jsx13(
+        MC4.Box,
+        {
+          onClick: () => onClickExternalScreen(screen),
+          "data-testid": `sidebar-menu-${label}-screen-${screen.label}`,
+          children: /* @__PURE__ */ jsx13(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label })
+        }
+      ),
       !screen.external && /* @__PURE__ */ jsx13(
-        NavLink,
+        MC4.Box,
         {
-          to: screen.url || "#",
-          onClick: onCloseSidebar,
-          className: (isActive) => isActive ? "ttn-sidebar-menu-item active" : "ttn-sidebar-menu-item",
+          onClick: () => handleClickScreen(screen),
+          className: isActiveScreen(screen.url || "", pathname) ? "ttn-sidebar-menu-item active" : "ttn-sidebar-menu-item",
+          style: { cursor: "pointer" },
+          "data-testid": `sidebar-menu-${label}-screen-${screen.label}`,
           children: /* @__PURE__ */ jsx13(MC4.Text, { size: "sm", c: "gray.7", lineClamp: 1, children: screen.label })
         }
       )
@@ -2692,7 +2722,12 @@ var SidebarMenu = ({
 
 // src/components/sidebar/Sidebar.tsx
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-var Sidebar = ({ modules, onClickExternalScreen }) => {
+var Sidebar = ({
+  modules,
+  currentPathname,
+  onClickExternalScreen,
+  onClickScreen
+}) => {
   const [opened, setOpened] = useState7(false);
   const [activeModuleId, setActiveModuleId] = useState7(null);
   const handleClickMenu = (id) => {
@@ -2705,10 +2740,10 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
     setActiveModuleId(null);
     setOpened(false);
   };
-  const handleClickExternalScreen = (item) => {
+  const handleClickExternalScreen = (module, screen) => {
     setActiveModuleId(null);
     setOpened(false);
-    onClickExternalScreen(item);
+    onClickExternalScreen(module, screen);
   };
   return /* @__PURE__ */ jsxs13("aside", { className: opened ? "ttn-sidebar" : "ttn-sidebar closed", children: [
     /* @__PURE__ */ jsxs13(MC5.Flex, { direction: "column", justify: "center", h: 56, children: [
@@ -2747,10 +2782,12 @@ var Sidebar = ({ modules, onClickExternalScreen }) => {
         label: module.label,
         icon: module.icon,
         active: activeModuleId === module.id,
+        currentPathname,
         screens: module.screens,
         onClickMenu: handleClickMenu,
         onCloseSidebar: handleCloseSidebar,
-        onClickExternalScreen: handleClickExternalScreen
+        onClickExternalScreen: (screen) => handleClickExternalScreen(module, screen),
+        onClickScreen: (screen) => onClickScreen(module, screen)
       },
       module.id
     )),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttn-shared/ui",
-  "version": "1.2.8",
+  "version": "1.4.0",
   "private": false,
   "type": "module",
   "files": [
@@ -49,10 +49,8 @@
     "@types/node": "18.19.130",
     "@types/react": "18.3.27",
     "@types/react-dom": "18.3.7",
-    "@types/react-router-dom": "^5.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^5.3.4",
     "tsup": "8.5.1",
     "typescript": "5.9.3"
   },
@@ -62,7 +60,6 @@
     "@tabler/icons-react": ">=3.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "react-router-dom": ">=5.0.0"
+    "react-dom": ">=18.0.0"
   }
 }

package/styles.css

@@ -11,7 +11,6 @@
   transition: width 0.3s ease;
   &.closed {
     width: 80px;
-    overflow: hidden;
   }
 }
 .ttn-sidebar-menu {