@ttn-shared/ui 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -2631,20 +2631,38 @@ var TI6 = __toESM(require("@tabler/icons-react"), 1);
 
 // src/components/sidebar/SidebarMenu.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var import_react_router_dom = require("react-router-dom");
 var MC4 = __toESM(require("@mantine/core"), 1);
 var TI5 = __toESM(require("@tabler/icons-react"), 1);
 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,
@@ -2668,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 })
         }
       )
@@ -2684,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) => {
@@ -2697,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: [
@@ -2739,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.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

@@ -2643,20 +2643,38 @@ import * as TI6 from "@tabler/icons-react";
 
 // src/components/sidebar/SidebarMenu.tsx
 import { Fragment as Fragment4 } from "react/jsx-runtime";
-import { NavLink } from "react-router-dom";
 import * as MC4 from "@mantine/core";
 import * as TI5 from "@tabler/icons-react";
 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,
@@ -2680,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 })
         }
       )
@@ -2696,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) => {
@@ -2709,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: [
@@ -2751,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.3.0",
+  "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"
   }
 }