@pagamio/frontend-commons-lib 0.8.207 → 0.8.208

package/lib/components/layout/Sidebar.js

@@ -5,8 +5,13 @@ import React, { useEffect, useState } from 'react';
 import { useAppSidebarContext } from '../../context';
 import { useLibTranslations, useTranslation } from '../../translations';
 const AppSidebarMenu = () => {
-    const { pages } = useAppSidebarContext();
-    return (_jsx(Sidebar.Items, { children: pages.map((item) => (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...item }) }, item.label))) }));
+    const { pages, groupByItem } = useAppSidebarContext();
+    // If groupByItem is true each item gets its own ItemGroup
+    if (groupByItem) {
+        return (_jsx(Sidebar.Items, { children: pages.map((item) => (_jsx(Sidebar.ItemGroup, { children: _jsx(AppSidebarItem, { ...item }) }, item.label))) }));
+    }
+    // Default behavior all items in one ItemGroup
+    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
 };
 const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();

package/lib/context/SidebarContext.d.ts

@@ -20,6 +20,7 @@ interface AppSidebarPageItem {
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
+ * @property {boolean} groupByItem - If true, each sidebar item gets its own ItemGroup. If false, all items share one ItemGroup.
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -37,6 +38,7 @@ interface AppSidebarContextProps {
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
     sidebarFooter?: React.ReactNode;
+    groupByItem?: boolean;
 }
 /**
  * Props for the AppSidebarProvider component
@@ -48,6 +50,7 @@ interface AppSidebarContextProps {
  * @property {ReactNode} children - Child components
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
+ * @property {boolean} groupByItem - If true, each sidebar item gets its own ItemGroup. If false (default), all items share one ItemGroup.
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
@@ -56,12 +59,13 @@ interface AppSidebarProviderProps extends PropsWithChildren {
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
     sidebarFooter?: React.ReactNode;
+    groupByItem?: boolean;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook for accessing sidebar context
  * @throws {Error} When used outside AppSidebarProvider

package/lib/context/SidebarContext.js

@@ -8,7 +8,7 @@ const AppSidebarContext = createContext(null);
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem = false, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -30,7 +30,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         linkComponent,
         sidebarHeader,
         sidebarFooter,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter]);
+        groupByItem,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, groupByItem]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.207",
+  "version": "0.8.208",
   "publishConfig": {
     "access": "public",
     "provenance": false