tp-react-elements 3.0.9 → 3.0.11

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/auth/authContext.d.ts

@@ -16,4 +16,12 @@ interface AuthProviderProps {
 }
 export declare const TPElementsProvider: React.FC<AuthProviderProps>;
 export declare const useAuth: () => AuthContextType;
+/**
+ * Same `projectTheme` as `useAuth()`, but never throws when the tree isn't wrapped in
+ * `<TPElementsProvider>` — just returns `undefined`. Components rendered deep inside generic
+ * form/grid utilities (toggle switches, radio groups, etc.) use this instead of `useAuth()` so
+ * that consumers who never opted into `TPElementsProvider` keep working exactly as before,
+ * rather than crashing the moment a themeable field type is used.
+ */
+export declare const useOptionalProjectTheme: () => ProjectThemePropsTp | undefined;
 export {};

package/dist/auth/authContext.esm.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 const AuthContext = createContext(undefined);
 const TPElementsProvider = ({ children, projectTheme }) => {
@@ -22,5 +22,16 @@ const useAuth = () => {
     }
     return context;
 };
+/**
+ * Same `projectTheme` as `useAuth()`, but never throws when the tree isn't wrapped in
+ * `<TPElementsProvider>` — just returns `undefined`. Components rendered deep inside generic
+ * form/grid utilities (toggle switches, radio groups, etc.) use this instead of `useAuth()` so
+ * that consumers who never opted into `TPElementsProvider` keep working exactly as before,
+ * rather than crashing the moment a themeable field type is used.
+ */
+const useOptionalProjectTheme = () => {
+    const context = useContext(AuthContext);
+    return context?.projectTheme;
+};
 
-export { TPElementsProvider, useAuth };
+export { TPElementsProvider, useAuth, useOptionalProjectTheme };

package/dist/components/Form/FormActiveSwitch.d.ts

@@ -1,3 +1,12 @@
 import '../Form/FormsStyles.scss';
+/**
+ * `toggleSwitch` field renderer.
+ *
+ * By default (no `TPToggleSwitch` entry in the consuming app's `projectTheme`) this renders the
+ * original wide pill switch unchanged — every existing consumer of this package sees no visual
+ * difference. Passing `projectTheme.Styles.Component.TPToggleSwitch` to `<TPElementsProvider>`
+ * opts an app into a compact iOS-style switch with a title/description card instead, using
+ * `item.label` as the title and `item.helperText` as the description.
+ */
 declare const FormActiveSwitch: ({ props }: any) => import("react/jsx-runtime").JSX.Element;
 export default FormActiveSwitch;

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

@@ -1,15 +1,78 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
+import { useOptionalProjectTheme } from '../../auth/authContext.esm.js';
 
 // Static — hoisted so they aren't rebuilt on every render.
 const FIELDSET_STYLE = { border: 'none', padding: 0, margin: 0 };
 const LEGEND_STYLE = { fontSize: '12px', paddingRight: 10 };
 const LABEL_STYLE = { textTransform: 'none' };
+const CARD_STYLE = {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 12,
+    background: '#FAFBFD',
+    border: '1px solid #E5EAF0',
+    borderRadius: 9,
+    padding: '13px 14px',
+    width: '100%',
+    boxSizing: 'border-box',
+};
+const TRACK_BASE = {
+    width: 34,
+    height: 19,
+    borderRadius: 10,
+    flex: 'none',
+    position: 'relative',
+    cursor: 'pointer',
+    marginTop: 2,
+    border: 'none',
+    padding: 0,
+};
+const KNOB_BASE = {
+    position: 'absolute',
+    top: 2,
+    width: 15,
+    height: 15,
+    borderRadius: '50%',
+    background: '#fff',
+    transition: 'left .18s ease',
+};
+const BADGE_BASE = {
+    display: 'inline-flex',
+    padding: '2px 8px',
+    borderRadius: 5,
+    fontSize: 9.5,
+    fontWeight: 700,
+    letterSpacing: '0.06em',
+    whiteSpace: 'nowrap',
+};
+/**
+ * `toggleSwitch` field renderer.
+ *
+ * By default (no `TPToggleSwitch` entry in the consuming app's `projectTheme`) this renders the
+ * original wide pill switch unchanged — every existing consumer of this package sees no visual
+ * difference. Passing `projectTheme.Styles.Component.TPToggleSwitch` to `<TPElementsProvider>`
+ * opts an app into a compact iOS-style switch with a title/description card instead, using
+ * `item.label` as the title and `item.helperText` as the description.
+ */
 const FormActiveSwitch = ({ props }) => {
     const { control, item } = props;
     const valueActive = item.value1 ?? 'A';
     const valueInactive = item.value2 ?? 'I';
-    return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => field.onChange(valueActive), "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => field.onChange(valueInactive), "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+    const toggleConfig = useOptionalProjectTheme()?.Styles?.Component?.TPToggleSwitch;
+    if (!toggleConfig) {
+        return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => field.onChange(valueActive), "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => field.onChange(valueInactive), "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+    }
+    const onColor = toggleConfig.onColor ?? '#00A86B';
+    const offColor = toggleConfig.offColor ?? '#D5DCE6';
+    return (jsx(Controller, { name: item.name, control: control, render: ({ field }) => {
+            const on = field.value === valueActive;
+            return (jsxs("div", { style: CARD_STYLE, children: [jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-labelledby": `${item.name}-label`, onClick: () => field.onChange(on ? valueInactive : valueActive), style: { ...TRACK_BASE, background: on ? onColor : offColor }, children: jsx("span", { style: { ...KNOB_BASE, left: on ? 17 : 2 } }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { id: `${item.name}-label`, style: { fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }, children: item.label }), jsx("span", { style: {
+                                            ...BADGE_BASE,
+                                            background: on ? '#EEF7F2' : '#F2F5F9',
+                                            color: on ? '#00764A' : '#8A97A8',
+                                        }, children: on ? 'ON' : 'OFF' })] }), item.helperText && (jsx("div", { style: { fontSize: 11.5, color: '#6C757D', marginTop: 3, whiteSpace: 'normal', lineHeight: 1.5 }, children: item.helperText }))] })] }));
+        } }));
 };
 
 export { FormActiveSwitch as default };

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

@@ -1,23 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { FormControl, RadioGroup, FormControlLabel, Typography, Radio } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { useOptionalProjectTheme } from '../../../auth/authContext.esm.js';
 
 // Static — same for the group and for every radio option — hoisted so they
 // aren't rebuilt on every render/option.
 const RADIO_GROUP_SX = { gap: '8px' };
-const RADIO_SX = {
-    padding: '6px 2px 6px 8px',
-    color: 'black',
-    '&.Mui-checked': {
-        color: '#1976d2', // blue when selected
-    },
-    '& .MuiSvgIcon-root': {
-        fontSize: 16, // controls the radio icon size
-    },
-};
+/** Stock MUI blue — unchanged default for every consumer that doesn't set `TPRadioGroup.checkedColor`. */
+const DEFAULT_CHECKED_COLOR = '#1976d2';
 /**
  * FormRadioGroup Component
  *
@@ -34,13 +28,24 @@ const RADIO_SX = {
  * <FormRadioGroup props={formRenderProps} variant="outlined" />
  */
 const FormRadioGroup = ({ props, variant }) => {
+    const checkedColor = useOptionalProjectTheme()?.Styles?.Component?.TPRadioGroup?.checkedColor ?? DEFAULT_CHECKED_COLOR;
+    const radioSx = useMemo(() => ({
+        padding: '6px 2px 6px 8px',
+        color: 'black',
+        '&.Mui-checked': {
+            color: checkedColor,
+        },
+        '& .MuiSvgIcon-root': {
+            fontSize: 16, // controls the radio icon size
+        },
+    }), [checkedColor]);
     /**
      * Renders a group of radio buttons with labels and validation support
      */
     return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsx(RadioGroup, { value: field.value || '', onChange: (e) => {
                             field.onChange(e.target.value); // update form state
                             props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
-                        }, row: true, sx: RADIO_GROUP_SX, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: RADIO_SX }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
+                        }, row: true, sx: RADIO_GROUP_SX, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: radioSx }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRadioGroup as default };

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

@@ -47,7 +47,8 @@ const FormTextField = ({ props, variant }) => {
      * Generates the field label based on variant type
      * For non-standard variants, appends an asterisk if the field is required
      */
-    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    const isStaticLabel = props.item.labelVariant === 'static';
+    const label = variant !== 'standard' && !isStaticLabel ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
     /**
      * Handles input events with various text restrictions
      *

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

@@ -11,9 +11,30 @@ import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { useOptionalProjectTheme } from '../../../auth/authContext.esm.js';
 
 const ITEM_HEIGHT = 36;
 const ITEM_PADDING_TOP = 2;
+/**
+ * Base shape shared by both states of the themed option glyph — only the border/background
+ * (checked vs unchecked) differ, passed in by the caller via `Checkbox`'s own `icon` and
+ * `checkedIcon` props. Kept as plain style objects (not a component) so the existing
+ * `<Checkbox>` stays the single source of truth for check state/interaction; this only
+ * reskins what it renders.
+ */
+const themedGlyphSx = {
+    width: 15,
+    height: 15,
+    borderRadius: '4px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 10,
+    fontWeight: 800,
+    color: '#fff',
+    border: '1.5px solid',
+    lineHeight: 1,
+};
 const extractValuesToArray = (inputString) => {
     if (!inputString)
         return [];
@@ -23,6 +44,7 @@ function MultiSelectV1({ props, variant, }) {
     const [searchText, setSearchText] = useState('');
     const options = props.item?.options || [];
     const textfieldRef = useRef(null);
+    const multiSelectTheme = useOptionalProjectTheme()?.Styles?.Component?.TPMultiSelect;
     // Ref to capture the width of the Select container
     const containerRef = useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name });
@@ -56,7 +78,7 @@ function MultiSelectV1({ props, variant, }) {
     const selectedOptions = useMemo(() => options.filter((item) => fieldValue?.split(',').some((value) => value === item.value)), [options, fieldValue]);
     const selectedValuesString = selectedOptions.map((item) => item.label).join(' , ');
     const isShowBorderError = !!props.errors?.[props.item.name];
-    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, ref: containerRef, sx: { '& .MuiFormLabel-root': { top: -10 }, '& .MuiInputLabel-shrink': { top: 0 } }, children: [renderLabel(variant, props), variant !== 'standard' && props.item.labelVariant !== 'static' && (jsxs(InputLabel, { error: isShowBorderError, id: `${props.item.name}-ms-labelId`, children: [props.item.label, props.item.required ? ' *' : ''] })), jsxs(Select, { labelId: `${props.item.name}-ms-labelId`, id: `${props.item.name}-ms-select`, multiple: true, displayEmpty: true, error: isShowBorderError, disabled: props.item.disable, value: fieldValue ? extractValuesToArray(fieldValue) : [], onChange: handleChange, onOpen: () => {
                         if (!props.item.doNotEnableMultiselectOrder) {
                             setSavedSortValue(fieldValue);
                         }
@@ -67,7 +89,7 @@ function MultiSelectV1({ props, variant, }) {
                             setSavedSortValue(fieldValue);
                         }
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
-                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
+                    }, input: jsx(OutlinedInput, { label: variant !== 'standard' && props.item.labelVariant !== 'static' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedValuesString, children: jsx("span", { style: { display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: props.item.placeholder && selectedOptions.length === 0 ? (jsx("span", { style: { color: '#0009' }, children: props.item.placeholder })) : (selectedOptions.length > (props.item.multiSelectLabelLength || 3)
                                 ? `${selectedOptions.length} Selected`
                                 : selectedValuesString) }) })), MenuProps: {
                         PaperProps: {
@@ -111,15 +133,29 @@ function MultiSelectV1({ props, variant, }) {
                                     whiteSpace: 'normal',
                                     wordBreak: 'break-all',
                                     alignItems: 'center',
-                                    py: 0.5,
-                                    px: 2,
+                                    py: multiSelectTheme ? 1 : 0.5,
+                                    px: multiSelectTheme ? 1.25 : 2,
                                     minHeight: ITEM_HEIGHT,
-                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1, mr: 1, pointerEvents: 'none' } }), jsx(ListItemText, { className: 'Mui-multi-select-option', primary: option.label, primaryTypographyProps: {
-                                            fontSize: props.item?.optionFontSize || '13px',
+                                    ...(multiSelectTheme && {
+                                        mx: 0.5,
+                                        borderRadius: '6px',
+                                        '&.Mui-selected, &.Mui-selected:hover': {
+                                            backgroundColor: multiSelectTheme.selectedRowBg ?? '#F4F8FC',
+                                        },
+                                    }),
+                                }, children: [jsx(Checkbox, { checked: isChecked, size: "small", sx: multiSelectTheme ? { p: 0, mr: 1.25, pointerEvents: 'none' } : { p: 1, mr: 1, pointerEvents: 'none' }, ...(multiSelectTheme && {
+                                            icon: (jsx(Box, { component: "span", sx: { ...themedGlyphSx, borderColor: multiSelectTheme.uncheckedBorderColor ?? '#C9D3E0', background: '#fff' } })),
+                                            checkedIcon: (jsx(Box, { component: "span", sx: { ...themedGlyphSx, borderColor: multiSelectTheme.checkedColor ?? '#073B6D', background: multiSelectTheme.checkedColor ?? '#073B6D' }, children: "\u2713" })),
+                                        }) }), jsx(ListItemText, { className: 'Mui-multi-select-option', primary: option.label, primaryTypographyProps: {
+                                            fontSize: multiSelectTheme ? 12.5 : (props.item?.optionFontSize || '13px'),
                                             sx: {
                                                 whiteSpace: 'normal',
                                                 wordBreak: 'break-all',
-                                                lineHeight: '1.2'
+                                                lineHeight: multiSelectTheme ? 1.35 : '1.2',
+                                                ...(multiSelectTheme && {
+                                                    fontWeight: 600,
+                                                    color: isChecked ? (multiSelectTheme.checkedColor ?? '#073B6D') : '#42536B',
+                                                }),
                                             }
                                         } })] }, option.value));
                         })) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));

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

@@ -56,7 +56,7 @@ const SingleSelect = ({ props, variant }) => {
                                             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'
+                                }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard' && props.item.labelVariant !== 'static'
                                         ? `${props.item.label}${props.item.required ? ' *' : ''}`
                                         : '', inputProps: {
                                         ...params.inputProps,

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

@@ -119,6 +119,22 @@ export interface GenericPaginatedGridProps<TData extends object> {
     disableResponsive?: boolean;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
+    /**
+     * Initial "Rows per page" value, shown in the footer before the user touches the dropdown.
+     *
+     * The grid never slices rows client-side (`manualPagination: true`, no row model) — whatever
+     * `fetchPage` resolves with for a page **is** that page, shown in full. `pageSize` only feeds
+     * the footer's count text and the Next-page button's math, so it must match how many rows
+     * `fetchPage` actually returns per call, same as `batchSize` always had to. The two exist
+     * separately only because `batchSize` doubles as "rows per fetch" documentation elsewhere;
+     * use `pageSize` when you want the initial dropdown value to be authoritative without
+     * reinterpreting `batchSize`'s meaning at every call site.
+     *
+     * Default: `batchSize` (unchanged behaviour — identical to how the initial page size worked
+     * before this prop existed). If this value isn't already in `pageSizeOptions`, it's folded in
+     * automatically so the dropdown always has a matching selected entry.
+     */
+    pageSize?: number;
     /**
      * Show the Global Search input expanded by default (instead of requiring a
      * click on the search icon to reveal it). The icon remains in the top-right
@@ -306,5 +322,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive, pageSizeOptions, pageSize, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -304,7 +304,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                         }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, 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, { id: `${gridId}_last_page_icon`, 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', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity, uiDensityOptions, responsiveBreakpoints, disableResponsive = false, pageSizeOptions = [1000, 5000, 10000], pageSize, showGlobalSearchByDefault = false, showDensityToggle = false, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, getRowSx, getHeaderSx, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     // ── Responsive tier detection ────────────────────────────────────────────────
     // Three tiers (desktop / tablet / mobile) drive auto density, a progressively
     // lower filter-chip cap, toolbar wrapping, and a stacked pagination footer —
@@ -392,9 +392,13 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     // ── State ──────────────────────────────────────────────────────────────────
     const [filterValues, setFilterValues] = useState(defaultFilters);
     const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
+    const initialPageSize = pageSize ?? batchSize;
+    // The footer's "Rows per page" <Select> only highlights a value that's actually one of its
+    // <MenuItem>s — fold the initial page size in (deduped, ascending) so it's never orphaned.
+    const resolvedPageSizeOptions = useMemo(() => Array.from(new Set([...pageSizeOptions, initialPageSize])).sort((a, b) => a - b), [pageSizeOptions, initialPageSize]);
     const [pagination, setPagination] = useState({
         pageIndex: 0,
-        pageSize: batchSize,
+        pageSize: initialPageSize,
     });
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
@@ -766,7 +770,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, isClientFiltered: isFiltered, filteredRowCount: t.getFilteredRowModel().rows.length, pageRowCount: rows.length })), [totalRecords, isFetching, isLoading, pageSizeOptions, densityTokens, resolvedGridId, isMobileTier, isFiltered, rows]);
+    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: resolvedPageSizeOptions, density: densityTokens, gridId: resolvedGridId, isStacked: isMobileTier, isClientFiltered: isFiltered, filteredRowCount: t.getFilteredRowModel().rows.length, pageRowCount: rows.length })), [totalRecords, isFetching, isLoading, resolvedPageSizeOptions, densityTokens, resolvedGridId, isMobileTier, isFiltered, rows]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,

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

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

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } 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/InputRangeField/index.esm.js

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

package/dist/utils/Constants/FormConstants.d.ts

@@ -9,6 +9,8 @@ import { VariantProps, FormRenderProps } from '../Interface/FormInterface';
  * @returns {JSX.Element | false} The rendered label element or false if not shown.
  */
 export declare const renderLabel: (variant: VariantProps, props: FormRenderProps, showLabel?: boolean) => false | import("react/jsx-runtime").JSX.Element;
+/** True when this field should render its label outside/above the input instead of MUI's floating inline label — either because the caller forced it, or the field opted into `labelVariant: 'static'`. */
+export declare const usesStaticLabel: (props: FormRenderProps) => boolean;
 /**
  * Formats a date string in "M/YYYY" or "MM/YYYY" format to "MM/01/YYYY".
  *

package/dist/utils/Constants/FormConstants.esm.js

@@ -9,7 +9,9 @@ import dayjs from 'dayjs';
  * @param {boolean} [showLabel=false] - Whether to always show the label.
  * @returns {JSX.Element | false} The rendered label element or false if not shown.
  */
-const renderLabel = (variant, props, showLabel = false) => (variant === 'standard' || showLabel) && (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px' }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
+const renderLabel = (variant, props, showLabel = false) => (variant === 'standard' || showLabel || props.item.labelVariant === 'static') && (jsxs("span", { id: `${props.item.name}-label`, className: "formInputlabel", style: { fontSize: '12px', ...(props.item.labelVariant === 'static' ? props.item.labelSx : {}) }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }));
+/** True when this field should render its label outside/above the input instead of MUI's floating inline label — either because the caller forced it, or the field opted into `labelVariant: 'static'`. */
+const usesStaticLabel = (props) => props.item.labelVariant === 'static';
 /**
  * Formats a date string in "M/YYYY" or "MM/YYYY" format to "MM/01/YYYY".
  *
@@ -75,4 +77,4 @@ const extractDate = (inputDateString) => {
     return formattedDate;
 };
 
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel };
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel, usesStaticLabel };

package/dist/utils/Interface/FormInterface.d.ts

@@ -87,6 +87,16 @@ export interface FormSectionPropsItem {
     id?: string;
     className?: string;
     dataAttr?: any;
+    /**
+     * Overrides how this field's label is positioned, regardless of the form-level `variant`.
+     * `'floating'` (default when omitted) keeps every existing consumer's current look —
+     * the label sits inside the input border and floats up on focus/fill. `'static'` renders
+     * the label as a fixed caption above the input instead (no floating, no MUI notch).
+     * Opt-in per field; omitting it changes nothing for existing usage.
+     */
+    labelVariant?: 'floating' | 'static';
+    /** Style overrides for the label span when `labelVariant: 'static'` is used. */
+    labelSx?: SxProps<Theme>;
 }
 export type VariantProps = 'standard' | 'outlined' | '';
 export interface FormRenderProps {

package/dist/utils/Interface/MainInterface.d.ts

@@ -5,9 +5,40 @@ export interface ProjectComponentTPButton {
     isEnableConfirmDialog: boolean;
     sx?: SxProps<Theme>;
 }
+/**
+ * Optional brand colors for the `toggleSwitch` field. When omitted entirely (the default for
+ * every existing consumer), `FormActiveSwitch` renders its original pill-switch look unchanged.
+ * Providing this object opts an app into the compact iOS-style switch + title/description card.
+ */
+export interface ProjectComponentTPToggleSwitch {
+    onColor?: string;
+    offColor?: string;
+}
+/**
+ * Optional checked-state color for `radio-group` fields. Omitted = the existing stock MUI blue
+ * (`#1976d2`) is unchanged for every current consumer.
+ */
+export interface ProjectComponentTPRadioGroup {
+    checkedColor?: string;
+}
+/**
+ * Optional row/checkbox styling for `multiselect` (`MultiSelectV1`)'s dropdown options. Omitted
+ * entirely = the existing stock MUI `Checkbox` + default `MenuItem` selected-row tint are
+ * unchanged for every current consumer. Providing this swaps the checkbox for a compact
+ * rounded-square box and restyles the option row (padding/radius/selected background/text
+ * weight) to match a flatter, more custom design language.
+ */
+export interface ProjectComponentTPMultiSelect {
+    checkedColor?: string;
+    uncheckedBorderColor?: string;
+    selectedRowBg?: string;
+}
 export interface ProjectComponentStyles {
     TPButton: ProjectComponentTPButton[];
     TPButtonCommonSx: SxProps<Theme>;
+    TPToggleSwitch?: ProjectComponentTPToggleSwitch;
+    TPRadioGroup?: ProjectComponentTPRadioGroup;
+    TPMultiSelect?: ProjectComponentTPMultiSelect;
 }
 export interface ProjectThemeStyles {
     Component: ProjectComponentStyles;

package/dist/utils/index.esm.js

@@ -1,4 +1,4 @@
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor } from './Constants/FunctionConstants.esm.js';
-export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel } from './Constants/FormConstants.esm.js';
+export { extractDate, formatDateMonthAndYear, formatDayjsToCustomTime, parseCustomTime, renderLabel, usesStaticLabel } from './Constants/FormConstants.esm.js';
 
 // Utility Functions - Helper functions for form operations and data manipulation

package/package.json

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