tp-react-elements 2.0.7 → 3.0.0

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.esm4.js

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

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DateRange = {};
 
-export { Calendar as __exports };
+export { DateRange 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/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/FormRender.esm.js

@@ -1,13 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { lazy, Suspense } from 'react';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-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 require$$0__default, { lazy, Suspense } from 'react';
 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 +10,14 @@ 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 FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.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(() =>
@@ -161,6 +161,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/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 };