@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/pagamio-drawer/components/BaseDrawer.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface BaseDrawerProps {
+    title: string;
+    isOpen: boolean;
+    marginTop?: string;
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare const BaseDrawer: React.FC<BaseDrawerProps>;
+export default BaseDrawer;
+export type { BaseDrawerProps };

package/lib/pagamio-drawer/components/BaseDrawer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from 'flowbite-react';
+const BaseDrawer = ({ title, isOpen, marginTop = '0px', onClose, children }) => {
+    return (_jsxs(Drawer, { open: isOpen, onClose: onClose, backdrop: false, position: "right", className: "flex flex-col px-0 bg-customGray-5 border-l-2 border-gray-100 w-full md:w-[420px]", style: {
+            marginTop,
+            height: `calc(100vh - ${marginTop})`,
+            paddingTop: '0px',
+        }, children: [_jsxs("div", { className: "sticky top-0 flex items-center h-12 border-b", style: { zIndex: 100 }, children: [_jsx("div", { className: "flex items-center justify-start pl-6 h-full bg-customGray-25 py-5", style: { width: '88%' }, children: _jsx("h2", { className: "text-lg font-semibold text-black truncate", children: title }) }), _jsx("button", { type: "button", className: "hover:text-gray-500 hover:bg-customGray-15", onClick: onClose, style: { width: '12%', backgroundColor: 'white', height: '3rem' }, children: "x" })] }), children] }));
+};
+export default BaseDrawer;

package/lib/pagamio-drawer/components/DrawerContent.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { DependentFieldUpdate, Field, SelectOption, ValidationRule } from '../../form-engine';
+interface DrawerContentProps {
+    fields: Field[];
+    onSubmit: (data: any) => Promise<void>;
+    initialValues?: any;
+    isOpen?: boolean;
+    cancelButtonText?: string;
+    submitButtonText?: string;
+    children?: React.ReactNode;
+    showForm?: boolean;
+    showDrawerButtons?: boolean;
+    handleCloseDrawer: () => void;
+    onFieldUpdate?: Record<string, DependentFieldUpdate[]>;
+    onFieldChange?: (fieldName: string, value: any) => void;
+    updateFieldOptions?: (field: string, options: Array<SelectOption | string>) => void;
+    updateFieldLabel?: (fieldName: string, newLabelName: string) => void;
+    setFieldHidden?: (fieldName: string, hidden: boolean) => void;
+    addField?: (fields: Field) => void;
+    updateFieldValidation?: (fieldName: string, newValidation: ValidationRule) => void;
+    processInitialFieldUpdates?: (getValues: (name?: string) => any) => Promise<void>;
+    processingDependencyRef?: React.MutableRefObject<boolean>;
+    pendingUpdatesRef?: React.MutableRefObject<Map<string, any>>;
+    persistenceKey?: string;
+}
+declare const DrawerContent: React.FC<DrawerContentProps>;
+export default DrawerContent;

package/lib/pagamio-drawer/components/DrawerContent.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useForm } from 'react-hook-form';
+import { useEffect, useRef, useState } from 'react';
+import { Button, NotificationModal } from '../../components';
+import { FieldWrapper } from '../../form-engine';
+import { useFormPersistence } from '../../form-engine/hooks/useFormPersistence';
+const DrawerContent = ({ fields, onSubmit, isOpen, initialValues, submitButtonText = 'Submit', cancelButtonText = 'Cancel', showForm = true, showDrawerButtons = true, handleCloseDrawer, onFieldUpdate, onFieldChange, children, updateFieldOptions, updateFieldLabel, setFieldHidden, addField, updateFieldValidation, processInitialFieldUpdates, processingDependencyRef, pendingUpdatesRef, persistenceKey, }) => {
+    const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
+    // Determine initial values: initialValues take precedence over persisted data
+    // This ensures that when editing different items, the form shows the correct item's data
+    const getEffectiveInitialValues = () => {
+        // If initialValues are provided, use them
+        if (initialValues && Object.keys(initialValues).length > 0) {
+            return initialValues;
+        }
+        // Otherwise, check for persisted data
+        if (persistenceKey && hasPersistedData()) {
+            const persistedData = restoreFormData();
+            if (persistedData) {
+                return persistedData;
+            }
+        }
+        return initialValues || {};
+    };
+    const { control, handleSubmit, watch, setValue, clearErrors, formState: { errors, isSubmitting }, reset, getValues, } = useForm({ mode: 'onBlur', defaultValues: getEffectiveInitialValues() });
+    const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
+    const [submitError, setSubmitError] = useState(null);
+    const [showCancelConfirmModal, setShowCancelConfirmModal] = useState(false);
+    const fieldChangeRef = useRef(new Set());
+    const initialLoadPerformedRef = useRef(false);
+    const password = watch('password');
+    const allFields = watch();
+    // Function to check if there are unsaved changes
+    const checkUnsavedChanges = () => {
+        if (!allFields || Object.keys(allFields).length === 0)
+            return false;
+        const originalInitialValues = initialValues || {};
+        return Object.keys(allFields).some((key) => {
+            const currentValue = allFields[key];
+            const originalValue = originalInitialValues[key];
+            // Handle different value types
+            if (currentValue === originalValue)
+                return false;
+            if (currentValue === '' && (originalValue === null || originalValue === undefined))
+                return false;
+            if ((currentValue === null || currentValue === undefined) && originalValue === '')
+                return false;
+            return true;
+        });
+    };
+    // Save form data when fields change (for persistence)
+    useEffect(() => {
+        if (persistenceKey && allFields && Object.keys(allFields).length > 0) {
+            // Only save if there are actual field values (not just empty object)
+            const hasValues = Object.values(allFields).some((value) => value !== undefined && value !== null && value !== '');
+            if (hasValues) {
+                saveFormData(allFields, true);
+            }
+        }
+    }, [allFields, persistenceKey, saveFormData]);
+    // Process initial field updates once when drawer opens
+    useEffect(() => {
+        if (isOpen && !initialLoadPerformedRef.current && processInitialFieldUpdates) {
+            const initializeFields = async () => {
+                await processInitialFieldUpdates(getValues);
+                initialLoadPerformedRef.current = true;
+            };
+            initializeFields();
+        }
+        // Reset initialization flag when drawer closes
+        if (!isOpen) {
+            initialLoadPerformedRef.current = false;
+            fieldChangeRef.current.clear();
+        }
+    }, [isOpen, processInitialFieldUpdates]);
+    const handleFormSubmit = async (data) => {
+        setSubmitError(null);
+        try {
+            const visibleFieldsData = Object.fromEntries(Object.entries(data).filter(([key]) => !fields.find((field) => field.name === key && field.isHidden)));
+            await onSubmit(visibleFieldsData);
+            // Clear persisted data on successful submission
+            if (persistenceKey) {
+                clearPersistedData();
+            }
+            // Close drawer after successful submission
+            handleCloseDrawer();
+        }
+        catch (error) {
+            setSubmitError(error instanceof Error ? error.message : 'An error occurred');
+        }
+    };
+    // Reset form when drawer closes
+    useEffect(() => {
+        if (!isOpen) {
+            reset();
+            // Clear persisted data when drawer closes to prevent stale data on next open
+            if (persistenceKey) {
+                clearPersistedData();
+            }
+        }
+    }, [isOpen, reset, persistenceKey, clearPersistedData]);
+    // Reset form when initialValues change
+    useEffect(() => {
+        if (isOpen && initialValues) {
+            reset(initialValues);
+        }
+    }, [initialValues, isOpen, reset]);
+    const handleCancel = () => {
+        if (checkUnsavedChanges()) {
+            setShowCancelConfirmModal(true);
+        }
+        else {
+            // No changes detected, just close the drawer directly
+            handleCloseDrawer();
+        }
+    };
+    const handleDiscardChanges = () => {
+        // Clear persisted data when explicitly discarding changes
+        if (persistenceKey) {
+            clearPersistedData();
+        }
+        setShowCancelConfirmModal(false);
+        handleCloseDrawer();
+    };
+    const handleSaveAndClose = () => {
+        // Just close the drawer without submitting - the form data is already persisted
+        setShowCancelConfirmModal(false);
+        handleCloseDrawer();
+    };
+    const handleContinueEditing = () => {
+        setShowCancelConfirmModal(false);
+    };
+    // Helper function to process dependency validations
+    const processDependencyValidation = (field) => {
+        if (!field.validation?.dependency) {
+            return field.validation;
+        }
+        const dependencies = Array.isArray(field.validation.dependency)
+            ? field.validation.dependency
+            : [field.validation.dependency];
+        let finalValidation = { ...field.validation };
+        delete finalValidation.dependency;
+        // Apply each dependency validation if its condition is met
+        for (const dep of dependencies) {
+            const dependencyValue = watch(dep.field);
+            if (dep.condition(dependencyValue)) {
+                finalValidation = { ...finalValidation, ...dep.validationToApply };
+            }
+        }
+        return {
+            ...finalValidation,
+            validate: field.name === 'confirmPassword'
+                ? (value) => value === password || 'Passwords do not match'
+                : finalValidation.validate,
+        };
+    };
+    // Helper function to apply a single update result
+    const applyUpdateResult = (result) => {
+        if (!result)
+            return;
+        const { field, options, value, label, hideField, fieldInnitialData } = result;
+        // Apply each possible update type if needed
+        if (options !== undefined && updateFieldOptions) {
+            updateFieldOptions(field, options);
+        }
+        if (value !== undefined && setValue) {
+            setValue(field, value);
+        }
+        if (label !== undefined && updateFieldLabel) {
+            updateFieldLabel(field, label);
+        }
+        if (hideField !== undefined && setFieldHidden) {
+            setFieldHidden(field, hideField);
+            if (hideField && setValue) {
+                setValue(field, undefined);
+            }
+        }
+        if (fieldInnitialData && addField) {
+            addField(fieldInnitialData);
+        }
+        if (clearErrors) {
+            clearErrors(field);
+        }
+    };
+    // Helper function to process updates for a single field
+    const processFieldUpdates = async (fieldName, value) => {
+        if (!onFieldUpdate?.[fieldName])
+            return;
+        const updates = onFieldUpdate[fieldName];
+        for (const update of updates) {
+            try {
+                const result = await update.action(value, false);
+                applyUpdateResult(result);
+            }
+            catch (error) {
+                console.error(`Error processing update for ${fieldName}:`, error);
+            }
+        }
+    };
+    // Main function with reduced complexity
+    const processPendingUpdates = async () => {
+        // Early return if conditions aren't met
+        if (!pendingUpdatesRef || !processingDependencyRef || processingDependencyRef.current) {
+            return;
+        }
+        processingDependencyRef.current = true;
+        try {
+            const pendingUpdates = pendingUpdatesRef.current;
+            if (pendingUpdates.size === 0)
+                return;
+            // Process all pending updates
+            const updatePromises = Array.from(pendingUpdates.entries()).map(([fieldName, value]) => processFieldUpdates(fieldName, value));
+            await Promise.all(updatePromises);
+            pendingUpdatesRef.current.clear();
+        }
+        finally {
+            processingDependencyRef.current = false;
+        }
+    };
+    // Process pending updates when needed
+    useEffect(() => {
+        if (pendingUpdatesRef?.current?.size && pendingUpdatesRef?.current?.size > 0) {
+            processPendingUpdates().then();
+        }
+    }, [pendingUpdateCount]);
+    return (_jsxs(_Fragment, { children: [showForm && (_jsxs("form", { className: "grid grid-cols-12 gap-2 align-middle mb-6 border-gray-400 px-6 py-5", onSubmit: handleSubmit(handleFormSubmit), children: [fields?.map((field) => (_jsx(FieldWrapper, { field: {
+                            ...field,
+                            validation: processDependencyValidation(field),
+                        }, control: control, errors: errors, layout: "vertical", onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, setValue: setValue, clearErrors: clearErrors, getValues: getValues, pendingUpdatesRef: pendingUpdatesRef, notifyPendingUpdate: () => setPendingUpdateCount((prev) => prev + 1), processingDependencyRef: processingDependencyRef, fieldChangeRef: fieldChangeRef }, field.name))), isSubmitting && _jsx("span", { children: "Submitting..." }), submitError && _jsx("p", { className: "text-red-500", children: submitError })] })), children, showDrawerButtons && (_jsxs("div", { className: "flex border-t bg-white", style: {
+                    height: '50px',
+                    position: 'fixed',
+                    bottom: 0,
+                    zIndex: 100,
+                    width: '420px',
+                }, children: [_jsx(Button, { variant: "outline-primary", className: "w-full flex-1 h-full rounded-none", disabled: isSubmitting, onClick: handleCancel, children: cancelButtonText }), _jsx(Button, { variant: "primary", className: "flex-1 h-full rounded-none", disabled: isSubmitting, onClick: handleSubmit(handleFormSubmit), children: submitButtonText })] })), _jsx(NotificationModal, { show: showCancelConfirmModal, onClose: handleContinueEditing, title: "Unsaved Changes", message: "You have unsaved changes. What would you like to do?", variant: "warning", showConfirmButton: false, showCancelButton: false, size: "lg", children: _jsxs("div", { className: "flex gap-2 flex-wrap", children: [_jsx(Button, { variant: "primary", onClick: handleSaveAndClose, children: "Save & Close" }), _jsx(Button, { variant: "outline", onClick: handleDiscardChanges, children: "Discard Changes" }), _jsx(Button, { variant: "outline", onClick: handleContinueEditing, children: "Continue Editing" })] }) })] }));
+};
+export default DrawerContent;

package/lib/pagamio-drawer/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { DependentFieldUpdate, Field } from '../form-engine';
+interface FormEngineDrawerProps {
+    title: string;
+    isOpen: boolean;
+    showForm?: boolean;
+    showDrawerButtons?: boolean;
+    cancelButtonText?: string;
+    submitButtonText?: string;
+    marginTop?: string;
+    children?: React.ReactNode;
+    fields: Field[];
+    initialValues?: any;
+    onSubmit: (data: any) => Promise<void>;
+    onClose: () => void;
+    onFieldUpdate?: Record<string, DependentFieldUpdate[]>;
+    onFieldChange?: (fieldName: string, value: any) => void;
+    persistenceKey?: string;
+}
+declare const FormEngineDrawer: React.FC<FormEngineDrawerProps>;
+export default FormEngineDrawer;
+export type { FormEngineDrawerProps, DependentFieldUpdate };

package/lib/pagamio-drawer/index.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import BaseDrawer from './components/BaseDrawer';
+import DrawerContent from './components/DrawerContent';
+const FormEngineDrawer = ({ title, cancelButtonText = 'Cancel', submitButtonText = 'Submit', showForm = true, showDrawerButtons = true, isOpen, fields: initialFields, initialValues, children, marginTop = '0px', onClose, onSubmit, onFieldUpdate, onFieldChange, persistenceKey, }) => {
+    const [fields, setFields] = useState(initialFields);
+    const initializedRef = useRef(false);
+    const processingDependencyRef = useRef(false);
+    const pendingUpdatesRef = useRef(new Map());
+    // Update fields when initialFields changes while preserving values
+    useEffect(() => {
+        setFields((prevFields) => {
+            const existingFieldsMap = new Map(prevFields.map((field) => [field.name, field]));
+            return initialFields.map((newField) => {
+                const existingField = existingFieldsMap.get(newField.name);
+                if (existingField) {
+                    return {
+                        ...existingField,
+                        ...newField,
+                        options: existingField.options || newField.options,
+                        label: existingField.label || newField.label,
+                    };
+                }
+                return newField;
+            });
+        });
+    }, [initialFields]);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.classList.add('overflow-hidden');
+        }
+        else {
+            document.body.classList.remove('overflow-hidden');
+            // Reset initialization flag when drawer closes
+            initializedRef.current = false;
+            // Clear pending updates to prevent stale state
+            pendingUpdatesRef.current.clear();
+            // Reset fields to initial state when drawer closes
+            setFields(initialFields);
+        }
+        return () => {
+            document.body.classList.remove('overflow-hidden');
+        };
+    }, [isOpen, initialFields]);
+    const setFieldHidden = (fieldName, hidden) => {
+        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, isHidden: hidden } : field)));
+    };
+    const updateFieldLabel = (fieldName, newLabelName) => {
+        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, label: newLabelName } : field)));
+    };
+    const updateFieldOptions = (fieldName, newOptions) => {
+        setFields((currentFields) => currentFields.map((field) => (field.name === fieldName ? { ...field, options: newOptions } : field)));
+    };
+    const updateFieldValidation = (fieldName, newValidation) => {
+        setFields((currentFields) => currentFields.map((field) => field.name === fieldName
+            ? {
+                ...field,
+                validation: {
+                    ...(field.validation ?? {}),
+                    ...newValidation,
+                },
+            }
+            : field));
+    };
+    const addField = (field) => {
+        const isFieldAlreadyAdded = fields.some((f) => f.name === field.name);
+        if (isFieldAlreadyAdded) {
+            updateFieldLabel(field.name, field.label);
+            if (field.options) {
+                updateFieldOptions(field.name, field.options);
+            }
+        }
+        else {
+            setFields((currentFields) => [...currentFields, field]);
+        }
+    };
+    // Helper function to check if a value is valid for processing
+    const isValidValue = (value) => {
+        return value !== undefined && value !== null && value !== '';
+    };
+    // Helper function to apply field updates based on the result
+    const applyFieldUpdate = (result) => {
+        if (!result)
+            return;
+        // Apply field modifications based on result
+        if (result.hideField !== undefined && setFieldHidden) {
+            setFieldHidden(result.field, result.hideField);
+        }
+        if (result.options !== undefined && updateFieldOptions) {
+            updateFieldOptions(result.field, result.options);
+        }
+        if (result.label !== undefined && updateFieldLabel) {
+            updateFieldLabel(result.field, result.label);
+        }
+    };
+    // Process a single field's updates
+    const processFieldUpdate = async (fieldName, updates, value) => {
+        for (const update of updates) {
+            try {
+                const result = await update.action(value, true);
+                applyFieldUpdate(result);
+            }
+            catch (error) {
+                console.error(`Error processing initial dependency for ${fieldName}:`, error);
+            }
+        }
+    };
+    // Main function with reduced complexity
+    const processInitialFieldUpdates = async (getValues) => {
+        // Early return if conditions aren't met
+        if (!onFieldUpdate || initializedRef.current || processingDependencyRef.current)
+            return;
+        processingDependencyRef.current = true;
+        try {
+            const processedFields = new Set();
+            for (const [fieldName, updates] of Object.entries(onFieldUpdate)) {
+                if (processedFields.has(fieldName))
+                    continue;
+                const currentValue = getValues(fieldName);
+                if (!isValidValue(currentValue))
+                    continue;
+                await processFieldUpdate(fieldName, updates, currentValue);
+                processedFields.add(fieldName);
+            }
+            initializedRef.current = true;
+        }
+        finally {
+            processingDependencyRef.current = false;
+        }
+    };
+    return (_jsx(BaseDrawer, { title: title, isOpen: isOpen, marginTop: marginTop, onClose: onClose, children: _jsx(DrawerContent, { isOpen: isOpen, fields: fields, onSubmit: onSubmit, handleCloseDrawer: onClose, initialValues: initialValues, showForm: showForm, showDrawerButtons: showDrawerButtons, cancelButtonText: cancelButtonText, submitButtonText: submitButtonText, onFieldUpdate: onFieldUpdate, onFieldChange: onFieldChange, updateFieldOptions: updateFieldOptions, updateFieldLabel: updateFieldLabel, setFieldHidden: setFieldHidden, addField: addField, updateFieldValidation: updateFieldValidation, processInitialFieldUpdates: processInitialFieldUpdates, processingDependencyRef: processingDependencyRef, pendingUpdatesRef: pendingUpdatesRef, persistenceKey: persistenceKey, children: children }, `${persistenceKey}-${isOpen ? 'open' : 'closed'}`) }));
+};
+export default FormEngineDrawer;

package/lib/pagamio-table/data-table/ExportButton.d.ts

@@ -0,0 +1,57 @@
+import { type MRT_ColumnDef } from 'mantine-react-table';
+import React from 'react';
+export type ExtraOption = {
+    value: string;
+    label: React.ReactNode;
+    onClick: () => void;
+};
+interface ThemeColors {
+    primary: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    core: {
+        primary: string;
+        secondary: string;
+    };
+}
+interface PdfExportOptions {
+    title?: string;
+    subtitle?: string;
+    colors?: ThemeColors;
+    logo?: {
+        url: string;
+        width?: number;
+        height?: number;
+    };
+}
+interface XlsxExportOptions {
+    title?: string;
+    subtitle?: string;
+    colors?: ThemeColors;
+    sheetName?: string;
+    includeTimestamp?: boolean;
+    autoFitColumns?: boolean;
+}
+interface CsvExportOptions {
+    title?: string;
+    includeTimestamp?: boolean;
+    includeHeaders?: boolean;
+    delimiter?: string;
+    filename?: string;
+}
+type ExportDropdownProps<T extends Record<string, any>> = {
+    data: T[];
+    columns: MRT_ColumnDef<T>[];
+    containerClassName?: string;
+    buttonClassName?: string;
+    extraOptions?: ExtraOption[];
+    pdfOptions?: PdfExportOptions;
+    xlsxOptions?: XlsxExportOptions;
+    csvOptions?: CsvExportOptions;
+    exportAll?: boolean;
+    fetchData?: (params?: Record<string, string>) => Promise<T[]>;
+};
+declare const ExportDropdown: <T extends Record<string, any>>({ data, columns, containerClassName, buttonClassName, extraOptions, pdfOptions, xlsxOptions, csvOptions, exportAll, fetchData, }: ExportDropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default ExportDropdown;

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Stack } from '@mantine/core';
+import { Checkbox, Label } from 'flowbite-react';
+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 popoverRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+                setPopoverOpened(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const exportOptions = [
+        { value: 'csv', label: 'Export as CSV' },
+        { value: 'xlsx', label: 'Export as XLSX' },
+        { value: 'pdf', label: 'Export as PDF' },
+    ];
+    const handleCheckboxChange = (columnKey, checked) => {
+        setExcludedColumns((prev) => (checked ? [...prev, columnKey] : prev.filter((key) => key !== columnKey)));
+    };
+    const getIncludedColumns = () => {
+        return columns.filter((col) => !excludedColumns.includes(col.accessorKey));
+    };
+    const handleContinue = async () => {
+        const includedColumns = getIncludedColumns();
+        setIsExporting(true);
+        try {
+            let exportData = data;
+            // If exportAll is checked and fetchData function is provided, fetch all data
+            if (exportAllData && fetchData) {
+                exportData = await fetchData({ exportAll: 'true' });
+            }
+            if (exportType === 'csv') {
+                exportToCsv(exportData, includedColumns, csvOptions);
+            }
+            else if (exportType === 'xlsx') {
+                exportToXlsx(exportData, includedColumns, xlsxOptions);
+            }
+            else if (exportType === 'pdf') {
+                // Pass PDF options with enhanced configuration
+                await exportToPdf(exportData, includedColumns, {
+                    title: pdfOptions?.title || 'Data Export',
+                    subtitle: pdfOptions?.subtitle,
+                    colors: pdfOptions?.colors,
+                    logo: pdfOptions?.logo,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Export failed:', error);
+        }
+        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) => {
+                            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));
+                            }
+                        }) }), _jsx("button", { className: `w-full mt-4 px-4 py-2 rounded-md text-white flex items-center justify-center 
+              ${getIncludedColumns().length === 0 || isExporting
+                            ? 'bg-gray-300 cursor-not-allowed'
+                            : 'bg-primary-500 hover:bg-primary-600'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0 || isExporting, children: isExporting ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Exporting..."] })) : ('Continue') })] }))] }));
+};
+export default ExportDropdown;

package/lib/pagamio-table/data-table/MantineCoreTable.d.ts

@@ -0,0 +1,44 @@
+import { type MRT_Row, type MRT_TableInstance } from 'mantine-react-table';
+import React from 'react';
+import type { CoreTableColumnDef, SortConfig } from './types';
+type CoreTableProps<T extends {
+    id: string | number;
+}> = {
+    columns: CoreTableColumnDef<T>[];
+    isLoading?: boolean;
+    data: T[];
+    sortable?: boolean;
+    multiSorting: boolean;
+    sortConfig?: SortConfig | null;
+    onSort?: (sortKey: string, sortDirection: 'asc' | 'desc') => void;
+    setSortBy?: (sortKey: string) => void;
+    setSortDir?: (sortDir: string) => void;
+    selectable?: boolean;
+    selectedRows?: (string | number)[];
+    onSelectRow?: (id: string | number) => void;
+    onSelectAll?: (selected: boolean) => void;
+    enablePagination?: boolean;
+    enableGlobalFilters?: boolean;
+    enableManualSorting?: boolean;
+    enableManualPagination?: boolean;
+    expandable?: boolean;
+    onRowClick?: (row: T) => void;
+    rowClassName?: string;
+    renderExpandableComponent?: (props: {
+        row: MRT_Row<T>;
+        table: MRT_TableInstance<T>;
+    }) => React.ReactNode;
+    pagination?: {
+        enabled: boolean;
+        pageIndex: number;
+        pageSize: number;
+        itemsPerPage: number;
+        itemsPerPageOptions?: number[];
+        onPageChange: (page: number) => void;
+        onPaginationChange: (index: number, size: number) => void;
+    };
+};
+declare const CoreTable: <T extends {
+    id: string | number;
+}>({ columns, isLoading, data, sortable, sortConfig, onSort, selectable, selectedRows, onSelectRow, onSelectAll, enablePagination, expandable, renderExpandableComponent, pagination, enableGlobalFilters, enableManualSorting, enableManualPagination, multiSorting, setSortBy, setSortDir, onRowClick, rowClassName, ...props }: CoreTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default CoreTable;