@mesob/ui 0.4.3 → 0.4.5

package/dist/components.d.ts

@@ -133,9 +133,10 @@ type AppSidebarProps = {
     navItems: NavItem[];
     footer?: React$1.ReactNode;
     pathname?: string;
-    roles?: string[];
+    /** User's permission IDs (e.g. from session). Nav items with permission[] are shown only if grant(item.permission, userPermissions). */
+    userPermissions?: string[];
 };
-declare function AppSidebar({ logo, navItems, footer, pathname, roles, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+declare function AppSidebar({ logo, navItems, footer, pathname, userPermissions, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
 
 type LoaderType = 'oval' | 'bars' | 'dots';
 type LoaderProps = {

package/dist/components.js

@@ -1805,6 +1805,7 @@ function AppHeaderActions({
 }
 
 // src/components/app/app-sidebar.tsx
+import { grant } from "@mesob/common/permission";
 import { useMesob as useMesob3 } from "@mesob/ui/providers";
 import { IconChevronDown } from "@tabler/icons-react";
 import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
@@ -2680,14 +2681,11 @@ function hasActiveDescendant(item, pathname) {
   }
   return item.children?.some((c) => hasActiveDescendant(c, pathname)) ?? false;
 }
-function hasPermission(roles, permission) {
-  if (!permission?.length) {
+function hasGrant(requiredPermissions, userPermissions) {
+  if (!requiredPermissions?.length) {
     return true;
   }
-  if (!roles?.length) {
-    return true;
-  }
-  return permission.some((p) => roles.includes(p));
+  return grant(requiredPermissions, userPermissions);
 }
 var TRUNCATION_TOOLTIP_MIN_LENGTH = 24;
 function TruncationTooltip({
@@ -2746,7 +2744,7 @@ function NavItemRow({
   item,
   level,
   pathname,
-  roles,
+  userPermissions,
   onNavClick
 }) {
   const mesob = useMesob3();
@@ -2758,7 +2756,7 @@ function NavItemRow({
   const pathMatch = item.pathMatch ?? "prefix";
   const isActive = isLinkActive(pathname, item.href, pathMatch);
   const lineLeft = 28 + 20 * level;
-  if (!hasPermission(roles, item.permission)) {
+  if (!hasGrant(item.permission, userPermissions)) {
     return null;
   }
   const paddingLeft = 20 + 20 * level;
@@ -2824,7 +2822,7 @@ function NavItemRow({
           item: child,
           level: level + 1,
           pathname,
-          roles,
+          userPermissions,
           onNavClick
         },
         `${item.href ?? item.title}-child-${index}-${child.href ?? child.title}`
@@ -2837,7 +2835,7 @@ function AppSidebar({
   navItems,
   footer,
   pathname,
-  roles
+  userPermissions
 }) {
   const { isMobile, setOpenMobile } = useSidebar();
   const closeSidebar = () => {
@@ -2871,7 +2869,7 @@ function AppSidebar({
               item,
               level: 0,
               pathname,
-              roles,
+              userPermissions,
               onNavClick: closeSidebar
             },
             `${groupName}-${index}-${item.href ?? item.title}`