@pagamio/frontend-commons-lib 0.8.192 → 0.8.194

package/lib/components/layout/AppLayout.d.ts

@@ -28,7 +28,13 @@ interface AppLayoutProps {
      * Translation provider configuration
      */
     translationConfig?: Omit<TranslationProviderProps, 'children'>;
+    /**
+     * Optional custom header component to render at the top of the sidebar
+     * Useful for module switchers, additional navigation, or branding
+     * @default undefined
+     */
+    sidebarHeader?: React.ReactNode;
 }
-declare const AppLayout: ({ children, appNavbar, hideSidebar, hideNavbar, hideBreadcrumbNav, enableTranslations, translationConfig, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppLayout: ({ children, appNavbar, hideSidebar, hideNavbar, hideBreadcrumbNav, enableTranslations, translationConfig, sidebarHeader, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export default AppLayout;
 export type { AppLayoutProps };

package/lib/components/layout/AppLayout.js

@@ -4,7 +4,7 @@ import { useAnyDrawerOpen } from '../../shared/hooks/useAnyDrawerOpen';
 import { TranslationProvider } from '../../translations';
 import { AppBreadcrumbNav, AppDashboardNavbar, AppDashboardSidebar, AppLayoutContent, SessionExpiryModal, } from '../layout';
 import LoaderComponent from '../ui/Loader';
-const AppLayout = ({ children, appNavbar, hideSidebar = false, hideNavbar = false, hideBreadcrumbNav = false, enableTranslations = false, translationConfig, }) => {
+const AppLayout = ({ children, appNavbar, hideSidebar = false, hideNavbar = false, hideBreadcrumbNav = false, enableTranslations = false, translationConfig, sidebarHeader, }) => {
     const isDrawerOpen = useAnyDrawerOpen();
     const { showModal, countdown, loading, modalDismissed, handleCloseModal, handleRefreshToken } = useSessionTimer();
     if (loading) {

package/lib/components/layout/Sidebar.js

@@ -50,15 +50,15 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
             'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
 };
 const AppMobileSidebar = () => {
-    const { mobile: { isOpen, close }, } = useAppSidebarContext();
+    const { mobile: { isOpen, close }, sidebarHeader, } = useAppSidebarContext();
     const { t } = useTranslation();
     const { tLib } = useLibTranslations();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [_jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
 };
 const AppDesktopSidebar = () => {
-    const { desktop: { isCollapsed, setCollapsed }, } = useAppSidebarContext();
+    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, } = useAppSidebarContext();
     const [isPreview, setIsPreview] = useState(isCollapsed);
     const { tLib } = useLibTranslations();
     useEffect(() => {
@@ -78,7 +78,7 @@ const AppDesktopSidebar = () => {
             setCollapsed(true);
         },
     };
-    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "py-2", children: _jsx(AppSidebarMenu, {}) }) }) }));
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx(AppSidebarMenu, {})] }) }) }));
 };
 const AppDashboardSidebar = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));

package/lib/context/SidebarContext.d.ts

@@ -18,6 +18,7 @@ interface AppSidebarPageItem {
  * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
+ * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -33,6 +34,7 @@ interface AppSidebarContextProps {
     pages: AppSidebarPageItem[];
     pathname: string;
     linkComponent: React.ElementType;
+    sidebarHeader?: React.ReactNode;
 }
 /**
  * Props for the AppSidebarProvider component
@@ -42,18 +44,20 @@ interface AppSidebarContextProps {
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {ReactNode} children - Child components
+ * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
     pages: AppSidebarPageItem[];
     pathname: string;
     linkComponent: React.ElementType;
+    sidebarHeader?: React.ReactNode;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }: 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, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -28,7 +28,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         pages,
         pathname,
         linkComponent,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent]);
+        sidebarHeader,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/lib/pagamio-table/data-table/ExportButton.js

@@ -5,16 +5,16 @@ import { useEffect, useRef, useState } from 'react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
 import { exportToCsv, exportToPdf, exportToXlsx } from './exportUtils';
 const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, }) => {
-    const [popoverOpened, setPopoverOpened] = useState(false);
     const [exportType, setExportType] = useState(null);
     const [excludedColumns, setExcludedColumns] = useState(['action']);
     const [isExporting, setIsExporting] = useState(false);
     const [exportAllData, setExportAllData] = useState(false);
+    const [selectOpen, setSelectOpen] = useState(false);
     const popoverRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (popoverRef.current && !popoverRef.current.contains(event.target)) {
-                setPopoverOpened(false);
+                setExportType(null);
             }
         };
         document.addEventListener('mousedown', handleClickOutside);
@@ -63,28 +63,26 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
         }
         finally {
             setIsExporting(false);
-            setPopoverOpened(false);
             setExportType(null);
         }
     };
     const handleExportChange = (type) => {
         if (!type || type === 'none') {
             setExportType(null);
-            setPopoverOpened(false);
             return;
         }
         // Check if type is an extraOption
         const extra = extraOptions.find((opt) => opt.value === type);
         if (extra) {
             extra.onClick();
-            setPopoverOpened(false);
             setExportType(null);
             return;
         }
         setExportType(type);
-        setPopoverOpened(type !== exportType);
     };
-    return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-gray-500", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-white rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-gray-500 pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "This will fetch all records for the table" })] }), _jsx(Stack, { children: columns.map((col) => {
+    // Show popover when exportType is set and Select is closed
+    const popoverOpened = exportType !== null && !selectOpen;
+    return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', open: selectOpen, onOpenChange: setSelectOpen, onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-gray-500", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-white rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-gray-500 pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "This will fetch all records for the table" })] }), _jsx(Stack, { children: columns.map((col) => {
                             if (col.accessorKey !== 'action') {
                                 return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.header, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "rememberMe", children: col.header })] }, col.accessorKey));
                             }

package/lib/pagamio-table/data-table/TableToolbar.js

@@ -8,9 +8,16 @@ const TableToolbar = ({ searchable, searchQuery, onSearch, filters = [], applied
     };
     return (_jsx(FilterComponent, { filters: filters.map((filterObj) => ({
             name: filterObj.columnKey,
-            type: 'select',
+            type: filterObj.type || 'select',
             options: filterObj.options,
             placeholder: filterObj.placeholder,
-        })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => handleFilter(name, value), handleApplyFilters: handleApplyFilters ?? handleSearchTable, resetFilters: onClearFilters, showSearch: searchable, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportable && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: extraExportOptions, pdfOptions: pdfExportOptions, xlsxOptions: xlsxExportOptions, csvOptions: csvExportOptions, exportAll: exportAll, fetchData: fetchData }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd, icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
+        })), searctInputPlaceHolder: searctInputPlaceHolder, showClearFilters: showClearFilters, showApplyFilterButton: showApplyFilterButton, selectedFilters: appliedFilters, handleFilterChange: (name, value) => {
+            if (value instanceof Date) {
+                handleFilter(name, value.toISOString());
+            }
+            else {
+                handleFilter(name, value);
+            }
+        }, handleApplyFilters: handleApplyFilters ?? handleSearchTable, resetFilters: onClearFilters, showSearch: searchable, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportable && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: extraExportOptions, pdfOptions: pdfExportOptions, xlsxOptions: xlsxExportOptions, csvOptions: csvExportOptions, exportAll: exportAll, fetchData: fetchData }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd, icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
 };
 export default TableToolbar;

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.192",
+  "version": "0.8.194",
   "publishConfig": {
     "access": "public",
     "provenance": false