tp-react-elements-dev 1.12.21 → 1.12.22

package/dist/components/FormComponents/Select/MultiSelectv1.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, TextField, Tooltip } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import React__default, { useState } from 'react';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 3;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+            // width: 250,
+        },
+    },
+    autoFocus: false,
+    disableAutoFocusItem: true,
+};
+// const useStyles = makeStyles(() => ({
+//   option: {
+//     fontSize: "10px", // Adjust the font size as needed
+//   },
+//   option2: {
+//     fontSize: "11px",
+//   },
+// }));
+const extractValuesToArray = (inputString) => {
+    const valuesArray = inputString?.split(",");
+    const trimmedArray = valuesArray?.map((value) => value.trim());
+    return trimmedArray;
+};
+function MultiSelectV1({ props, variant, }) {
+    const [personName, setPersonName] = React__default.useState(props.getValues(props.item.name)
+        ? extractValuesToArray(props.getValues(props.item.name))
+        : []);
+    const [searchText, setSearchText] = useState("");
+    const options = props.item?.options || [];
+    const [filterOptions, setFilterOptions] = useState(props.item.options || []);
+    const [selectAll, setSelectAll] = useState(false);
+    const textfieldRef = React__default.useRef(null);
+    const fieldValue = props.getValues(props.item.name);
+    const mappedIds = filterOptions.map((item) => item.value);
+    const filterIds = filterOptions.map((item) => item.value);
+    React__default.useEffect(() => {
+        if (searchText !== "") {
+            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
+        }
+        else {
+            setFilterOptions(options);
+        }
+    }, [options, searchText]);
+    function hasExactMatch(array, value) {
+        return array.some((item) => item === value);
+    }
+    React__default.useEffect(() => {
+        if (fieldValue?.split(",").length !== filterOptions.length) {
+            setSelectAll(false);
+        }
+        else {
+            console.log(fieldValue?.split(","), 'fieldValue?.split(",")', filterIds);
+            if (fieldValue
+                ?.split(",")
+                .every((value) => hasExactMatch(filterIds, value))) {
+                setSelectAll(true);
+            }
+        }
+    }, [filterOptions, fieldValue]);
+    const handleChange = (event) => {
+        const { target: { value }, } = event;
+        setPersonName(typeof value === "string" ? value?.split(",") : value);
+        props.setValue(props.item.name, (typeof value === "string" ? value?.split(",") : value).join(","));
+    };
+    const selectedOptions = options.filter((item) => fieldValue?.split(",").some((value) => value === item.value));
+    const selectedValues = selectedOptions
+        .map((item) => item.label)
+        .join(" , ");
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Box, { children: jsxs(FormControl, { fullWidth: true, sx: {
+                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
+                    top: "-10px",
+                },
+                "& .MuiFormLabel-root": {
+                    top: -10,
+                },
+                "& .MuiInputLabel-shrink": {
+                    top: 0,
+                },
+            }, children: [renderLabel(variant, props), variant !== "standard" ? (jsxs(InputLabel, { error: isShowBorderError, id: "demo-multiple-checkbox-label", children: [props.item.label, props.item.required ? " *" : ""] })) : (""), jsxs(Select, { labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
+                        "& .MuiTypography-root": {
+                            fontSize: "5px !important",
+                        },
+                    }, error: isShowBorderError, disabled: props.item.disable, value: props.getValues(props.item.name)
+                        ? extractValuesToArray(props.getValues(props.item.name))
+                        : [], onChange: handleChange, onOpen: () => {
+                        setTimeout(() => {
+                            if (textfieldRef.current) {
+                                textfieldRef.current?.focus();
+                            }
+                        }, 0);
+                    }, onClose: () => {
+                        setSearchText("");
+                        props?.item?.onCloseMenu && props?.item?.onCloseMenu();
+                    }, input: jsx(OutlinedInput, { label: variant !== "standard" ? props.item.label : "" }), renderValue: (_selected) => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length >
+                                (props.item.multiSelectLabelLength || 3)
+                                ? `${selectedOptions.length} Selected`
+                                : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
+                                width: "100%",
+                                position: "sticky",
+                                top: "0px",
+                                padding: "7px",
+                                zIndex: 2,
+                                height: "33px",
+                                background: "#fff",
+                                display: options.length === 0 ? "none" : undefined,
+                            }, children: jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
+                                    width: "100%",
+                                }, placeholder: "Search...", onChange: (e) => {
+                                    setSearchText(e.target.value);
+                                }, onKeyDown: (e) => {
+                                    if (e.key !== "Escape") {
+                                        e.stopPropagation();
+                                    }
+                                } }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
+                                        setSelectAll(!selectAll);
+                                        const selectChanged = !selectAll;
+                                        if (!selectChanged) {
+                                            props.setValue(props.item.name, "");
+                                        }
+                                        else {
+                                            const allDataMapped = mappedIds.join(",");
+                                            console.log(allDataMapped, "allDataMapped");
+                                            props.setValue(props.item.name, allDataMapped);
+                                        }
+                                    } }), jsx(ListItemText, { primary: "Select All", sx: {
+                                        fontSize: "5px !important",
+                                        "& span": {
+                                            fontSize: "12px !important",
+                                        },
+                                    } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" }, children: [jsx(Checkbox, { checked: fieldValue
+                                        ?.split(",")
+                                        .some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
+                                        fontSize: "5px !important",
+                                        "& span": {
+                                            fontSize: "12px !important",
+                                        },
+                                    } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: "NA", children: "No data Found" }, "NA"))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
+}
+
+export { MultiSelectV1 as default };

package/dist/components/FormComponents/Select/SingleSelect.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const SingleSelect: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/Select/SingleSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/SingleSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,YAAY,GAAI,qBAGnB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA6FA,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SingleSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/SingleSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,YAAY,GAAI,qBAGnB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA6FA,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/FormComponents/Select/SingleSelect.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Autocomplete, Tooltip, TextField } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const SingleSelect = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError && !props.getValues(props.item.name);
+    const value = props.getValues(props.item.name)
+        ? props.item.options?.find((item) => item.value === props.getValues(props.item.name))
+        : null;
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, value: value, onChange: (_, newValue) => {
+                        props.setValue(props?.item?.name, newValue?.value);
+                        props?.item?.onChangeFn &&
+                            props?.item?.onChangeFn(newValue?.value);
+                        props?.clearErrors && props?.clearErrors(props?.item?.name);
+                    }, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, size: "small", sx: {
+                        "& .MuiAutocomplete-input": {
+                            padding: "0px 0px 0px 5px !important",
+                        },
+                        "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root": {
+                            top: "-3px",
+                        },
+                        "& .MuiAutocomplete-option": {
+                            fontSize: "11px",
+                            zIndex: 2000,
+                        },
+                        ...props.item.sx,
+                    }, ListboxProps: {
+                        onScroll: (event) => {
+                            const listboxNode = event.currentTarget;
+                            if (listboxNode.scrollTop + listboxNode.clientHeight ===
+                                listboxNode.scrollHeight) ;
+                        },
+                    }, disabled: props.item.disable, options: props.item.options || [], slotProps: {
+                        popper: {
+                            sx: {
+                                zIndex: 1401,
+                            },
+                        },
+                    }, renderInput: (params) => {
+                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== "standard"
+                                    ? `${props.item.label}${props.item.required ? " *" : ""}`
+                                    : "" }) }));
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { SingleSelect as default };

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const SingleSelectNonAutoComplete: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectNonAutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/SingleSelectNonAutoComplete.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAEpD,QAAA,MAAM,2BAA2B,GAAI,qBAGlC;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsDA,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"SingleSelectNonAutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/Select/SingleSelectNonAutoComplete.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAE9C,QAAA,MAAM,2BAA2B,GAAI,qBAGlC;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsDA,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/FormComponents/Select/SingleSelectNonAutoComplete.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const SingleSelectNonAutoComplete = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsxs(FormControl, { fullWidth: true, sx: {
+            position: "relative",
+            "& .MuiFormLabel-root": {
+                top: -10,
+            },
+            "& .MuiInputLabel-shrink": {
+                top: 0,
+            },
+        }, children: [renderLabel(variant, props), variant !== "standard" && (jsx(InputLabel, { error: isShowBorderError, id: "demo-simple-select-label", children: props.item.label })), jsx(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: props.getValues(props.item.name), label: variant !== "standard"
+                    ? `${props.item.label}${props.item.required ? " *" : ""}`
+                    : "", onChange: (e) => props.setValue(props.item.name, e.target.value), onBlur: (e) => {
+                    props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                }, error: isShowBorderError, children: (props.item.options || []).map((item) => (jsx(MenuItem, { sx: {
+                        fontSize: "11px", // Adjust the font size as needed
+                        zIndex: 2000,
+                    }, value: item.value, children: item.label }))) }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { SingleSelectNonAutoComplete as default };

package/dist/components/FormComponents/Select/SingleSelectSearchApi.js

@@ -0,0 +1,204 @@
+import { jsx } from 'react/jsx-runtime';
+
+// import { ErrorMessage } from "@hookform/error-message";
+// import {
+//   Autocomplete,
+//   Skeleton,
+//   Stack,
+//   TextField,
+//   Tooltip,
+//   Typography,
+// } from "@mui/material";
+// import { makeStyles } from "@mui/styles";
+// import React, { useEffect, useState } from "react";
+// import { Controller } from "react-hook-form";
+// import { ErrorMessageComponent, OptionRender } from "../Form.styles";
+// import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
+// const useStyles = makeStyles((theme) => ({
+//   option: {
+//     fontSize: "11px", // Adjust the font size as needed
+//   },
+//   option2: {
+//     fontSize: "14px",
+//   },
+// }));
+// const SingleSelectSearchApi = ({ props }: { props: FormRenderProps }) => {
+//   const classes = useStyles();
+//   const [searchValue, setSearchValue] = useState<string>("");
+//   const [optionsFetched, setOptionsFetched] = useState([]);
+//   const [isLoading, setIsLoading] = useState<boolean>(false);
+//   console.log(
+//     props.getValues(props.item.name),
+//     "props.getValues(props.item.name)"
+//   );
+//   useEffect(() => {
+//     const controller = new AbortController();
+//     const signal = controller.signal;
+//     if (props?.item?.autoFIll && props.getValues(props.item.name)) {
+//       setSearchValue(props.getValues(props.item.name));
+//       setOptionsFetched([]);
+//     } else if (props.getValues(props.item.name)) {
+//       setSearchValue(props.getValues(props.item.name));
+//     }
+//     // if(searchValue!==''){
+//     setIsLoading(true);
+//     props.item.AxiosInstance.get(
+//       props.item.ApiInstance + `&${props.item.searchInstance}=${searchValue}`,
+//       {
+//         signal,
+//         headers: {
+//           Authorization: `Bearer ${props.item.tokenInstance}`,
+//         },
+//       }
+//     )
+//       .then((res) => {
+//         setOptionsFetched(res.data);
+//         setIsLoading(false);
+//         props.item.setLoadedPaginationOptions &&
+//           props.item.setLoadedPaginationOptions(res.data);
+//       })
+//       .catch((err) => {
+//         console.log(err, "error");
+//       });
+//     return () => controller.abort();
+//     // }
+//   }, [
+//     searchValue,
+//     props.getValues(props.item.name),
+//     props.item.ApiInstance,
+//     props?.item?.autoFIll,
+//     props?.item?.tokenInstance
+//   ]);
+//   useEffect(() => {
+//     if (props.item?.ApiInstanceReferal) {
+//       setSearchValue("");
+//     }
+//   }, [props.item?.ApiInstanceReferal]);
+//   const isOptionEqualToValue = (option: any, value: any) =>
+//     option?.value === value?.value; // Assuming there's a 'value' property in your options
+//   return (
+//     <Controller
+//       control={props.control}
+//       name={props.item.name}
+//       render={({ field }) => (
+//         <>
+//           <Autocomplete
+//             {...field}
+//             value={
+//               props.getValues(props.item.name)
+//                 ? optionsFetched?.find(
+//                     (item) => item?.value === props.getValues(props.item.name)
+//                   )
+//                 : null
+//             }
+//             onChange={(_, newValue) => {
+//               // field.onChange(newValue);
+//               props.setValue(props.item.name, newValue?.value);
+//               props?.item?.onChangeFn &&
+//                 props?.item?.onChangeFn(newValue?.value);
+//               props?.clearErrors && props?.clearErrors(props.item.name);
+//             }}
+//             size="small"
+//             sx={{
+//               "& .MuiAutocomplete-input": {
+//                 padding: "0px 0px 0px 5px !important",
+//               },
+//               "& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root ": {
+//                 top: "-5px",
+//               },
+//             }}
+//             disabled={props.item.disable}
+//             options={optionsFetched}
+//             classes={{
+//               option:
+//                 props.item.size === "extrasmall"
+//                   ? classes.option
+//                   : classes.option2,
+//             }}
+//             getOptionLabel={(option) => option.label}
+//             renderInput={(params) => {
+//               return (
+//                 <Tooltip
+//                   title={params.inputProps.value && params.inputProps.value}
+//                 >
+//                   <TextField
+//                     {...params}
+//                     onChange={(e) => {
+//                       setSearchValue(e.target.value);
+//                     }}
+//                     placeholder={props.item.placeholder}
+//                     label={props.item.label}
+//                   />
+//                 </Tooltip>
+//               );
+//             }}
+//             PaperComponent={({ children }) => (
+//               <div
+//                 style={{
+//                   background: "#fff",
+//                 }}
+//               >
+//                 {isLoading ? (
+//                   <Stack padding={2} spacing={1}>
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                     <Skeleton
+//                       variant="rectangular"
+//                       width={"100%"}
+//                       height={20}
+//                     />
+//                   </Stack>
+//                 ) : (
+//                   children
+//                 )}
+//               </div>
+//             )}
+//             isOptionEqualToValue={isOptionEqualToValue}
+//           />
+//           {props?.item?.helperText && (
+//             <span
+//               style={{
+//                 fontSize: "11px",
+//                 color: "#3651d3",
+//               }}
+//             >
+//               ({props?.item?.helperText})
+//             </span>
+//           )}
+//           <ErrorMessageComponent>
+//             <ErrorMessage errors={props.errors} name={props.item.name} />
+//           </ErrorMessageComponent>
+//         </>
+//       )}
+//     />
+//   );
+// };
+// export default SingleSelectSearchApi;
+const SingleSelectSearchApi = () => {
+    return jsx("div", { children: "SingleSelectSearchApi" });
+};
+
+export { SingleSelectSearchApi as default };

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

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 export default function TimePickerFieldWrapper({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,2CA2EA"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,2CA2EA"}

package/dist/components/FormComponents/TimePicker/TimePicker.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ErrorMessage } from '@hookform/error-message';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { Controller } from 'react-hook-form';
+import { renderLabel, parseCustomTime, formatDayjsToCustomTime } from '../../../lib/Constants/FormConstants.js';
+import { ErrorMessageComponent } from '../../Form/Form.styles.js';
+
+function TimePickerFieldWrapper({ props, variant, }) {
+    const value = props.getValues(props.item.name);
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Controller, { name: "time", control: props.control, render: ({ field }) => (jsxs(Fragment, { children: [" ", renderLabel(variant, props), jsx(TimePicker, { ...field, value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
+                                const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
+                                const min = props.item.minTime
+                                    ? parseCustomTime(props.item.minTime)
+                                    : null;
+                                const max = props.item.maxTime
+                                    ? parseCustomTime(props.item.maxTime)
+                                    : null;
+                                let finalTime = parsedTime;
+                                if (min && parsedTime?.isBefore(min)) {
+                                    finalTime = min;
+                                }
+                                else if (max && parsedTime?.isAfter(max)) {
+                                    finalTime = max;
+                                }
+                                const formatted = formatDayjsToCustomTime(finalTime);
+                                props.setValue(props.item.name, formatted);
+                                props.item.onChangeFn && props.item.onChangeFn(formatted);
+                            }, minTime: props.item.minTime
+                                ? parseCustomTime(props.item.minTime) || undefined
+                                : undefined, maxTime: props.item.maxTime
+                                ? parseCustomTime(props.item.maxTime) || undefined
+                                : undefined, label: props.variant === "standard" ? "" : props.item.label, disabled: props.item.disable, slotProps: {
+                                textField: {
+                                    size: "small",
+                                    error: isShowBorderError,
+                                    inputProps: {
+                                        readOnly: true,
+                                    },
+                                    sx: {
+                                        "& .MuiFormLabel-root": {
+                                            top: -3,
+                                        },
+                                        "& .MuiInputLabel-shrink": {
+                                            top: 0,
+                                        },
+                                    },
+                                },
+                            } })] })) }), jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) })] }));
+}
+
+export { TimePickerFieldWrapper as default };

package/dist/components/FormComponents/YearPickerField/YearPickerField.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+
+// import FormBottomField from "../FormBottomField/FormBottomField";
+// import { Box, TextField } from "@mui/material";
+// import { LocalizationProvider } from "@mui/x-date-pickers";
+// import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+// import dayjs from "dayjs";
+// import DatePicker from "react-datepicker";
+// import { Controller } from "react-hook-form";
+// import { renderLabel } from "../../../Utilities/Constants/FormConstants";
+// import {
+//   FormRenderProps,
+//   VariantProps,
+// } from "../../../Utilities/Interface/FormInterface";
+// const YearPickerField = ({
+//   props,
+//   variant,
+// }: {
+//   props: FormRenderProps;
+//   variant: VariantProps;
+// }) => {
+//   return (
+//     <Controller
+//       control={props.control}
+//       name={props.item.name}
+//       key={props.item.name}
+//       render={({ field }) => (
+//         <>
+//           <LocalizationProvider dateAdapter={AdapterDayjs}>
+//             {renderLabel(variant, props)}
+//             <Box
+//               sx={{
+//                 "& .css-1holvmy, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root":
+//                   {
+//                     top: "-10px",
+//                   },
+//               }}
+//             >
+//               {" "}
+//               <DatePicker
+//                 views={["year"]}
+//                 value={
+//                   field.value
+//                     ? dayjs(field.value).format("YYYY-MM-DD")
+//                     : undefined
+//                 }
+//                 onChange={(date: any) => field.onChange(date)}
+//                 // minDate={}
+//                 slotProps={{
+//                   textField: {
+//                     label: `${props.item.label}${props.item.required ? " *" : ""}`,
+//                     variant: variant !== "standard" ? variant : undefined,
+//                   },
+//                 }}
+//                 slots={{
+//                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//                   textField: (textFieldProps: any) => (
+//                     <TextField
+//                       {...textFieldProps}
+//                       fullWidth
+//                       disabled={props.item.disable || false}
+//                       InputLabelProps={{
+//                         shrink: true,
+//                       }}
+//                     />
+//                   ),
+//                 }}
+//               />
+//             </Box>
+//           </LocalizationProvider>
+//           <FormBottomField {...props} />
+//         </>
+//       )}
+//     />
+//   );
+// };
+// export default YearPickerField;
+const YearPickerField = () => {
+    return jsx("div", { children: "YearPickerField" });
+};
+
+export { YearPickerField as default };

package/dist/components/FormComponents/index.js

@@ -0,0 +1,26 @@
+export { default as FormNumberField } from './FormNumberField/FormNumberField.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.js';
+export { default as FormTextField } from './FormTextField/FormTextField.js';
+export { default as PasswordField } from './PasswordField/PasswordField.js';
+export { default as MultiSelectV1 } from './Select/MultiSelectv1.js';
+export { default as SingleSelect } from './Select/SingleSelect.js';
+export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.js';
+export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.js';
+export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.js';
+export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.js';
+export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.js';
+export { default as MonthPicker } from './DatePicker/MonthPicker.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.js';
+export { default as TimePicker } from './TimePicker/TimePicker.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.js';
+export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.js';
+export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.js';
+export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.js';
+export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.js';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.js';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.js';
+export { default as HelperText } from './HelperText/HelperText.js';
+
+// Form Input Components - Individual form field components for advanced usage