@joelbarron/react-web-dev-kit 0.1.5 → 0.1.6

package/dist/grid/JBGrid.js

@@ -1,26 +1,48 @@
-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 { CustomPaging, FilteringState, GroupingState, IntegratedFiltering, IntegratedGrouping, IntegratedSelection, IntegratedSorting, IntegratedSummary, PagingState, SearchState, SelectionState, SortingState, SummaryState } from '@devexpress/dx-react-grid';
-import { DragDropProvider, Grid, GroupingPanel, PagingPanel, Table, TableColumnResizing, TableFilterRow, TableGroupRow, TableHeaderRow, TableSelection, TableSummaryRow, Toolbar, } from '@devexpress/dx-react-grid-material-ui';
-import { useEffect, useMemo, useState } from 'react';
-import { JBBooleanTypeProvider, JBCurrencyTypeProvider, JBImageTypeProvider } from './JBGridProviders';
-const DEFAULT_PAGE_SIZES = [10, 30, 50, 100, 200, 500, 1000];
+import { DragDropProvider, Grid, GroupingPanel, PagingPanel, Table, TableColumnResizing, TableFilterRow, TableGroupRow, TableHeaderRow, TableSelection, TableSummaryRow, Toolbar, VirtualTable, } from '@devexpress/dx-react-grid-material-ui';
+import { Box, CircularProgress, TablePagination, Typography } from '@mui/material';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { resolveGridDefaults } from './defaults';
+import { JBGridLoading } from './JBGridLoading';
+import { JBBooleanTypeProvider, JBCurrencyTypeProvider, JBDateTypeProvider, JBImageTypeProvider } from './JBGridProviders';
 export function JBGrid(props) {
-    const { gridConfig, service, rows: controlledRows, searchText, onSearchTextChange, onRowSelected, loadData, loadingComponent, getRowId } = props;
-    const { defaults } = gridConfig;
-    const pageSizes = defaults.pageSizes ?? DEFAULT_PAGE_SIZES;
+    let error = props.error;
+    error = error ? 'No se pudo cargar el listado.' : undefined;
+    const { gridConfig, service, rows: controlledRows, totalCount: controlledTotalCount, loading: controlledLoading, currentPage: controlledCurrentPage, onCurrentPageChange, pageSize: controlledPageSize, onPageSizeChange, searchText, onSearchTextChange, onRowSelected, loadData, loadingComponent, getRowId, paginationPosition = 'top', stickyPagination = true, height = '100%', stickyHeader = true, infiniteScroll = false, hasMore = false, isLoadingMore = false, loadMoreThreshold = 200, onLoadMore } = props;
+    const defaults = resolveGridDefaults(gridConfig.defaults);
+    const pageSizes = defaults.pageSizes;
+    const virtualScrolling = defaults.virtualScrolling;
+    const rootRef = useRef(null);
+    const [containerHeight, setContainerHeight] = useState(defaults.virtualTableHeight);
+    const resolvedVirtualTableHeight = defaults.virtualTableHeightMode === 'fill'
+        ? Math.max(240, Math.floor(containerHeight * defaults.virtualTableHeightRatio))
+        : defaults.virtualTableHeight;
+    const isControlledPaging = controlledCurrentPage !== undefined && controlledPageSize !== undefined;
     const [rows, setRows] = useState(controlledRows ?? []);
     const [totalCount, setTotalCount] = useState(0);
-    const [pageSize, setPageSize] = useState(defaults.pageSize || 10);
-    const [currentPage, setCurrentPage] = useState(0);
-    const [loading, setLoading] = useState(false);
+    const [internalPageSize, setInternalPageSize] = useState(defaults.pageSize);
+    const [internalCurrentPage, setInternalCurrentPage] = useState(0);
+    const [internalLoading, setInternalLoading] = useState(false);
     const [lastQuery, setLastQuery] = useState('');
     const [selection, setSelection] = useState([]);
+    const currentPage = isControlledPaging ? controlledCurrentPage : internalCurrentPage;
+    const pageSize = isControlledPaging ? controlledPageSize : internalPageSize;
+    const loading = controlledLoading ?? internalLoading;
     useEffect(() => {
         if (controlledRows) {
             setRows(controlledRows);
-            setTotalCount(controlledRows.length);
         }
     }, [controlledRows]);
+    useEffect(() => {
+        if (controlledTotalCount !== undefined) {
+            setTotalCount(controlledTotalCount);
+            return;
+        }
+        if (controlledRows) {
+            setTotalCount(controlledRows.length);
+        }
+    }, [controlledRows, controlledTotalCount]);
     const computeQueryString = useMemo(() => () => `pageSize=${pageSize}&skip=${pageSize * currentPage}&terms=${searchText || ''}`, [currentPage, pageSize, searchText]);
     useEffect(() => {
         if (controlledRows)
@@ -33,7 +55,7 @@ export function JBGrid(props) {
                     setRows,
                     setTotalCount,
                     setLastQuery,
-                    setLoading,
+                    setLoading: setInternalLoading,
                     getQueryString: computeQueryString,
                     currentPage,
                     pageSize,
@@ -47,14 +69,14 @@ export function JBGrid(props) {
             if (queryString === lastQuery || loading)
                 return;
             try {
-                setLoading(true);
+                setInternalLoading(true);
                 const response = await service.list(currentPage, pageSize, searchText);
                 setRows(response?.data?.results ?? []);
                 setTotalCount(response?.data?.count ?? 0);
                 setLastQuery(queryString);
             }
             finally {
-                setLoading(false);
+                setInternalLoading(false);
             }
         };
         void execute();
@@ -69,6 +91,20 @@ export function JBGrid(props) {
         searchText,
         service
     ]);
+    const handleCurrentPageChange = (nextPage) => {
+        if (isControlledPaging) {
+            onCurrentPageChange?.(nextPage);
+            return;
+        }
+        setInternalCurrentPage(nextPage);
+    };
+    const handlePageSizeChange = (nextPageSize) => {
+        if (isControlledPaging) {
+            onPageSizeChange?.(nextPageSize);
+            return;
+        }
+        setInternalPageSize(nextPageSize);
+    };
     const handleSelection = (nextSelection) => {
         const lastSelected = nextSelection.find((selected) => selection.indexOf(selected) === -1);
         if (lastSelected === undefined) {
@@ -76,8 +112,7 @@ export function JBGrid(props) {
             return;
         }
         setSelection([lastSelected]);
-        const selectedIndex = typeof lastSelected === 'number' ? lastSelected : Number.parseInt(String(lastSelected), 10);
-        const selectedRow = rows[selectedIndex];
+        const selectedRow = rows.find((row) => rowIdGetter(row) === lastSelected);
         if (selectedRow && onRowSelected) {
             onRowSelected(selectedRow);
         }
@@ -85,5 +120,162 @@ export function JBGrid(props) {
     const rowIdGetter = getRowId
         ? (row) => getRowId(row)
         : (row) => row.id;
-    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: loading ? (_jsx("div", { children: loadingComponent ?? _jsx("span", { children: "Loading..." }) })) : (_jsxs(Grid, { rows: rows, columns: gridConfig.columns, getRowId: rowIdGetter, children: [_jsx(SortingState, { defaultSorting: defaults.sorting }), _jsx(PagingState, { currentPage: currentPage, onCurrentPageChange: setCurrentPage, pageSize: pageSize, onPageSizeChange: setPageSize }), _jsx(GroupingState, { defaultGrouping: defaults.grouping, defaultExpandedGroups: defaults.expandedGroups }), _jsx(SummaryState, { totalItems: gridConfig.totalSummaryItems, groupItems: gridConfig.groupSummaryItems }), _jsx(FilteringState, { defaultFilters: defaults.filters }), _jsx(SearchState, { value: searchText, onValueChange: onSearchTextChange }), _jsx(SelectionState, { selection: selection, onSelectionChange: handleSelection }), defaults.allowGrouping !== false ? _jsx(IntegratedGrouping, {}) : null, _jsx(IntegratedFiltering, {}), _jsx(IntegratedSorting, {}), _jsx(IntegratedSelection, {}), _jsx(IntegratedSummary, {}), _jsx(DragDropProvider, {}), gridConfig.booleanColumns?.length ? (_jsx(JBBooleanTypeProvider, { for: gridConfig.booleanColumns })) : null, gridConfig.imageColumns?.length ? _jsx(JBImageTypeProvider, { for: gridConfig.imageColumns }) : null, gridConfig.currencyColumns?.length ? (_jsx(JBCurrencyTypeProvider, { for: gridConfig.currencyColumns })) : null, _jsx(Table, { columnExtensions: gridConfig.tableColumnExtensions }), defaults.allowColumnResizing !== false ? (_jsx(TableColumnResizing, { defaultColumnWidths: gridConfig.columnsWidths })) : null, defaults.allowSelection !== false ? (_jsx(TableSelection, { showSelectAll: defaults.allowSelectAll, showSelectionColumn: defaults.showSelectionColumn, selectByRowClick: true, highlightRow: true })) : null, _jsx(TableHeaderRow, { showSortingControls: defaults.allowSorting !== false }), defaults.allowFiltering ? (_jsx(TableFilterRow, { showFilterSelector: defaults.advancedFiltering })) : null, _jsx(PagingPanel, { pageSizes: pageSizes }), defaults.allowGrouping !== false ? (_jsx(TableGroupRow, { showColumnsWhenGrouped: false })) : null, _jsx(Toolbar, {}), defaults.allowGrouping !== false ? _jsx(GroupingPanel, { showSortingControls: true }) : null, _jsx(TableSummaryRow, {}), _jsx(CustomPaging, { totalCount: totalCount })] })) }));
+    const showTopPagination = paginationPosition === 'top' || paginationPosition === 'both';
+    const showBottomPagination = paginationPosition === 'bottom' || paginationPosition === 'both';
+    const showPaging = paginationPosition !== 'none';
+    const handleRowsPerPageChange = (event) => {
+        const nextPageSize = Number.parseInt(event.target.value, 10);
+        handlePageSizeChange(nextPageSize);
+        handleCurrentPageChange(0);
+    };
+    useEffect(() => {
+        if (!virtualScrolling || defaults.virtualTableHeightMode !== 'fill' || !rootRef.current)
+            return;
+        const node = rootRef.current;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            setContainerHeight(entry.contentRect.height);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [defaults.virtualTableHeightMode, virtualScrolling]);
+    useEffect(() => {
+        if (!virtualScrolling || !infiniteScroll || !onLoadMore || !rootRef.current)
+            return;
+        const tableContainer = rootRef.current.querySelector('.MuiTableContainer-root');
+        if (!tableContainer)
+            return;
+        const handleScroll = () => {
+            const target = tableContainer;
+            const distanceToBottom = target.scrollHeight - (target.scrollTop + target.clientHeight);
+            if (distanceToBottom <= loadMoreThreshold && hasMore && !isLoadingMore) {
+                onLoadMore();
+            }
+        };
+        tableContainer.addEventListener('scroll', handleScroll, { passive: true });
+        return () => tableContainer.removeEventListener('scroll', handleScroll);
+    }, [hasMore, infiniteScroll, isLoadingMore, loadMoreThreshold, onLoadMore, rows.length, virtualScrolling]);
+    useEffect(() => {
+        if (!rootRef.current)
+            return;
+        const contentWrapper = rootRef.current.closest('.FusePageCarded-contentWrapper');
+        const contentNode = rootRef.current.closest('.FusePageCarded-content');
+        if (!contentWrapper)
+            return;
+        const lockCount = Number.parseInt(contentWrapper.dataset.jbGridLockCount ?? '0', 10) || 0;
+        contentWrapper.dataset.jbGridLockCount = String(lockCount + 1);
+        if (lockCount === 0) {
+            const prevWrapperOverflow = contentWrapper.style.overflow;
+            const prevWrapperScrollbarWidth = contentWrapper.style.scrollbarWidth;
+            const prevContentOverflow = contentNode?.style.overflow ?? '';
+            const prevContentHeight = contentNode?.style.height ?? '';
+            const prevContentMinHeight = contentNode?.style.minHeight ?? '';
+            contentWrapper.dataset.jbGridPrevOverflow = prevWrapperOverflow;
+            contentWrapper.dataset.jbGridPrevScrollbarWidth = prevWrapperScrollbarWidth ?? '';
+            contentWrapper.dataset.jbGridPrevContentOverflow = prevContentOverflow;
+            contentWrapper.dataset.jbGridPrevContentHeight = prevContentHeight;
+            contentWrapper.dataset.jbGridPrevContentMinHeight = prevContentMinHeight;
+            contentWrapper.style.overflow = 'hidden';
+            contentWrapper.style.scrollbarWidth = 'none';
+            // Hide perfect-scrollbar rails when present in Fuse wrappers.
+            const rails = contentWrapper.querySelectorAll('.ps__rail-x, .ps__rail-y');
+            rails.forEach((rail) => {
+                rail.dataset.jbGridPrevDisplay = rail.style.display ?? '';
+                rail.style.display = 'none';
+            });
+            if (contentNode) {
+                contentNode.style.overflow = 'hidden';
+                contentNode.style.height = '100%';
+                contentNode.style.minHeight = '0';
+            }
+        }
+        return () => {
+            const currentCount = Number.parseInt(contentWrapper.dataset.jbGridLockCount ?? '1', 10) || 1;
+            const nextCount = Math.max(0, currentCount - 1);
+            contentWrapper.dataset.jbGridLockCount = String(nextCount);
+            if (nextCount > 0)
+                return;
+            contentWrapper.style.overflow = contentWrapper.dataset.jbGridPrevOverflow ?? '';
+            contentWrapper.style.scrollbarWidth =
+                contentWrapper.dataset.jbGridPrevScrollbarWidth ?? '';
+            const rails = contentWrapper.querySelectorAll('.ps__rail-x, .ps__rail-y');
+            rails.forEach((rail) => {
+                rail.style.display = rail.dataset.jbGridPrevDisplay ?? '';
+                delete rail.dataset.jbGridPrevDisplay;
+            });
+            if (contentNode) {
+                contentNode.style.overflow = contentWrapper.dataset.jbGridPrevContentOverflow ?? '';
+                contentNode.style.height = contentWrapper.dataset.jbGridPrevContentHeight ?? '';
+                contentNode.style.minHeight = contentWrapper.dataset.jbGridPrevContentMinHeight ?? '';
+            }
+            delete contentWrapper.dataset.jbGridPrevOverflow;
+            delete contentWrapper.dataset.jbGridPrevScrollbarWidth;
+            delete contentWrapper.dataset.jbGridPrevContentOverflow;
+            delete contentWrapper.dataset.jbGridPrevContentHeight;
+            delete contentWrapper.dataset.jbGridPrevContentMinHeight;
+        };
+    }, []);
+    return (_jsx(Box, { className: "jb-grid-root", ref: rootRef, sx: {
+            width: '100%',
+            height,
+            minHeight: 0,
+            overflow: virtualScrolling ? 'hidden !important' : 'auto',
+            ...(!virtualScrolling && stickyHeader
+                ? {
+                    '& .MuiTableCell-head': {
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: 2,
+                        backgroundColor: 'background.paper'
+                    }
+                }
+                : undefined),
+            ...(virtualScrolling
+                ? {
+                    '& .dx-rg-grid': {
+                        height: '100%',
+                        minHeight: 0
+                    },
+                    '& .MuiTableContainer-root': {
+                        overflowY: 'auto !important',
+                        overflowX: 'auto',
+                        overscrollBehavior: 'contain',
+                        maxHeight: `${resolvedVirtualTableHeight}px`
+                    }
+                }
+                : undefined)
+        }, children: error ? (_jsx(Box, { sx: { p: 2 }, children: typeof error === 'string' ? _jsx(Typography, { color: "error.main", children: error }) : error })) : loading ? (_jsx("div", { children: loadingComponent ?? _jsx(JBGridLoading, { message: "" }) })) : rows.length === 0 ? (_jsx(Box, { sx: {
+                width: '100%',
+                minHeight: 280,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                p: 3
+            }, children: props.emptyComponent ?? (_jsx(Typography, { variant: "h5", sx: { fontWeight: 600 }, color: "text.secondary", children: "No hay resultados." })) })) : (_jsxs(_Fragment, { children: [showTopPagination ? (_jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        px: 1,
+                        ...(stickyPagination
+                            ? {
+                                position: 'sticky',
+                                top: 0,
+                                zIndex: 3,
+                                backgroundColor: 'background.paper',
+                                borderBottom: '1px solid',
+                                borderColor: 'divider'
+                            }
+                            : undefined)
+                    }, children: _jsx(TablePagination, { component: "div", count: totalCount, page: currentPage, onPageChange: (_, nextPage) => handleCurrentPageChange(nextPage), rowsPerPage: pageSize, onRowsPerPageChange: handleRowsPerPageChange, rowsPerPageOptions: pageSizes }) })) : null, _jsxs(Grid, { rows: rows, columns: gridConfig.columns, getRowId: rowIdGetter, children: [_jsx(SortingState, { defaultSorting: defaults.sorting }), showPaging ? (_jsx(PagingState, { currentPage: currentPage, onCurrentPageChange: handleCurrentPageChange, pageSize: pageSize, onPageSizeChange: handlePageSizeChange })) : null, _jsx(GroupingState, { defaultGrouping: defaults.grouping, defaultExpandedGroups: defaults.expandedGroups }), _jsx(SummaryState, { totalItems: gridConfig.totalSummaryItems, groupItems: gridConfig.groupSummaryItems }), _jsx(FilteringState, { defaultFilters: defaults.filters }), _jsx(SearchState, { value: searchText, onValueChange: onSearchTextChange }), _jsx(SelectionState, { selection: selection, onSelectionChange: handleSelection }), defaults.allowGrouping !== false ? _jsx(IntegratedGrouping, {}) : null, _jsx(IntegratedFiltering, {}), _jsx(IntegratedSorting, {}), _jsx(IntegratedSelection, {}), _jsx(IntegratedSummary, {}), _jsx(DragDropProvider, {}), gridConfig.booleanColumns?.length ? (_jsx(JBBooleanTypeProvider, { for: gridConfig.booleanColumns })) : null, gridConfig.imageColumns?.length ? _jsx(JBImageTypeProvider, { for: gridConfig.imageColumns }) : null, gridConfig.currencyColumns?.length ? (_jsx(JBCurrencyTypeProvider, { for: gridConfig.currencyColumns })) : null, gridConfig.dateColumns?.length ? _jsx(JBDateTypeProvider, { for: gridConfig.dateColumns }) : null, virtualScrolling ? (_jsx(VirtualTable, { columnExtensions: gridConfig.tableColumnExtensions, estimatedRowHeight: defaults.estimatedRowHeight, height: resolvedVirtualTableHeight })) : (_jsx(Table, { columnExtensions: gridConfig.tableColumnExtensions })), defaults.allowColumnResizing !== false ? (_jsx(TableColumnResizing, { defaultColumnWidths: gridConfig.columnsWidths })) : null, defaults.allowSelection !== false ? (_jsx(TableSelection, { showSelectAll: defaults.allowSelectAll, showSelectionColumn: defaults.showSelectionColumn, selectByRowClick: true, highlightRow: true })) : null, _jsx(TableHeaderRow, { showSortingControls: defaults.allowSorting !== false }), defaults.allowFiltering ? (_jsx(TableFilterRow, { showFilterSelector: defaults.advancedFiltering })) : null, showBottomPagination ? (_jsx(Box, { sx: stickyPagination
+                                ? {
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    zIndex: 3,
+                                    backgroundColor: 'background.paper',
+                                    borderTop: '1px solid',
+                                    borderColor: 'divider'
+                                }
+                                : undefined, children: _jsx(PagingPanel, { pageSizes: pageSizes }) })) : null, defaults.allowGrouping !== false ? (_jsx(TableGroupRow, { showColumnsWhenGrouped: false })) : null, _jsx(Toolbar, {}), defaults.allowGrouping !== false ? _jsx(GroupingPanel, { showSortingControls: true }) : null, _jsx(TableSummaryRow, {}), showPaging ? _jsx(CustomPaging, { totalCount: totalCount }) : null] }), virtualScrolling && infiniteScroll && isLoadingMore ? (_jsx(Box, { sx: { py: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 20 }) })) : null] })) }));
 }

package/dist/grid/JBGridHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JBGridHeader.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAiEpD"}
+{"version":3,"file":"JBGridHeader.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridHeader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAoKpD"}

package/dist/grid/JBGridHeader.js

@@ -1,22 +1,91 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button, InputBase, Paper, Typography } from '@mui/material';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
 export function JBGridHeader(props) {
-    const { title, icon, searchText, onSearchTextChange, searchPlaceholder = 'Search...', allowCreate = true, createButtonLabel = 'Create', onCreateClick, rightContent } = props;
+    const { moduleConfig, iconNameRenderer, animated = true, animationDurationMs = 240, animationStaggerMs = 60, animationPreset = 'vertical', breadcrumb, title, subtitle, icon, searchText, onSearchTextChange, searchPlaceholder, allowCreate = true, createButtonLabel, onCreateClick, rightContent } = props;
+    const resolvedTitle = title ?? moduleConfig?.texts?.moduleName ?? '';
+    const resolvedSubtitle = subtitle ?? moduleConfig?.texts?.formHeaderSubtitle ?? '';
+    const resolvedSearchPlaceholder = searchPlaceholder ?? moduleConfig?.texts?.searchPlaceholder ?? 'Search...';
+    const resolvedCreateLabel = createButtonLabel ?? moduleConfig?.texts?.newText ?? 'Create';
+    const resolvedIcon = icon ?? (moduleConfig?.texts?.iconName && iconNameRenderer
+        ? iconNameRenderer(moduleConfig.texts.iconName)
+        : null);
+    const animateSx = (delayMs) => animated
+        ? {
+            animation: `jbGridHeaderFadeIn ${animationDurationMs}ms ease-out ${delayMs}ms both`
+        }
+        : undefined;
+    const animateFromLeftSx = (delayMs) => animated && animationPreset === 'sides'
+        ? {
+            animation: `jbGridHeaderFadeInLeft ${animationDurationMs}ms ease-out ${delayMs}ms both`
+        }
+        : animateSx(delayMs);
+    const animateFromRightSx = (delayMs) => animated && animationPreset === 'sides'
+        ? {
+            animation: `jbGridHeaderFadeInRight ${animationDurationMs}ms ease-out ${delayMs}ms both`
+        }
+        : animateSx(delayMs);
     return (_jsxs(Box, { sx: {
+            width: '100%',
             display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            alignItems: { xs: 'stretch', sm: 'center' },
-            justifyContent: 'space-between',
+            flexDirection: 'column',
             gap: 2,
-            p: 2
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [icon, _jsx(Typography, { variant: "h5", sx: { fontWeight: 700 }, children: title })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    width: { xs: '100%', sm: 'auto' }
-                }, children: [_jsx(Paper, { sx: {
-                            px: 1.5,
-                            py: 0.5,
-                            width: { xs: '100%', sm: 300 }
-                        }, children: _jsx(InputBase, { fullWidth: true, placeholder: searchPlaceholder, value: searchText, onChange: (event) => onSearchTextChange(event.target.value) }) }), rightContent, allowCreate && onCreateClick ? (_jsx(Button, { variant: "contained", onClick: onCreateClick, children: createButtonLabel })) : null] })] }));
+            p: { xs: 2, sm: 3 },
+            '@keyframes jbGridHeaderFadeIn': {
+                from: { opacity: 0, transform: 'translateY(8px)' },
+                to: { opacity: 1, transform: 'translateY(0)' }
+            },
+            '@keyframes jbGridHeaderFadeInLeft': {
+                from: { opacity: 0, transform: 'translateX(-14px)' },
+                to: { opacity: 1, transform: 'translateX(0)' }
+            },
+            '@keyframes jbGridHeaderFadeInRight': {
+                from: { opacity: 0, transform: 'translateX(14px)' },
+                to: { opacity: 1, transform: 'translateX(0)' }
+            }
+        }, children: [breadcrumb ? _jsx(Box, { sx: animateSx(0), children: breadcrumb }) : null, _jsxs(Box, { sx: {
+                    display: { xs: 'flex', sm: 'grid' },
+                    flexDirection: { xs: 'column', sm: 'row' },
+                    gridTemplateColumns: { sm: 'minmax(0, 1fr) auto' },
+                    alignItems: { xs: 'stretch', sm: 'center' },
+                    gap: 2,
+                    width: '100%'
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            minWidth: 0,
+                            ...animateFromLeftSx(animationStaggerMs)
+                        }, children: [resolvedIcon ? _jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: resolvedIcon }) : null, _jsxs(Box, { sx: { minWidth: 0 }, children: [_jsx(Typography, { variant: "h4", sx: { fontWeight: 700, lineHeight: 1.15 }, children: resolvedTitle }), resolvedSubtitle ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: resolvedSubtitle })) : null] })] }), _jsxs(Box, { sx: {
+                            width: { xs: '100%', sm: 'auto' },
+                            display: 'flex',
+                            alignItems: { xs: 'stretch', sm: 'center' },
+                            justifySelf: { sm: 'end' },
+                            justifyContent: { xs: 'flex-start', sm: 'flex-end' },
+                            flexWrap: 'wrap',
+                            gap: 1,
+                            minWidth: 0,
+                            ...animateFromRightSx(animationStaggerMs * 2)
+                        }, children: [_jsxs(Paper, { sx: {
+                                    px: 1.5,
+                                    py: 0.5,
+                                    width: { xs: '100%', sm: 320 },
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    borderRadius: 1.5
+                                }, children: [_jsx(SearchRoundedIcon, { sx: { color: 'text.secondary', fontSize: 20 } }), _jsx(InputBase, { fullWidth: true, placeholder: resolvedSearchPlaceholder, value: searchText, onChange: (event) => onSearchTextChange(event.target.value) })] }), rightContent, allowCreate && onCreateClick ? (_jsx(Button, { variant: "contained", startIcon: _jsx(AddRoundedIcon, { fontSize: "small" }), sx: (theme) => ({
+                                    borderRadius: 1.5,
+                                    minHeight: 42,
+                                    px: 2.25,
+                                    fontWeight: 700,
+                                    boxShadow: 'none',
+                                    backgroundImage: 'none',
+                                    '&:hover': {
+                                        boxShadow: 'none',
+                                        backgroundImage: 'none',
+                                        backgroundColor: theme.palette.primary.dark
+                                    }
+                                }), onClick: onCreateClick, children: resolvedCreateLabel })) : null] })] })] }));
 }

package/dist/grid/JBGridLoading.d.ts

@@ -0,0 +1,9 @@
+type JBGridLoadingProps = {
+    minHeight?: number;
+    size?: number;
+    message?: string;
+    color?: 'primary' | 'secondary' | 'inherit';
+};
+export declare function JBGridLoading(props: JBGridLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JBGridLoading.d.ts.map

package/dist/grid/JBGridLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBGridLoading.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridLoading.tsx"],"names":[],"mappings":"AAEA,KAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;CAC7C,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA2BtD"}

package/dist/grid/JBGridLoading.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CircularProgress, Typography } from '@mui/material';
+export function JBGridLoading(props) {
+    const { minHeight = 320, size = 40, message, color = 'primary' } = props;
+    return (_jsxs(Box, { sx: {
+            width: '100%',
+            minHeight,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1.25
+        }, children: [_jsx(CircularProgress, { size: size, color: color }), message ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: message })) : null] }));
+}

package/dist/grid/JBGridProviders.d.ts

@@ -4,6 +4,9 @@ export declare const JBBooleanTypeProvider: (props: {
 export declare const JBCurrencyTypeProvider: (props: {
     for: string[];
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const JBDateTypeProvider: (props: {
+    for: string[];
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const JBImageTypeProvider: (props: {
     for: string[];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/grid/JBGridProviders.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JBGridProviders.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridProviders.tsx"],"names":[],"mappings":"AA2DA,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK9D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK3D,CAAC"}
+{"version":3,"file":"JBGridProviders.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridProviders.tsx"],"names":[],"mappings":"AA0EA,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK7D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK9D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK1D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO;IAAE,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,4CAK3D,CAAC"}

package/dist/grid/JBGridProviders.js

@@ -10,6 +10,18 @@ const formatCurrency = (value, currency = 'USD') => {
         currency
     }).format(amount);
 };
+const formatDate = (value) => {
+    if (!value)
+        return '';
+    const date = value instanceof Date ? value : new Date(String(value));
+    if (Number.isNaN(date.getTime()))
+        return String(value);
+    return new Intl.DateTimeFormat('es-MX', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }).format(date);
+};
 const BooleanFormatter = ({ value }) => {
     return _jsx("span", { children: value ? 'Yes' : 'No' });
 };
@@ -17,6 +29,9 @@ const CurrencyFormatter = ({ value, column }) => {
     const currency = column?.currency ?? 'USD';
     return _jsx("span", { children: formatCurrency(value, currency) });
 };
+const DateFormatter = ({ value }) => {
+    return _jsx("span", { children: formatDate(value) });
+};
 const ImageFormatter = ({ value, column }) => {
     const src = typeof value === 'string' ? value : '';
     const type = column?.type ?? 'square';
@@ -28,4 +43,5 @@ const ImageFormatter = ({ value, column }) => {
 };
 export const JBBooleanTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: BooleanFormatter, ...props }));
 export const JBCurrencyTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: CurrencyFormatter, ...props }));
+export const JBDateTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: DateFormatter, ...props }));
 export const JBImageTypeProvider = (props) => (_jsx(DataTypeProvider, { formatterComponent: ImageFormatter, ...props }));

package/dist/grid/JBGridSkeleton.d.ts

@@ -0,0 +1,7 @@
+type JBGridSkeletonProps = {
+    rows?: number;
+    showToolbar?: boolean;
+};
+export declare function JBGridSkeleton(props: JBGridSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JBGridSkeleton.d.ts.map

package/dist/grid/JBGridSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBGridSkeleton.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridSkeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA0BxD"}

package/dist/grid/JBGridSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton } from '@mui/material';
+export function JBGridSkeleton(props) {
+    const { rows = 8, showToolbar = true } = props;
+    return (_jsxs(Box, { sx: { width: '100%', p: 1.5 }, children: [showToolbar ? (_jsxs(Box, { sx: { mb: 1.5, display: 'flex', justifyContent: 'space-between', gap: 1.5 }, children: [_jsx(Skeleton, { variant: "rounded", width: 240, height: 36 }), _jsx(Skeleton, { variant: "rounded", width: 160, height: 36 })] })) : null, _jsx(Skeleton, { variant: "rounded", width: "100%", height: 44 }), _jsx(Box, { sx: { mt: 1, display: 'grid', gap: 1 }, children: Array.from({ length: rows }).map((_, index) => (_jsx(Skeleton, { variant: "rounded", width: "100%", height: 40 }, index))) })] }));
+}

package/dist/grid/defaults.d.ts

@@ -0,0 +1,4 @@
+import { JBGridDefaults } from './types';
+export declare const DEFAULT_GRID_DEFAULTS: Required<JBGridDefaults>;
+export declare function resolveGridDefaults(defaults?: JBGridDefaults): Required<JBGridDefaults>;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/grid/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/grid/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,cAAc,CAoB1D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,CAKvF"}

package/dist/grid/defaults.js

@@ -0,0 +1,27 @@
+export const DEFAULT_GRID_DEFAULTS = {
+    pageSize: 30,
+    virtualScrolling: false,
+    estimatedRowHeight: 48,
+    virtualTableHeight: 640,
+    virtualTableHeightMode: 'fixed',
+    virtualTableHeightRatio: 1,
+    allowSorting: true,
+    allowColumnResizing: true,
+    allowSelection: true,
+    allowSelectAll: false,
+    showSelectionColumn: false,
+    allowFiltering: false,
+    advancedFiltering: false,
+    allowGrouping: true,
+    filters: [],
+    sorting: [],
+    grouping: [],
+    expandedGroups: [],
+    pageSizes: [10, 30, 50, 100, 200, 500, 1000]
+};
+export function resolveGridDefaults(defaults) {
+    return {
+        ...DEFAULT_GRID_DEFAULTS,
+        ...(defaults ?? {})
+    };
+}

package/dist/grid/index.d.ts

@@ -2,4 +2,7 @@ export * from './types';
 export * from './JBGridProviders';
 export * from './JBGridHeader';
 export * from './JBGrid';
+export * from './JBGridSkeleton';
+export * from './JBGridLoading';
+export * from './defaults';
 //# sourceMappingURL=index.d.ts.map

package/dist/grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/grid/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/grid/index.js

@@ -2,3 +2,6 @@ export * from './types';
 export * from './JBGridProviders';
 export * from './JBGridHeader';
 export * from './JBGrid';
+export * from './JBGridSkeleton';
+export * from './JBGridLoading';
+export * from './defaults';