tp-react-elements 1.2.15 → 1.3.1

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

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 DateInput = {};
 
-export { DayCell as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm7.js

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

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

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

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

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

@@ -1,5 +1,4 @@
 import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
-export { default as MonthPicker } from '../FormComponents/DatePicker/MonthPicker.esm.js';
 import Monthpickerrender from '../FormComponents/DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField.esm.js';
 

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

@@ -16,6 +16,7 @@ import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/F
 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';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>
@@ -107,9 +108,10 @@ const RenderForm = (props) => {
         // Radio group (single option)
         case 'radio-group':
             return jsx(FormRadioGroup, { props: props, variant: variant });
-        // Date picker
         case 'datepicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(DatepickerWrapperV2, { props: props, variant: variant }) }));
+        case 'datetimepicker':
+            return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(DatetimepickerWrapper, { props: props, variant: variant }) }));
         // Time picker
         case 'timepicker':
             return (jsx(Suspense, { fallback: jsx(LoadingFallback, {}), children: jsx(TimePickerFieldWrapper, { props: props, variant: variant }) }));

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

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

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

@@ -0,0 +1,107 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } 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 FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const DatetimepickerWrapper = ({ props, variant, }) => {
+    const inputTextRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [DateTimePicker, setDateTimePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const isAmpm = props.item.ampm !== false;
+    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.");
+                }
+                setDateTimePicker(() => component);
+            }
+            catch (err) {
+                console.error("Failed to load component:", err);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        loadComponents();
+    }, []);
+    const handleToggle = () => {
+        if (!open)
+            inputTextRef.current?.blur();
+        document.activeElement?.blur();
+        setOpen(!open);
+    };
+    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 },
+                                        },
+                                    },
+                                    desktopPaper: {
+                                        sx: {
+                                            '& .MuiPickersLayout-root': {
+                                                flexDirection: 'column',
+                                            }
+                                        }
+                                    },
+                                } })] })), jsx(FormBottomField, { ...props })] }));
+        } }, props.item.name));
+};
+
+export { DatetimepickerWrapper as default };

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

@@ -13,6 +13,7 @@ const Monthpickerrender = ({ props, variant, }) => {
     const [open, setOpen] = useState(false);
     const [DatePicker, setDatePicker] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
+    const [view, setView] = useState('month');
     useEffect(() => {
         const loadComponents = async () => {
             setIsLoading(true);
@@ -35,7 +36,7 @@ const Monthpickerrender = ({ props, variant, }) => {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
     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: ['month', 'year'], disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
+                                    `${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(),
                                         inputRef: ref,
@@ -45,10 +46,19 @@ const Monthpickerrender = ({ props, variant, }) => {
                                             style: { cursor: 'pointer' },
                                         },
                                     },
-                                }, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
+                                }, disableOpenPicker: props.item.disable, open: open, onOpen: () => {
+                                    setOpen(true);
+                                    setView('month');
+                                }, onClose: () => setOpen(false), defaultValue: field.value, onChange: (date) => {
                                     const formatted = dayjs(date).format('MM/YYYY');
                                     field.onChange(formatted);
                                     props.setValue(props.item.name, formatted);
+                                    if (view === 'month') {
+                                        setOpen(false);
+                                    }
+                                    else if (view === 'year') {
+                                        setView('month');
+                                    }
                                 }, sx: {
                                     '& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
                                         top: '-10px',

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

@@ -25,12 +25,12 @@ const FormTextAreaField = ({ props, variant, }) => {
     /**
      * Renders the textarea component with validation support
      */
-    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: {
+    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, fullWidth: true, size: "small", InputProps: {
                                         style: {
                                             border: 'none',
                                         },
                                     }, sx: {
-                                        ...props.item.sx,
+                                        ...props?.item?.sx,
                                     }, 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);

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

@@ -46,46 +46,46 @@ const PasswordField = ({ props, variant }) => {
     /**
      * Renders the password field component with visibility toggle
      */
-    return (jsx(Box, { position: 'relative', children: jsx(FormControl, { fullWidth: true, children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? 'text' : 'password', autoComplete: props.item?.InputProps?.autoComplete || 'off', placeholder: props.item.placeholder || '', ...field, label: label, sx: {
-                                width: '100%',
-                                '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
-                                    top: '-8px',
-                                },
-                            }, inputProps: {
-                                maxLength: props.item.maxLength || 100,
-                                /**
-                                 * Handles input events
-                                 * Calls custom onInputProps handler if provided
-                                 *
-                                 * @param {any} e - The input event object
-                                 */
-                                onInput: (e) => {
-                                    props.item.onInputProps && props.item.onInputProps(e);
-                                },
-                                /**
-                                 * Handles paste events
-                                 * Prevents paste action if configured
-                                 *
-                                 * @param {React.ClipboardEvent} e - The paste event object
-                                 */
-                                onPaste: (e) => {
-                                    if (props.item?.doNotAllowPaste) {
-                                        e.preventDefault();
-                                    }
-                                },
-                            }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
-                                position: 'absolute',
-                                right: '14px',
-                                top: variant === 'standard' ? '65%' : '45%',
-                                transform: 'translateY(-50%)',
-                                width: '25px',
-                            }, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
-                                    fontSize: '12px',
-                                    position: 'absolute',
-                                } })) : (jsx(VisibilityOff, { sx: {
-                                    fontSize: '12px',
-                                    position: 'absolute',
-                                } })) }), jsx(FormBottomField, { ...props })] })) }) }) }, props.item.name));
+    return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(Box, { sx: { position: 'relative' }, children: [renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? 'text' : 'password', autoComplete: props.item?.InputProps?.autoComplete || 'off', placeholder: props.item.placeholder || '', ...field, label: label, sx: {
+                                        width: '100%',
+                                        '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
+                                            top: '-8px',
+                                        },
+                                    }, inputProps: {
+                                        maxLength: props.item.maxLength || 100,
+                                        /**
+                                         * Handles input events
+                                         * Calls custom onInputProps handler if provided
+                                         *
+                                         * @param {any} e - The input event object
+                                         */
+                                        onInput: (e) => {
+                                            props.item.onInputProps && props.item.onInputProps(e);
+                                        },
+                                        /**
+                                         * Handles paste events
+                                         * Prevents paste action if configured
+                                         *
+                                         * @param {React.ClipboardEvent} e - The paste event object
+                                         */
+                                        onPaste: (e) => {
+                                            if (props.item?.doNotAllowPaste) {
+                                                e.preventDefault();
+                                            }
+                                        },
+                                    }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
+                                        position: 'absolute',
+                                        right: '14px',
+                                        top: variant === 'standard' ? '70%' : '45%',
+                                        transform: 'translateY(-50%)',
+                                        width: '25px',
+                                    }, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) : (jsx(VisibilityOff, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) })] }), jsx(FormBottomField, { ...props })] })) }) }) }, props.item.name));
 };
 
 export { PasswordField as default };

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

@@ -10,7 +10,7 @@ export { default as MultiSelectV1 } from './Select/MultiSelectv1';
 export { default as MultiSelectTable } from './Select/MultiSelectTable';
 export { FormCheckBoxGroup } from '../CheckBoxGroup';
 export { FormRadioGroup } from '../RadioGroup';
-export { DatepickerWrapperV2, MonthPicker, Monthpickerrender, YearPickerField, } from '../DatePicker';
+export { DatepickerWrapperV2, Monthpickerrender, YearPickerField, } from '../DatePicker';
 export { TimePicker } from '../TimePicker';
 export { FormRenderFileUpload, FormRenderMultiFileUpload } from '../FileUpload';
 export { RichTextEditor, RichTextEditorWrapper } from '../RichTextEditor';

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

@@ -12,7 +12,6 @@ export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
-export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';

package/dist/node_modules/prop-types/index.esm.js

@@ -1,4 +1,4 @@
-import { __module as propTypes } from '../../_virtual/index.esm9.js';
+import { __module as propTypes } from '../../_virtual/index.esm10.js';
 import { __require as requireReactIs } from './node_modules/react-is/index.esm.js';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.esm.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as accessibility } from '../../../../_virtual/index.esm10.js';
+import { __exports as accessibility } from '../../../../_virtual/index.esm9.js';
 import { __require as requirePropTypes } from '../../../prop-types/index.esm.js';
 
 var hasRequiredAccessibility;

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm5.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/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm12.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/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm12.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.esm5.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.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/InputRangeField/index.esm.js

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

package/dist/utils/Constants/date-pickers.d.ts

@@ -8,6 +8,7 @@
  * @returns DatePicker component
  */
 export declare const getDatePicker: () => Promise<any>;
+export declare const getDateTimePicker: () => Promise<any>;
 /**
  * Get LocalizationProvider component
  * @returns LocalizationProvider component
@@ -24,6 +25,7 @@ export declare const getAdapterDayjs: () => Promise<any>;
  */
 export declare const getTimePicker: () => Promise<any>;
 export declare const DatePicker: () => null;
+export declare const DateTimePicker: () => null;
 export declare const LocalizationProvider: () => null;
 export declare const AdapterDayjs: () => any;
 export declare const TimePicker: () => null;

package/dist/utils/Constants/date-pickers.esm.js

@@ -16,6 +16,14 @@ const getDatePicker = async () => {
     }
     return DatePickerCache;
 };
+let DateTimePickerCache = null;
+const getDateTimePicker = async () => {
+    if (!DateTimePickerCache) {
+        const module = await import('@mui/x-date-pickers/DateTimePicker');
+        DateTimePickerCache = module.DateTimePicker || module.default;
+    }
+    return DateTimePickerCache;
+};
 // Dynamic import for TimePicker component
 let TimePickerCache = null;
 /**
@@ -30,4 +38,4 @@ const getTimePicker = async () => {
     return TimePickerCache;
 };
 
-export { getDatePicker, getTimePicker };
+export { getDatePicker, getDateTimePicker, getTimePicker };

package/dist/utils/Interface/FormInterface.d.ts

@@ -11,7 +11,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/package.json

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

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

@@ -1,2 +0,0 @@
-declare const MonthPicker: ({ props }: any) => import("react/jsx-runtime").JSX.Element;
-export default MonthPicker;

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

@@ -1,59 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
-import { Controller } from 'react-hook-form';
-import { TextField, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-
-const MonthPicker = ({ props }) => {
-    const inputTextRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    const [selectedMonths, setSelectedMonths] = useState([]);
-    const handleToggle = () => {
-        if (!open) {
-            inputTextRef.current?.blur();
-        }
-        document.activeElement?.blur();
-        setOpen(!open);
-    };
-    const handleMonthChange = (date) => {
-        // Handle the selected months
-        setSelectedMonths((prevSelectedMonths) => {
-            const monthIndex = date.getMonth();
-            if (prevSelectedMonths.includes(monthIndex)) {
-                // If month is already selected, remove it
-                return prevSelectedMonths?.filter((month) => month !== monthIndex);
-            }
-            else {
-                // If month is not selected, add it
-                return [...prevSelectedMonths, monthIndex];
-            }
-        });
-    };
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(DatePicker, { value: field.value, onChange: handleMonthChange, open: open, onOpen: handleToggle, onClose: handleToggle, slots: {
-                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            textField: (textFieldProps) => (jsx(TextField, { ...textFieldProps, fullWidth: true, onClick: () => handleToggle(), inputRef: inputTextRef, disabled: props.item.disable || false, InputLabelProps: {
-                                    shrink: true,
-                                }, error: props.errors, inputProps: {
-                                    min: props.item.minDate,
-                                    readOnly: true,
-                                    style: { cursor: 'pointer' },
-                                } })),
-                        }, slotProps: {
-                            textField: {
-                                sx: {
-                                    '& .MuiFormLabel-root': {
-                                        top: -10,
-                                    },
-                                    '& .MuiInputLabel-shrink': {
-                                        top: 0,
-                                    },
-                                },
-                            },
-                        } }) }), jsx(FormGroup, { children: Array.from({ length: 12 }).map((_, index) => (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: selectedMonths.includes(index), onChange: () => handleMonthChange(new Date(2000, index, 1)), color: "primary" }), label: new Date(2000, index, 1).toLocaleDateString(undefined, {
-                            month: 'short',
-                        }) }, index))) })] })) }));
-};
-
-export { MonthPicker as default };