tp-react-elements 2.0.7 → 3.0.1

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/components/Button/Button.esm.js

@@ -1,15 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { useAuth } from '../../auth/authContext.esm.js';
 import { Button } from '@mui/material';
+import { useMemo, useCallback } from 'react';
 
 const ButtonStyled = ({ name }) => {
     const { projectTheme } = useAuth();
     const ButtonConfig = projectTheme?.Styles.Component.TPButton.find((item) => item.name === name);
-    return (jsx(Button, { sx: { ...projectTheme?.Styles.Component.TPButtonCommonSx }, onClick: () => {
-            if (ButtonConfig?.isEnableConfirmDialog) {
-                alert('Congirm');
-            }
-        }, children: name }));
+    const commonSx = projectTheme?.Styles.Component.TPButtonCommonSx;
+    const sx = useMemo(() => ({ ...commonSx }), [commonSx]);
+    const handleClick = useCallback(() => {
+        if (ButtonConfig?.isEnableConfirmDialog) {
+            alert('Congirm');
+        }
+    }, [ButtonConfig?.isEnableConfirmDialog]);
+    return (jsx(Button, { sx: sx, onClick: handleClick, children: name }));
 };
 
 export { ButtonStyled as default };

package/dist/components/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
 export { default as DatepickerWrapperV2 } from '../FormComponents/DatePicker/DatepickerWrapperV2';
 export { default as Monthpickerrender } from '../FormComponents/DatePicker/Monthpickerrender';
+export { default as MonthPickerMultiRender } from '../FormComponents/DatePicker/MonthPickerMultiRender';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField';

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

@@ -1,7 +1,8 @@
 import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
 import Monthpickerrender from '../FormComponents/DatePicker/Monthpickerrender.esm.js';
+import MonthPickerMultiRender from '../FormComponents/DatePicker/MonthPickerMultiRender.esm.js';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField.esm.js';
 
 
 
-export { DatepickerWrapperV2, Monthpickerrender };
+export { DatepickerWrapperV2, MonthPickerMultiRender, Monthpickerrender };

package/dist/components/DeleteComponent/DeleteField.esm.js

@@ -1,24 +1,30 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Tooltip, Grid, Typography } from '@mui/material';
 import ConfirmationDialog from '../ModalField/ConfirmationDialog.esm.js';
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
+// ─── Module-level static style objects ─────────────────────────────────────
+const TOOLTIP_TEXT_SX = { fontSize: '8px' };
+const GRID_SX = { ':hover': { cursor: 'pointer' } };
+const TRASH_ICON_STYLE = {
+    lineHeight: 1,
+    fontSize: '11px',
+    color: 'var(--mui-palette-error-main, #B3261E)',
+    marginTop: '10px',
+};
 const DeleteField = ({ onClickFn, tooltip = 'Delete', text }) => {
     const [openDialog, setOpenDialog] = useState(false);
-    const handleCancel = () => {
+    const handleCancel = useCallback(() => {
         setOpenDialog(false);
-    };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: jsx(Typography, { sx: { fontSize: '8px' }, children: tooltip }), children: jsx(Grid, { sx: { ':hover': { cursor: 'pointer' } }, onClick: () => {
-                        setOpenDialog(true);
-                    }, children: jsx("i", { className: "flaticon-trash", style: {
-                            lineHeight: 1,
-                            fontSize: '11px',
-                            color: 'var(--mui-palette-error-main, #B3261E)',
-                            marginTop: '10px',
-                        } }) }) }), jsx(ConfirmationDialog, { openConfirmDialog: openDialog, handleCancel: handleCancel, onClickSubmit: () => {
-                    handleCancel();
-                    onClickFn();
-                }, text: text })] }));
+    }, []);
+    const handleOpen = useCallback(() => {
+        setOpenDialog(true);
+    }, []);
+    const handleSubmit = useCallback(() => {
+        handleCancel();
+        onClickFn();
+    }, [handleCancel, onClickFn]);
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: jsx(Typography, { sx: TOOLTIP_TEXT_SX, children: tooltip }), children: jsx(Grid, { sx: GRID_SX, onClick: handleOpen, children: jsx("i", { className: "flaticon-trash", style: TRASH_ICON_STYLE }) }) }), jsx(ConfirmationDialog, { openConfirmDialog: openDialog, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: text })] }));
 };
 
 export { DeleteField as default };

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

@@ -1,11 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Controller } from 'react-hook-form';
 
+// 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 FormActiveSwitch = ({ props }) => {
     const { control, item } = props;
     const valueActive = item.value1 ?? 'A';
     const valueInactive = item.value2 ?? 'I';
-    return (jsxs("fieldset", { className: "m-form__input", style: { border: 'none', padding: 0, margin: 0 }, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: { fontSize: '12px', paddingRight: 10 }, 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: { textTransform: 'none' }, 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: { textTransform: 'none' }, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+    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" })] })) })] }));
 };
 
 export { FormActiveSwitch as default };

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

@@ -282,6 +282,7 @@ const useFormValidatingContext = (formArray) => {
                 renderCustomError(field);
                 break;
             case 'monthpicker':
+            case 'monthpicker-multi':
                 initialValues[field.name] = null;
                 if (field.required && field.errorMessage) {
                     validationShape[field.name] = (validationShape[field.name] || Yup.string())

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

@@ -1,13 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { lazy, Suspense } from 'react';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import require$$0__default, { lazy, Suspense } from 'react';
 import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
-import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
@@ -18,6 +11,13 @@ import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js'
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>
@@ -30,6 +30,7 @@ const FormRenderMultiFileUpload = lazy(() => import('../FileUpload/index.esm.js'
 const MultiFileWithPreview = lazy(() => import('../FileUpload/index.esm.js').then((m) => ({ default: m.MultiFileWithPreview })));
 const DatepickerWrapperV2 = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.DatepickerWrapperV2 })));
 const Monthpickerrender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.Monthpickerrender })));
+const MonthPickerMultiRender = lazy(() => import('../DatePicker/index.esm.js').then((m) => ({ default: m.MonthPickerMultiRender })));
 const TimePickerFieldWrapper = lazy(() => import('../TimePicker/index.esm.js').then((m) => ({ default: m.TimePicker })));
 // Loading fallback component
 const LoadingFallback = () => jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
@@ -119,9 +120,12 @@ const RenderForm = (props) => {
         // Time picker
         case 'timepicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(TimePickerFieldWrapper, { props: props, variant: variant }) }));
-        // Month picker
+        // Month picker (single month)
         case 'monthpicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(Monthpickerrender, { props: props, variant: variant }) }));
+        // Month picker (multiple months)
+        case 'monthpicker-multi':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MonthPickerMultiRender, { props: props, variant: variant }) }));
         // Multi-select dropdown
         case 'multiselect':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(MultiSelectV1, { props: props, variant: variant }) }));
@@ -161,6 +165,6 @@ const RenderForm = (props) => {
  *
  * @see FormRenderWrapper
  */
-var RenderForm$1 = React__default.memo(RenderForm);
+var RenderForm$1 = require$$0__default.memo(RenderForm);
 
 export { RenderForm$1 as default };

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
+import require$$0__default from 'react';
 import { useFormState } from 'react-hook-form';
 import { FormComponent, Formitem } from './Form.styles.esm.js';
 import RenderForm from './FormRender.esm.js';
@@ -28,6 +28,6 @@ const FormRenderWrapper = ({ formArray, name = '', numberOfColumns = 3, form, va
  * Export the FormRenderWrapper component for use in form containers
  * This component is the main entry point for rendering form fields
  */
-var FormRenderWrapper_default = React__default.memo(FormRenderWrapper);
+var FormRenderWrapper_default = require$$0__default.memo(FormRenderWrapper);
 
 export { FormRenderWrapper_default as default };

package/dist/components/FormComponents/DatePicker/MonthPickerMultiRender.d.ts

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const MonthPickerMultiRender: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MonthPickerMultiRender;

package/dist/components/FormComponents/DatePicker/MonthPickerMultiRender.esm.js

@@ -0,0 +1,117 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { FormControl, Box, TextField, InputAdornment, Popover, IconButton, Typography, Button } from '@mui/material';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const parseMY = (s) => {
+    const m = /^(\d{2})\/(\d{4})$/.exec(s.trim());
+    return m ? [Number(m[1]), Number(m[2])] : null; // [month, year]
+};
+const toKey = (month, year) => year * 100 + month; // sortable comparable int
+const toMY = (month, year) => `${String(month).padStart(2, '0')}/${year}`;
+const parseValue = (value) => value ? value.split(',').map((s) => s.trim()).filter(Boolean) : [];
+const MonthPickerMultiRender = ({ props, variant, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
+    const [draft, setDraft] = useState([]);
+    const value = useWatch({ control: props.control, name: props.item.name });
+    const committed = useMemo(() => parseValue(value), [value]);
+    const isError = !!props.errors?.[props.item.name];
+    const minKey = useMemo(() => {
+        const parsed = props.item.minDate ? parseMY(props.item.minDate) : null;
+        return parsed ? toKey(parsed[0], parsed[1]) : null;
+    }, [props.item.minDate]);
+    const maxKey = useMemo(() => {
+        const parsed = props.item.maxDate ? parseMY(props.item.maxDate) : null;
+        return parsed ? toKey(parsed[0], parsed[1]) : null;
+    }, [props.item.maxDate]);
+    const handleOpen = useCallback((e) => {
+        if (props.item.disable)
+            return;
+        const committedNow = parseValue(value);
+        setDraft(committedNow);
+        if (committedNow.length > 0) {
+            const years = committedNow.map((s) => Number(s.split('/')[1]));
+            setViewYear(Math.min(...years));
+        }
+        setAnchorEl(e.currentTarget);
+    }, [props.item.disable, value]);
+    const handleClose = useCallback(() => setAnchorEl(null), []);
+    const toggleMonth = useCallback((my) => {
+        setDraft((prev) => (prev.includes(my) ? prev.filter((v) => v !== my) : [...prev, my]));
+    }, []);
+    const handleApply = useCallback(() => {
+        const sorted = [...draft].sort((a, b) => {
+            const [am, ay] = a.split('/').map(Number);
+            const [bm, by] = b.split('/').map(Number);
+            return toKey(am, ay) - toKey(bm, by);
+        });
+        const next = sorted.join(',');
+        props.setValue(props.item.name, next);
+        props.item.onChangeFn && props.item.onChangeFn(next);
+        props.clearErrors && props.clearErrors(props.item.name);
+        setAnchorEl(null);
+    }, [draft, props]);
+    const displayValue = useMemo(() => {
+        if (committed.length === 0)
+            return '';
+        if (committed.length <= 3) {
+            return committed
+                .map((my) => {
+                const [m, y] = my.split('/').map(Number);
+                return `${MONTH_LABELS[m - 1]} ${y}`;
+            })
+                .join(', ');
+        }
+        return `${committed.length} months selected`;
+    }, [committed]);
+    const muiLabel = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    return (jsxs(FormControl, { fullWidth: true, sx: { position: 'relative' }, disabled: props.item.disable, children: [renderLabel(variant, props), jsx(Box, { onClick: handleOpen, sx: { cursor: props.item.disable ? 'default' : 'pointer' }, children: jsx(TextField, { fullWidth: true, value: displayValue, label: muiLabel, placeholder: props.item.placeholder || 'Select month(s)…', error: isError, size: "small", InputProps: {
+                        readOnly: true,
+                        endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(CalendarTodayIcon, { sx: { fontSize: 15, color: 'text.disabled' } }) })),
+                        sx: { cursor: 'inherit' },
+                    }, inputProps: {
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                        style: { cursor: 'inherit' },
+                    }, sx: {
+                        '& .MuiFormLabel-root': { top: -10 },
+                        '& .MuiInputLabel-shrink': { top: 0 },
+                    } }) }), jsxs(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.5, borderRadius: 2, boxShadow: 6, width: 280 } }, children: [jsxs(Box, { sx: {
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            px: 1.5, py: 0.75,
+                            borderBottom: '1px solid', borderColor: 'divider',
+                        }, children: [jsx(IconButton, { size: "small", onClick: () => setViewYear((y) => y - 1), children: jsx(ChevronLeftIcon, { sx: { fontSize: 18 } }) }), jsx(Typography, { fontWeight: 600, sx: { fontSize: 14, userSelect: 'none' }, children: viewYear }), jsx(IconButton, { size: "small", onClick: () => setViewYear((y) => y + 1), children: jsx(ChevronRightIcon, { sx: { fontSize: 18 } }) })] }), jsx(Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0.75, p: 1.5 }, children: MONTH_LABELS.map((mon, idx) => {
+                            const monthNum = idx + 1;
+                            const my = toMY(monthNum, viewYear);
+                            const key = toKey(monthNum, viewYear);
+                            const outOfRange = (minKey !== null && key < minKey) || (maxKey !== null && key > maxKey);
+                            const isSelected = draft.includes(my);
+                            return (jsx(Button, { variant: isSelected ? 'contained' : 'outlined', size: "small", disableElevation: true, disabled: outOfRange, onClick: () => toggleMonth(my), sx: {
+                                    fontSize: 12,
+                                    textTransform: 'none',
+                                    borderRadius: 2,
+                                    py: 0.75,
+                                    borderColor: isSelected ? 'primary.main' : 'divider',
+                                    fontWeight: isSelected ? 700 : 400,
+                                }, children: mon }, my));
+                        }) }), draft.length > 0 && (jsxs(Box, { sx: {
+                            px: 2, py: 0.75,
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            borderTop: '1px solid', borderColor: 'divider',
+                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [draft.length, " month", draft.length > 1 ? 's' : '', " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear" })] })), jsx(Box, { sx: {
+                            px: 1.5, py: 1,
+                            display: 'flex', justifyContent: 'flex-end',
+                            borderTop: '1px solid', borderColor: 'divider',
+                        }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) })] }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { MonthPickerMultiRender as default };

package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { getDatePicker } from '../../../utils/Constants/date-pickers.esm.js';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -23,13 +23,15 @@ const Monthpickerrender = ({ props, variant, }) => {
         };
         loadComponents();
     }, []);
-    const handleToggle = () => {
+    // Stable toggle — mirrors the DatepickerWrapperV2 pattern so onClick/onOpen
+    // don't hand the picker a new function reference on every render.
+    const handleToggle = useCallback(() => {
         if (!open) {
             ref.current?.blur();
         }
         document.activeElement?.blur();
         setOpen(!open);
-    };
+    }, [open]);
     const isError = !!props.errors?.[props.item.name];
     const isShowBorderError = isError;
     if (isLoading) {
@@ -38,7 +40,7 @@ const Monthpickerrender = ({ props, variant, }) => {
     return (jsx(Fragment, { children: DatePicker && (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { ref: ref, label: variant !== 'standard' &&
                                     `${props.item.label}${props.item.required ? ' *' : ''}`, views: ['year', 'month'], openTo: "month", view: view, onViewChange: (newView) => setView(newView), disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
                                     textField: {
-                                        onClick: () => handleToggle(),
+                                        onClick: handleToggle,
                                         inputRef: ref,
                                         error: isShowBorderError,
                                         inputProps: {

package/dist/components/FormComponents/FileUpload/MultiFileWithPreview.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
-import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { useWatch } from 'react-hook-form';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
@@ -51,11 +51,6 @@ const isWordFile = (file) => {
     const name = typeof file === 'string' ? file : (file.name || '');
     return /\.(doc|docx)$/.test(name.toLowerCase());
 };
-const getObjectUrl = (file) => {
-    if (!file)
-        return '';
-    return typeof file === 'string' ? file : URL.createObjectURL(file);
-};
 // ─── Component ────────────────────────────────────────────────────────────────
 const MultiFileWithPreview = ({ props, variant, }) => {
     const inputRef = useRef(null);
@@ -64,6 +59,43 @@ const MultiFileWithPreview = ({ props, variant, }) => {
     const [open, setOpen] = useState(false);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    // Blob URL cache, keyed by File reference — createObjectURL was previously
+    // called fresh on every render for the same File, leaking a blob URL each
+    // time (never revoked). Now a URL is created once per File and reused;
+    // stale/unmounted entries are revoked below.
+    const objectUrlCacheRef = useRef(new Map());
+    const getObjectUrl = useCallback((file) => {
+        if (!file)
+            return '';
+        if (typeof file === 'string')
+            return file;
+        const cache = objectUrlCacheRef.current;
+        const cached = cache.get(file);
+        if (cached)
+            return cached;
+        const url = URL.createObjectURL(file);
+        cache.set(file, url);
+        return url;
+    }, []);
+    // Revoke blob URLs for files that are no longer selected (removed/replaced).
+    useEffect(() => {
+        const cache = objectUrlCacheRef.current;
+        const currentFiles = new Set(selectedFiles.filter((f) => f instanceof File));
+        cache.forEach((url, file) => {
+            if (!currentFiles.has(file)) {
+                URL.revokeObjectURL(url);
+                cache.delete(file);
+            }
+        });
+    }, [selectedFiles]);
+    // Revoke everything on unmount.
+    useEffect(() => {
+        const cache = objectUrlCacheRef.current;
+        return () => {
+            cache.forEach((url) => URL.revokeObjectURL(url));
+            cache.clear();
+        };
+    }, []);
     // Clamp preview index when selection changes
     useEffect(() => {
         if (selectedFiles.length === 0) {

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

@@ -5,6 +5,16 @@ import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
+// Identical for every checkbox in the group — hoisted so it isn't rebuilt
+// per option on every render.
+const CHECKBOX_LABEL_SX = {
+    '.MuiCheckbox-root': {
+        padding: '6px 2px 6px 8px',
+        '.css-imrjgg-MuiButtonBase-root-MuiCheckbox-root': {
+            color: 'rgb(0, 0, 0) !important',
+        },
+    },
+};
 /**
  * FormCheckBoxGroup Component
  *
@@ -27,14 +37,7 @@ const FormCheckBoxGroup = ({ props, variant, }) => {
     return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(FormGroup, { row: true, children: props.item?.settings &&
                         props.item.settings.map((settings, i) => {
                             return (jsx(Controller, { name: settings.name, control: props.control, render: ({ field }) => {
-                                    return (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: field.value }), sx: {
-                                            '.MuiCheckbox-root': {
-                                                padding: '6px 2px 6px 8px',
-                                                '.css-imrjgg-MuiButtonBase-root-MuiCheckbox-root': {
-                                                    color: 'rgb(0, 0, 0) !important',
-                                                },
-                                            },
-                                        }, label: jsx(Typography, { variant: "subtitle2", fontSize: '11px', fontWeight: 'normal !important', children: settings.label }), labelPlacement: "end" }));
+                                    return (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: field.value }), sx: CHECKBOX_LABEL_SX, label: jsx(Typography, { variant: "subtitle2", fontSize: '11px', fontWeight: 'normal !important', children: settings.label }), labelPlacement: "end" }));
                                 } }, i));
                         }) }) }), jsx(FormBottomField, { ...props })] }));
 };

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

@@ -5,6 +5,19 @@ import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.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
+    },
+};
 /**
  * FormRadioGroup Component
  *
@@ -27,18 +40,7 @@ const FormRadioGroup = ({ props, variant }) => {
     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: {
-                            gap: '8px',
-                        }, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(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
-                                    },
-                                } }), 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: RADIO_SX }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRadioGroup as default };