tp-react-elements 3.0.24 → 3.0.25

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DateRange = {};
 
-export { DateRangePicker as __exports };
+export { DateRange as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRangePicker = {};
 
-export { Calendar as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var Calendar = {};
 
-export { DateRange as __exports };
+export { Calendar as __exports };

package/dist/components/Form/FormRender.esm.js

@@ -1,5 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__default, { lazy, Suspense } from 'react';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -14,7 +15,6 @@ import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWr
 import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
 import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
 import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
 import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
 import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';

package/dist/components/FormComponents/index.esm.js

@@ -5,10 +5,20 @@ export { default as MultiSelectSearchApi } from './Select/MultiSelectSearchApi.e
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
 export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
 export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
-export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
 export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
 export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
@@ -18,9 +28,7 @@ export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMul
 export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
 export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
-export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
-export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js

@@ -591,7 +591,10 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             return values.length > 0 ? [...rest, { id, value: values }] : rest;
         });
     }, [onColumnFilterChange]);
-    const removeFilter = useCallback((id) => {
+    // The × on a filter chip clears that filter's value only — it does NOT
+    // hide/remove the chip from the bar (that's what the Manage Filters panel
+    // is for). The chip stays visible, just reverts to its inactive/empty state.
+    const clearFilter = useCallback((id) => {
         const def = serverFilterDefs.find((d) => d.id === id);
         if (def?.type === 'dateRange') {
             onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
@@ -617,21 +620,20 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 applyColFilter(id, '');
             }
         }
-        onToggleFilter(id);
-    }, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, onToggleFilter, applyColFilter, applyColMultiFilter]);
+    }, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, applyColFilter, applyColMultiFilter]);
     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) => {
                 const def = serverFilterDefs.find((d) => d.id === id);
                 if (def?.type === 'dateRange') {
-                    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: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (def?.type === 'text') {
-                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (def?.type === 'dropdown') {
-                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (def?.type === 'searchableDropdown') {
-                    return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (def?.type === 'multiSelect') {
                     const selected = (filterValues[def.filterKey] ?? '')
@@ -640,35 +642,35 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                     return (jsx(MultiSelectFilterChip, { label: def.label, selectedValues: selected, options: def.options, onApply: (vals) => onFilterValuesChange({
                             ...filterValues,
                             [def.filterKey]: vals.join(','),
-                        }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                        }), onRemove: () => clearFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'monthPicker') {
-                    return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined, single: def.single }, id));
+                    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));
                 }
                 if (def?.type === 'singleSelectSearch') {
-                    return (jsx(SingleSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(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));
+                    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));
                 }
                 if (def?.type === 'multiSelectSearch') {
-                    return (jsx(MultiSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(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));
+                    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));
                 }
                 if (def?.type === 'date') {
-                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 // Column filter chip — render the variant that matches the column's filterType
                 const col = availableColumns.find((c) => c.id === id);
                 if (!col)
                     return null;
                 if (col.filterType === 'date') {
-                    return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (col.filterType === 'select' || col.filterType === 'searchable-select') {
-                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 if (col.filterType === 'multi-select') {
-                    return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                    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));
                 }
                 // Default: free-text input
-                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                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));
             }), 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 }))] }));
 };
 var DynamicFilterBar$1 = memo(DynamicFilterBar);

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "3.0.24",
+  "version": "3.0.25",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",