tp-react-elements 3.0.6 → 3.0.9

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange 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/FormComponents/Select/MultiSelectAutocomplete.esm.js

@@ -72,7 +72,10 @@ const MultiSelectAutocomplete = ({ props, variant, maxChips = 2, }) => {
     // ── Stable callbacks ───────────────────────────────────────────────────────
     const getOptionLabelCb = useCallback((option) => String(option.label), []);
     const isOptionEqualCb = useCallback((option, value) => String(option.value) === String(value.value), []);
-    const renderOptionCb = useCallback((renderProps, option, state) => (jsxs("li", { ...renderProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] })), []);
+    const renderOptionCb = useCallback((renderProps, option, state) => {
+        const { key, ...otherProps } = renderProps;
+        return (jsxs("li", { ...otherProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] }, key));
+    }, []);
     const chipSx = useMemo(() => ({
         mr: 0.5,
         height: 20,
@@ -109,7 +112,7 @@ const MultiSelectAutocomplete = ({ props, variant, maxChips = 2, }) => {
         clearErrors?.(name);
     }, [setValue, clearErrors, name, onChangeFn]);
     // ── Render ─────────────────────────────────────────────────────────────────
-    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, fullWidth: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
                         fieldOnBlur();
                         handleBlur(e);
                     }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {

package/dist/components/FormComponents/Select/SingleSelect.esm.js

@@ -14,7 +14,7 @@ const SingleSelect = ({ props, variant }) => {
     const value = currentValue
         ? props.item.options?.find((item) => item.value === currentValue)
         : null;
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (value?.label || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(Autocomplete, { ...field, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (value?.label || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(Autocomplete, { ...field, fullWidth: true, id: `${props.item.name}-autocomplete`, value: value, onChange: (_, newValue) => {
                                     props.setValue(props?.item?.name, newValue?.value);
                                     props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value, newValue);
                                     props?.clearErrors && props?.clearErrors(props?.item?.name);
@@ -49,10 +49,14 @@ const SingleSelect = ({ props, variant }) => {
                                             fontSize: '11px',
                                         },
                                     },
-                                }, renderOption: (props, option) => (createElement("li", { ...props, value: option.value, style: {
-                                        opacity: option.disable ? 0.5 : 1,
-                                        pointerEvents: option.disable ? 'none' : 'auto',
-                                    }, key: option.value }, option.label)), renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
+                                }, renderOption: (props, option) => {
+                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                    const { key, ...optionProps } = props;
+                                    return (createElement("li", { ...optionProps, value: option.value, style: {
+                                            opacity: option.disable ? 0.5 : 1,
+                                            pointerEvents: option.disable ? 'none' : 'auto',
+                                        }, key: option.value }, option.label));
+                                }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
                                         ? `${props.item.label}${props.item.required ? ' *' : ''}`
                                         : '', inputProps: {
                                         ...params.inputProps,

package/dist/components/FormComponents/Select/SingleSelectSearchApi.esm.js

@@ -197,7 +197,7 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
         return fetchError ?? 'No results found';
     }, [searchQuery, minSearchLength, fetchError]);
     // ── Render ────────────────────────────────────────────────────────────────
-    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, value: resolvedValue, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, 
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, fullWidth: true, value: resolvedValue, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, 
                     // Options come pre-filtered from the server — disable client-side filtering
                     filterOptions: (x) => x, loading: isLoading, disabled: disable, size: "small", noOptionsText: noOptionsText, sx: {
                         '& .MuiAutocomplete-input': {

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

@@ -269,7 +269,7 @@ const useResponsiveTier = (tabletBreakpoint, mobileBreakpoint, enabled) => {
     }, [tabletBreakpoint, mobileBreakpoint, enabled]);
     return enabled ? tier : 'desktop';
 };
-const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, isStacked, }) => {
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, isStacked, isClientFiltered, filteredRowCount, pageRowCount, }) => {
     const fs = density.footerFontSize;
     const selectH = density.footerMinHeight - 8;
     const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
@@ -292,7 +292,9 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                     ? 'Loading…'
                     : totalRecords === 0
                         ? 'No records'
-                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: isStacked ? 'center' : 'flex-start', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
+                        : isClientFiltered
+                            ? `${filteredRowCount.toLocaleString()} of ${pageRowCount.toLocaleString()} rows match (${totalRecords.toLocaleString()} total)`
+                            : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: isStacked ? 'center' : 'flex-start', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
                             mx: 0.5,
                             minWidth: density.footerMinHeight - 12,
                             height: density.footerMinHeight - 12,
@@ -458,12 +460,17 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         const allowGrow = layoutMode === 'grid' || layoutMode === 'semantic';
         return columns.map((col) => {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { filterType, options, getSearchText, ...mrtCol } = col;
+            const { filterType, options, getSearchText, exportExcel, ...mrtCol } = col;
             if (allowGrow && mrtCol.grow === undefined) {
                 mrtCol.grow = true;
             }
             // Auto-inject filterFn only when the user hasn't already supplied one.
-            if (!mrtCol.filterFn && filterType) {
+            // Note: `filterType` omitted defaults to the same plain text-input chip
+            // as `filterType: 'text'` (see `ColumnFilterType` doc comment), so the
+            // text-matching branch below must handle both, not just the explicit
+            // `'text'` value — only `enableColumnFilter: false` / `'number'` should
+            // fall through without an injected filterFn.
+            if (!mrtCol.filterFn) {
                 if (filterType === 'date') {
                     // ISO date strings: "2026-05-05T00:00:00" → startsWith "2026-05-05"
                     mrtCol.filterFn = (row, columnId, filterValue) => filterValue
@@ -483,7 +490,16 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                         ? true
                         : filterValue.includes(row.getValue(columnId) ?? '');
                 }
-                // 'text' and 'number' use MRT's built-in client-side filtering
+                else if (!filterType || filterType === 'text') {
+                    // MRT's own default filterFn ('fuzzy', via match-sorter) is a
+                    // non-contiguous subsequence match — e.g. "PH-1" would match like
+                    // "%P%H%-%1%" instead of a plain substring. Use MRT's built-in
+                    // 'contains' filterFn instead, matching Global Search's substring
+                    // behavior (case-insensitive `.includes()`). Applies whether
+                    // `filterType` is explicitly `'text'` or simply omitted.
+                    mrtCol.filterFn = 'contains';
+                }
+                // 'number' uses MRT's built-in client-side filtering
             }
             return mrtCol;
         });
@@ -519,8 +535,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     }, [searchTextGetters]);
     // Stable references for the two table options below — recreating either
     // per render would defeat the memoization on every other MRT callback
-    // (see docs/arch-performance.mdx: all function/object props passed into
-    // useMaterialReactTable must be memoized).
+    // (all function/object props passed into useMaterialReactTable must be memoized).
     const tpFilterFns = useMemo(() => ({ tpGlobalSearch: tpGlobalSearchFn }), [tpGlobalSearchFn]);
     const getColumnCanGlobalFilter = useCallback(() => true, []);
     // ── Derive column list for filter chip picker ──────────────────────────────
@@ -587,7 +602,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         const exportRows = scope === 'filtered' && tableRef.current
             ? tableRef.current.getFilteredRowModel().rows.map((r) => r.original)
             : rows;
-        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
+        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey && c.exportExcel !== false);
         const headerArgb = hexToArgb(exportHeaderBgColor ?? headerBgColor) ?? 'FF1565C0';
         const textArgb = hexToArgb(exportHeaderTextColor) ?? 'FFFFFFFF';
         const headerRow = dataCols.map((c) => c.header ?? '');
@@ -751,7 +766,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         availableColumns, effectiveMaxVisibleFilters, densityTokens, handleToggleFilter,
     ]);
     const renderToolbarInternalActions = useCallback(({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), showDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` })), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })), [resolvedGridId, showDensityToggle]);
-    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier]);
+    const renderBottomToolbar = useCallback(({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier, isClientFiltered: isFiltered, filteredRowCount: t.getFilteredRowModel().rows.length, pageRowCount: rows.length })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier, isFiltered, rows]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,

package/dist/components/PaginatedGrid/types.d.ts

@@ -100,6 +100,25 @@ export type TPColumnDef<TData extends object = object, TValue = any> = MRT_Colum
      * the raw accessor value is matched by default in that case.
      */
     getSearchText?: (row: TData) => string | number | null | undefined;
+    /**
+     * Whether this column is included in the Excel (`.xlsx`) export.
+     *
+     * Set to `false` on columns that only render UI (e.g. edit/delete action
+     * icons) and have no meaningful exported value:
+     *
+     * ```ts
+     * {
+     *   id: 'actions',
+     *   header: 'Actions',
+     *   Cell: ({ row }) => <IconButton onClick={() => onEdit(row.original)}><EditIcon /></IconButton>,
+     *   exportExcel: false,
+     * }
+     * ```
+     *
+     * Default: `true` — every column with an `accessorKey` is exported unless
+     * explicitly opted out.
+     */
+    exportExcel?: boolean;
 };
 export interface InvoiceDetail {
     Data_from: string;

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm5.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/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/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.esm4.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.esm6.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.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/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

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

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.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/package.json

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