@joelbarron/react-web-dev-kit 0.1.9 → 0.1.10

package/dist/forms/JBSwitchField.d.ts

@@ -0,0 +1,11 @@
+import { FormControlLabelProps, FormControlProps, SwitchProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { JBFieldControlProps } from './types';
+export type JBSwitchFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = JBFieldControlProps<TFieldValues, TName> & Omit<SwitchProps, 'name' | 'checked' | 'onChange' | 'defaultChecked'> & {
+    label: ReactNode;
+    formControlProps?: Omit<FormControlProps, 'error'>;
+    formControlLabelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;
+};
+export declare function JBSwitchField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>(props: JBSwitchFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JBSwitchField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JBSwitchField.d.ts","sourceRoot":"","sources":["../../src/forms/JBSwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,qBAAqB,EACrB,gBAAgB,EAGhB,WAAW,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,GAC1C,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,gBAAgB,CAAC,GAAG;IACtE,KAAK,EAAE,SAAS,CAAC;IACjB,gBAAgB,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;IACnD,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,CAAC;AAEJ,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,2CAiC/C"}

package/dist/forms/JBSwitchField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { getJBFieldErrorMessage } from './utils';
+export function JBSwitchField(props) {
+    const { control, name, rules, label, formControlProps, formControlLabelProps, ...switchProps } = props;
+    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsxs(FormControl, { ...formControlProps, error: !!fieldState.error, children: [_jsx(FormControlLabel, { ...formControlLabelProps, label: label, control: _jsx(Switch, { ...switchProps, inputRef: field.ref, checked: !!field.value, onBlur: field.onBlur, onChange: (_, checked) => {
+                            field.onChange(checked);
+                        } }) }), _jsx(FormHelperText, { children: getJBFieldErrorMessage(fieldState.error) })] })) }));
+}

package/dist/forms/JBTextField.d.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps } from '@mui/material';
+import { FieldValues, Path } from 'react-hook-form';
+import { JBFieldControlProps } from './types';
+export type JBTextFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = JBFieldControlProps<TFieldValues, TName> & Omit<TextFieldProps, 'name' | 'defaultValue' | 'value' | 'onChange' | 'error' | 'helperText'>;
+export declare function JBTextField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>(props: JBTextFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JBTextField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JBTextField.d.ts","sourceRoot":"","sources":["../../src/forms/JBTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAc,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,MAAM,MAAM,gBAAgB,CAC1B,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,CAAC;AAEJ,wBAAgB,WAAW,CACzB,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,EAChC,KAAK,EAAE,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,2CAoB7C"}

package/dist/forms/JBTextField.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { getJBFieldErrorMessage } from './utils';
+export function JBTextField(props) {
+    const { control, name, rules, size = 'medium', ...textFieldProps } = props;
+    return (_jsx(Controller, { control: control, name: name, rules: rules, render: ({ field, fieldState }) => (_jsx(TextField, { ...textFieldProps, ...field, size: size, value: field.value ?? '', error: !!fieldState.error, helperText: getJBFieldErrorMessage(fieldState.error) })) }));
+}

package/dist/forms/JBTimePickerField.d.ts

@@ -0,0 +1,12 @@
+import { TextFieldProps } from '@mui/material';
+import { TimePicker } from '@mui/x-date-pickers';
+import { ComponentProps } from 'react';
+import { FieldValues, Path } from 'react-hook-form';
+import { JBFieldControlProps } from './types';
+type MuiTimePickerProps = ComponentProps<typeof TimePicker>;
+export type JBTimePickerFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = JBFieldControlProps<TFieldValues, TName> & Omit<MuiTimePickerProps, 'value' | 'onChange' | 'slotProps'> & {
+    textFieldProps?: TextFieldProps;
+};
+export declare function JBTimePickerField<TFieldValues extends FieldValues, TName extends Path<TFieldValues>>(props: JBTimePickerFieldProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=JBTimePickerField.d.ts.map

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

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

package/dist/forms/JBTimePickerField.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 ?? {};
+    const mergedTextFieldSx = Array.isArray(resolvedTextFieldProps.sx)
+        ? [
+            {
+                '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root': {
+                    backgroundColor: 'common.background'
+                }
+            },
+            ...resolvedTextFieldProps.sx
+        ]
+        : [
+            {
+                '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root': {
+                    backgroundColor: 'common.background'
+                }
+            },
+            resolvedTextFieldProps.sx
+        ];
+    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,
+                        sx: mergedTextFieldSx,
+                        error: !!fieldState.error,
+                        helperText: getJBFieldErrorMessage(fieldState.error) ?? resolvedTextFieldProps.helperText
+                    }
+                } }) })) }));
+}

package/dist/forms/index.d.ts

@@ -0,0 +1,13 @@
+export * from './types';
+export * from './utils';
+export * from './rules';
+export * from './zod';
+export * from './JBTextField';
+export * from './JBSelectField';
+export * from './JBAutocompleteField';
+export * from './JBCheckboxField';
+export * from './JBSwitchField';
+export * from './JBRadioGroupField';
+export * from './JBDatePickerField';
+export * from './JBTimePickerField';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,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

@@ -0,0 +1,12 @@
+export * from './types';
+export * from './utils';
+export * from './rules';
+export * from './zod';
+export * from './JBTextField';
+export * from './JBSelectField';
+export * from './JBAutocompleteField';
+export * from './JBCheckboxField';
+export * from './JBSwitchField';
+export * from './JBRadioGroupField';
+export * from './JBDatePickerField';
+export * from './JBTimePickerField';

package/dist/forms/rules.d.ts

@@ -0,0 +1,16 @@
+import { RegisterOptions } from 'react-hook-form';
+type FieldRules = RegisterOptions<any, any>;
+export declare const jbRules: {
+    required: (message?: string) => FieldRules;
+    email: (message?: string) => FieldRules;
+    minLength: (value: number, message?: string) => FieldRules;
+    maxLength: (value: number, message?: string) => FieldRules;
+    pattern: (value: RegExp, message: string) => FieldRules;
+    compose: (...rules: FieldRules[]) => FieldRules;
+};
+export {};
+/**
+ * Puedes usar `rules` junto con `zodResolver`.
+ * Si ambos validan la misma regla, el mensaje visible depende del error que primero reciba el campo.
+ */
+//# sourceMappingURL=rules.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/forms/rules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,KAAK,UAAU,GAAG,eAAe,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAI5C,eAAO,MAAM,OAAO;oCACiC,UAAU;iCACX,UAAU;uBAGzC,MAAM,YAAY,MAAM,KAAG,UAAU;uBAGrC,MAAM,YAAY,MAAM,KAAG,UAAU;qBAGvC,MAAM,WAAW,MAAM,KAAG,UAAU;wBAGjC,UAAU,EAAE,KAAG,UAAU;CAC9C,CAAC;;AAEF;;;GAGG"}

package/dist/forms/rules.js

@@ -0,0 +1,21 @@
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export const jbRules = {
+    required: (message = 'Este campo es obligatorio') => ({ required: message }),
+    email: (message = 'Correo electrónico inválido') => ({
+        pattern: { value: EMAIL_REGEX, message }
+    }),
+    minLength: (value, message) => ({
+        minLength: { value, message: message ?? `Mínimo ${value} caracteres` }
+    }),
+    maxLength: (value, message) => ({
+        maxLength: { value, message: message ?? `Máximo ${value} caracteres` }
+    }),
+    pattern: (value, message) => ({
+        pattern: { value, message }
+    }),
+    compose: (...rules) => Object.assign({}, ...rules)
+};
+/**
+ * Puedes usar `rules` junto con `zodResolver`.
+ * Si ambos validan la misma regla, el mensaje visible depende del error que primero reciba el campo.
+ */

package/dist/forms/types.d.ts

@@ -0,0 +1,12 @@
+import { Control, FieldValues, Path, RegisterOptions } from 'react-hook-form';
+export type JBFieldControlProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = {
+    control: Control<TFieldValues>;
+    name: TName;
+    rules?: RegisterOptions<TFieldValues, TName>;
+};
+export type SelectOption<TValue = string> = {
+    label: string;
+    value: TValue;
+    disabled?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9E,MAAM,MAAM,mBAAmB,CAC7B,YAAY,SAAS,WAAW,EAChC,KAAK,SAAS,IAAI,CAAC,YAAY,CAAC,IAC9B;IACF,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,CAAC,EAAE,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,MAAM,GAAG,MAAM,IAAI;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/forms/types.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/utils.d.ts

@@ -0,0 +1,5 @@
+import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
+type FormFieldError = FieldError | Merge<FieldError, FieldErrorsImpl<Record<string, unknown>>> | undefined;
+export declare const getJBFieldErrorMessage: (error: FormFieldError) => string | undefined;
+export {};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/forms/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErE,KAAK,cAAc,GACf,UAAU,GACV,KAAK,CAAC,UAAU,EAAE,eAAe,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,GAC3D,SAAS,CAAC;AAEd,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc,KAAG,MAAM,GAAG,SAIvE,CAAC"}

package/dist/forms/utils.js

@@ -0,0 +1,7 @@
+export const getJBFieldErrorMessage = (error) => {
+    if (!error)
+        return undefined;
+    if (typeof error.message === 'string')
+        return error.message;
+    return undefined;
+};

package/dist/forms/zod.d.ts

@@ -0,0 +1,4 @@
+import { z } from 'zod';
+export declare const normalizeTextInput: (value: string) => string;
+export declare const buildRequiredTextSchema: (label: string, minimumLength?: number) => z.ZodString;
+//# sourceMappingURL=zod.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zod.d.ts","sourceRoot":"","sources":["../../src/forms/zod.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MAA2C,CAAC;AAE/F,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,EAAE,sBAAiB,KAAG,CAAC,CAAC,SAQ5E,CAAC"}

package/dist/forms/zod.js

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+export const normalizeTextInput = (value) => value.trim().replace(/\s+/g, ' ');
+export const buildRequiredTextSchema = (label, minimumLength = 1) => {
+    const field = z.string().trim().min(1, `${label} es obligatorio`);
+    if (minimumLength <= 1) {
+        return field;
+    }
+    return field.min(minimumLength, `${label} debe tener al menos ${minimumLength} caracteres`);
+};

package/dist/grid/JBGrid.d.ts

@@ -0,0 +1,3 @@
+import { JBGridProps } from './types';
+export declare function JBGrid<TData extends Record<string, unknown>>(props: JBGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JBGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,338 @@
+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, 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';
+import { JBGridLoading } from './JBGridLoading';
+import { JBBooleanTypeProvider, JBCurrencyTypeProvider, JBDateTypeProvider, JBImageTypeProvider } from './JBGridProviders';
+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, 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;
+    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 [internalPageSize, setInternalPageSize] = useState(defaults.pageSize);
+    const [internalCurrentPage, setInternalCurrentPage] = useState(0);
+    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);
+            return;
+        }
+        if (controlledRows) {
+            setTotalCount(controlledRows.length);
+        }
+    }, [controlledRows, controlledTotalCount]);
+    const computeQueryString = useMemo(() => () => `pageSize=${pageSize}&skip=${pageSize * currentPage}&terms=${searchText || ''}`, [currentPage, pageSize, searchText]);
+    useEffect(() => {
+        if (controlledRows)
+            return;
+        const execute = async () => {
+            if (loadData) {
+                await loadData({
+                    lastQuery,
+                    loading,
+                    setRows,
+                    setTotalCount,
+                    setLastQuery,
+                    setLoading: setInternalLoading,
+                    getQueryString: computeQueryString,
+                    currentPage,
+                    pageSize,
+                    searchText
+                });
+                return;
+            }
+            if (!service)
+                return;
+            const queryString = computeQueryString();
+            if (queryString === lastQuery || loading)
+                return;
+            try {
+                setInternalLoading(true);
+                const response = await service.list(currentPage, pageSize, searchText);
+                setRows(response?.data?.results ?? []);
+                setTotalCount(response?.data?.count ?? 0);
+                setLastQuery(queryString);
+            }
+            finally {
+                setInternalLoading(false);
+            }
+        };
+        void execute();
+    }, [
+        computeQueryString,
+        controlledRows,
+        currentPage,
+        lastQuery,
+        loadData,
+        loading,
+        pageSize,
+        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) {
+            setSelection([]);
+            return;
+        }
+        setSelection([lastSelected]);
+        const selectedRow = rows.find((row) => rowIdGetter(row) === lastSelected);
+        if (selectedRow && onRowSelected) {
+            onRowSelected(selectedRow);
+        }
+    };
+    const rowIdGetter = getRowId
+        ? (row) => getRowId(row)
+        : (row) => row.id;
+    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);
+        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 ? (_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        px: 1,
+                        ...(stickyPagination
+                            ? {
+                                position: 'sticky',
+                                top: 0,
+                                zIndex: 3,
+                                backgroundColor: 'background.paper',
+                                borderBottom: '1px solid',
+                                borderColor: 'divider'
+                            }
+                            : undefined)
+                    }, 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,
+                                    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

@@ -0,0 +1,3 @@
+import { JBGridHeaderProps } from './types';
+export declare function JBGridHeader(props: JBGridHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=JBGridHeader.d.ts.map

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

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