tp-react-elements 1.3.15 → 1.3.18

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { lazy, Suspense } from 'react';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.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';
@@ -10,14 +18,6 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
-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';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

@@ -1,25 +1,39 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 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 DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.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';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
+import 'react/jsx-runtime';
+import '@mui/material';
+import 'react';
+import 'react-hook-form';
+import 'dayjs';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import '@mui/icons-material/Visibility';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/NavigateBefore';
+import '@mui/icons-material/NavigateNext';
+import '@mui/icons-material/Delete';
+import '@mui/icons-material/UploadFile';
+import '@mui/icons-material/PictureAsPdf';
+import '@mui/icons-material/TableChart';
+import '@mui/icons-material/Description';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.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.d.ts

@@ -15,6 +15,15 @@ import type { MRT_ColumnFiltersState } from 'material-react-table';
  *                          `filterValues[filterKey]` (e.g. `"Pending,Shipped"`).
  *                          Your `fetchPage` function should split on `","` to build the
  *                          correct server query.
+ *
+ * Every variant accepts an optional **`defaultVisible`** flag.
+ * Set it to `true` on any filter that should appear in the chip bar on first
+ * render — without needing `defaultVisibleFilterIds` on the grid:
+ *
+ * ```ts
+ * { type: 'dateRange', id: 'dateRange', label: 'Date Range',
+ *   fromKey: 'From', toKey: 'To', defaultVisible: true }
+ * ```
  */
 export type ServerFilterDef = {
     type: 'dateRange';
@@ -22,12 +31,16 @@ export type ServerFilterDef = {
     label: string;
     fromKey: string;
     toKey: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 } | {
     type: 'text';
     id: string;
     label: string;
     filterKey: string;
     placeholder?: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 } | {
     type: 'dropdown';
     id: string;
@@ -37,6 +50,8 @@ export type ServerFilterDef = {
         label: string;
         value: string;
     }[];
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 } | {
     /**
      * Like `dropdown` but adds a search input at the top of the popover so users
@@ -51,6 +66,8 @@ export type ServerFilterDef = {
         value: string;
     }[];
     placeholder?: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 } | {
     /**
      * Single-date picker chip — applied client-side against the MRT column
@@ -60,6 +77,8 @@ export type ServerFilterDef = {
     id: string;
     label: string;
     columnKey: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 } | {
     /**
      * Multi-select checkbox chip — users can pick **multiple** values at once.
@@ -75,6 +94,8 @@ export type ServerFilterDef = {
         label: string;
         value: string;
     }[];
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 };
 interface AvailableColumn {
     id: string;

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

@@ -47,7 +47,11 @@ export interface GenericPaginatedGridProps<TData extends object> {
     serverFilterDefs: ServerFilterDef[];
     /** Initial key → value map for every server filter. */
     defaultFilters: Record<string, string>;
-    /** Which chip IDs are visible on first render. Defaults to first entry. */
+    /**
+     * Explicit list of chip IDs visible on first render.
+     * When omitted the grid derives visible chips from `defaultVisible: true`
+     * on each `ServerFilterDef` entry, falling back to the first chip.
+     */
     defaultVisibleFilterIds?: string[];
     /** Number of rows fetched per API call. Default: 10 000. */
     batchSize?: number;
@@ -159,6 +163,27 @@ export interface GenericPaginatedGridProps<TData extends object> {
         column: any;
         table: any;
     }) => TableCellProps);
+    /**
+     * Optional render function for expanded row detail panels.
+     * When provided, enables row expansion and renders custom content for each expanded row.
+     *
+     * ```tsx
+     * renderDetailPanel={({ row }) => (
+     *   <Box sx={{ p: 2 }}>
+     *     <CustomSubGrid rows={row.original.subRows} />
+     *   </Box>
+     * )}
+     * ```
+     */
+    renderDetailPanel?: (params: {
+        row: any;
+        table: any;
+    }) => React.ReactNode;
+    /**
+     * Enable row expansion functionality. Auto-enabled if `renderDetailPanel` is provided.
+     * Default: false.
+     */
+    enableExpanding?: boolean;
 }
-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;
+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, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -221,7 +221,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, 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 } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-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, }) {
+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, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
     const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
     const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
@@ -237,8 +237,36 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         resolvedBodyFontSize,
         headerBgColor,
     ]);
+    // Priority:
+    //  1. explicit defaultVisibleFilterIds prop (override)
+    //  2. server filters + column filters that have defaultVisible: true
+    //  3. first server filter only (original fallback)
     const defaultVisible = defaultVisibleFilterIds
-        ?? (serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : []);
+        ?? (() => {
+            // Server-side chips with defaultVisible: true
+            const markedServer = serverFilterDefs
+                .filter((d) => d.defaultVisible)
+                .map((d) => d.id);
+            // Column filter chips with defaultVisible: true.
+            // Mirror the same exclusion rules used by availableColumns:
+            //   • must have an accessorKey
+            //   • must not have enableColumnFilter: false
+            //   • must not be managed by a server-side 'date' filter def
+            const serverManagedColKeys = new Set(serverFilterDefs
+                .filter((d) => d.type === 'date')
+                .map((d) => d.columnKey));
+            const markedCols = columns
+                .filter((c) => 'accessorKey' in c &&
+                c.accessorKey &&
+                c.defaultVisible &&
+                c.enableColumnFilter !== false &&
+                !serverManagedColKeys.has(c.accessorKey))
+                .map((c) => c.accessorKey);
+            const marked = [...markedServer, ...markedCols];
+            return marked.length > 0
+                ? marked
+                : serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : [];
+        })();
     // ── State ──────────────────────────────────────────────────────────────────
     const [filterValues, setFilterValues] = useState(defaultFilters);
     const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
@@ -436,6 +464,8 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableColumnActions: false,
         enableColumnPinning: true,
         columnResizeMode: 'onChange',
+        enableExpanding,
+        renderDetailPanel,
         enableFilters: false,
         enableGlobalFilter: true,
         enableDensityToggle: true,

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

@@ -45,10 +45,27 @@ export declare const orderColumns: TPColumnDef<OrderRow>[];
 /**
  * Server filter definitions for the Orders demo grid.
  *
- * `multiSelect` chips for Status and Category send comma-separated values
- * in `filterValues` (e.g. `status: "Pending,Shipped"`).
- * `fetchOrderPage` splits on `","` to apply the server-side filter.
+ * `multiSelect` chips send comma-separated values in `filterValues`
+ * (e.g. `status: "Pending,Shipped"`). `fetchOrderPage` splits on `","`.
+ *
+ * `defaultVisible: true` — chip appears in the filter bar on first render
+ * without needing `defaultVisibleFilterIds` on the grid component.
  */
 export declare const orderFilterDefs: ServerFilterDef[];
 export declare const orderDefaultFilters: Record<string, string>;
 export declare function fetchOrderPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<OrderRow>>;
+export interface OrderLineItem {
+    itemId: number;
+    productCode: string;
+    productName: string;
+    quantity: number;
+    unitPrice: number;
+    total: number;
+}
+export interface ExpandableOrderRow extends OrderRow {
+    lineItems: OrderLineItem[];
+}
+export declare const expandableOrderColumns: TPColumnDef<ExpandableOrderRow>[];
+export declare const expandableOrderFilterDefs: ServerFilterDef[];
+export declare const expandableOrderDefaultFilters: Record<string, string>;
+export declare function fetchExpandableOrderPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<ExpandableOrderRow>>;

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

@@ -55,6 +55,26 @@ export type TPColumnDef<TData extends object = object, TValue = any> = MRT_Colum
         value: string | number;
         disable?: boolean;
     }[];
+    /**
+     * Show this column's filter chip in the filter bar on first render.
+     *
+     * - Requires `filterType` to be set (or the column must not have
+     *   `enableColumnFilter: false`).
+     * - Works exactly like `defaultVisible` on `ServerFilterDef` — the chip
+     *   appears without needing `defaultVisibleFilterIds` on the grid.
+     * - Default: `false` (chip hidden until user adds from Manage Filters).
+     *
+     * ```ts
+     * {
+     *   accessorKey: 'status',
+     *   header: 'Status',
+     *   filterType: 'multi-select',
+     *   options: [...],
+     *   defaultVisible: true,   // ← chip shown on load
+     * }
+     * ```
+     */
+    defaultVisible?: 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.esm7.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
 import React__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.esm14.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
 import React__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.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
 import React__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.esm4.js';
 import React__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.esm6.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import React__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.esm12.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
 import React__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.esm13.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
 import React__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": "1.3.15",
+  "version": "1.3.18",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",