tp-react-elements 1.3.14 → 1.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_virtual/index.esm4.js +2 -2
- package/dist/_virtual/index.esm6.js +2 -2
- package/dist/_virtual/index.esm7.js +2 -2
- package/dist/components/Form/FormRender.esm.js +8 -8
- package/dist/components/FormComponents/index.esm.js +12 -26
- package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts +38 -1
- package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js +34 -24
- package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DateRange = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateRange as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DefinedRange = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DefinedRange as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Calendar = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { Calendar as __exports };
|
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React__default, { lazy, Suspense } from 'react';
|
|
3
|
-
import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
|
|
4
|
-
import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
5
|
-
import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
|
|
6
|
-
import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
7
|
-
import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
|
|
8
|
-
import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
|
|
9
|
-
import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
|
|
10
|
-
import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
|
|
11
3
|
import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
|
|
12
4
|
import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
|
|
13
5
|
import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
|
|
@@ -18,6 +10,14 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
|
|
|
18
10
|
import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
|
|
19
11
|
import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
|
|
20
12
|
import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
|
|
13
|
+
import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
|
|
14
|
+
import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
|
|
15
|
+
import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
|
|
16
|
+
import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
17
|
+
import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
18
|
+
import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
|
|
19
|
+
import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
|
|
20
|
+
import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
|
|
21
21
|
|
|
22
22
|
// Lazy-loaded heavy components
|
|
23
23
|
// const RichTextEditorWrapper = lazy(() =>
|
|
@@ -1,39 +1,25 @@
|
|
|
1
|
-
export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
|
|
2
|
-
export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
3
|
-
export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
|
|
4
|
-
export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
|
|
5
|
-
export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
|
|
6
|
-
export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
|
|
7
1
|
export { default as SingleSelect } from './Select/SingleSelect.esm.js';
|
|
8
2
|
export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
|
|
9
3
|
export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
|
|
10
4
|
export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
|
|
11
5
|
export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
|
|
12
6
|
export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
|
|
7
|
+
export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
|
|
8
|
+
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
9
|
+
export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
|
|
13
10
|
export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
11
|
+
export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
|
|
12
|
+
export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
|
|
13
|
+
export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
14
14
|
export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
|
|
15
|
-
export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
|
|
16
|
-
export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
|
|
17
|
-
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|
|
18
|
-
export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
|
|
19
15
|
export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
|
|
20
16
|
export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
import 'react';
|
|
24
|
-
import 'react-hook-form';
|
|
25
|
-
import 'dayjs';
|
|
26
|
-
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
27
|
-
import '@mui/icons-material/Visibility';
|
|
28
|
-
import '@mui/icons-material/Close';
|
|
29
|
-
import '@mui/icons-material/NavigateBefore';
|
|
30
|
-
import '@mui/icons-material/NavigateNext';
|
|
31
|
-
import '@mui/icons-material/Delete';
|
|
32
|
-
import '@mui/icons-material/UploadFile';
|
|
33
|
-
import '@mui/icons-material/PictureAsPdf';
|
|
34
|
-
import '@mui/icons-material/TableChart';
|
|
35
|
-
import '@mui/icons-material/Description';
|
|
36
|
-
export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
|
|
17
|
+
export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
|
|
18
|
+
export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
|
|
37
19
|
export { default as HelperText } from './HelperText/HelperText.esm.js';
|
|
20
|
+
export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
|
|
21
|
+
export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
|
|
38
22
|
export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
|
|
39
23
|
export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
|
|
24
|
+
export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
|
|
25
|
+
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { TPColumnDef } from './types';
|
|
2
|
+
import { type TableCellProps } from '@mui/material';
|
|
2
3
|
import { type ServerFilterDef } from './DynamicFilterBar';
|
|
3
4
|
export type { ServerFilterDef };
|
|
4
5
|
export type { TPColumnDef } from './types';
|
|
@@ -122,6 +123,42 @@ export interface GenericPaginatedGridProps<TData extends object> {
|
|
|
122
123
|
* Default: 4.
|
|
123
124
|
*/
|
|
124
125
|
maxVisibleFilters?: number;
|
|
126
|
+
/**
|
|
127
|
+
* Grid-level body cell props — applied to **every** data cell and merged with
|
|
128
|
+
* any column-level `muiTableBodyCellProps` (column takes precedence for non-sx
|
|
129
|
+
* props; `sx` objects are combined as a MUI sx array so neither is lost).
|
|
130
|
+
*
|
|
131
|
+
* Use this to set `title`, `className`, padding, etc. once at the grid level
|
|
132
|
+
* instead of repeating the same props on every column:
|
|
133
|
+
*
|
|
134
|
+
* ```tsx
|
|
135
|
+
* muiTableBodyCellProps={({ cell }) => ({
|
|
136
|
+
* title: cell.getValue(), // hover tooltip on every cell
|
|
137
|
+
* className: 'body_cell',
|
|
138
|
+
* })}
|
|
139
|
+
* ```
|
|
140
|
+
*
|
|
141
|
+
* Individual columns can still add layout-only overrides (e.g. `align: 'right'`
|
|
142
|
+
* for numeric columns) without losing the global `title`/`className`.
|
|
143
|
+
*/
|
|
144
|
+
muiTableBodyCellProps?: TableCellProps | ((params: {
|
|
145
|
+
cell: any;
|
|
146
|
+
column: any;
|
|
147
|
+
row: any;
|
|
148
|
+
table: any;
|
|
149
|
+
}) => TableCellProps);
|
|
150
|
+
/**
|
|
151
|
+
* Grid-level head cell props — applied to **every** header cell and merged
|
|
152
|
+
* with any column-level `muiTableHeadCellProps` (column takes precedence).
|
|
153
|
+
*
|
|
154
|
+
* ```tsx
|
|
155
|
+
* muiTableHeadCellProps={{ className: 'Header_cell' }}
|
|
156
|
+
* ```
|
|
157
|
+
*/
|
|
158
|
+
muiTableHeadCellProps?: TableCellProps | ((params: {
|
|
159
|
+
column: any;
|
|
160
|
+
table: any;
|
|
161
|
+
}) => TableCellProps);
|
|
125
162
|
}
|
|
126
|
-
declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
163
|
+
declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
127
164
|
export default GenericPaginatedGrid;
|
|
@@ -221,7 +221,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
|
|
|
221
221
|
}, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
|
|
222
222
|
};
|
|
223
223
|
// ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
|
|
224
|
-
function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, }) {
|
|
224
|
+
function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, }) {
|
|
225
225
|
const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
|
|
226
226
|
const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
|
|
227
227
|
const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
|
|
@@ -494,45 +494,55 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
|
|
|
494
494
|
...(headerBgColor ? { backgroundColor: headerBgColor } : {}),
|
|
495
495
|
},
|
|
496
496
|
},
|
|
497
|
-
muiTableHeadCellProps: (
|
|
498
|
-
const
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
}
|
|
497
|
+
muiTableHeadCellProps: (params) => {
|
|
498
|
+
const { column, table } = params;
|
|
499
|
+
// ── Resolve column-level props ────────────────────────────────────────
|
|
500
|
+
const colDef = column.columnDef.muiTableHeadCellProps;
|
|
501
|
+
const colResolved = typeof colDef === 'function' ? (colDef({ column, table }) ?? {}) : colDef ?? {};
|
|
502
|
+
// ── Resolve grid-level props ──────────────────────────────────────────
|
|
503
|
+
const gridResolved = typeof gridHeadCellProps === 'function'
|
|
504
|
+
? (gridHeadCellProps({ column, table }) ?? {})
|
|
505
|
+
: gridHeadCellProps ?? {};
|
|
506
|
+
// Column align overrides grid align; default 'left'
|
|
507
|
+
const align = (colResolved.align ?? gridResolved.align ?? 'left');
|
|
508
|
+
const { sx: gridSx, align: _ga, ...gridRest } = gridResolved;
|
|
509
|
+
const { sx: colSx, align: _ca, ...colRest } = colResolved;
|
|
510
510
|
return {
|
|
511
|
+
...gridRest, // grid-level props (className, etc.)
|
|
512
|
+
...colRest, // column-level overrides
|
|
511
513
|
align,
|
|
512
514
|
sx: [
|
|
513
515
|
buildHeaderCellSx(align, resolvedHeaderMinHeight, resolvedHeaderMaxHeight, resolvedHeaderFontSize, headerBgColor, headerMaxLines),
|
|
516
|
+
...(gridSx ? [gridSx] : []),
|
|
514
517
|
...(colSx ? [colSx] : []),
|
|
515
518
|
],
|
|
516
519
|
};
|
|
517
520
|
},
|
|
518
|
-
muiTableBodyCellProps: (
|
|
519
|
-
const
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
}
|
|
521
|
+
muiTableBodyCellProps: (params) => {
|
|
522
|
+
const { cell, column, row, table } = params;
|
|
523
|
+
// ── Resolve column-level props ────────────────────────────────────────
|
|
524
|
+
const colDef = column.columnDef.muiTableBodyCellProps;
|
|
525
|
+
const colResolved = typeof colDef === 'function' ? (colDef({ cell, column, row, table }) ?? {}) : colDef ?? {};
|
|
526
|
+
// ── Resolve grid-level props ──────────────────────────────────────────
|
|
527
|
+
const gridResolved = typeof gridBodyCellProps === 'function'
|
|
528
|
+
? (gridBodyCellProps({ cell, column, row, table }) ?? {})
|
|
529
|
+
: gridBodyCellProps ?? {};
|
|
530
|
+
const { sx: gridSx, ...gridRest } = gridResolved;
|
|
531
|
+
const { sx: colSx, ...colRest } = colResolved;
|
|
528
532
|
return {
|
|
533
|
+
...gridRest, // grid-level props (title, className, etc.)
|
|
534
|
+
...colRest, // column-level overrides (align, etc.)
|
|
529
535
|
sx: [
|
|
536
|
+
// 1. base styles — always applied
|
|
530
537
|
{
|
|
531
538
|
whiteSpace: 'nowrap',
|
|
532
539
|
fontSize: resolvedBodyFontSize,
|
|
533
540
|
lineHeight: 1.35,
|
|
534
541
|
borderRight: '1px solid rgba(224,224,224,1)',
|
|
535
542
|
},
|
|
543
|
+
// 2. grid-level sx additions
|
|
544
|
+
...(gridSx ? [gridSx] : []),
|
|
545
|
+
// 3. column-level sx overrides (minWidth, maxWidth, textAlign, etc.)
|
|
536
546
|
...(colSx ? [colSx] : []),
|
|
537
547
|
],
|
|
538
548
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as Calendar } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireDayCell } from '../DayCell/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DateRange } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireCalendar } from '../Calendar/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DefinedRange } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireStyles } from '../../styles.esm.js';
|