tp-react-elements 3.0.24 → 3.0.26
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.esm12.js +2 -2
- package/dist/_virtual/index.esm13.js +2 -2
- package/dist/_virtual/index.esm4.js +2 -2
- package/dist/_virtual/index.esm5.js +2 -2
- package/dist/_virtual/index.esm7.js +2 -2
- package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js +18 -16
- package/dist/components/PaginatedGrid/GenericPaginatedGrid.esm.js +25 -2
- package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js +1 -1
- package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Month = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { Month as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var InputRangeField = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { InputRangeField as __exports };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var
|
|
1
|
+
var DateRangePicker = {};
|
|
2
2
|
|
|
3
|
-
export {
|
|
3
|
+
export { DateRangePicker as __exports };
|
|
@@ -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 };
|
|
@@ -591,7 +591,10 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
|
|
|
591
591
|
return values.length > 0 ? [...rest, { id, value: values }] : rest;
|
|
592
592
|
});
|
|
593
593
|
}, [onColumnFilterChange]);
|
|
594
|
-
|
|
594
|
+
// The × on a filter chip clears that filter's value only — it does NOT
|
|
595
|
+
// hide/remove the chip from the bar (that's what the Manage Filters panel
|
|
596
|
+
// is for). The chip stays visible, just reverts to its inactive/empty state.
|
|
597
|
+
const clearFilter = useCallback((id) => {
|
|
595
598
|
const def = serverFilterDefs.find((d) => d.id === id);
|
|
596
599
|
if (def?.type === 'dateRange') {
|
|
597
600
|
onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
|
|
@@ -617,21 +620,20 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
|
|
|
617
620
|
applyColFilter(id, '');
|
|
618
621
|
}
|
|
619
622
|
}
|
|
620
|
-
|
|
621
|
-
}, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, onToggleFilter, applyColFilter, applyColMultiFilter]);
|
|
623
|
+
}, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, applyColFilter, applyColMultiFilter]);
|
|
622
624
|
return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.4, mr: 0.25 }, children: [jsx(FilterListIcon, { sx: { fontSize: labelFontSize + 3, color: 'text.disabled' } }), jsx(Typography, { sx: { fontSize: labelFontSize }, color: "text.secondary", fontWeight: 500, noWrap: true, children: "Filter by:" })] }), visibleFilterIds.map((id) => {
|
|
623
625
|
const def = serverFilterDefs.find((d) => d.id === id);
|
|
624
626
|
if (def?.type === 'dateRange') {
|
|
625
|
-
return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () =>
|
|
627
|
+
return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
626
628
|
}
|
|
627
629
|
if (def?.type === 'text') {
|
|
628
|
-
return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
630
|
+
return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
629
631
|
}
|
|
630
632
|
if (def?.type === 'dropdown') {
|
|
631
|
-
return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
633
|
+
return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
632
634
|
}
|
|
633
635
|
if (def?.type === 'searchableDropdown') {
|
|
634
|
-
return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
636
|
+
return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
635
637
|
}
|
|
636
638
|
if (def?.type === 'multiSelect') {
|
|
637
639
|
const selected = (filterValues[def.filterKey] ?? '')
|
|
@@ -640,35 +642,35 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
|
|
|
640
642
|
return (jsx(MultiSelectFilterChip, { label: def.label, selectedValues: selected, options: def.options, onApply: (vals) => onFilterValuesChange({
|
|
641
643
|
...filterValues,
|
|
642
644
|
[def.filterKey]: vals.join(','),
|
|
643
|
-
}), onRemove: () =>
|
|
645
|
+
}), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
644
646
|
}
|
|
645
647
|
if (def?.type === 'monthPicker') {
|
|
646
|
-
return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
648
|
+
return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined, single: def.single }, id));
|
|
647
649
|
}
|
|
648
650
|
if (def?.type === 'singleSelectSearch') {
|
|
649
|
-
return (jsx(SingleSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
651
|
+
return (jsx(SingleSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), fetchOptions: def.fetchOptions, api: def.api, jwtHeader: def.jwtHeader, searchValue: def.searchValue, minSearchLength: def.minSearchLength, debounceMs: def.debounceMs, options: def.options, placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
650
652
|
}
|
|
651
653
|
if (def?.type === 'multiSelectSearch') {
|
|
652
|
-
return (jsx(MultiSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () =>
|
|
654
|
+
return (jsx(MultiSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => clearFilter(id), fetchOptions: def.fetchOptions, api: def.api, jwtHeader: def.jwtHeader, searchValue: def.searchValue, minSearchLength: def.minSearchLength, debounceMs: def.debounceMs, options: def.options, maxChips: def.maxChips, maxSelections: def.maxSelections, placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
653
655
|
}
|
|
654
656
|
if (def?.type === 'date') {
|
|
655
|
-
return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () =>
|
|
657
|
+
return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
656
658
|
}
|
|
657
659
|
// Column filter chip — render the variant that matches the column's filterType
|
|
658
660
|
const col = availableColumns.find((c) => c.id === id);
|
|
659
661
|
if (!col)
|
|
660
662
|
return null;
|
|
661
663
|
if (col.filterType === 'date') {
|
|
662
|
-
return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () =>
|
|
664
|
+
return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
663
665
|
}
|
|
664
666
|
if (col.filterType === 'select' || col.filterType === 'searchable-select') {
|
|
665
|
-
return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () =>
|
|
667
|
+
return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
666
668
|
}
|
|
667
669
|
if (col.filterType === 'multi-select') {
|
|
668
|
-
return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () =>
|
|
670
|
+
return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
669
671
|
}
|
|
670
672
|
// Default: free-text input
|
|
671
|
-
return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () =>
|
|
673
|
+
return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => clearFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
|
|
672
674
|
}), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle, gridId: gridId }), onGlobalFilterChange && (jsx(GlobalSearchInput, { value: globalFilter ?? '', onChange: onGlobalFilterChange, chipStyle: chipStyle, placeholder: globalSearchPlaceholder }))] }));
|
|
673
675
|
};
|
|
674
676
|
var DynamicFilterBar$1 = memo(DynamicFilterBar);
|
|
@@ -774,11 +774,34 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
|
|
|
774
774
|
const gridResolved = typeof gridBodyCellProps === 'function'
|
|
775
775
|
? (gridBodyCellProps({ cell, column, row, table }) ?? {})
|
|
776
776
|
: gridBodyCellProps ?? {};
|
|
777
|
-
const { sx: gridSx, ...gridRest } = gridResolved;
|
|
778
|
-
const { sx: colSx, ...colRest } = colResolved;
|
|
777
|
+
const { sx: gridSx, onKeyDown: gridOnKeyDown, ...gridRest } = gridResolved;
|
|
778
|
+
const { sx: colSx, onKeyDown: colOnKeyDown, ...colRest } = colResolved;
|
|
779
779
|
return {
|
|
780
780
|
...gridRest,
|
|
781
781
|
...colRest,
|
|
782
|
+
onKeyDown: (event) => {
|
|
783
|
+
// Column-level handler wins over grid-level, matching every other
|
|
784
|
+
// per-cell override above.
|
|
785
|
+
(colOnKeyDown ?? gridOnKeyDown)?.(event);
|
|
786
|
+
// MRT's `enableKeyboardShortcuts` (on by default; this grid never
|
|
787
|
+
// turns it off, since it also drives useful shortcuts — Enter/Space
|
|
788
|
+
// to toggle row select/expand/pin) hijacks Ctrl/Cmd+C on *any*
|
|
789
|
+
// focused cell and overwrites the clipboard with the column's raw
|
|
790
|
+
// value, with no check for an actual text selection. That silently
|
|
791
|
+
// clobbers a real copy when a custom `Cell` renders the raw value
|
|
792
|
+
// alongside other text and the user selects just part of it (e.g.
|
|
793
|
+
// double-clicking a code embedded next to a name). MRT checks
|
|
794
|
+
// `event.isPropagationStopped()` before doing this (see
|
|
795
|
+
// `cellKeyboardShortcuts` in material-react-table) specifically so
|
|
796
|
+
// a wrapper can opt out — stopping propagation here, only when
|
|
797
|
+
// there's an actual selection, lets the browser's native copy win
|
|
798
|
+
// instead, with zero effect on every other shortcut the option
|
|
799
|
+
// bundles together.
|
|
800
|
+
const isCopy = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c';
|
|
801
|
+
if (isCopy && (window.getSelection()?.toString() ?? '') !== '') {
|
|
802
|
+
event.stopPropagation();
|
|
803
|
+
}
|
|
804
|
+
},
|
|
782
805
|
sx: [
|
|
783
806
|
{
|
|
784
807
|
whiteSpace: 'nowrap',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DateRange } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
|
|
2
2
|
import require$$0__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 DateRangePicker } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
import { __require as requireDateRange } from '../DateRange/index.esm.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as DefinedRange } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
|
|
2
2
|
import require$$0__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';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as InputRangeField } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
|
|
2
2
|
import require$$0__default from 'react';
|
|
3
3
|
import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __exports as Month } from '../../../../../_virtual/index.
|
|
1
|
+
import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
|
|
2
2
|
import require$$0__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';
|