tp-react-elements 2.0.3 → 2.0.5

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

@@ -1,108 +1,43 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { TextField } from '@mui/material';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
-/**
- * FormNumberField Component
- *
- * A numeric input field component that integrates with react-hook-form.
- * This component is used for integer inputs, phone numbers, and pincodes.
- * It restricts input to numeric characters only.
- *
- * @component
- * @param {Object} props - The component props
- * @param {FormRenderProps} props.props - Form rendering properties from parent form
- * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
- *
- * @example
- * // Basic usage in FormRender
- * <FormNumberField props={formRenderProps} variant="outlined" />
- *
- * @example
- * // Usage with specific configuration
- * const formItem = {
- *   name: "phoneNumber",
- *   label: "Phone Number",
- *   inputType: "number",
- *   required: true,
- *   maxLength: 10
- * };
- * <FormNumberField
- *   props={{
- *     item: formItem,
- *     control: formMethods.control,
- *     errors: formMethods.formState.errors
- *   }}
- *   variant="outlined"
- * />
- */
 const FormNumberField = ({ props, variant }) => {
-    /**
-     * Determines if the field has an error based on form validation
-     */
     const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
-    /**
-     * 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 ? ' *' : ''}` : '';
-    /**
-     * Renders the numeric field component using react-hook-form's Controller
-     * for controlled form state management
-     */
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-                return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { ...field, size: "small", label: label, error: isShowBorderError, value: field.value ?? '', 
-                            /**
-                             * Handles input events with numeric restrictions
-                             * - Removes non-numeric characters
-                             * - Sets empty value to null
-                             * - Calls custom onChange handler if provided
-                             * - Clears validation errors when value changes
-                             *
-                             * @param {any} e - The input event object
-                             */
-                            onChange: (e) => {
-                                const sanitized = String(e.target.value || '').replace(/[^0-9]/g, '');
-                                const nextValue = sanitized === '' ? null : sanitized;
-                                field.onChange(nextValue);
-                                props?.item?.onChangeFn && props?.item?.onChangeFn(nextValue);
-                                props?.clearErrors && props?.clearErrors(props.item.name);
-                                if (nextValue && props.item.maxValue && parseInt(nextValue) > props.item.maxValue) {
-                                    field.onChange(props.item.maxValue);
-                                }
-                            }, 
-                            /**
-                             * Handles blur events
-                             * Calls custom onBlur handler if provided
-                             *
-                             * @param {any} e - The blur event object
-                             */
-                            onBlur: (e) => {
-                                props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                            }, sx: {
-                                '& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
-                                    top: '-10px',
-                                },
-                            }, placeholder: props.item.placeholder || '', 
-                            /**
-                             * Additional input properties for the TextField
-                             * Controls input pattern, length restrictions, and additional input handling
-                             */
-                            onInput: (e) => {
-                                props.item.onInputProps && props.item.onInputProps(e);
-                            }, inputProps: {
-                                pattern: '[0-9]*',
-                                maxLength: props.item.maxLength || 20,
-                                maxValue: props.item.maxValue || 9999999999,
-                                'aria-labelledby': `${props.item.name}-label`,
-                                'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
-                                'aria-required': props.item.required ? true : undefined,
-                            }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
-            } }, props.item.name) }));
+    // useController gives a stable `field` reference outside any render prop,
+    // enabling proper useCallback usage for the event handlers below.
+    const { field } = useController({ control: props.control, name: props.item.name });
+    const handleChange = useCallback((e) => {
+        const sanitized = String(e.target.value || '').replace(/[^0-9]/g, '');
+        const nextValue = sanitized === '' ? null : sanitized;
+        field.onChange(nextValue);
+        props?.item?.onChangeFn && props?.item?.onChangeFn(nextValue);
+        props?.clearErrors && props?.clearErrors(props.item.name);
+        if (nextValue && props.item.maxValue && parseInt(nextValue) > props.item.maxValue) {
+            field.onChange(props.item.maxValue);
+        }
+    }, [field, props.item, props.clearErrors]);
+    const handleBlur = useCallback((e) => {
+        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+    }, [props.item.onBlurFn]);
+    const handleInput = useCallback((e) => {
+        props.item.onInputProps && props.item.onInputProps(e);
+    }, [props.item.onInputProps]);
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { ...field, size: "small", label: label, error: isError, value: field.value ?? '', onChange: handleChange, onBlur: handleBlur, onInput: handleInput, sx: {
+                    '& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': { top: '-10px' },
+                }, placeholder: props.item.placeholder || '', inputProps: {
+                    pattern: '[0-9]*',
+                    maxLength: props.item.maxLength || 20,
+                    maxValue: props.item.maxValue || 9999999999,
+                    'aria-labelledby': `${props.item.name}-label`,
+                    'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                    'aria-required': props.item.required ? true : undefined,
+                }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormNumberField as default };

package/dist/components/FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js

@@ -1,15 +1,22 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { TextField } from '@mui/material';
-import { Controller } from 'react-hook-form';
+import { useController } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 const FormNumberFieldDecimal = ({ props, variant, }) => {
     const fixedLength = props.item.decimalFixedTo || 2;
-    const sanitizeDecimal = (raw) => {
+    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    const isError = !!props.errors?.[props.item.name];
+    const { field } = useController({
+        control: props.control,
+        name: props.item.name,
+        disabled: props.item?.disable,
+    });
+    const sanitizeDecimal = useCallback((raw) => {
         let next = (raw ?? '').replace(/[^0-9.-]/g, '');
-        // Collapse multiple '-' to one at start
         next = next.replace(/(?!^)-/g, '');
         if (next.includes('.')) {
             const [intPart, decPart] = next.split('.');
@@ -17,40 +24,39 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
             next = `${intPart}.${clampedDec}`;
         }
         return next;
-    };
-    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
-    return (jsx(Controller, { name: props.item.name, control: props.control, disabled: props.item?.disable, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { type: "text", size: "small", label: label, error: isShowBorderError, ...field, value: field.value ?? '', onChange: (e) => {
-                        const sanitized = sanitizeDecimal(e.target.value ?? '');
-                        const value = sanitized === '' ? null : sanitized;
-                        field.onChange(value);
-                        props?.clearErrors && props?.clearErrors(props.item.name);
-                    }, sx: {
-                        '& input': {
-                            textAlign: 'right',
-                        },
-                        '& input::placeholder': {
-                            textAlign: 'left',
-                        },
-                        '& .css-16hdwvj,.css-1idq7r3-MuiFormLabel-root-MuiInputLabel-root': {
-                            top: '-5px',
-                        },
-                    }, placeholder: props.item.placeholder || '', onBlur: (e) => {
-                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-                    }, InputProps: {
-                        inputProps: {
-                            onInput: (e) => {
-                                props.item.onInputProps && props.item.onInputProps(e);
-                            },
-                            // allow digits, one dot and optional leading minus
-                            inputMode: 'decimal',
-                            maxLength: 20,
-                            'aria-labelledby': `${props.item.name}-label`,
-                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
-                            'aria-required': props.item.required ? true : undefined,
-                        },
-                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+    }, [fixedLength]);
+    const handleChange = useCallback((e) => {
+        const sanitized = sanitizeDecimal(e.target.value ?? '');
+        const value = sanitized === '' ? null : sanitized;
+        field.onChange(value);
+        props?.clearErrors && props?.clearErrors(props.item.name);
+    }, [sanitizeDecimal, field, props.item.name, props.clearErrors]);
+    const handleBlur = useCallback((e) => {
+        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+    }, [props.item.onBlurFn]);
+    const handleInput = useCallback((e) => {
+        props.item.onInputProps && props.item.onInputProps(e);
+    }, [props.item.onInputProps]);
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { type: "text", size: "small", label: label, error: isError, ...field, value: field.value ?? '', onChange: handleChange, onBlur: handleBlur, sx: {
+                    '& input': {
+                        textAlign: 'right',
+                    },
+                    '& input::placeholder': {
+                        textAlign: 'left',
+                    },
+                    '& .css-16hdwvj,.css-1idq7r3-MuiFormLabel-root-MuiInputLabel-root': {
+                        top: '-5px',
+                    },
+                }, placeholder: props.item.placeholder || '', InputProps: {
+                    inputProps: {
+                        onInput: handleInput,
+                        inputMode: 'decimal',
+                        maxLength: 20,
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                    },
+                } }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormNumberFieldDecimal as default };

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { Controller } from 'react-hook-form';
 import { Tooltip, Box } from '@mui/material';
 import { FormTextFieldComponent } from './FormTextField.styles.esm.js';
@@ -58,7 +59,7 @@ const FormTextField = ({ props, variant }) => {
      * - Prevents input that starts with a space
      * - Calls custom onInputProps handler if provided
      */
-    const onInput = (e) => {
+    const onInput = useCallback((e) => {
         if (props?.item?.donotAllowSpace) {
             const value = e.target.value;
             e.target.value = value.replace(' ', '');
@@ -79,12 +80,11 @@ const FormTextField = ({ props, variant }) => {
             const value = e.target.value;
             e.target.value = value.replace(/-/g, '');
         }
-        // Allow only alphanumeric and space
         if (e.target.value.length === 1 && e.target.value === ' ') {
             e.target.value = '';
         }
         props.item.onInputProps && props.item.onInputProps(e);
-    };
+    }, [props.item]);
     /**
      * Renders the text field component using react-hook-form's Controller
      * for controlled form state management

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -57,11 +58,11 @@ const FormTextFieldWithSelect = ({ props, variant, }) => {
      * - Prevents input that starts with a space
      * - Calls custom onInputProps handler if provided
      */
-    const onInput = (e) => {
+    const onInput = useCallback((e) => {
         props.item.onInputProps && props.item.onInputProps(e);
         const filteredValue = e.target.value.replace(/[^a-zA-Z0-9._]/g, '');
         e.target.value = filteredValue;
-    };
+    }, [props.item.onInputProps]);
     /**
      * Renders the text field component using react-hook-form's Controller
      * for controlled form state management

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Box, FormControl, TextField, IconButton } from '@mui/material';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
@@ -30,9 +30,9 @@ const PasswordField = ({ props, variant }) => {
     /**
      * Toggles password visibility between plain text and hidden
      */
-    const handleTogglePasswordVisibility = () => {
-        setShowPassword((prevShowPassword) => !prevShowPassword);
-    };
+    const handleTogglePasswordVisibility = useCallback(() => {
+        setShowPassword((prev) => !prev);
+    }, []);
     /**
      * Generates the field label based on variant type
      * For non-standard variants, appends an asterisk if the field is required

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
 import { getJoditEditor } from './jodit.index.esm.js';
 
@@ -13,10 +13,7 @@ const RichTextEditor = ({ props }) => {
         const loadJoditDependencies = async () => {
             try {
                 const joditEditorModule = await getJoditEditor();
-                // Extract the default export if present
-                const Editor = joditEditorModule?.default
-                    ? joditEditorModule.default
-                    : joditEditorModule;
+                const Editor = joditEditorModule?.default ?? joditEditorModule;
                 setJoditEditor(() => Editor);
                 setIsLoading(false);
             }
@@ -26,7 +23,9 @@ const RichTextEditor = ({ props }) => {
         };
         loadJoditDependencies();
     }, []);
-    const config = {
+    // Memoised Jodit config — only rebuilds when the item-level options change,
+    // not on every keystroke / re-render of the parent form.
+    const config = useMemo(() => ({
         readonly: false,
         placeholder: props.item.placeholder || 'Start typing...',
         statusbar: false,
@@ -36,8 +35,8 @@ const RichTextEditor = ({ props }) => {
             font: { list: { Arial: 'Arial', ...props.item?.FontFamily } },
             fontsize: {
                 list: props.item.Fonts || [
-                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
-                    25, 26, 27, 28, 29, 30,
+                    8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
+                    24, 25, 26, 27, 28, 29, 30,
                 ],
             },
         },
@@ -81,25 +80,27 @@ const RichTextEditor = ({ props }) => {
             },
         },
         ...props.item.sx,
-    };
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        props.item.placeholder,
+        props.item.removeButtons,
+        props.item.FontFamily,
+        props.item.Fonts,
+        props.item.sx,
+    ]);
     useEffect(() => {
         setContent(value);
     }, [value]);
-    const handleBlur = (newContent) => {
-        if (newContent === '<p><br></p>') {
-            setContent(newContent);
-            props.setValue(props.item.name, '');
-        }
-        else {
-            setContent(newContent);
-            props.setValue(props.item.name, newContent);
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    const handleBlur = useCallback((newContent) => {
+        const normalized = newContent === '<p><br></p>' ? '' : newContent;
+        setContent(newContent);
+        props.setValue(props.item.name, normalized);
         props.item.onBlurFn && props.item.onBlurFn(newContent);
-    };
-    const handleChange = (newContent) => {
+    }, [props.setValue, props.item.name, props.item.onBlurFn]);
+    const handleChange = useCallback((newContent) => {
         props.item.onChangeFn && props.item.onChangeFn(newContent);
-    };
+    }, [props.item.onChangeFn]);
     if (isLoading || !JoditEditor) {
         return jsx("div", { children: "Loading editor..." });
     }

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { FormControl, Box, TextField, InputAdornment, Popover, List, Typography, ListItemButton, ListItemText } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import CheckIcon from '@mui/icons-material/Check';
@@ -17,23 +17,23 @@ const SearchableSelect = ({ props, variant, }) => {
     // Find the label that corresponds to the currently selected value
     const selectedOption = options.find((o) => String(o.value) === String(value ?? ''));
     const displayValue = selectedOption ? String(selectedOption.label) : '';
-    const handleOpen = (e) => {
+    const handleOpen = useCallback((e) => {
         if (props.item.disable)
             return;
         setSearch('');
         setAnchorEl(e.currentTarget);
-    };
-    const handleClose = () => setAnchorEl(null);
-    const handleSelect = (val) => {
+    }, [props.item.disable]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    const handleSelect = useCallback((val) => {
         props.setValue(props.item.name, val);
         props.item.onChangeFn && props.item.onChangeFn(val);
         props.clearErrors && props.clearErrors(props.item.name);
-        handleClose();
-    };
+        setAnchorEl(null);
+    }, [props.setValue, props.item.name, props.item.onChangeFn, props.clearErrors]);
     // Case-insensitive substring filter across option labels
-    const filtered = search
+    const filtered = useMemo(() => search
         ? options.filter((o) => String(o.label).toLowerCase().includes(search.toLowerCase()))
-        : options;
+        : options, [search, options]);
     // Label shown inside the MUI TextField (suppressed in 'standard' variant)
     const muiLabel = variant !== 'standard'
         ? `${props.item.label}${props.item.required ? ' *' : ''}`

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

@@ -1,13 +1,13 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ErrorMessage } from '@hookform/error-message';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { getTimePicker } from '../../../utils/Constants/date-pickers.esm.js';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { useWatch, Controller } from 'react-hook-form';
 import { ErrorMessageComponent } from '../../Form/Form.styles.esm.js';
 import 'dayjs';
-import { renderLabel, parseCustomTime, formatDayjsToCustomTime } from '../../../utils/Constants/FormConstants.esm.js';
+import { parseCustomTime, formatDayjsToCustomTime, renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
 function TimePickerFieldWrapper({ props, variant, }) {
     const [TimePicker, setTimePicker] = useState(null);
@@ -22,26 +22,26 @@ function TimePickerFieldWrapper({ props, variant, }) {
         loadComponents();
     }, []);
     const value = useWatch({ control: props.control, name: props.item.name });
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
+    const isShowBorderError = !!props.errors?.[props.item.name];
+    const handleTimeChange = useCallback((newTime) => {
+        const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
+        const min = props.item.minTime ? parseCustomTime(props.item.minTime) : null;
+        const max = props.item.maxTime ? parseCustomTime(props.item.maxTime) : null;
+        let finalTime = parsedTime;
+        if (min && parsedTime?.isBefore(min)) {
+            finalTime = min;
+        }
+        else if (max && parsedTime?.isAfter(max)) {
+            finalTime = max;
+        }
+        const formatted = formatDayjsToCustomTime(finalTime);
+        props.setValue(props.item.name, formatted);
+        props.item.onChangeFn && props.item.onChangeFn(formatted);
+    }, [props.item.minTime, props.item.maxTime, props.item.name, props.item.onChangeFn, props.setValue]);
     if (isLoading) {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
-    return (jsx(Fragment, { children: TimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
-                                    const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
-                                    const min = props.item.minTime ? parseCustomTime(props.item.minTime) : null;
-                                    const max = props.item.maxTime ? parseCustomTime(props.item.maxTime) : null;
-                                    let finalTime = parsedTime;
-                                    if (min && parsedTime?.isBefore(min)) {
-                                        finalTime = min;
-                                    }
-                                    else if (max && parsedTime?.isAfter(max)) {
-                                        finalTime = max;
-                                    }
-                                    const formatted = formatDayjsToCustomTime(finalTime);
-                                    props.setValue(props.item.name, formatted);
-                                    props.item.onChangeFn && props.item.onChangeFn(formatted);
-                                }, minTime: props.item.minTime
+    return (jsx(Fragment, { children: TimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: handleTimeChange, minTime: props.item.minTime
                                     ? parseCustomTime(props.item.minTime) || undefined
                                     : undefined, maxTime: props.item.maxTime
                                     ? parseCustomTime(props.item.maxTime) || undefined

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

@@ -1,7 +1,6 @@
 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';
@@ -15,7 +14,6 @@ export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.j
 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';
@@ -34,6 +32,8 @@ 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 FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.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';

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

@@ -25,7 +25,7 @@ const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, te
                     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: {
+                }, children: [jsx("span", { children: title }), jsx(CloseIcon, { sx: { cursor: 'pointer' }, onClick: handleCancel })] }), jsxs(DialogContent, { style: { paddingTop: '20px', paddingBottom: 0 }, sx: {
                     '& .pt-0': {
                         paddingTop: 0,
                     },
@@ -33,14 +33,14 @@ const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, te
                         display: 'flex',
                         justifyContent: 'flex-end',
                         gap: '8px',
-                    }, children: [jsx(SubmitButton, { variant: "contained", size: "small", type: "submit", onClick: () => onClickSubmit(), children: Submit }), jsx(Button, { variant: "text", 
+                    }, 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 })] }) })] }));
+                            }, onClick: handleCancel, children: Cancel })] }) })] }));
 };
 
 export { ConfirmationDialog as default };

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

@@ -1,24 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import CloseIcon from '@mui/icons-material/Close';
-import { DialogContent, DialogActions, Slide } from '@mui/material';
+import { Slide, DialogContent, DialogActions } from '@mui/material';
 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', }) => {
-    const TransitionComponent = () => {
-        switch (Transition) {
-            case 'Slide':
-                return Slide;
-            default:
-                return undefined;
-        }
-    };
-    return (jsxs(DialogContainer, { open: openModal, TransitionComponent: TransitionComponent(), fullWidth: true, "aria-labelledby": "draggable-dialog-title", sx: {
+    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: {
+        }, 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,
                     },
@@ -26,7 +19,7 @@ const ModalField = ({ name, openModal, handleCancel, content, width = '900px', T
                         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" })] }) })] }));
+                    }, 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/DynamicFilterBar.d.ts

@@ -96,6 +96,19 @@ export type ServerFilterDef = {
     }[];
     /** Show this chip in the filter bar on first render. Default: `false`. */
     defaultVisible?: boolean;
+} | {
+    /**
+     * Month-picker chip — lets users select **one or more months** across years.
+     * Selected months are stored as a comma-separated string of `"YYYY-MM"` values
+     * in `filterValues[filterKey]` (e.g. `"2025-01,2025-03"`).
+     * Split on `","` in your `fetchPage` handler to build the server query.
+     */
+    type: 'monthPicker';
+    id: string;
+    label: string;
+    filterKey: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 };
 interface AvailableColumn {
     id: string;
@@ -119,7 +132,7 @@ export interface DynamicFilterBarProps {
     filterValues: Record<string, string>;
     onFilterValuesChange: (values: Record<string, string>) => void;
     columnFilters: MRT_ColumnFiltersState;
-    onColumnFilterChange: (f: MRT_ColumnFiltersState) => void;
+    onColumnFilterChange: (f: MRT_ColumnFiltersState | ((prev: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
     availableColumns: AvailableColumn[];
     /** Maximum number of chips that may be visible at once. Default: 4. */
     maxVisibleFilters?: number;
@@ -137,6 +150,8 @@ export interface DynamicFilterBarProps {
     onGlobalFilterChange?: (value: string) => void;
     /** Placeholder text for the global search box. Default: "Search…". */
     globalSearchPlaceholder?: string;
+    /** ID prefix for all interactive elements — passed down to chips and ManageFilters. */
+    gridId?: string;
 }
-declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;