tp-react-elements 2.0.3 → 2.0.5

package/README.md

@@ -202,10 +202,14 @@ npm run storybook
 ```
 
 - **Docs → Paginated Grid** — API reference plus **four copy-paste examples** (embedded panel, wrapped headers, typography, invoice filters)
-- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill
+- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill, multi-select with Apply button, month picker
 - **Components → PaginatedGrid → Example Grid** — invoice grid demo using mock data (no API)
 
-**Global Search:** every `GenericPaginatedGrid` includes a built-in search icon in the top-right toolbar (next to Show/Hide Columns, Density, and Fullscreen) — no extra props needed. Click it to expand a free-text search that filters across all visible columns of the current batch. See **Docs → Paginated Grid → Global search**.
+**Global Search:** every `GenericPaginatedGrid` includes a built-in search icon in the top-right toolbar — **collapsed by default** (set `showGlobalSearchByDefault={true}` to start expanded). Click the icon to expand a free-text search that filters across all visible columns of the current batch. See **Docs → Paginated Grid → Global search**.
+
+**Excel export:** the Export button downloads an `.xlsx` file with the header row styled in `headerBgColor` (bold white text) and columns auto-sized to fit content. Requires `xlsx-js-style` as a peer dependency.
+
+**Element IDs:** every interactive element (toolbar buttons, filter chips, pagination controls) receives a stable `id` attribute. Pass `gridId="invoice"` (or omit to default to `exportFilename`) and all elements follow the pattern `{gridId}_refresh_icon`, `{gridId}_dateRange_chip`, `{gridId}_next_page_icon`, etc. See **Docs → Paginated Grid — Element IDs** in Storybook for the full reference table.
 
 **Example — compact embedded grid with smaller fonts:**
 

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var DayCell = {};
 
-export { InputRangeField as __exports };
+export { DayCell 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 DateRange = {};
+var DateRangePicker = {};
 
-export { DateRange as __exports };
+export { DateRangePicker as __exports };

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

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

package/dist/components/DateRangePicker/DateRangePicker.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { Controller } from 'react-hook-form';
 import { d as distExports } from '../../_virtual/index.esm.js';
 import { useRdrStyles } from '../../utils/rdrStyles.esm.js';
@@ -11,23 +11,20 @@ import { format } from '../../node_modules/date-fns/format.esm.js';
 import { parse } from '../../node_modules/date-fns/parse.esm.js';
 import { isValid } from '../../node_modules/date-fns/isValid.esm.js';
 
+// Pure utility — no component state dependency, defined at module level
+const getValidDate = (dateString) => {
+    if (!dateString)
+        return undefined;
+    const date = parse(dateString, 'dd/MM/yyyy', new Date());
+    return isValid(date) ? date : undefined;
+};
 const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, clearErrors, errors, register, variant, ...rest }) => {
-    // Inject react-date-range CSS via JS (not CSS import) to prevent it from being
-    // bundled into the library's extracted CSS file and leaking into consumer apps.
     useRdrStyles();
-    // Using a generic type for anchorEl to avoid environment-specific linting issues.
-    // eslint-disable-next-line react/prop-types
     const [anchorEl, setAnchorEl] = useState(null);
     const fromDateName = item.name;
     const toDateName = `${item.name}_to`;
     const fromDateValue = watch(fromDateName);
     const toDateValue = watch(toDateName);
-    const getValidDate = (dateString) => {
-        if (!dateString)
-            return undefined;
-        const date = parse(dateString, 'dd/MM/yyyy', new Date());
-        return isValid(date) ? date : undefined;
-    };
     const [state, setState] = useState([
         {
             startDate: getValidDate(fromDateValue),
@@ -35,23 +32,52 @@ const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, c
             key: 'selection',
         },
     ]);
+    // Sync calendar state when watched field values change.
+    // Uses fromDateValue/toDateValue directly — no need to call watch() again inside.
     useEffect(() => {
-        const fromDate = watch(fromDateName);
-        const toDate = watch(toDateName);
         setState([
             {
-                startDate: getValidDate(fromDate),
-                endDate: getValidDate(toDate),
+                startDate: getValidDate(fromDateValue),
+                endDate: getValidDate(toDateValue),
                 key: 'selection',
             },
         ]);
-    }, [fromDateValue, toDateValue, watch, fromDateName, toDateName]);
-    const handleClick = (event) => {
+    }, [fromDateValue, toDateValue]);
+    const handleClick = useCallback((event) => {
         setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
+    }, []);
+    const handleClose = useCallback(() => {
         setAnchorEl(null);
-    };
+    }, []);
+    // Stable range-change handler — only recreated when field names or callbacks change
+    const handleRangeChange = useCallback((range) => {
+        const selection = range.selection;
+        setState([selection]);
+        if (selection.startDate && selection.endDate) {
+            setValue(fromDateName, format(selection.startDate, 'dd/MM/yyyy'), {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+            setValue(toDateName, format(selection.endDate, 'dd/MM/yyyy'), {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+        }
+        if (selection.startDate &&
+            selection.endDate &&
+            selection.startDate.getTime() !== selection.endDate.getTime()) {
+            const dateObject = {
+                startDate: format(selection.startDate, 'dd/MM/yyyy'),
+                endDate: format(selection.endDate, 'dd/MM/yyyy'),
+            };
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            item.onChangeFn && item.onChangeFn(dateObject || null);
+            setAnchorEl(null);
+        }
+    }, [fromDateName, toDateName, setValue, item.onChangeFn]);
+    // Memoize optional min/max date conversions so they don't re-create each render
+    const minDate = useMemo(() => (item?.minDate ? dayjs(item.minDate, item.DateFormat || 'DD/MM/YYYY').toDate() : undefined), [item?.minDate, item?.DateFormat]);
+    const maxDate = useMemo(() => (item?.maxDate ? dayjs(item.maxDate, item.DateFormat || 'DD/MM/YYYY').toDate() : undefined), [item?.maxDate, item?.DateFormat]);
     const open = Boolean(anchorEl);
     const id = open ? 'date-range-popover' : undefined;
     const displayValue = state[0].startDate && state[0].endDate
@@ -61,58 +87,9 @@ const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, c
     return (jsxs(Fragment, { children: [jsx(Box, { onClick: handleClick, sx: { width: '100%' }, children: jsx(Controller, { name: fromDateName, control: control, render: ({ fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, {
                                 item,
                                 ...rest,
-                            }), ' ', jsx(TextField, { fullWidth: true, value: displayValue, placeholder: item.placeholder || 'DD/MM/YYYY - DD/MM/YYYY', error: !!fieldState.error, InputProps: {
-                                    readOnly: true,
-                                }, label: label, size: "small" })] })) }) }), jsx(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }, PaperProps: {
-                    style: {
-                        transform: 'scale(0.9)',
-                        transformOrigin: 'top left',
-                    },
-                }, children: jsx(distExports.DateRange, { editableDateInputs: false, onChange: (range) => {
-                        const selection = range.selection;
-                        setState([selection]);
-                        // if (selection.startDate) {
-                        //   setValue(fromDateName, format(selection.startDate, 'dd/MM/yyyy'), {
-                        //     shouldValidate: true,
-                        //     shouldDirty: true,
-                        //   });
-                        // }
-                        if (selection.startDate && selection.endDate) {
-                            setValue(fromDateName, format(selection.startDate, 'dd/MM/yyyy'), {
-                                shouldValidate: true,
-                                shouldDirty: true,
-                            });
-                            setValue(toDateName, format(selection.endDate, 'dd/MM/yyyy'), {
-                                shouldValidate: true,
-                                shouldDirty: true,
-                            });
-                        }
-                        if (selection.startDate &&
-                            selection.endDate &&
-                            selection.startDate?.getTime() !== selection.endDate?.getTime()) {
-                            const dateObject = {
-                                startDate: format(selection.startDate, 'dd/MM/yyyy'),
-                                endDate: format(selection.endDate, 'dd/MM/yyyy'),
-                            };
-                            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                            item.onChangeFn && item.onChangeFn(dateObject || null);
-                            handleClose();
-                        }
-                    }, moveRangeOnFirstSelection: false, ranges: state, minDate: item?.minDate
-                        ? dayjs(item?.minDate, item.DateFormat || 'DD/MM/YYYY').toDate()
-                        : undefined, maxDate: item?.maxDate
-                        ? dayjs(item?.maxDate, item.DateFormat || 'DD/MM/YYYY').toDate()
-                        : undefined, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#4d73b1ff'] }) }), jsx(FormBottomField, { item,
-                control,
-                errors,
-                getValues,
-                setValue,
-                clearErrors,
-                register,
-                watch })] }));
+                            }), ' ', jsx(TextField, { fullWidth: true, value: displayValue, placeholder: item.placeholder || 'DD/MM/YYYY - DD/MM/YYYY', error: !!fieldState.error, InputProps: { readOnly: true }, label: label, size: "small" })] })) }) }), jsx(Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
+                    style: { transform: 'scale(0.9)', transformOrigin: 'top left' },
+                }, children: jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: state, minDate: minDate, maxDate: maxDate, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#4d73b1ff'] }) }), jsx(FormBottomField, { item, control, errors, getValues, setValue, clearErrors, register, watch })] }));
 };
 
 export { DateRangePickerComponent as default };

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

@@ -6,7 +6,6 @@ import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.e
 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';
@@ -18,6 +17,7 @@ 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 FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } 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';
@@ -22,15 +22,14 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
         };
         loadComponents();
     }, []);
-    const handleToggle = () => {
-        if (!open) {
+    // Stable toggle — does not change between renders
+    const handleToggle = useCallback(() => {
+        if (!open)
             inputTextRef.current?.blur();
-        }
         document.activeElement?.blur();
-        setOpen(!open);
-    };
+        setOpen((prev) => !prev);
+    }, [open]);
     const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
     if (isLoading) {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
@@ -48,7 +47,7 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
                                     props?.clearErrors && props?.clearErrors(props.item.name);
                                 }, slotProps: {
                                     textField: {
-                                        onClick: () => handleToggle(),
+                                        onClick: handleToggle,
                                         inputRef: inputTextRef,
                                         onBlur: (e) => {
                                             props?.item?.onBlurFn && props?.item?.onBlurFn(e);
@@ -59,14 +58,10 @@ const DatepickerWrapperV2 = ({ props, variant, }) => {
                                             'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                                             'aria-required': props.item.required ? true : undefined,
                                         },
-                                        error: isShowBorderError,
+                                        error: isError,
                                         sx: {
-                                            '& .MuiFormLabel-root': {
-                                                top: -10,
-                                            },
-                                            '& .MuiInputLabel-shrink': {
-                                                top: 0,
-                                            },
+                                            '& .MuiFormLabel-root': { top: -10 },
+                                            '& .MuiInputLabel-shrink': { top: 0 },
                                         },
                                     },
                                 } })] })), jsx(FormBottomField, { ...props })] }));

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

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
 import { getDateTimePicker } from '../../../utils/Constants/date-pickers.esm.js';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import dayjs from 'dayjs';
-import { Controller } from 'react-hook-form';
+import { useWatch, Controller } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
@@ -17,27 +17,18 @@ const DatetimepickerWrapper = ({ props, variant, }) => {
     const timeFormat = isAmpm ? 'hh:mm A' : 'HH:mm';
     const defaultDateFormat = `DD/MM/YYYY ${timeFormat}`;
     const displayFormat = props.item.DateFormat || defaultDateFormat;
-    // useEffect(() => {
-    //   const loadComponents = async () => {
-    //     setIsLoading(true);
-    //     const [dateTimePicker] = await Promise.all([getDateTimePicker()]);
-    //     setDateTimePicker(() => dateTimePicker);
-    //     setIsLoading(false);
-    //   };
-    //   loadComponents();
-    // }, []);
     useEffect(() => {
         const loadComponents = async () => {
             try {
                 setIsLoading(true);
                 const component = await getDateTimePicker();
                 if (!component) {
-                    console.error("DateTimePicker component resolved to undefined. Check your utility export.");
+                    console.error('DateTimePicker component resolved to undefined.');
                 }
                 setDateTimePicker(() => component);
             }
             catch (err) {
-                console.error("Failed to load component:", err);
+                console.error('Failed to load component:', err);
             }
             finally {
                 setIsLoading(false);
@@ -45,63 +36,64 @@ const DatetimepickerWrapper = ({ props, variant, }) => {
         };
         loadComponents();
     }, []);
-    const handleToggle = () => {
+    // Stable toggle handler
+    const handleToggle = useCallback(() => {
         if (!open)
             inputTextRef.current?.blur();
         document.activeElement?.blur();
-        setOpen(!open);
-    };
+        setOpen((prev) => !prev);
+    }, [open]);
+    // Watch field value at component level so the sync effect below
+    // can live here instead of inside the Controller render prop
+    // (hooks must not be called conditionally or inside render callbacks).
+    const fieldValue = useWatch({ control: props.control, name: props.item.name });
+    // Sync derived date/time sub-fields whenever the combined value changes.
+    // Previously this useEffect was erroneously placed inside the Controller
+    // render prop, violating the rules of hooks.
+    useEffect(() => {
+        if (fieldValue && props.setValue) {
+            const dateObj = dayjs(fieldValue, displayFormat);
+            if (dateObj.isValid()) {
+                props.setValue(`${props.item.name}Date`, dateObj.format('DD/MM/YYYY'));
+                props.setValue(`${props.item.name}Time`, dateObj.format(timeFormat));
+            }
+        }
+    }, [fieldValue, props.item.name, props.setValue, displayFormat, timeFormat]);
     const isError = !!props.errors?.[props.item.name];
     if (isLoading) {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
-            // --- SYNC LOGIC FOR RESET / INITIAL VALUES ---
-            // This effect runs whenever the value in the form state changes
-            // eslint-disable-next-line react-hooks/rules-of-hooks
-            useEffect(() => {
-                if (field.value && props.setValue) {
-                    const dateObj = dayjs(field.value, displayFormat);
-                    if (dateObj.isValid()) {
-                        props.setValue(`${props.item.name}Date`, dateObj.format('DD/MM/YYYY'));
-                        props.setValue(`${props.item.name}Time`, dateObj.format(timeFormat));
-                    }
-                }
-            }, [field.value, props.item.name, props.setValue, displayFormat, timeFormat]);
-            return (jsxs(Fragment, { children: [DateTimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DateTimePicker, { views: ['year', 'month', 'day', 'hours', 'minutes'], ampm: isAmpm, format: displayFormat, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', value: field.value
-                                    ? dayjs(field.value, displayFormat).isValid()
-                                        ? dayjs(field.value, displayFormat)
-                                        : dayjs(field.value)
-                                    : null, className: 'read-only', open: open, onOpen: handleToggle, onClose: handleToggle, minDateTime: props?.item?.minDate ? dayjs(props?.item?.minDate, displayFormat) : undefined, maxDateTime: props?.item?.maxDate ? dayjs(props?.item?.maxDate, displayFormat) : undefined, disabled: props.item.disable || false, onChange: (date) => {
-                                    const formattedDateTime = dayjs(date).format(displayFormat);
-                                    field.onChange(formattedDateTime);
-                                    props?.item?.onChangeFn && props?.item?.onChangeFn(formattedDateTime);
-                                    props?.clearErrors && props?.clearErrors(props.item.name);
-                                }, slotProps: {
-                                    textField: {
-                                        onClick: () => handleToggle(),
-                                        inputRef: inputTextRef,
-                                        onBlur: (e) => props?.item?.onBlurFn && props?.item?.onBlurFn(e),
-                                        inputProps: {
-                                            style: { cursor: 'pointer' },
-                                            'aria-labelledby': `${props.item.name}-label`,
-                                        },
-                                        readOnly: true,
-                                        error: isError,
-                                        sx: {
-                                            '& .MuiFormLabel-root': { top: -10 },
-                                            '& .MuiInputLabel-shrink': { top: 0 },
-                                        },
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [DateTimePicker && (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DateTimePicker, { views: ['year', 'month', 'day', 'hours', 'minutes'], ampm: isAmpm, format: displayFormat, label: variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '', value: field.value
+                                ? dayjs(field.value, displayFormat).isValid()
+                                    ? dayjs(field.value, displayFormat)
+                                    : dayjs(field.value)
+                                : null, className: 'read-only', open: open, onOpen: handleToggle, onClose: handleToggle, minDateTime: props?.item?.minDate ? dayjs(props?.item?.minDate, displayFormat) : undefined, maxDateTime: props?.item?.maxDate ? dayjs(props?.item?.maxDate, displayFormat) : undefined, disabled: props.item.disable || false, onChange: (date) => {
+                                const formattedDateTime = dayjs(date).format(displayFormat);
+                                field.onChange(formattedDateTime);
+                                props?.item?.onChangeFn && props?.item?.onChangeFn(formattedDateTime);
+                                props?.clearErrors && props?.clearErrors(props.item.name);
+                            }, slotProps: {
+                                textField: {
+                                    onClick: handleToggle,
+                                    inputRef: inputTextRef,
+                                    onBlur: (e) => props?.item?.onBlurFn && props?.item?.onBlurFn(e),
+                                    inputProps: {
+                                        style: { cursor: 'pointer' },
+                                        'aria-labelledby': `${props.item.name}-label`,
+                                    },
+                                    readOnly: true,
+                                    error: isError,
+                                    sx: {
+                                        '& .MuiFormLabel-root': { top: -10 },
+                                        '& .MuiInputLabel-shrink': { top: 0 },
                                     },
-                                    desktopPaper: {
-                                        sx: {
-                                            '& .MuiPickersLayout-root': {
-                                                flexDirection: 'column',
-                                            }
-                                        }
+                                },
+                                desktopPaper: {
+                                    sx: {
+                                        '& .MuiPickersLayout-root': { flexDirection: 'column' },
                                     },
-                                } })] })), jsx(FormBottomField, { ...props })] }));
-        } }, props.item.name));
+                                },
+                            } })] })), jsx(FormBottomField, { ...props })] })) }, props.item.name));
 };
 
 export { DatetimepickerWrapper as default };

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

@@ -1,96 +1,82 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Box, TextField } from '@mui/material';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useMemo, useCallback } from 'react';
 import { useWatch } from 'react-hook-form';
 import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
+// Static lookup — defined once at module level, never recreated
+const EXTENSION_MAP = {
+    excel: ['xls', 'xlsx'],
+    pdf: ['pdf'],
+    zip: ['zip'],
+    image: ['jpg', 'jpeg', 'png'],
+    document: ['doc', 'docx', 'pdf'],
+    all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
+};
 const FormRenderFileUpload = ({ props, variant, }) => {
     const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
     const inputRef = useRef(null);
     const watched = useWatch({ control: props.control, name: props.item.name });
     useEffect(() => {
-        if (watched === null || watched === undefined) {
-            if (inputRef.current)
-                inputRef.current.value = '';
+        if ((watched === null || watched === undefined) && inputRef.current) {
+            inputRef.current.value = '';
         }
     }, [watched]);
-    const extensionMap = {
-        excel: ['xls', 'xlsx'],
-        pdf: ['pdf'],
-        zip: ['zip'],
-        image: ['jpg', 'jpeg', 'png'],
-        document: ['doc', 'docx', 'pdf'],
-        all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip'],
-    };
-    const getValidExtensions = () => {
+    // Derived once per fileType change — not on every render
+    const validExtensions = useMemo(() => {
         const fileType = props.item.fileType;
-        if (!fileType) {
-            return extensionMap.all;
-        }
+        if (!fileType)
+            return EXTENSION_MAP.all;
         if (Array.isArray(fileType)) {
-            // Check if array contains predefined keys (like 'image', 'pdf') or actual extensions
-            const hasPredefinedKeys = fileType.some((item) => extensionMap[item]);
+            const hasPredefinedKeys = fileType.some((t) => EXTENSION_MAP[t]);
             if (hasPredefinedKeys) {
-                // Merge extensions from all predefined keys
-                const extensions = new Set();
-                fileType.forEach((item) => {
-                    if (extensionMap[item]) {
-                        extensionMap[item].forEach((ext) => extensions.add(ext));
-                    }
-                    else {
-                        // Treat as direct extension
-                        extensions.add(item);
-                    }
+                const exts = new Set();
+                fileType.forEach((t) => {
+                    if (EXTENSION_MAP[t])
+                        EXTENSION_MAP[t].forEach((e) => exts.add(e));
+                    else
+                        exts.add(t);
                 });
-                return Array.from(extensions);
+                return Array.from(exts);
             }
-            // All items are direct extensions
             return fileType;
         }
-        return extensionMap[fileType] || extensionMap.all;
-    };
-    const getAcceptString = () => {
-        const extensions = getValidExtensions();
-        return extensions.map((ext) => `.${ext}`).join(',');
-    };
-    const accept = getAcceptString();
-    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputRef: inputRef, inputProps: {
+        return EXTENSION_MAP[fileType] ?? EXTENSION_MAP.all;
+    }, [props.item.fileType]);
+    const accept = useMemo(() => validExtensions.map((e) => `.${e}`).join(','), [validExtensions]);
+    const handleChange = useCallback((event) => {
+        const file = event.target?.files[0];
+        const fileName = file ? file.name : null;
+        const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : null;
+        if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'Name', '');
+            return;
+        }
+        if (file && file.size > (props.item.filesize || 20000000)) {
+            const maxSizeMB = ((props.item.filesize || 20000000) / (1024 * 1024)).toFixed(2);
+            props.item?.handleFileError?.(`File size should be less than ${maxSizeMB}MB`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'Name', '');
+            return;
+        }
+        console.log(props.item?.name, ':props.item?.name');
+        props.setValue(props.item.name, file);
+        props.setValue(props.item.name + 'Name', fileName);
+        props.clearErrors(props.item.name);
+        props.item.onChangeSetFileFn?.(file);
+    }, [validExtensions, props.item, props.setValue, props.clearErrors]);
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: '4px', sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px;' }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isError, inputRef: inputRef, inputProps: {
                             accept,
                             'aria-labelledby': `${props.item.name}-label`,
                             'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
                             'aria-required': props.item.required ? true : undefined,
-                        }, onChange: (event) => {
-                            const file = event.target?.files[0];
-                            const fileName = file ? file.name : null;
-                            const fileExtension = fileName ? fileName.split('.').pop().toLowerCase() : null;
-                            const validExtensions = getValidExtensions();
-                            if (props.item?.fileType && fileExtension && !validExtensions.includes(fileExtension)) {
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`Please upload ${validExtensions.join(', ')} files only`);
-                                event.target.value = ''; // Clear the file input\
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + 'Name', '');
-                                return;
-                            }
-                            else if (event.target.files[0].size > (props.item.filesize || 20000000)) {
-                                const maxSizeMB = ((props.item.filesize || 20000000) / (1024 * 1024)).toFixed(2);
-                                props.item?.handleFileError &&
-                                    props.item?.handleFileError(`File size should be less than ${maxSizeMB}MB`);
-                                event.target.value = ''; // Clear the file input
-                                props.setValue(props.item?.name, null);
-                                props.setValue(props.item?.name + 'Name', '');
-                                return;
-                            }
-                            console.log(props.item?.name, ':props.item?.name');
-                            props.setValue(props.item?.name, file);
-                            props.setValue(props.item?.name + 'Name', fileName);
-                            props.clearErrors(props.item?.name);
-                            props.item.onChangeSetFileFn &&
-                                props.item.onChangeSetFileFn(file);
-                        }, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
+                        }, onChange: handleChange, sx: { width: '100%' } })] }), jsx(FormBottomField, { ...props })] }));
 };
 
 export { FormRenderFileUpload as default };