@pagamio/frontend-commons-lib 0.8.365 → 0.8.366

package/lib/components/ui/FilterComponent.js

@@ -31,7 +31,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2 min-w-0", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:flex-1 sm:min-w-[200px] sm:max-w-[340px] min-w-0", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: searctInputPlaceHolder, value: searchQuery, onChange: onSearch, onKeyDown: handleSearchKeyDown, "aria-label": "Search", className: cn('h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') })] })), filters.map((filter) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, allowOverflowVisible: Boolean(children), children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2 min-w-0", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:flex-1 sm:min-w-[200px] sm:max-w-[340px] min-w-0", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: searctInputPlaceHolder, value: searchQuery, onChange: onSearch, onKeyDown: handleSearchKeyDown, "aria-label": "Search", className: cn('h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') })] })), filters.map((filter) => {
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {

package/lib/components/ui/FilterWrapper.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface FilterWrapperProps {
     isNarrow: boolean;
     children: React.ReactNode;
+    allowOverflowVisible?: boolean;
 }
-declare const FilterWrapper: ({ isNarrow, children }: FilterWrapperProps) => React.JSX.Element;
+declare const FilterWrapper: ({ isNarrow, children, allowOverflowVisible }: FilterWrapperProps) => React.JSX.Element;
 export default FilterWrapper;

package/lib/components/ui/FilterWrapper.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const FilterWrapper = ({ isNarrow, children }) => {
+const FilterWrapper = ({ isNarrow, children, allowOverflowVisible = false }) => {
     return (
-    // `min-w-0` so this card can shrink inside a flex/grid parent;
-    // `overflow-hidden` so wide filter rows never punch out of the toolbar.
-    _jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2 min-w-0 overflow-hidden", children: _jsx("div", { className: isNarrow
+    // `min-w-0` so this card can shrink inside a flex/grid parent.
+    // Most toolbars keep `overflow-hidden` so oversized rows do not punch out,
+    // but some controls (like export popovers) need to render beyond the card.
+    _jsx("div", { className: `bg-card shadow-xl rounded-lg p-4 mb-2 min-w-0 ${allowOverflowVisible ? 'overflow-visible' : 'overflow-hidden'}`, children: _jsx("div", { className: isNarrow
                 ? 'flex flex-col w-full gap-3'
                 : // `flex-wrap` lets the filter pills drop onto a second row instead of
                     // overflowing the toolbar; each child group is set to `min-w-0` via its own

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

@@ -1,11 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Stack } from '@mantine/core';
 import { Checkbox, Label, TextInput } from 'flowbite-react';
 import { HiMail } from 'react-icons/hi';
 import { useEffect, useRef, useState } from 'react';
-// (useEffect / useRef / popoverRef  / handelClickOutside can all be removed
-// Modal handles its own open/close + backdrop click)
-import { Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
+import { Button, Modal, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
 import { exportToCsv, exportToPdf, exportToXlsx, generateExportAsFile, sendExportEmail } from './exportUtils';
 const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, asyncExport, enableEmailExport = false, emailExportApiUrl, onEmailExportSuccess, onEmailExportError, }) => {
     const [exportType, setExportType] = useState(null);
@@ -19,10 +17,10 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     const [showEmailModal, setShowEmailModal] = useState(false);
     const [pendingExportData, setPendingExportData] = useState(null);
     const [pendingEmailFormat, setPendingEmailFormat] = useState(null);
-    const popoverRef = useRef(null);
+    const containerRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (popoverRef.current && !popoverRef.current.contains(event.target)) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
                 setExportType(null);
             }
         };
@@ -181,30 +179,23 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
     };
     // Show popover when exportType is set and Select is closed
     const popoverOpened = exportType !== null && !selectOpen;
-    const continueLable = isExporting
+    const continueLabel = isExporting
         ? exportProgress && exportProgress.total > exportProgress.fetched
             ? `Fetching ${exportProgress.fetched}/${exportProgress.total}...`
             : isEmailExport
                 ? 'Preparing...'
                 : 'Exporting...'
         : 'Continue';
-    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-muted-foreground", 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"), _jsxs(Modal, { isOpen: popoverOpened, onClose: () => setExportType(null), title: "Export Data", size: "md", primaryButton: {
-                    label: continueLable,
-                    onClick: handleContinue,
-                    disabled: getIncludedColumns().length === 0 || isExporting,
-                    loading: isExporting,
-                }, secondaryButton: {
-                    label: 'Cancel',
-                    onClick: () => setExportType(null),
-                    disabled: isExporting,
-                    variant: 'outline',
-                }, children: [_jsx("div", { className: "text-sm text-muted-foreground pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-muted 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 checked:!border-primary-50" }), _jsx("label", { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-muted-foreground mt-1 ml-6", children: shouldQueueAsync
-                                    ? 'This dataset is large - it will be prepared in the background and and appear in export history.'
+    return (_jsxs("div", { ref: containerRef, className: `relative 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-muted-foreground", 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", { className: "absolute left-0 top-full z-50 mt-2 w-64 rounded-md bg-background p-4 shadow-lg", children: [_jsx("div", { className: "pb-3 text-sm text-muted-foreground", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 rounded-md bg-muted p-3", 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 checked:!border-primary" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "ml-6 mt-1 text-xs text-muted-foreground", children: shouldQueueAsync
+                                    ? 'This dataset is large — it will be prepared in the background and appear in export history.'
                                     : '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.accessorKey, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary checked:!border-primary" }), _jsx(Label, { htmlFor: col.accessorKey, children: col.header })] }, col.accessorKey));
                             }
-                        }) })] }), _jsx(Modal, { isOpen: showEmailModal, onClose: handleEmailModalClose, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiMail, { className: "w-5 h-5 text-primary" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
+                            return null;
+                        }) }), _jsx(Button, { variant: "primary", className: `mt-4 flex w-full items-center justify-center rounded-md px-4 py-2 text-white ${getIncludedColumns().length === 0 || isExporting
+                            ? 'cursor-not-allowed bg-gray-300'
+                            : 'bg-primary hover:bg-primary/90'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0 || isExporting, children: isExporting ? (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "-ml-1 mr-2 h-4 w-4 animate-spin 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" })] }), continueLabel] })) : ('Continue') })] })), _jsx(Modal, { isOpen: showEmailModal, onClose: handleEmailModalClose, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiMail, { className: "w-5 h-5 text-primary" }), _jsx("span", { children: "Send Export via Email" })] }), size: "md", primaryButton: {
                     label: 'Send Email',
                     onClick: () => {
                         handleEmailModalSubmit().catch((error) => {

package/lib/styles.css

@@ -815,6 +815,9 @@ video {
 .top-\[57\%\] {
   top: 57%;
 }
+.top-full {
+  top: 100%;
+}
 .\!z-\[1000\] {
   z-index: 1000 !important;
 }
@@ -971,6 +974,9 @@ video {
 .-mb-px {
   margin-bottom: -1px;
 }
+.-ml-1 {
+  margin-left: -0.25rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -1973,6 +1979,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
@@ -4254,10 +4263,6 @@ video {
 .checked\:\!border-primary:checked {
   border-color: hsl(var(--primary)) !important;
 }
-.checked\:\!border-primary-50:checked {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(237 234 244 / var(--tw-border-opacity, 1)) !important;
-}
 .checked\:border-transparent:checked {
   border-color: transparent;
 }

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