tp-react-elements 1.2.9 → 1.2.12

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var DayCell = {};
+var DateInput = {};
 
-export { DayCell as __exports };
+export { DateInput 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.esm6.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
 import { d as distExports } from '../../_virtual/index.esm.js';
-import 'dayjs';
+import dayjs from 'dayjs';
 import { renderLabel } from '../../utils/Constants/FormConstants.esm.js';
 import FormBottomField from '../FormComponents/FormBottomField/FormBottomField.esm.js';
 import { Box, TextField, Popover } from '@mui/material';
@@ -89,12 +89,19 @@ const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, c
                         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') };
+                            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, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#4d73b1ff'] }) }), jsx(FormBottomField, { item,
+                    }, 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,

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

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

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

@@ -18,6 +18,7 @@ import DescriptionIcon from '@mui/icons-material/Description';
 const MultiFileWithPreview = ({ props, variant, }) => {
     const inputRef = useRef(null);
     const watched = useWatch({ control: props.control, name: props.item.name });
+    const watchedFile = useWatch({ control: props.control, name: props.item.name + 'File' });
     const [open, setOpen] = useState(false);
     const [selectedFiles, setSelectedFiles] = useState([]);
     const [currentFileIndex, setCurrentFileIndex] = useState(0);
@@ -37,41 +38,62 @@ const MultiFileWithPreview = ({ props, variant, }) => {
     // Determine if this is single or multiple file mode
     const isSingleFileMode = props.item.maxLength === 1;
     useEffect(() => {
-        if (watched === null || watched === undefined) {
+        const isWatchedEmpty = watched === null || watched === undefined || watched === '';
+        const isWatchedFileEmpty = watchedFile === null || watchedFile === undefined || (Array.isArray(watchedFile) && watchedFile.length === 0);
+        if (isWatchedEmpty && isWatchedFileEmpty) {
             if (inputRef.current)
                 inputRef.current.value = '';
+            setSelectedFiles([]);
+            return;
         }
-        const looksLikeUrl = (s) => /^(https?:|blob:|data:|\/)/i.test(s);
-        if (typeof watched === 'string' && watched.trim() !== '') {
-            const str = watched.replace(/\\/g, '/').trim();
-            if (looksLikeUrl(str)) {
-                setSelectedFiles([str]);
-            }
-        }
-        else if (Array.isArray(watched)) {
-            if (typeof watched[0] === 'object') {
-                // ✅ extract URLs from object arrays (image/url/path keys)
-                const urls = watched
-                    .map((item) => {
+        const looksLikeUrl = (s) => typeof s === 'string' && /^(https?:|blob:|data:|\/)/i.test(s);
+        let files = [];
+        // Check watchedFile first
+        if (Array.isArray(watchedFile) && watchedFile.length > 0) {
+            files = watchedFile.map(f => {
+                if (f instanceof File)
+                    return f;
+                if (typeof f === 'object' && f !== null) {
                     const possibleKeys = ['image', 'url', 'path', 'filePath'];
-                    const key = possibleKeys.find((k) => item[k]);
-                    return key ? item[key]?.replace(/\\/g, '/').trim() : undefined;
-                })
-                    .filter((f) => f && looksLikeUrl(f));
-                if (urls.length) {
-                    setSelectedFiles(urls);
+                    const key = possibleKeys.find((k) => f[k]);
+                    return key ? f[key]?.replace(/\\/g, '/').trim() : undefined;
                 }
-            }
-            else if (typeof watched[0] === 'string') {
-                const normalized = watched
-                    .map((f) => (f || '').toString().replace(/\\/g, '/').trim())
-                    .filter((f) => looksLikeUrl(f));
-                if (normalized.length) {
-                    setSelectedFiles(normalized);
+                if (typeof f === 'string') {
+                    return f.replace(/\\/g, '/').trim(); // trust watchedFile strings directly
                 }
+                return undefined;
+            }).filter(Boolean);
+        }
+        else if (typeof watchedFile === 'string' && watchedFile.trim() !== '') {
+            files = watchedFile.split(',').map(s => s.replace(/\\/g, '/').trim()).filter(Boolean);
+        }
+        // Fallback to watched if files array is empty
+        if (files.length === 0) {
+            if (typeof watched === 'string' && watched.trim() !== '') {
+                const parts = watched.split(',').map(s => s.replace(/\\/g, '/').trim());
+                files = parts.filter(p => looksLikeUrl(p));
             }
+            else if (Array.isArray(watched)) {
+                files = watched.map(item => {
+                    if (item instanceof File)
+                        return item;
+                    if (typeof item === 'object' && item !== null) {
+                        const possibleKeys = ['image', 'url', 'path', 'filePath'];
+                        const key = possibleKeys.find((k) => item[k]);
+                        return key ? item[key]?.replace(/\\/g, '/').trim() : undefined;
+                    }
+                    if (typeof item === 'string') {
+                        const str = item.replace(/\\/g, '/').trim();
+                        return looksLikeUrl(str) ? str : undefined;
+                    }
+                    return undefined;
+                }).filter(Boolean);
+            }
+        }
+        if (files.length > 0) {
+            setSelectedFiles(files);
         }
-    }, [watched]);
+    }, [watched, watchedFile]);
     const isError = !!props.errors?.[props.item.name];
     const extensionMap = {
         excel: ['xls', 'xlsx'],

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

@@ -21,9 +21,9 @@ const FormNumberFieldDecimal = ({ props, variant, }) => {
     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, onChange: (e) => {
+    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 === '' ? '' : sanitized;
+                        const value = sanitized === '' ? null : sanitized;
                         field.onChange(value);
                         props?.clearErrors && props?.clearErrors(props.item.name);
                     }, sx: {

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

@@ -22,23 +22,21 @@ import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
  * <FormTextAreaField props={formRenderProps} variant="outlined" />
  */
 const FormTextAreaField = ({ props, variant, }) => {
-    /**
-     * Determines if the field has an error based on form validation
-     */
-    const isError = !!props.errors?.[props.item.name];
-    const isShowBorderError = isError;
     /**
      * Renders the textarea component with validation support
      */
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? (field.value || '') : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? field.value || '' : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
                                         style: {
                                             border: 'none',
                                         },
                                     }, sx: {
                                         ...props.item.sx,
-                                    }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || 'Type Something...', ...field, label: variant !== 'standard'
+                                    }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || 'Type Something...', ...field, onChange: (e) => {
+                                        field.onChange(e);
+                                        props?.clearErrors && props?.clearErrors(props.item.name);
+                                    }, label: variant !== 'standard'
                                         ? `${props.item.label}${props.item.required ? ' *' : ''}`
-                                        : '', error: isShowBorderError, value: field.value || '', disabled: props.item.disable, inputProps: {
+                                        : '', error: !!fieldState.error, value: field.value || '', disabled: props.item.disable, inputProps: {
                                         /**
                                          * Handles input events with text restrictions
                                          *

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm11.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "1.2.9",
+  "version": "1.2.12",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",