tp-react-elements 2.0.7 → 3.0.0

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

@@ -15,27 +15,122 @@ const extractValuesToArray = (inputString) => {
         return [];
     return inputString.split(',').map((value) => value.trim()).filter(Boolean);
 };
-const MultiSelectTable = ({ props, variant, }) => {
-    const MenuProps = {
-        PaperProps: {
-            style: {
-                maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
-                width: '100%',
-                minWidth: '320px',
-                maxWidth: '500px',
-            },
+// ─── Module-level static option objects ────────────────────────────────────────
+// None of these depend on props/state, so they are hoisted out of the component
+// to keep stable references across renders (perf only — values are unchanged).
+const SELECT_MENU_PROPS = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 8 + ITEM_PADDING_TOP,
+            width: '100%',
+            minWidth: '320px',
+            maxWidth: '500px',
+        },
+    },
+    anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left',
+    },
+    transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left',
+    },
+    autoFocus: false,
+    disableAutoFocusItem: true,
+};
+const MUI_SEARCH_TEXT_FIELD_PROPS = {
+    placeholder: 'Search...',
+    size: 'small',
+    sx: {
+        width: 'calc(100% - 16px)',
+        margin: '0 8px',
+        '& .MuiInputBase-root': {
+            fontSize: '11px',
+            height: '28px',
+            width: '100%',
+        },
+        '& .MuiInputBase-input': {
+            padding: '4px 8px',
         },
-        anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
+    },
+};
+const MUI_TOP_TOOLBAR_PROPS = {
+    sx: {
+        padding: '8px 12px',
+        minHeight: '44px',
+        width: '100%',
+        boxSizing: 'border-box',
+        '& .Mui-Toolbar': {
+            width: '100%',
+        },
+        '& .MuiBox-root': {
+            width: '100%',
+            maxWidth: '100%',
         },
-        transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
+        '& > div': {
+            width: '100%',
         },
-        autoFocus: false,
-        disableAutoFocusItem: true,
-    };
+    },
+};
+const MRT_THEME = {
+    baseBackgroundColor: '#fff',
+};
+const DEFAULT_COLUMN = {
+    size: 120,
+    minSize: 80,
+    maxSize: 200,
+};
+const MUI_PAGINATION_PROPS = {
+    rowsPerPageOptions: [],
+    showFirstButton: false,
+    showLastButton: false,
+    size: 'small',
+    sx: {
+        '& .MuiTablePagination-root': {
+            fontSize: '10px',
+            minHeight: '28px',
+        },
+        '& .MuiTablePagination-select': {
+            display: 'none',
+        },
+        '& .MuiTablePagination-selectLabel': {
+            display: 'none',
+        },
+        '& .MuiTablePagination-displayedRows': {
+            fontSize: '10px',
+        },
+        '& .MuiTablePagination-toolbar': {
+            minHeight: '28px',
+            padding: '0 4px',
+        },
+    },
+};
+const MUI_TABLE_CONTAINER_PROPS = {
+    sx: {
+        maxHeight: 400,
+        width: '100%',
+        overflowX: 'hidden',
+    },
+};
+const MUI_TABLE_BODY_CELL_PROPS = {
+    sx: {
+        fontSize: '10px',
+        padding: '4px 6px',
+        borderBottom: '1px solid #e0e0e0',
+        whiteSpace: 'normal',
+        wordWrap: 'break-word',
+        overflow: 'visible',
+    },
+};
+const INITIAL_STATE = {
+    density: 'compact',
+    pagination: {
+        pageSize: 7,
+        pageIndex: 0,
+    },
+    showGlobalFilter: true,
+};
+const MultiSelectTable = ({ props, variant, }) => {
     const [globalFilter, setGlobalFilter] = useState('');
     const tableRef = useRef(null);
     const fieldValue = useWatch({ control: props.control, name: props.item.name }) ?? [];
@@ -179,6 +274,57 @@ const MultiSelectTable = ({ props, variant, }) => {
         }));
         return [selectColumn, ...dataColumns];
     }, [columns, selectedValues, valueField, handleRowSelect, handleSelectAll, getIsAllSelected, getIsIndeterminate]);
+    // Depends on the `headerColor` prop, so it can't be hoisted to module scope
+    // like the other static MRT option objects above.
+    const muiTableHeadCellProps = useMemo(() => ({
+        sx: {
+            backgroundColor: headerColor,
+            color: '#fff',
+            fontWeight: 'bold',
+            fontSize: '11px',
+            padding: '4px 6px',
+            borderBottom: '1px solid #e0e0e0',
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            '& .Mui-TableHeadCell-Content': {
+                color: '#fff',
+                fontSize: '11px',
+            },
+            '& .MuiSvgIcon-root': {
+                color: '#fff',
+                fontSize: '16px',
+            },
+        },
+    }), [headerColor]);
+    const muiTableBodyRowProps = useCallback(({ row }) => {
+        const rowId = String(row.original[valueField]);
+        const isSelected = selectedValues.includes(rowId);
+        return {
+            onClick: () => handleRowSelect(rowId), // 👈 row click selection
+            sx: {
+                borderBottom: '1px solid #e0e0e0',
+                height: 'auto',
+                minHeight: '32px',
+                cursor: 'pointer',
+                backgroundColor: isSelected ? '#b2dfdb' : 'inherit', // optional highlight
+                '&:hover': {
+                    backgroundColor: '#e0f2f1',
+                },
+            },
+        };
+    }, [valueField, selectedValues, handleRowSelect]);
+    const renderBottomToolbar = useCallback(({ table }) => {
+        const totalRows = table.getFilteredRowModel().rows.length;
+        const selectedCount = selectedValues.length;
+        return (jsxs(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '6px 10px',
+                borderTop: '1px solid #e0e0e0',
+                fontSize: '11px',
+            }, children: [jsxs(Box, { children: ["Total: ", totalRows] }), jsxs(Box, { children: ["Selected: ", selectedCount] }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(IconButton, { size: "small", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: jsx(ChevronLeft, { fontSize: "small" }) }), jsxs("span", { children: ["Page ", table.getState().pagination.pageIndex + 1] }), jsx(IconButton, { size: "small", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: jsx(ChevronRight, { fontSize: "small" }) })] })] }));
+    }, [selectedValues]);
     // MRT table instance
     const table = useMaterialReactTable({
         columns: mrtColumns,
@@ -198,154 +344,24 @@ const MultiSelectTable = ({ props, variant, }) => {
         enableFullScreenToggle: false,
         enableHiding: false,
         positionGlobalFilter: 'left',
-        muiSearchTextFieldProps: {
-            placeholder: 'Search...',
-            size: 'small',
-            sx: {
-                width: 'calc(100% - 16px)',
-                margin: '0 8px',
-                '& .MuiInputBase-root': {
-                    fontSize: '11px',
-                    height: '28px',
-                    width: '100%',
-                },
-                '& .MuiInputBase-input': {
-                    padding: '4px 8px',
-                },
-            },
-        },
+        muiSearchTextFieldProps: MUI_SEARCH_TEXT_FIELD_PROPS,
         globalFilterFn: 'contains',
-        muiTopToolbarProps: {
-            sx: {
-                padding: '8px 12px',
-                minHeight: '44px',
-                width: '100%',
-                boxSizing: 'border-box',
-                '& .Mui-Toolbar': {
-                    width: '100%',
-                },
-                '& .MuiBox-root': {
-                    width: '100%',
-                    maxWidth: '100%',
-                },
-                '& > div': {
-                    width: '100%',
-                },
-            },
-        },
-        mrtTheme: {
-            baseBackgroundColor: '#fff',
-        },
-        defaultColumn: {
-            size: 120,
-            minSize: 80,
-            maxSize: 200,
-        },
+        muiTopToolbarProps: MUI_TOP_TOOLBAR_PROPS,
+        mrtTheme: MRT_THEME,
+        defaultColumn: DEFAULT_COLUMN,
         paginationDisplayMode: 'pages',
-        muiPaginationProps: {
-            rowsPerPageOptions: [],
-            showFirstButton: false,
-            showLastButton: false,
-            size: 'small',
-            sx: {
-                '& .MuiTablePagination-root': {
-                    fontSize: '10px',
-                    minHeight: '28px',
-                },
-                '& .MuiTablePagination-select': {
-                    display: 'none',
-                },
-                '& .MuiTablePagination-selectLabel': {
-                    display: 'none',
-                },
-                '& .MuiTablePagination-displayedRows': {
-                    fontSize: '10px',
-                },
-                '& .MuiTablePagination-toolbar': {
-                    minHeight: '28px',
-                    padding: '0 4px',
-                },
-            },
-        },
-        muiTableContainerProps: {
-            sx: {
-                maxHeight: 400,
-                width: '100%',
-                overflowX: 'hidden',
-            },
-        },
+        muiPaginationProps: MUI_PAGINATION_PROPS,
+        muiTableContainerProps: MUI_TABLE_CONTAINER_PROPS,
         layoutMode: 'semantic',
-        muiTableHeadCellProps: {
-            sx: {
-                backgroundColor: headerColor,
-                color: '#fff',
-                fontWeight: 'bold',
-                fontSize: '11px',
-                padding: '4px 6px',
-                borderBottom: '1px solid #e0e0e0',
-                whiteSpace: 'normal',
-                wordWrap: 'break-word',
-                '& .Mui-TableHeadCell-Content': {
-                    color: '#fff',
-                    fontSize: '11px',
-                },
-                '& .MuiSvgIcon-root': {
-                    color: '#fff',
-                    fontSize: '16px',
-                },
-            },
-        },
-        muiTableBodyCellProps: {
-            sx: {
-                fontSize: '10px',
-                padding: '4px 6px',
-                borderBottom: '1px solid #e0e0e0',
-                whiteSpace: 'normal',
-                wordWrap: 'break-word',
-                overflow: 'visible',
-            },
-        },
-        muiTableBodyRowProps: ({ row }) => {
-            const rowId = String(row.original[valueField]);
-            const isSelected = selectedValues.includes(rowId);
-            return {
-                onClick: () => handleRowSelect(rowId), // 👈 row click selection
-                sx: {
-                    borderBottom: '1px solid #e0e0e0',
-                    height: 'auto',
-                    minHeight: '32px',
-                    cursor: 'pointer',
-                    backgroundColor: isSelected ? '#b2dfdb' : 'inherit', // optional highlight
-                    '&:hover': {
-                        backgroundColor: '#e0f2f1',
-                    },
-                },
-            };
-        },
-        initialState: {
-            density: 'compact',
-            pagination: {
-                pageSize: 7,
-                pageIndex: 0,
-            },
-            showGlobalFilter: true,
-        },
+        muiTableHeadCellProps,
+        muiTableBodyCellProps: MUI_TABLE_BODY_CELL_PROPS,
+        muiTableBodyRowProps,
+        initialState: INITIAL_STATE,
         state: {
             globalFilter,
         },
         onGlobalFilterChange: setGlobalFilter,
-        renderBottomToolbar: ({ table }) => {
-            const totalRows = table.getFilteredRowModel().rows.length;
-            const selectedCount = selectedValues.length;
-            return (jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    padding: '6px 10px',
-                    borderTop: '1px solid #e0e0e0',
-                    fontSize: '11px',
-                }, children: [jsxs(Box, { children: ["Total: ", totalRows] }), jsxs(Box, { children: ["Selected: ", selectedCount] }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [jsx(IconButton, { size: "small", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: jsx(ChevronLeft, { fontSize: "small" }) }), jsxs("span", { children: ["Page ", table.getState().pagination.pageIndex + 1] }), jsx(IconButton, { size: "small", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: jsx(ChevronRight, { fontSize: "small" }) })] })] }));
-        },
+        renderBottomToolbar,
     });
     return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
                 '& .MuiFormLabel-root': {
@@ -369,7 +385,7 @@ const MultiSelectTable = ({ props, variant, }) => {
                         props?.item?.onCloseMenu && props?.item?.onCloseMenu();
                     }, input: jsx(OutlinedInput, { label: variant !== 'standard' ? props.item.label : '' }), renderValue: () => (jsx(Tooltip, { title: selectedDisplayText, children: jsx("span", { children: selectedRows.length > (props.item.multiSelectLabelLength || 2)
                                 ? `${selectedRows.length} Selected`
-                                : selectedDisplayText || placeholder }) })), MenuProps: MenuProps, autoFocus: false, children: jsx(Box, { sx: {
+                                : selectedDisplayText || placeholder }) })), MenuProps: SELECT_MENU_PROPS, autoFocus: false, children: jsx(Box, { sx: {
                             maxHeight: 450, width: '100%', overflow: 'hidden', overflowY: 'auto', '.MuiTextField-root': {
                                 width: '280% !important'
                             }

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

@@ -6,7 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import Select from '@mui/material/Select';
-import React__default, { useState, useRef, useMemo } from 'react';
+import require$$0__default, { useState, useRef, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -40,7 +40,7 @@ function MultiSelectV1({ props, variant, }) {
         const selectedValues = fieldValue.split(',').filter(Boolean);
         return filterOptions.every((option) => selectedValues.includes(String(option.value)));
     }, [fieldValue, filterOptions]);
-    React__default.useEffect(() => {
+    require$$0__default.useEffect(() => {
         if (searchText !== '') {
             setFilterOptions(sortedOptions.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
         }

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

@@ -1,39 +1,25 @@
-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';
-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 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/ModalField/ConfirmationDialog.esm.js

@@ -1,46 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Dialog, Slide, DialogTitle, DialogContent, Typography, Grid, DialogActions, Button } from '@mui/material';
+import { useMemo } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { SubmitButton } from '../Global.styles.esm.js';
 
+// ─── Module-level static style objects ─────────────────────────────────────
+// None depend on props, so they're hoisted to keep stable references across
+// renders instead of being rebuilt every time (perf only — values unchanged).
+const CLOSE_ICON_SX = { cursor: 'pointer' };
+const DIALOG_TITLE_SX = {
+    padding: '8px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    fontSize: '14px',
+    cursor: 'move',
+    borderBottom: '1px solid rgb(229 231 235 / 1)',
+};
+const DIALOG_CONTENT_STYLE = { paddingTop: '20px', paddingBottom: 0 };
+const DIALOG_CONTENT_SX = { '& .pt-0': { paddingTop: 0 } };
+const DIALOG_ACTIONS_SX = { borderTop: '1px solid #e0e0e0', marginTop: 3 };
+const ACTIONS_ROW_STYLE = { display: 'flex', justifyContent: 'flex-end', gap: '8px' };
+const CANCEL_BUTTON_SX = {
+    textTransform: 'none',
+    color: '#000',
+    background: '#ececee',
+    ':hover': { background: '#0009', color: '#fff' },
+};
 const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, text, Submit = 'Submit', Cancel = 'Cancel', title = 'Confirmation Dailog', sx = {}, }) => {
-    return (jsxs(Dialog, { open: openConfirmDialog, TransitionComponent: Slide, fullWidth: true, sx: {
-            position: 'fixed',
-            top: '10%',
-            left: 0,
-            right: 0,
-            bottom: 'auto',
-            '& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s': {
-                maxWidth: '500px',
-            },
-            zIndex: 40,
-            ...sx,
-        }, "aria-labelledby": "draggable-dialog-title", children: [jsxs(DialogTitle, { sx: {
-                    // background: theme.palette.primary.main,
-                    // color: "#fff",
-                    padding: '8px 16px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    fontSize: '14px',
-                    cursor: 'move',
-                    borderBottom: '1px solid rgb(229 231 235 / 1)',
-                }, children: [jsx("span", { children: title }), jsx(CloseIcon, { sx: { cursor: 'pointer' }, onClick: handleCancel })] }), jsxs(DialogContent, { style: { paddingTop: '20px', paddingBottom: 0 }, sx: {
-                    '& .pt-0': {
-                        paddingTop: 0,
-                    },
-                }, children: [jsx(Typography, { children: text }), jsx(Grid, { container: true, gap: 3 })] }), jsx(DialogActions, { sx: { borderTop: '1px solid #e0e0e0', marginTop: 3 }, children: jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        gap: '8px',
-                    }, children: [jsx(SubmitButton, { variant: "contained", size: "small", type: "submit", onClick: onClickSubmit, children: Submit }), jsx(Button, { variant: "text", 
-                            // color="error"
-                            size: "small", sx: {
-                                textTransform: 'none',
-                                color: '#000',
-                                background: '#ececee',
-                                ':hover': { background: '#0009', color: '#fff' },
-                            }, onClick: handleCancel, children: Cancel })] }) })] }));
+    const dialogSx = useMemo(() => ({
+        position: 'fixed',
+        top: '10%',
+        left: 0,
+        right: 0,
+        bottom: 'auto',
+        '& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s': {
+            maxWidth: '500px',
+        },
+        zIndex: 40,
+        ...sx,
+    }), [sx]);
+    return (jsxs(Dialog, { open: openConfirmDialog, TransitionComponent: Slide, fullWidth: true, sx: dialogSx, "aria-labelledby": "draggable-dialog-title", children: [jsxs(DialogTitle, { sx: DIALOG_TITLE_SX, children: [jsx("span", { children: title }), jsx(CloseIcon, { sx: CLOSE_ICON_SX, onClick: handleCancel })] }), jsxs(DialogContent, { style: DIALOG_CONTENT_STYLE, sx: DIALOG_CONTENT_SX, children: [jsx(Typography, { children: text }), jsx(Grid, { container: true, gap: 3 })] }), jsx(DialogActions, { sx: DIALOG_ACTIONS_SX, children: jsxs("div", { style: ACTIONS_ROW_STYLE, children: [jsx(SubmitButton, { variant: "contained", size: "small", type: "submit", onClick: onClickSubmit, children: Submit }), jsx(Button, { variant: "text", size: "small", sx: CANCEL_BUTTON_SX, onClick: handleCancel, children: Cancel })] }) })] }));
 };
 
 export { ConfirmationDialog as default };

package/dist/components/ModalField/ModalField.esm.js

@@ -1,25 +1,28 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import CloseIcon from '@mui/icons-material/Close';
 import { Slide, DialogContent, DialogActions } from '@mui/material';
+import { useMemo } from 'react';
 import { DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton, CancelButton } from '../Global.styles.esm.js';
 
-const ModalField = ({ name, openModal, handleCancel, content, width = '900px', Transition = '', handleSubmit, styles = {}, saveButton: isSaveButton = false, submitButton = true, handleSaveButton = () => null, SubmitButtonName = 'Submit', }) => {
+// ─── Module-level static style objects ─────────────────────────────────────
+// None depend on props, so they're hoisted to keep stable references across
+// renders instead of being rebuilt every time (perf only — values unchanged).
+const noop = () => null;
+const CLOSE_ICON_SX = { cursor: 'pointer' };
+const DIALOG_CONTENT_STYLE = { paddingTop: '20px', paddingBottom: 0 };
+const DIALOG_CONTENT_SX = { '& .pt-0': { paddingTop: 0 } };
+const DIALOG_ACTIONS_SX = { borderTop: '1px solid #e0e0e0', marginTop: 3 };
+const ACTIONS_ROW_STYLE = { display: 'flex', justifyContent: 'flex-end', gap: '8px' };
+const ModalField = ({ name, openModal, handleCancel, content, width = '900px', Transition = '', handleSubmit, styles = {}, saveButton: isSaveButton = false, submitButton = true, handleSaveButton = noop, SubmitButtonName = 'Submit', }) => {
     const transitionComponent = Transition === 'Slide' ? Slide : undefined;
-    return (jsxs(DialogContainer, { open: openModal, TransitionComponent: transitionComponent, fullWidth: true, "aria-labelledby": "draggable-dialog-title", sx: {
-            zIndex: 20,
-            '& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s': {
-                maxWidth: width,
-            },
-            ...styles,
-        }, children: [jsxs(DialogTitleWrapper, { children: [jsx("span", { children: name }), jsx(CloseIcon, { sx: { cursor: 'pointer' }, onClick: handleCancel })] }), jsx(DialogContent, { style: { paddingTop: '20px', paddingBottom: 0 }, sx: {
-                    '& .pt-0': {
-                        paddingTop: 0,
-                    },
-                }, children: content }), jsx(DialogActions, { sx: { borderTop: '1px solid #e0e0e0', marginTop: 3 }, children: jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        gap: '8px',
-                    }, children: [isSaveButton && (jsx(SaveAsDraftButton, { variant: "contained", size: "small", onClick: handleSaveButton, children: "Save" })), submitButton && (jsx(SubmitButton, { variant: "contained", size: "small", onClick: handleSubmit, children: SubmitButtonName })), jsx(CancelButton, { variant: "text", size: "small", onClick: handleCancel, children: "Cancel" })] }) })] }));
+    const dialogSx = useMemo(() => ({
+        zIndex: 20,
+        '& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s': {
+            maxWidth: width,
+        },
+        ...styles,
+    }), [width, styles]);
+    return (jsxs(DialogContainer, { open: openModal, TransitionComponent: transitionComponent, fullWidth: true, "aria-labelledby": "draggable-dialog-title", sx: dialogSx, children: [jsxs(DialogTitleWrapper, { children: [jsx("span", { children: name }), jsx(CloseIcon, { sx: CLOSE_ICON_SX, onClick: handleCancel })] }), jsx(DialogContent, { style: DIALOG_CONTENT_STYLE, sx: DIALOG_CONTENT_SX, children: content }), jsx(DialogActions, { sx: DIALOG_ACTIONS_SX, children: jsxs("div", { style: ACTIONS_ROW_STYLE, children: [isSaveButton && (jsx(SaveAsDraftButton, { variant: "contained", size: "small", onClick: handleSaveButton, children: "Save" })), submitButton && (jsx(SubmitButton, { variant: "contained", size: "small", onClick: handleSubmit, children: SubmitButtonName })), jsx(CancelButton, { variant: "text", size: "small", onClick: handleCancel, children: "Cancel" })] }) })] }));
 };
 
 export { ModalField as default };

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

@@ -126,6 +126,13 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Default: `false`.
      */
     showGlobalSearchByDefault?: boolean;
+    /**
+     * Show the "Toggle density" icon (Show/Hide Columns row) in the top-right
+     * toolbar actions. Default: `false` (hidden) — the grid's own `uiDensity`
+     * prop already controls row/header density, so this MRT-native toggle is
+     * usually redundant.
+     */
+    showDensityToggle?: boolean;
     /**
      * Background colour applied to every header cell.
      * Accepts any valid CSS colour string.
@@ -232,5 +239,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, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, 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, showGlobalSearchByDefault, showDensityToggle, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;