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

package/dist/core/layout/JBFormHeader.js

@@ -1,36 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
-import EditRoundedIcon from '@mui/icons-material/EditRounded';
-import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { alpha } from '@mui/material/styles';
+import { JBButton } from '../buttons';
 export function JBFormHeader(props) {
-    const { moduleConfig, iconNameRenderer, animated = true, animationDurationMs = 260, animationStaggerMs = 70, animationPreset = 'vertical', breadcrumb, showBackButton = false, backLabel, onBackClick, backContent, isNew = false, title, dynamicTitle, formValues, getDynamicTitle, subtitle, dynamicSubtitle, getDynamicSubtitle, icon, actions, rightContent } = props;
+    const { moduleConfig, iconNameRenderer, animated = true, animationDurationMs = 260, animationStaggerMs = 70, animationPreset = 'vertical', breadcrumb, showBackButton = false, backLabel, onBackClick, backContent, isNew = false, recordId, title, dynamicTitle, formValues, getDynamicTitle, subtitle, dynamicSubtitle, getDynamicSubtitle, icon, actions, rightContent } = props;
     const dynamicTitleFromResolver = getDynamicTitle?.({ isNew, values: formValues });
     const dynamicSubtitleFromResolver = getDynamicSubtitle?.({ isNew, values: formValues });
-    const resolvedTitle = (!isNew ? dynamicTitle : undefined) ??
-        dynamicTitleFromResolver ??
-        title ??
+    const resolvedDynamicTitle = (!isNew ? dynamicTitle : undefined) ?? dynamicTitleFromResolver;
+    const moduleTitle = title ??
         (isNew ? moduleConfig?.texts?.newText : moduleConfig?.texts?.editText) ??
         moduleConfig?.texts?.moduleName ??
         '';
-    const resolvedSubtitle = dynamicSubtitle ??
+    const hasStaticTitle = Boolean(moduleTitle);
+    const dynamicSubtitleCandidate = dynamicSubtitle ??
         dynamicSubtitleFromResolver ??
-        subtitle ??
+        (hasStaticTitle ? resolvedDynamicTitle : undefined);
+    const staticSubtitleCandidate = subtitle ??
         moduleConfig?.texts?.formHeaderSubtitle ??
         '';
+    const baseSubtitle = dynamicSubtitleCandidate ?? staticSubtitleCandidate;
+    const recordPrefix = moduleConfig?.texts?.formHeaderRecordPrefix;
+    const canApplyRecordPrefix = !isNew &&
+        Boolean(recordPrefix) &&
+        recordId !== undefined &&
+        recordId !== null &&
+        String(recordId).trim() !== '' &&
+        Boolean(dynamicSubtitleCandidate);
+    const resolvedTitle = (hasStaticTitle ? moduleTitle : undefined) ||
+        resolvedDynamicTitle ||
+        '';
+    const resolvedSubtitle = canApplyRecordPrefix
+        ? [`${recordPrefix}-${recordId}`, baseSubtitle].filter(Boolean).join(' / ')
+        : baseSubtitle;
     const resolvedBackLabel = backLabel ?? moduleConfig?.texts?.goBackToGrid ?? 'Volver';
     const resolvedIcon = icon ??
         (moduleConfig?.texts?.iconName && iconNameRenderer
             ? iconNameRenderer(moduleConfig.texts.iconName)
             : null);
-    const defaultActionIcons = {
-        save: _jsx(SaveRoundedIcon, { fontSize: "small" }),
-        cancel: _jsx(CloseRoundedIcon, { fontSize: "small" }),
-        edit: _jsx(EditRoundedIcon, { fontSize: "small" }),
-        delete: _jsx(DeleteRoundedIcon, { fontSize: "small" })
-    };
     const formDisabled = actions?.formDisabled ?? false;
     const allowEdit = actions?.allowEdit ?? false;
     const allowDelete = actions?.allowDelete ?? false;
@@ -39,47 +45,12 @@ export function JBFormHeader(props) {
             display: 'flex',
             gap: 1,
             flexWrap: 'wrap',
-            justifyContent: 'flex-end',
-            width: { xs: '100%', sm: 'auto' }
-        }, children: [!isNew && allowEdit && formDisabled && actions.onStartEdit ? (_jsx(Button, { variant: "contained", color: "warning", size: "large", disabled: actions.disableEdit, startIcon: actions.editIcon ?? defaultActionIcons.edit, sx: (theme) => ({
-                    borderRadius: 1.5,
-                    minHeight: 42,
-                    px: 2.25,
-                    fontWeight: 700,
-                    boxShadow: 'none',
-                    backgroundImage: 'none',
-                    '&:hover': {
-                        boxShadow: 'none',
-                        backgroundImage: 'none',
-                        backgroundColor: theme.palette.warning.dark
-                    }
-                }), onClick: actions.onStartEdit, children: actions.editLabel ?? 'Editar' })) : null, (isNew || !formDisabled) && actions.onCancel ? (_jsx(Button, { variant: "outlined", size: "large", disabled: actions.disableCancel, startIcon: actions.cancelIcon ?? defaultActionIcons.cancel, sx: { borderRadius: 1.5, minHeight: 42, px: 2.25, fontWeight: 700 }, onClick: actions.onCancel, children: actions.cancelLabel ?? 'Cancelar' })) : null, (isNew || !formDisabled) && actions.onSave ? (_jsx(Button, { variant: "contained", color: "primary", size: "large", disabled: actions.disableSave, startIcon: actions.saveIcon ?? defaultActionIcons.save, 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: actions.onSave, children: actions.saveLabel ?? (isNew ? 'Guardar' : 'Guardar cambios') })) : null, allowDelete &&
+            justifyContent: { xs: 'center', md: 'flex-end' },
+            alignItems: 'center',
+            width: { xs: '100%', md: 'auto' }
+        }, children: [!isNew && allowEdit && formDisabled && actions.onStartEdit ? (_jsx(JBButton, { action: "edit", size: "large", disabled: actions.disableEdit, startIcon: actions.editIcon, onClick: actions.onStartEdit, children: actions.editLabel ?? 'Editar' })) : null, (isNew || !formDisabled) && actions.onCancel ? (_jsx(JBButton, { action: "cancel", size: "large", disabled: actions.disableCancel, startIcon: actions.cancelIcon, onClick: actions.onCancel, children: actions.cancelLabel ?? 'Cancelar' })) : null, (isNew || !formDisabled) && actions.onSave ? (_jsx(JBButton, { action: "save", size: "large", disabled: actions.disableSave, startIcon: actions.saveIcon, onClick: actions.onSave, children: actions.saveLabel ?? (isNew ? 'Guardar' : 'Guardar cambios') })) : null, allowDelete &&
                 actions.onDelete &&
-                (formDisabled || showDeleteWhenEditing) ? (_jsx(Button, { variant: "contained", color: "error", size: "large", disabled: actions.disableDelete, startIcon: actions.deleteIcon ?? defaultActionIcons.delete, sx: (theme) => ({
-                    borderRadius: 1.5,
-                    minHeight: 42,
-                    px: 2.25,
-                    fontWeight: 700,
-                    boxShadow: 'none',
-                    backgroundImage: 'none',
-                    '&:hover': {
-                        boxShadow: 'none',
-                        backgroundImage: 'none',
-                        backgroundColor: theme.palette.error.dark
-                    }
-                }), onClick: actions.onDelete, children: actions.deleteLabel ?? 'Eliminar' })) : null] })) : null;
+                (formDisabled || showDeleteWhenEditing) ? (_jsx(JBButton, { action: "delete", size: "large", disabled: actions.disableDelete, startIcon: actions.deleteIcon, onClick: actions.onDelete, children: actions.deleteLabel ?? 'Eliminar' })) : null] })) : null;
     const resolvedRightContent = rightContent ?? defaultActions;
     const animateSx = (delayMs) => animated
         ? {
@@ -119,38 +90,42 @@ export function JBFormHeader(props) {
                     alignItems: 'center',
                     gap: 0.75,
                     width: 'fit-content',
+                    alignSelf: { xs: 'center', md: 'flex-start' },
                     fontWeight: 500,
-                    fontSize: { xs: '0.95rem', sm: '1rem' },
+                    fontSize: { xs: '0.95rem', md: '1rem' },
                     cursor: 'pointer',
                     opacity: 0.9,
                     transition: 'all .16s ease',
                     '&:hover': { opacity: 1, color: 'primary.main' },
                     ...animateSx(animationStaggerMs * 2)
                 }, onClick: onBackClick, children: `← ${resolvedBackLabel}` })) : 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' },
+                    display: { xs: 'flex', md: 'grid' },
+                    flexDirection: { xs: 'column', md: 'row' },
+                    gridTemplateColumns: { md: 'minmax(0, 1fr) auto' },
+                    alignItems: { xs: 'center', md: 'center' },
                     width: '100%',
                     gap: 2
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
+                            justifyContent: { xs: 'center', md: 'flex-start' },
                             gap: 1.25,
                             minWidth: 0,
+                            width: '100%',
                             ...animateFromLeftSx(animationStaggerMs * 3)
-                        }, 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: "h6", sx: (theme) => ({
+                        }, children: [resolvedIcon ? _jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: resolvedIcon }) : null, _jsxs(Box, { sx: { minWidth: 0, textAlign: { xs: 'center', md: 'left' } }, children: [_jsx(Typography, { variant: "h5", sx: { fontWeight: 700, lineHeight: 1.15 }, children: resolvedTitle }), resolvedSubtitle ? (_jsx(Typography, { variant: "body2", sx: (theme) => ({
                                             mt: 0.4,
-                                            fontWeight: 600,
-                                            lineHeight: 1.2,
+                                            fontWeight: 500,
+                                            lineHeight: 1.1,
                                             color: theme.palette.mode === 'dark'
                                                 ? alpha(theme.palette.common.white, 0.9)
                                                 : theme.palette.primary.dark
                                         }), children: resolvedSubtitle })) : null] })] }), _jsx(Box, { sx: {
-                            width: { xs: '100%', sm: 'auto' },
+                            width: { xs: '100%', md: 'auto' },
                             display: 'flex',
-                            justifySelf: { sm: 'end' },
-                            justifyContent: { xs: 'flex-start', sm: 'flex-end' },
+                            justifySelf: { md: 'end' },
+                            justifyContent: { xs: 'center', md: 'flex-end' },
+                            alignItems: 'center',
                             ...animateFromRightSx(animationStaggerMs * 4)
                         }, children: resolvedRightContent })] })] }));
 }

package/dist/forms/JBAutocompleteField.d.ts

@@ -0,0 +1,12 @@
+import { TextFieldProps } from '@mui/material';
+import { FieldValues, Path } from 'react-hook-form';
+import { JBFieldControlProps, SelectOption } from './types';
+export type JBAutocompleteFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = JBFieldControlProps<TFieldValues, TName> & Omit<TextFieldProps, 'name' | 'defaultValue' | 'value' | 'onChange' | 'error' | 'helperText'> & {
+    options: SelectOption[];
+    loading?: boolean;
+    disableClearable?: boolean;
+    noOptionsText?: string;
+    onSearchTextChange?: (value: string) => void;
+};
+export declare function JBAutocompleteField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>(props: JBAutocompleteFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JBAutocompleteField.d.ts.map

package/dist/forms/JBAutocompleteField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JBAutocompleteField.d.ts","sourceRoot":"","sources":["../../src/forms/JBAutocompleteField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,cAAc,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5D,MAAM,MAAM,wBAAwB,CAClC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CACF,cAAc,EACd,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,YAAY,CACxE,GAAG;IACF,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ,wBAAgB,mBAAmB,CACjC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,wBAAwB,CAAC,YAAY,EAAE,KAAK,CAAC,2CAwErD"}

package/dist/forms/JBAutocompleteField.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, CircularProgress, TextField } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { getJBFieldErrorMessage } from './utils';
+export function JBAutocompleteField(props) {
+    const { control, name, rules, options, loading = false, disableClearable = false, noOptionsText = 'Sin opciones', onSearchTextChange, size = 'medium', ...textFieldProps } = props;
+    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => {
+            const selectedOption = options.find((option) => String(option.value) === String(field.value ?? '')) ?? null;
+            return (_jsx(Autocomplete, { options: options, value: selectedOption, disabled: textFieldProps.disabled, loading: loading, disableClearable: disableClearable, noOptionsText: noOptionsText, getOptionDisabled: (option) => !!option.disabled, getOptionLabel: (option) => option.label ?? '', isOptionEqualToValue: (option, value) => String(option.value) === String(value.value), onChange: (_, option) => {
+                    field.onChange(option ? option.value : '');
+                }, onInputChange: (_, value, reason) => {
+                    if (reason === 'input') {
+                        onSearchTextChange?.(value);
+                    }
+                }, renderInput: (params) => (_jsx(TextField, { ...params, ...textFieldProps, name: field.name, size: size, error: !!fieldState.error, helperText: getJBFieldErrorMessage(fieldState.error), inputRef: field.ref, InputProps: {
+                        ...params.InputProps,
+                        endAdornment: (_jsxs(_Fragment, { children: [loading ? (_jsx(CircularProgress, { color: "inherit", size: 16 })) : null, params.InputProps.endAdornment] }))
+                    } })) }));
+        } }));
+}

package/dist/forms/JBDatePickerField.d.ts

@@ -6,6 +6,7 @@ import { JBFieldControlProps } from './types';
 type MuiDatePickerProps = ComponentProps<typeof DatePicker>;
 export type JBDatePickerFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = JBFieldControlProps<TFieldValues, TName> & Omit<MuiDatePickerProps, 'value' | 'onChange' | 'slotProps'> & {
     textFieldProps?: TextFieldProps;
+    storeAsDateString?: boolean;
 };
 export declare function JBDatePickerField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>(props: JBDatePickerFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/JBDatePickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JBDatePickerField.d.ts","sourceRoot":"","sources":["../../src/forms/JBDatePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,sBAAsB,CAChC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEJ,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,2CA0BnD"}
+{"version":3,"file":"JBDatePickerField.d.ts","sourceRoot":"","sources":["../../src/forms/JBDatePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAwB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,sBAAsB,CAChC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAyCJ,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,2CAmCnD"}

package/dist/forms/JBDatePickerField.js

@@ -1,16 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { Controller } from 'react-hook-form';
 import { getJBFieldErrorMessage } from './utils';
+const asDateValue = (value) => {
+    if (value instanceof Date && !Number.isNaN(value.getTime())) {
+        return value;
+    }
+    if (typeof value !== 'string' || !value.trim()) {
+        return null;
+    }
+    const isoDateOnlyMatch = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim());
+    if (isoDateOnlyMatch) {
+        const year = Number(isoDateOnlyMatch[1]);
+        const month = Number(isoDateOnlyMatch[2]);
+        const day = Number(isoDateOnlyMatch[3]);
+        const localDate = new Date(year, month - 1, day);
+        if (!Number.isNaN(localDate.getTime())) {
+            return localDate;
+        }
+    }
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) {
+        return null;
+    }
+    return parsed;
+};
+const formatDateValue = (value) => {
+    if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+        return '';
+    }
+    const year = value.getFullYear();
+    const month = String(value.getMonth() + 1).padStart(2, '0');
+    const day = String(value.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
 export function JBDatePickerField(props) {
-    const { control, name, rules, textFieldProps, ...datePickerProps } = props;
+    const { control, name, rules, textFieldProps, storeAsDateString = false, ...datePickerProps } = props;
     const { size = 'medium', ...resolvedTextFieldProps } = textFieldProps ?? {};
-    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsx(DatePicker, { ...datePickerProps, value: field.value ?? null, onChange: (value) => field.onChange(value), slotProps: {
-                textField: {
-                    ...resolvedTextFieldProps,
-                    size,
-                    error: !!fieldState.error,
-                    helperText: getJBFieldErrorMessage(fieldState.error) ?? resolvedTextFieldProps.helperText
-                }
-            } })) }));
+    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { ...datePickerProps, value: storeAsDateString ? asDateValue(field.value) : field.value ?? null, onChange: (value) => field.onChange(storeAsDateString ? formatDateValue(value) : value), slotProps: {
+                    textField: {
+                        ...resolvedTextFieldProps,
+                        size,
+                        error: !!fieldState.error,
+                        helperText: getJBFieldErrorMessage(fieldState.error) ?? resolvedTextFieldProps.helperText
+                    }
+                } }) })) }));
 }

package/dist/forms/JBTimePickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JBTimePickerField.d.ts","sourceRoot":"","sources":["../../src/forms/JBTimePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,sBAAsB,CAChC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEJ,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,2CA0BnD"}
+{"version":3,"file":"JBTimePickerField.d.ts","sourceRoot":"","sources":["../../src/forms/JBTimePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAwB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,kBAAkB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAE5D,MAAM,MAAM,sBAAsB,CAChC,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7D,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEJ,wBAAgB,iBAAiB,CAC/B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,2CA4BnD"}

package/dist/forms/JBTimePickerField.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TimePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
 import { Controller } from 'react-hook-form';
 import { getJBFieldErrorMessage } from './utils';
 export function JBTimePickerField(props) {
     const { control, name, rules, textFieldProps, ...timePickerProps } = props;
     const { size = 'medium', ...resolvedTextFieldProps } = textFieldProps ?? {};
-    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsx(TimePicker, { ...timePickerProps, value: field.value ?? null, onChange: (value) => field.onChange(value), slotProps: {
-                textField: {
-                    ...resolvedTextFieldProps,
-                    size,
-                    error: !!fieldState.error,
-                    helperText: getJBFieldErrorMessage(fieldState.error) ?? resolvedTextFieldProps.helperText
-                }
-            } })) }));
+    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(TimePicker, { ...timePickerProps, value: field.value ?? null, onChange: (value) => field.onChange(value), slotProps: {
+                    textField: {
+                        ...resolvedTextFieldProps,
+                        size,
+                        error: !!fieldState.error,
+                        helperText: getJBFieldErrorMessage(fieldState.error) ?? resolvedTextFieldProps.helperText
+                    }
+                } }) })) }));
 }

package/dist/forms/index.d.ts

@@ -4,6 +4,7 @@ export * from './rules';
 export * from './zod';
 export * from './JBTextField';
 export * from './JBSelectField';
+export * from './JBAutocompleteField';
 export * from './JBCheckboxField';
 export * from './JBSwitchField';
 export * from './JBRadioGroupField';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC"}

package/dist/forms/index.js

@@ -4,6 +4,7 @@ export * from './rules';
 export * from './zod';
 export * from './JBTextField';
 export * from './JBSelectField';
+export * from './JBAutocompleteField';
 export * from './JBCheckboxField';
 export * from './JBSwitchField';
 export * from './JBRadioGroupField';

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

@@ -1 +1 @@
-{"version":3,"file":"JBGrid.d.ts","sourceRoot":"","sources":["../../src/grid/JBGrid.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,2CAmetF"}
+{"version":3,"file":"JBGrid.d.ts","sourceRoot":"","sources":["../../src/grid/JBGrid.tsx"],"names":[],"mappings":"AA0CA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,wBAAgB,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,2CAokBtF"}

package/dist/grid/JBGrid.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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, VirtualTable, } from '@devexpress/dx-react-grid-material-ui';
+import { DragDropProvider, Grid, GroupingPanel, PagingPanel, Table, TableColumnReordering, 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';
@@ -9,7 +9,7 @@ import { JBBooleanTypeProvider, JBCurrencyTypeProvider, JBDateTypeProvider, JBIm
 export function JBGrid(props) {
     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 { gridConfig, service, rows: controlledRows, totalCount: controlledTotalCount, loading: controlledLoading, isFetching = false, fetchingLabel = 'Actualizando...', 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;
@@ -26,14 +26,64 @@ export function JBGrid(props) {
     const [internalLoading, setInternalLoading] = useState(false);
     const [lastQuery, setLastQuery] = useState('');
     const [selection, setSelection] = useState([]);
+    const [expandedGroups, setExpandedGroups] = useState(defaults.expandedGroups);
+    const [columnOrder, setColumnOrder] = useState(gridConfig.columns.map((column) => column.name));
     const currentPage = isControlledPaging ? controlledCurrentPage : internalCurrentPage;
     const pageSize = isControlledPaging ? controlledPageSize : internalPageSize;
     const loading = controlledLoading ?? internalLoading;
+    const groupingColumnNames = useMemo(() => (defaults.grouping ?? [])
+        .map((grouping) => grouping?.columnName)
+        .filter((name) => typeof name === 'string' && name.length > 0), [defaults.grouping]);
+    const expandedGroupsFromRows = useMemo(() => {
+        if (!defaults.expandGroupedRowsByDefault || groupingColumnNames.length === 0 || rows.length === 0) {
+            return [];
+        }
+        const columnsByName = new Map(gridConfig.columns.map((column) => [column.name, column]));
+        const allGroupKeys = new Set();
+        rows.forEach((row) => {
+            let currentPath = '';
+            groupingColumnNames.forEach((columnName) => {
+                const column = columnsByName.get(columnName);
+                const valueFromGetter = typeof column?.getCellValue === 'function' ? column.getCellValue(row) : row[columnName];
+                const value = valueFromGetter === undefined || valueFromGetter === null || valueFromGetter === ''
+                    ? '-'
+                    : String(valueFromGetter);
+                currentPath = currentPath ? `${currentPath}|${value}` : value;
+                allGroupKeys.add(currentPath);
+            });
+        });
+        return Array.from(allGroupKeys);
+    }, [defaults.expandGroupedRowsByDefault, gridConfig.columns, groupingColumnNames, rows]);
     useEffect(() => {
         if (controlledRows) {
             setRows(controlledRows);
         }
     }, [controlledRows]);
+    useEffect(() => {
+        if (defaults.allowGrouping === false) {
+            setExpandedGroups([]);
+            return;
+        }
+        const nextExpandedGroups = defaults.expandGroupedRowsByDefault
+            ? expandedGroupsFromRows
+            : defaults.expandedGroups;
+        setExpandedGroups((previous) => {
+            if (previous.length === nextExpandedGroups.length &&
+                previous.every((value, index) => value === nextExpandedGroups[index])) {
+                return previous;
+            }
+            return nextExpandedGroups;
+        });
+    }, [
+        defaults.allowGrouping,
+        defaults.expandGroupedRowsByDefault,
+        defaults.expandedGroups,
+        expandedGroupsFromRows
+    ]);
+    useEffect(() => {
+        const defaultOrder = gridConfig.columns.map((column) => column.name);
+        setColumnOrder(defaultOrder);
+    }, [gridConfig.columns]);
     useEffect(() => {
         if (controlledTotalCount !== undefined) {
             setTotalCount(controlledTotalCount);
@@ -123,6 +173,7 @@ export function JBGrid(props) {
     const showTopPagination = paginationPosition === 'top' || paginationPosition === 'both';
     const showBottomPagination = paginationPosition === 'bottom' || paginationPosition === 'both';
     const showPaging = paginationPosition !== 'none';
+    const showFetchingIndicator = isFetching && !loading;
     const handleRowsPerPageChange = (event) => {
         const nextPageSize = Number.parseInt(event.target.value, 10);
         handlePageSizeChange(nextPageSize);
@@ -254,9 +305,10 @@ export function JBGrid(props) {
                 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: {
+            }, children: props.emptyComponent ?? (_jsx(Typography, { variant: "h5", sx: { fontWeight: 600 }, color: "text.secondary", children: "No hay resultados." })) })) : (_jsxs(_Fragment, { children: [showTopPagination ? (_jsxs(Box, { sx: {
                         display: 'flex',
-                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
                         px: 1,
                         ...(stickyPagination
                             ? {
@@ -268,7 +320,12 @@ export function JBGrid(props) {
                                 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
+                    }, children: [_jsx(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                minHeight: 40
+                            }, children: showFetchingIndicator ? (_jsxs(_Fragment, { children: [_jsx(CircularProgress, { size: 16, color: "secondary" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: fetchingLabel })] })) : null }), _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, expandedGroups: expandedGroups, onExpandedGroupsChange: (nextExpandedGroups) => setExpandedGroups(nextExpandedGroups ?? []) }), _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.allowColumnReordering ? (_jsx(TableColumnReordering, { order: columnOrder, onOrderChange: (nextOrder) => setColumnOrder(Array.isArray(nextOrder) ? nextOrder : []) })) : null, 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,

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

@@ -1 +1 @@
-{"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"}
+{"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,2CAsKpD"}

package/dist/grid/JBGridHeader.js

@@ -31,7 +31,7 @@ export function JBGridHeader(props) {
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            p: { xs: 2, sm: 3 },
+            p: { xs: 2, md: 3 },
             '@keyframes jbGridHeaderFadeIn': {
                 from: { opacity: 0, transform: 'translateY(8px)' },
                 to: { opacity: 1, transform: 'translateY(0)' }
@@ -45,24 +45,26 @@ export function JBGridHeader(props) {
                 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' },
+                    display: { xs: 'flex', md: 'grid' },
+                    flexDirection: { xs: 'column', md: 'row' },
+                    gridTemplateColumns: { md: 'minmax(0, 1fr) auto' },
+                    alignItems: { xs: 'center', md: 'center' },
                     gap: 2,
                     width: '100%'
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
+                            justifyContent: { xs: 'center', md: 'flex-start' },
                             gap: 1,
                             minWidth: 0,
+                            width: '100%',
                             ...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' },
+                        }, children: [resolvedIcon ? _jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: resolvedIcon }) : null, _jsxs(Box, { sx: { minWidth: 0, textAlign: { xs: 'center', md: 'left' } }, 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%', md: 'auto' },
                             display: 'flex',
-                            alignItems: { xs: 'stretch', sm: 'center' },
-                            justifySelf: { sm: 'end' },
-                            justifyContent: { xs: 'flex-start', sm: 'flex-end' },
+                            alignItems: { xs: 'center', md: 'center' },
+                            justifySelf: { md: 'end' },
+                            justifyContent: { xs: 'center', md: 'flex-end' },
                             flexWrap: 'wrap',
                             gap: 1,
                             minWidth: 0,
@@ -70,7 +72,7 @@ export function JBGridHeader(props) {
                         }, children: [_jsxs(Paper, { sx: {
                                     px: 1.5,
                                     py: 0.5,
-                                    width: { xs: '100%', sm: 320 },
+                                    width: { xs: '100%', md: 320 },
                                     display: 'flex',
                                     alignItems: 'center',
                                     gap: 1,

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"JBGridProviders.d.ts","sourceRoot":"","sources":["../../src/grid/JBGridProviders.tsx"],"names":[],"mappings":"AA2FA,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

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DataTypeProvider } from '@devexpress/dx-react-grid';
-import { Avatar, Box } from '@mui/material';
+import CancelRoundedIcon from '@mui/icons-material/CancelRounded';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import { Avatar, Box, Chip } from '@mui/material';
 const formatCurrency = (value, currency = 'USD') => {
     const amount = typeof value === 'number' ? value : Number(value ?? 0);
     if (Number.isNaN(amount))
@@ -23,7 +25,12 @@ const formatDate = (value) => {
     }).format(date);
 };
 const BooleanFormatter = ({ value }) => {
-    return _jsx("span", { children: value ? 'Yes' : 'No' });
+    const normalized = String(value ?? '').trim().toLowerCase();
+    const isTrue = value === true ||
+        value === 1 ||
+        value === '1' ||
+        normalized === 'true';
+    return (_jsx(Chip, { size: "small", variant: "outlined", color: isTrue ? 'success' : 'error', icon: isTrue ? _jsx(CheckCircleRoundedIcon, { fontSize: "small" }) : _jsx(CancelRoundedIcon, { fontSize: "small" }), label: isTrue ? 'Sí' : 'No' }));
 };
 const CurrencyFormatter = ({ value, column }) => {
     const currency = column?.currency ?? 'USD';

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

@@ -1 +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"}
+{"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,CAsB1D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,CAKvF"}

package/dist/grid/defaults.js

@@ -7,6 +7,7 @@ export const DEFAULT_GRID_DEFAULTS = {
     virtualTableHeightRatio: 1,
     allowSorting: true,
     allowColumnResizing: true,
+    allowColumnReordering: false,
     allowSelection: true,
     allowSelectAll: false,
     showSelectionColumn: false,
@@ -17,6 +18,7 @@ export const DEFAULT_GRID_DEFAULTS = {
     sorting: [],
     grouping: [],
     expandedGroups: [],
+    expandGroupedRowsByDefault: false,
     pageSizes: [10, 30, 50, 100, 200, 500, 1000]
 };
 export function resolveGridDefaults(defaults) {