tcce-design-system-test 0.3.38 → 0.3.39

package/dist/tcce-design-system-components.d.ts

@@ -855,15 +855,15 @@ export declare type HasIcons<T extends WithIconsProps> = {
 /**
  * Checks if the user has at least one of the required permissions.
  *
- * @param {string[]} userRoles - The roles or permissions assigned to the user.
- * @param {string[]} permissions - The required permissions to check against.
+ * @param {string[]} userPermissions - The permissions assigned to the user.
+ * @param {string[]} requiredPermissions - The required permissions to check against.
  * @returns {boolean} True if the user has permission, otherwise false.
  *
- * - Returns false if no permissions are provided.
- * - Returns true if 'all' is included in the permissions array.
- * - Returns true if any of the user's roles match the required permissions.
+ * - Returns false if no required permissions are provided.
+ * - Returns true if 'all' is included in the required permissions array.
+ * - Returns true if any of the user's permissions match the required permissions.
  */
-export declare const hasPermission: (userRoles?: string[], permissions?: string[]) => boolean;
+export declare const hasPermission: (userPermissions?: string[], requiredPermissions?: string[]) => boolean;
 
 /**
  * Main Header component for the application.
@@ -1048,7 +1048,7 @@ export declare interface LayoutMainContentProps {
  * Includes navigation config, user info, and event handlers.
  * @children - Main content to be rendered within the layout.
  * @navigationConfig - Configuration for sidebar navigation items.
- * @userRoles - Roles of the current user for permission-based rendering.
+ * @userPermissions - Permissions of the current user for permission-based rendering.
  * @activePath - Currently active navigation path.
  * @user - User information for the header profile section.
  * @hasNotifications - Whether to show notification indicator in header.
@@ -1428,13 +1428,13 @@ export declare type SetDigits = Dispatch<SetStateAction<string[]>>;
 /**
  * Sidebar component for navigation.
  * @param navigationConfig - Navigation items configuration.
- * @param userRoles - User roles for access control.
+ * @param userPermissions - User permissions for access control.
  * @param activePath - Currently active navigation path.
  * @param logoImgExpanded - Logo when sidebar is expanded.
  * @param logoImgCollapsed - Logo when sidebar is collapsed.
  */
 export declare const Sidebar: {
-    ({ navigationConfig, userRoles, activePath, logoImgExpanded, logoImgCollapsed, onNavigate, }: SidebarProps): JSX.Element;
+    ({ navigationConfig, activePath, logoImgExpanded, logoImgCollapsed, onNavigate, userPermissions, }: SidebarProps): JSX.Element;
     displayName: string;
 };
 
@@ -1466,15 +1466,15 @@ $collapsed: boolean;
  * Props for the Sidebar component.
  *
  * @property navigationConfig - Array of NavigationItem objects defining the sidebar structure.
- * @property userRoles - Optional array of roles assigned to the current user for permission checks.
+ * @property userPermissions - Array of permissions assigned to the current user for permission checks.
  * @property activePath - Optional string representing the currently active navigation path for highlighting purposes.
  * @property logoImgExpanded - Optional React node for the logo when sidebar is expanded.
  * @property logoImgCollapsed - Optional React node for the logo when sidebar is collapsed.
- * @property LinkComponent - Optional custom Link component (e.g., Next.js Link) for internal navigation. If not provided, uses standard anchor tags.
+ * @property onNavigate - Optional callback function for handling navigation events.
  */
 export declare interface SidebarProps {
     navigationConfig: NavigationItem[];
-    userRoles?: string[];
+    userPermissions?: Permission[];
     activePath?: string;
     logoImgExpanded?: ReactNode;
     logoImgCollapsed?: ReactNode;

package/dist/tcce-design-system-components.js

@@ -9318,7 +9318,7 @@ const yl = Je(void 0), n0 = ({ children: e }) => {
   if (!e)
     throw new Error("useSidebar must be used within a SidebarProvider");
   return e;
-}, ls = (e = [], t = []) => !t || t.length === 0 ? !1 : t.includes("all") ? !0 : t.some((n) => e.includes(n)), o0 = b`
+}, ls = (e = [], t = []) => !t || t.length === 0 ? !1 : t.includes("all") ? !0 : e.some((n) => t.includes(n)), o0 = b`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -9410,7 +9410,7 @@ const yl = Je(void 0), n0 = ({ children: e }) => {
     transform: rotate(${({ $open: e }) => e ? "90deg" : "0deg"});
     pointer-events: none;
     transition: transform 0.3s ease-out;
-`, bl = ({ item: e, userRoles: t, level: n = 0, activePath: o, onNavigate: r }) => {
+`, bl = ({ item: e, userPermissions: t, level: n = 0, activePath: o, onNavigate: r }) => {
   const [i, s] = Q(!1), { isCollapsed: a, setIsMobileOpen: l, setIsCollapsed: c } = vl(), d = W(
     () => (e.children || []).filter((w) => ls(t, w.permissions)),
     [e.children, t]
@@ -9493,7 +9493,7 @@ const yl = Je(void 0), n0 = ({ children: e }) => {
       bl,
       {
         item: w,
-        userRoles: t,
+        userPermissions: t,
         level: n + 1,
         onNavigate: r,
         activePath: o
@@ -9588,21 +9588,21 @@ const yl = Je(void 0), n0 = ({ children: e }) => {
     }
 `, xl = ({
   navigationConfig: e,
-  userRoles: t = [],
-  activePath: n,
-  logoImgExpanded: o,
-  logoImgCollapsed: r,
-  onNavigate: i = () => {
-  }
+  activePath: t,
+  logoImgExpanded: n,
+  logoImgCollapsed: o,
+  onNavigate: r = () => {
+  },
+  userPermissions: i = []
 }) => {
   const { isCollapsed: s, setIsCollapsed: a, isMobileOpen: l, setIsMobileOpen: c } = vl(), d = (u) => {
-    i(u), typeof window < "u" && window.innerWidth < 768 && c(!1);
+    r(u), typeof window < "u" && window.innerWidth < 768 && c(!1);
   };
   return /* @__PURE__ */ E(Ze, { children: [
     /* @__PURE__ */ g(Zt, { children: l && /* @__PURE__ */ g(f0, { ...gl, onClick: () => c(!1) }) }),
     /* @__PURE__ */ E(h0, { $collapsed: l ? !1 : s, $open: l, children: [
       /* @__PURE__ */ E(m0, { $collapsed: s, children: [
-        /* @__PURE__ */ g(p0, { children: s ? r : o }),
+        /* @__PURE__ */ g(p0, { children: s ? o : n }),
         /* @__PURE__ */ g(
           y0,
           {
@@ -9623,9 +9623,9 @@ const yl = Je(void 0), n0 = ({ children: e }) => {
         bl,
         {
           item: u,
-          userRoles: t,
           onNavigate: d,
-          activePath: n
+          activePath: t,
+          userPermissions: i
         },
         u.id
       )) })
@@ -13214,7 +13214,7 @@ const Pv = x.div`
 `, Vv = ({
   children: e,
   navigationConfig: t,
-  userRoles: n = [],
+  userPermissions: n = [],
   activePath: o,
   user: r,
   hasNotifications: i = !1,
@@ -13232,7 +13232,7 @@ const Pv = x.div`
     xl,
     {
       navigationConfig: t,
-      userRoles: n,
+      userPermissions: n,
       activePath: o,
       logoImgCollapsed: f,
       logoImgExpanded: m,

package/dist/tcce-design-system-components.umd.cjs

@@ -1319,7 +1319,7 @@
     background-color: var(--color-dark-600);
 
     ${({$placement:e})=>u0(e)}
-`,vl=({content:e,children:t,placement:n="bottom",trigger:o="hover",className:r="",arrowClassName:i="",delay:s=200,showArrow:a=!0})=>{const[l,c]=p.useState(!1),d=p.useRef(null),u=p.useRef(null),h=p.useRef(null);p.useEffect(()=>{if(o!=="click"||!l)return;const w=C=>{u.current&&!u.current.contains(C.target)&&h.current&&!h.current.contains(C.target)&&c(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[l,o]),p.useEffect(()=>()=>{d.current&&clearTimeout(d.current)},[]);const b=o==="hover"?{onMouseEnter:()=>{d.current&&clearTimeout(d.current),d.current=setTimeout(()=>c(!0),s)},onMouseLeave:()=>{d.current&&clearTimeout(d.current),d.current=setTimeout(()=>c(!1),100)}}:{onClick:()=>{c(w=>!w)}};return m.jsxs(s0,{children:[m.jsx(a0,{ref:h,...b,children:t}),l&&m.jsxs(c0,{ref:u,$placement:n,className:r,role:"tooltip","aria-hidden":!l,children:[e,a&&m.jsx(d0,{$placement:n,className:i})]})]})};vl.displayName="Tooltip";const lr=p.createContext(void 0),yl=({children:e})=>{const[t,n]=p.useState(!1),[o,r]=p.useState(!1);return m.jsx(lr.Provider,{value:{isCollapsed:t,setIsCollapsed:n,isMobileOpen:o,setIsMobileOpen:r},children:e})},cr=()=>{const e=p.useContext(lr);if(!e)throw new Error("useSidebar must be used within a SidebarProvider");return e},ur=(e=[],t=[])=>!t||t.length===0?!1:t.includes("all")?!0:t.some(n=>e.includes(n)),f0=g.css`
+`,vl=({content:e,children:t,placement:n="bottom",trigger:o="hover",className:r="",arrowClassName:i="",delay:s=200,showArrow:a=!0})=>{const[l,c]=p.useState(!1),d=p.useRef(null),u=p.useRef(null),h=p.useRef(null);p.useEffect(()=>{if(o!=="click"||!l)return;const w=C=>{u.current&&!u.current.contains(C.target)&&h.current&&!h.current.contains(C.target)&&c(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[l,o]),p.useEffect(()=>()=>{d.current&&clearTimeout(d.current)},[]);const b=o==="hover"?{onMouseEnter:()=>{d.current&&clearTimeout(d.current),d.current=setTimeout(()=>c(!0),s)},onMouseLeave:()=>{d.current&&clearTimeout(d.current),d.current=setTimeout(()=>c(!1),100)}}:{onClick:()=>{c(w=>!w)}};return m.jsxs(s0,{children:[m.jsx(a0,{ref:h,...b,children:t}),l&&m.jsxs(c0,{ref:u,$placement:n,className:r,role:"tooltip","aria-hidden":!l,children:[e,a&&m.jsx(d0,{$placement:n,className:i})]})]})};vl.displayName="Tooltip";const lr=p.createContext(void 0),yl=({children:e})=>{const[t,n]=p.useState(!1),[o,r]=p.useState(!1);return m.jsx(lr.Provider,{value:{isCollapsed:t,setIsCollapsed:n,isMobileOpen:o,setIsMobileOpen:r},children:e})},cr=()=>{const e=p.useContext(lr);if(!e)throw new Error("useSidebar must be used within a SidebarProvider");return e},ur=(e=[],t=[])=>!t||t.length===0?!1:t.includes("all")?!0:e.some(n=>t.includes(n)),f0=g.css`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1411,7 +1411,7 @@
     transform: rotate(${({$open:e})=>e?"90deg":"0deg"});
     pointer-events: none;
     transition: transform 0.3s ease-out;
-`,bl=({item:e,userRoles:t,level:n=0,activePath:o,onNavigate:r})=>{const[i,s]=p.useState(!1),{isCollapsed:a,setIsMobileOpen:l,setIsCollapsed:c}=cr(),d=p.useMemo(()=>(e.children||[]).filter(x=>ur(t,x.permissions)),[e.children,t]);if(!p.useMemo(()=>ur(t,e.permissions),[t,e.permissions]))return null;const h=d.length>0,f=e.href||e.path||"",v=!!(f&&o&&o.startsWith(f)),y=()=>{a&&c(!1),s(x=>!x)},b=()=>{a&&c(!1),e.href&&r?.(e.href)},w=async()=>{if(a&&c(!1),!e.path)return;const x=e.target||"_blank";try{typeof window<"u"&&(x==="_blank"?window.open(e.path,"_blank","noopener,noreferrer"):window.location.href=e.path),l&&l(!1)}catch(k){console.error("Error al navegar a microservicio:",k)}},C=()=>m.jsxs(m.Fragment,{children:[m.jsxs(m0,{children:[n>0&&!a&&m.jsx(w0,{}),e.icon&&m.jsx(U,{component:e.icon,size:n===0?"md":"sm",color:"var(--color-main-blue-primary)"}),!a&&m.jsx(g0,{$level:n,size:n===0?16:n===1?14:12,color:"var(--color-dark-700, #374151)",children:e.label})]}),!a&&h&&m.jsx(b0,{$disabled:a,$open:i,children:m.jsx(U,{component:Pm,size:"sm",color:"var(--color-main-blue-primary)"})})]});return m.jsxs(y0,{$level:n,children:[e.href&&!e.path&&!h?m.jsx(h0,{type:"button",onClick:b,$level:n,$collapsed:a,$active:v,title:a?e.label:"",children:C()}):m.jsx(p0,{type:"button",onClick:h?y:e.path?w:b,$level:n,$collapsed:a,$active:v,$expanded:i&&h,title:a?e.label:"",children:C()}),m.jsx(Lt,{initial:!1,children:!a&&i&&h&&m.jsx(v0,{$level:n+1,...fl,children:d.map(x=>m.jsx(bl,{item:x,userRoles:t,level:n+1,onNavigate:r,activePath:o},x.id))})})]})},xl=g(Fe.div)`
+`,bl=({item:e,userPermissions:t,level:n=0,activePath:o,onNavigate:r})=>{const[i,s]=p.useState(!1),{isCollapsed:a,setIsMobileOpen:l,setIsCollapsed:c}=cr(),d=p.useMemo(()=>(e.children||[]).filter(x=>ur(t,x.permissions)),[e.children,t]);if(!p.useMemo(()=>ur(t,e.permissions),[t,e.permissions]))return null;const h=d.length>0,f=e.href||e.path||"",v=!!(f&&o&&o.startsWith(f)),y=()=>{a&&c(!1),s(x=>!x)},b=()=>{a&&c(!1),e.href&&r?.(e.href)},w=async()=>{if(a&&c(!1),!e.path)return;const x=e.target||"_blank";try{typeof window<"u"&&(x==="_blank"?window.open(e.path,"_blank","noopener,noreferrer"):window.location.href=e.path),l&&l(!1)}catch(k){console.error("Error al navegar a microservicio:",k)}},C=()=>m.jsxs(m.Fragment,{children:[m.jsxs(m0,{children:[n>0&&!a&&m.jsx(w0,{}),e.icon&&m.jsx(U,{component:e.icon,size:n===0?"md":"sm",color:"var(--color-main-blue-primary)"}),!a&&m.jsx(g0,{$level:n,size:n===0?16:n===1?14:12,color:"var(--color-dark-700, #374151)",children:e.label})]}),!a&&h&&m.jsx(b0,{$disabled:a,$open:i,children:m.jsx(U,{component:Pm,size:"sm",color:"var(--color-main-blue-primary)"})})]});return m.jsxs(y0,{$level:n,children:[e.href&&!e.path&&!h?m.jsx(h0,{type:"button",onClick:b,$level:n,$collapsed:a,$active:v,title:a?e.label:"",children:C()}):m.jsx(p0,{type:"button",onClick:h?y:e.path?w:b,$level:n,$collapsed:a,$active:v,$expanded:i&&h,title:a?e.label:"",children:C()}),m.jsx(Lt,{initial:!1,children:!a&&i&&h&&m.jsx(v0,{$level:n+1,...fl,children:d.map(x=>m.jsx(bl,{item:x,userPermissions:t,level:n+1,onNavigate:r,activePath:o},x.id))})})]})},xl=g(Fe.div)`
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
@@ -1496,7 +1496,7 @@
     @media (min-width: 768px) {
         display: none;
     }
-`,dr=({navigationConfig:e,userRoles:t=[],activePath:n,logoImgExpanded:o,logoImgCollapsed:r,onNavigate:i=()=>{}})=>{const{isCollapsed:s,setIsCollapsed:a,isMobileOpen:l,setIsMobileOpen:c}=cr(),d=u=>{i(u),typeof window<"u"&&window.innerWidth<768&&c(!1)};return m.jsxs(m.Fragment,{children:[m.jsx(Lt,{children:l&&m.jsx(xl,{...ar,onClick:()=>c(!1)})}),m.jsxs(Sl,{$collapsed:l?!1:s,$open:l,children:[m.jsxs(Cl,{$collapsed:s,children:[m.jsx(Tl,{children:s?r:o}),m.jsx(kl,{onClick:()=>a(!s),"aria-label":"Toggle collapse",children:m.jsx(U,{component:Xa,size:"md",color:"var(--color-main-blue-primary)"})})]}),m.jsx($l,{children:e.map(u=>m.jsx(bl,{item:u,userRoles:t,onNavigate:d,activePath:n},u.id))})]}),m.jsx(Pl,{onClick:()=>{c(!0),a(!1)},$hidden:l,children:m.jsx(U,{component:Xa,size:30})})]})};dr.displayName="Sidebar";const Ml={underlined:g.css`
+`,dr=({navigationConfig:e,activePath:t,logoImgExpanded:n,logoImgCollapsed:o,onNavigate:r=()=>{},userPermissions:i=[]})=>{const{isCollapsed:s,setIsCollapsed:a,isMobileOpen:l,setIsMobileOpen:c}=cr(),d=u=>{r(u),typeof window<"u"&&window.innerWidth<768&&c(!1)};return m.jsxs(m.Fragment,{children:[m.jsx(Lt,{children:l&&m.jsx(xl,{...ar,onClick:()=>c(!1)})}),m.jsxs(Sl,{$collapsed:l?!1:s,$open:l,children:[m.jsxs(Cl,{$collapsed:s,children:[m.jsx(Tl,{children:s?o:n}),m.jsx(kl,{onClick:()=>a(!s),"aria-label":"Toggle collapse",children:m.jsx(U,{component:Xa,size:"md",color:"var(--color-main-blue-primary)"})})]}),m.jsx($l,{children:e.map(u=>m.jsx(bl,{item:u,onNavigate:d,activePath:t,userPermissions:i},u.id))})]}),m.jsx(Pl,{onClick:()=>{c(!0),a(!1)},$hidden:l,children:m.jsx(U,{component:Xa,size:30})})]})};dr.displayName="Sidebar";const Ml={underlined:g.css`
         color: var(--color-main-orange-primary);
         text-decoration-thickness: 1px;
         text-underline-offset: 2px;
@@ -2200,7 +2200,7 @@
     flex-direction: column;
     height: 100vh;
     overflow: hidden;
-`,hy=({children:e,navigationConfig:t,userRoles:n=[],activePath:o,user:r,hasNotifications:i=!1,notificationCount:s,onNotificationClick:a,onUserProfileClick:l,onNavigate:c,onLogout:d,userMenuItems:u=[],contentClassName:h,logoImgCollapsed:f,logoImgExpanded:v})=>m.jsxs(fy,{children:[m.jsx(dr,{navigationConfig:t,userRoles:n,activePath:o,logoImgCollapsed:f,logoImgExpanded:v,onNavigate:c}),m.jsx(Ar,{user:r,hasNotifications:i,notificationCount:s,onNotificationClick:a,onUserProfileClick:l,onLogout:d,userMenuItems:u}),m.jsx(Ir,{className:h,children:e})]}),py=e=>m.jsx(yl,{children:m.jsx(hy,{...e})});function my(e,t,n){let o=`${e}=${encodeURIComponent(t)}; path=/; SameSite=Strict; Secure`;if(n){const r=new Date(Date.now()+n*864e5).toUTCString();o+=`; expires=${r}`}document.cookie=o}function gy(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}function vy(e){document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`}const jt={sm:{circle:"2rem",fontSize:D[14],line:"2px"},md:{circle:"2.5rem",fontSize:D[18],line:"2px"},lg:{circle:"3.25rem",fontSize:D[20],line:"3px"}},yy=g.div`
+`,hy=({children:e,navigationConfig:t,userPermissions:n=[],activePath:o,user:r,hasNotifications:i=!1,notificationCount:s,onNotificationClick:a,onUserProfileClick:l,onNavigate:c,onLogout:d,userMenuItems:u=[],contentClassName:h,logoImgCollapsed:f,logoImgExpanded:v})=>m.jsxs(fy,{children:[m.jsx(dr,{navigationConfig:t,userPermissions:n,activePath:o,logoImgCollapsed:f,logoImgExpanded:v,onNavigate:c}),m.jsx(Ar,{user:r,hasNotifications:i,notificationCount:s,onNotificationClick:a,onUserProfileClick:l,onLogout:d,userMenuItems:u}),m.jsx(Ir,{className:h,children:e})]}),py=e=>m.jsx(yl,{children:m.jsx(hy,{...e})});function my(e,t,n){let o=`${e}=${encodeURIComponent(t)}; path=/; SameSite=Strict; Secure`;if(n){const r=new Date(Date.now()+n*864e5).toUTCString();o+=`; expires=${r}`}document.cookie=o}function gy(e){return document.cookie.split("; ").reduce((t,n)=>{const o=n.split("=");return o[0]===e?decodeURIComponent(o[1]):t},"")}function vy(e){document.cookie=`${e}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`}const jt={sm:{circle:"2rem",fontSize:D[14],line:"2px"},md:{circle:"2.5rem",fontSize:D[18],line:"2px"},lg:{circle:"3.25rem",fontSize:D[20],line:"3px"}},yy=g.div`
     display: flex;
     width: 100%;
 `,wy=g.div`

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.3.38",
+    "version": "0.3.39",
     "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
     "author": "BizAppsTotal <bizapps@tcce.biz>",
     "type": "module",