tp-react-elements 1.3.0 → 1.3.1

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var DateInput = {};
 
-export { InputRangeField 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/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/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/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/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.esm12.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "1.3.0",
+  "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 };