tp-react-elements 1.2.14 → 1.3.0

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -221,6 +221,7 @@ const useFormValidatingContext = (formArray) => {
                         return true; // Skip validation if no value is present
                     });
                 }
+                renderCustomError(field);
                 break;
             case 'select':
             case 'single-select-search':

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/FormNumberField/FormNumberField.esm.js

@@ -92,7 +92,9 @@ const FormNumberField = ({ props, variant }) => {
                              * Additional input properties for the TextField
                              * Controls input pattern, length restrictions, and additional input handling
                              */
-                            inputProps: {
+                            onInput: (e) => {
+                                props.item.onInputProps && props.item.onInputProps(e);
+                            }, inputProps: {
                                 pattern: '[0-9]*',
                                 maxLength: props.item.maxLength || 20,
                                 maxValue: props.item.maxValue || 9999999999,

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

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

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.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.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.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.14",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",