@codezee/sixtify-brahma 0.2.29 → 0.2.31

package/packages/shared-components/dist/FilterList/FilterListV2.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterListV2 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const zod_1 = require("@hookform/resolvers/zod");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const icons_1 = require("@mui/x-date-pickers/icons");
@@ -9,36 +10,80 @@ const lodash_1 = require("lodash");
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const zod_2 = require("zod");
 const Button_1 = require("../Button");
 const FilterPill_1 = require("../Chips/FilterPill");
 const FormFields_1 = require("../FormFields");
 const Switch_1 = require("../FormFields/Switch");
 const PadBox_1 = require("../PadBox");
 const SvgFilterList_1 = require("../Svgs/SvgFilterList");
+const Toast_1 = require("../Toast");
 const Tooltip_1 = require("../Tooltip");
 const FilterPopupWrapper_1 = require("./FilterPopupWrapper");
+const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
 const getFormData_1 = require("./getFormData");
 const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onApply, onClear, onChange, dateKeys, }) => {
     const theme = (0, material_1.useTheme)();
     const { iron, slate } = theme.palette.app.color;
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const filterPopupAnchorElm = (0, react_1.useRef)(null);
+    const dateRangeAnchorRef = (0, react_1.useRef)(null);
     const [openFilterPopup, setOpenFilterPopup] = (0, react_1.useState)(false);
+    const [datePickerPopup, setDatePickerPopup] = (0, react_1.useState)(false);
     const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
+    const [expandedKeys, setExpandedKeys] = (0, react_1.useState)([]);
     const handleDateRange = (filter) => {
         setCurrentFilter(filter);
-        setOpenFilterPopup(true);
+        setDatePickerPopup(true);
     };
     const defaultValues = (0, react_1.useMemo)(() => {
         return filterListItems.reduce((acc, item) => {
-            acc[item.key] = item.value ?? null;
+            if (item.multiSelect || item.type === "dateRange") {
+                acc[item.key] = item.value || [];
+            }
+            else if (item.type === "switch") {
+                acc[item.key] = item.value || false;
+            }
+            else {
+                acc[item.key] = item.value || null;
+            }
             return acc;
         }, {});
     }, [filterListData]);
-    const { control, handleSubmit, setValue, reset, formState: { dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
+    const baseSchema = zod_2.z.object((() => {
+        const shape = {};
+        filterListItems.forEach((item) => {
+            if (item.multiSelect || item.type === "dateRange") {
+                shape[item.key] = zod_2.z.array(zod_2.z.string()).nullable().optional();
+            }
+            else if (item.type === "switch") {
+                shape[item.key] = zod_2.z.boolean().nullable().optional();
+            }
+            else {
+                shape[item.key] = zod_2.z.string().nullable().optional();
+            }
+        });
+        return shape;
+    })());
+    const validationSchema = baseSchema.superRefine((data, ctx) => {
+        filterListItems.forEach((item) => {
+            if (item.required && !data[item.key].length) {
+                ctx.addIssue({
+                    path: [item.key],
+                    message: `${item.label} is required`,
+                    code: zod_2.z.ZodIssueCode.custom,
+                });
+            }
+        });
+    });
+    const { control, handleSubmit, setValue, reset, formState: { errors, dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
         values: defaultValues,
+        resolver: (0, zod_1.zodResolver)(validationSchema),
+        mode: "all",
     });
     const company_id = watch("company_id");
+    const business_unit_id = watch("business_unit_id");
+    const department_id = watch("department_id");
     const handleClose = () => {
         setAnchorEl(null);
     };
@@ -48,6 +93,12 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
         }
         setOpenFilterPopup(false);
     };
+    const handleCloseDatePickerPopup = () => {
+        if (currentFilter?.key) {
+            setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
+        }
+        setDatePickerPopup(false);
+    };
     const handlerReset = () => {
         reset();
         onClear();
@@ -59,10 +110,26 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     const onSubmit = (data) => {
         setOpenFilterPopup(false);
         setCurrentFilter(null);
-        const filteredData = Object.fromEntries(Object.entries(data).filter(([, value]) => value && !(Array.isArray(value) && value.length === 0)));
+        const filteredData = Object.fromEntries(Object.entries(data).filter(([, value]) => value && !(Array.isArray(value) && !value.length)));
         onApply(filteredData, openFilterPopup, currentFilter?.key);
+        handleClose();
+    };
+    const handleDateRangeSubmit = () => {
+        setDatePickerPopup(false);
+    };
+    const onError = (error) => {
+        const errorKeys = Object.keys(error);
+        const tabsToExpand = filterListItems
+            .filter((filter) => filter.required && errorKeys.includes(filter.key))
+            .map((filter) => filter.key);
+        setExpandedKeys(tabsToExpand);
     };
     const handleDelete = (key) => {
+        const item = getFilterItem(key);
+        if (item?.required)
+            return Toast_1.toasts.error({
+                title: "This is a required custom filter field and cannot be removed.",
+            });
         setValue(`${key}`, null);
         const newData = { ...filterListData };
         delete newData[key];
@@ -70,7 +137,11 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     };
     const formData = (0, react_hook_form_1.useWatch)({ control });
     const currentFilterValue = currentFilter?.key
-        ? watch(currentFilter.key)
+        ? currentFilter.key === "switch"
+            ? watch(currentFilter.key)
+                ? "true"
+                : "false"
+            : watch(currentFilter.key)
         : null;
     (0, react_1.useEffect)(() => {
         onChange(formData, openFilterPopup);
@@ -83,6 +154,17 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
             setValue("company_id", company_id);
         }
     }, [company_id]);
+    (0, react_1.useMemo)(() => {
+        if (business_unit_id !== filterListData?.business_unit_id &&
+            !openFilterPopup) {
+            setValue("business_unit_location_id", null);
+        }
+    }, [business_unit_id]);
+    (0, react_1.useMemo)(() => {
+        if (department_id !== filterListData?.department_id && !openFilterPopup) {
+            setValue("sub_department_id", null);
+        }
+    }, [department_id]);
     const getFilterItem = (key) => {
         return filterListItems.find((item) => item.key === key);
     };
@@ -93,7 +175,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
     }, [formData, dirtyFields]);
     const renderChips = (data) => {
         return Object.entries(data).map(([key, value]) => {
-            if (!value) {
+            if (typeof value !== "boolean" && !value) {
                 return;
             }
             const item = getFilterItem(key);
@@ -101,7 +183,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                 (0, getFormData_1.getFormValue)(dateKeys?.includes(item?.key)
                     ? luxon_1.DateTime.fromISO(value).toFormat(FormFields_1.dateFormats.dateWithEuropean)
                     : value, item);
-            if (!keyValue) {
+            if (typeof value !== "boolean" && !keyValue) {
                 return;
             }
             return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: filterPopupAnchorElm, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
@@ -134,8 +216,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                     if (!shouldFormSubmit) {
                         handleSubmit((data) => {
                             onSubmit(data);
-                            handleClose();
-                        })();
+                        }, onError)();
                     }
                 }, onKeyDown: (e) => {
                     if (e.key === "Enter") {
@@ -143,8 +224,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                         if (!shouldFormSubmit) {
                             handleSubmit((data) => {
                                 onSubmit(data);
-                                handleClose();
-                            })();
+                            }, onError)();
                         }
                     }
                 }, children: (0, jsx_runtime_1.jsxs)(material_1.Drawer, { open: open, onClose: (_event, reason) => {
@@ -162,7 +242,11 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                             }, children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px 30px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Filter" }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
                                                     reset();
                                                     handleClose();
-                                                }, children: (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, sx: { overflowX: "hidden" }, children: filterListItems.map((filter) => filter.type === "switch" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "80%", sx: { padding: "10px 5px 10px 20px ", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { control: control, name: filter.key })] }, filter.key)) : ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: !!filterListData?.[filter.key], disabled: filter.isDisabled, sx: {
+                                                }, children: (0, jsx_runtime_1.jsx)(icons_1.ClearIcon, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { flexGrow: 1, sx: { overflowX: "hidden" }, children: filterListItems.map((filter) => filter.type === "switch" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "80%", sx: { padding: "10px 5px 10px 20px ", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { control: control, name: filter.key })] }, filter.key)) : ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: !!filterListData?.[filter.key], disabled: filter.isDisabled, expanded: expandedKeys.includes(filter.key), onChange: () => {
+                                    setExpandedKeys((prev) => prev.includes(filter.key)
+                                        ? prev.filter((k) => k !== filter.key)
+                                        : [...prev, filter.key]);
+                                }, sx: {
                                     "&.MuiAccordion-root.Mui-expanded": {
                                         margin: "0 !important",
                                     },
@@ -179,7 +263,7 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                                             "& .MuiAccordionSummary-content.Mui-expanded": {
                                                 margin: "0px",
                                             },
-                                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "90%", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.menuInfo })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { sx: {
+                                        }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", width: "90%", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.label }), filter.required && ((0, jsx_runtime_1.jsx)(material_1.Typography, { color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filter.menuInfo })] }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { sx: {
                                             background: slate[600],
                                             borderRadius: "5px",
                                             padding: "0px",
@@ -189,26 +273,29 @@ const FilterListV2 = ({ filterListItems, isDisabled = false, filterListData, onA
                                                 paddingRight: "15px",
                                             }, children: filter.type === "dateRange" ? ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "10px", onClick: (e) => {
                                                     handleDateRange(filter);
-                                                    filterPopupAnchorElm.current = e.currentTarget;
+                                                    dateRangeAnchorRef.current = e.currentTarget;
                                                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                                             border: "1px solid black",
                                                             borderRadius: "5px",
                                                             width: "150px",
                                                             p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (Array.isArray(filterListData?.["dateRange"]) &&
-                                                                filterListData?.["dateRange"][0]) ||
-                                                                "Start Date" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "~" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
+                                                                watch(filter.key)[0]
+                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[0]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
+                                                                : "Start Date" }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "~" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                                                             border: "1px solid black",
                                                             borderRadius: "5px",
                                                             width: "150px",
                                                             p: 1,
-                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: (Array.isArray(filterListData?.["dateRange"]) &&
-                                                                filterListData?.["dateRange"][1]) ||
-                                                                "End Date" }) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, FilterPopupWrapper_1.GetFilterPopupComponent)(filter, control)[filter.type] })) }) })] }, filter.key))) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%", position: "absolute", bottom: "70px" } }), (0, jsx_runtime_1.jsx)(material_1.Stack, { height: "70px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", sx: { position: "absolute", bottom: "15px" }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: shouldFormSubmit, variant: "contained", onClick: () => {
-                                                handleSubmit(onSubmit)();
-                                                handleClose();
-                                            }, children: "Apply" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: () => handlerReset(), disabled: Object.keys(formData).every((key) => !formData[key]), variant: "outlined", children: "Reset" })] }) }) })] }) }), currentFilter && currentFilter.type !== "switch" && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
+                                                        }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: Array.isArray(watch(filter.key)) &&
+                                                                watch(filter.key)[1]
+                                                                ? luxon_1.DateTime.fromISO(watch(filter.key)[1]).toFormat(FormFields_1.dateFormats.dateWithEuropean)
+                                                                : "End Date" }) })] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)(filter, control, errors)[filter.type] })) }) })] }, filter.key))) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%", position: "absolute", bottom: "70px" } }), (0, jsx_runtime_1.jsx)(material_1.Stack, { height: "70px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", sx: { position: "absolute", bottom: "15px" }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: shouldFormSubmit, variant: "contained", onClick: () => {
+                                                handleSubmit(onSubmit, onError)();
+                                            }, children: "Apply" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: () => handlerReset(), disabled: Object.keys(formData).every((key) => !formData[key]), variant: "outlined", children: "Reset" })] }) }) })] }) }), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
                     handleSubmit(onSubmit)();
-                }, control: control, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue }))] }));
+                }, control: control, errors: errors, reset: reset, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue })), currentFilter && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopUpDateRangeWrapper, { open: datePickerPopup, onClose: handleCloseDatePickerPopup, onApply: () => {
+                    handleDateRangeSubmit();
+                }, control: control, errors: errors, anchorEl: dateRangeAnchorRef.current, filterItem: currentFilter }))] }));
 };
 exports.FilterListV2 = FilterListV2;

package/packages/shared-components/dist/FilterList/FilterPopup.d.ts

@@ -1,15 +1,17 @@
-import { type PropsWithChildren } from "react";
 import type { PopoverProps } from "@mui/material";
+import { type PropsWithChildren } from "react";
 import type { FilterListType } from "./FilterTypeWrapper";
 type FilterPopupProps = PropsWithChildren<PopoverProps> & {
     onApply?: () => void;
     showFooter?: boolean;
     showDivider?: boolean;
     title?: string;
+    required?: boolean;
     background?: boolean;
     filterItem?: FilterListType;
     currentFilterValue?: string | string[] | null;
+    reset?: () => void;
 };
-export declare const FilterPopup: ({ open, anchorEl, onClose, children, onApply, showDivider, showFooter, title, filterItem, background, currentFilterValue, }: FilterPopupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopup: ({ open, anchorEl, onClose, children, onApply, showDivider, showFooter, title, required, filterItem, reset, background, currentFilterValue, }: FilterPopupProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterPopup.d.ts.map

package/packages/shared-components/dist/FilterList/FilterPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPopup.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAclD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,6HAYzB,gBAAgB,4CA4GlB,CAAC"}
+{"version":3,"file":"FilterPopup.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAWlD,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,KAAK,gBAAgB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,8IAczB,gBAAgB,4CAyHlB,CAAC"}

package/packages/shared-components/dist/FilterList/FilterPopup.js

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterPopup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 const material_1 = require("@mui/material");
+const lodash_1 = require("lodash");
+const react_1 = require("react");
 const Button_1 = require("../Button");
 const PadBox_1 = require("../PadBox");
-const lodash_1 = require("lodash");
-const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider = false, showFooter = true, title, filterItem, background = false, currentFilterValue, }) => {
+const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider = false, showFooter = true, title, required, filterItem, reset, background = false, currentFilterValue, }) => {
     const theme = (0, material_1.useTheme)();
     const { slate } = theme.palette.app.color;
     const [initialValue, setInitialValue] = (0, react_1.useState)(null);
@@ -44,6 +44,9 @@ const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider =
     };
     const handleClose = () => {
         setInitialValue(null);
+        if ((0, lodash_1.isFunction)(reset)) {
+            reset();
+        }
         if ((0, lodash_1.isFunction)(onClose)) {
             onClose({}, "backdropClick");
         }
@@ -53,10 +56,10 @@ const FilterPopup = ({ open, anchorEl, onClose, children, onApply, showDivider =
                 return;
             }
             handleClose();
-        }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: title }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        }, sx: { "& .MuiPaper-root": { minWidth: "300px" } }, children: [showDivider && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", children: [(0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "8px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", width: "100%", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: title }), required && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "error", children: "*" }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClose, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { width: "100%" } })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     background: background ? slate[600] : "transparent",
                     borderRadius: "5px",
                     maxWidth: "300px",
-                }, children: children }), showFooter && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleApply, disabled: isDisabled, variant: "text", sx: { maxWidth: "40px" }, children: "Apply" }) }) }))] }));
+                }, children: children }), showFooter && ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleApply, disabled: isDisabled, variant: "text", sx: { maxWidth: "40px" }, children: "Apply" }) }) }))] }));
 };
 exports.FilterPopup = FilterPopup;

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts

@@ -1,12 +1,20 @@
+import { type PopoverProps } from "@mui/material";
 import { type PropsWithChildren } from "react";
+import type { Control, FieldErrors, FieldValues } from "react-hook-form";
 import type { FilterListType } from "./FilterTypeWrapper";
-import { type PopoverProps } from "@mui/material";
-import type { Control, FieldValues } from "react-hook-form";
 type FilterPopupWrapperProp = PropsWithChildren<PopoverProps> & {
     filterItem: FilterListType;
     control: Control<FieldValues>;
+    errors: FieldErrors<FieldValues>;
     currentFilterValue?: string | string[] | null;
     onApply: () => void;
+    reset?: () => void;
+};
+type FilterDateRangePickerWrapperProp = PropsWithChildren<PopoverProps> & {
+    filterItem: FilterListType;
+    control: Control<FieldValues>;
+    errors: FieldErrors<FieldValues>;
+    onApply: () => void;
 };
 export type FilterPopupComponentType = {
     autoComplete?: JSX.Element;
@@ -17,7 +25,7 @@ export type FilterPopupComponentType = {
     switch?: JSX.Element;
     radio?: JSX.Element;
 };
-export declare const GetFilterPopupComponent: (selectedFilter: FilterListType, control: Control<FieldValues>) => FilterPopupComponentType;
-export declare const FilterPopupWrapper: ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }: FilterPopupWrapperProp) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopupWrapper: ({ open, anchorEl, filterItem, onClose, control, errors, onApply, currentFilterValue, reset, }: FilterPopupWrapperProp) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterPopUpDateRangeWrapper: ({ open, anchorEl, filterItem, onClose, control, errors, onApply, }: FilterDateRangePickerWrapperProp) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterPopupWrapper.d.ts.map

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPopupWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopupWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAO1D,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG5D,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAC9D,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,gBAAgB,cAAc,EAC9B,SAAS,OAAO,CAAC,WAAW,CAAC,KAC5B,wBAkDF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gFAQhC,sBAAsB,4CAmBxB,CAAC"}
+{"version":3,"file":"FilterPopupWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterPopupWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,KAAK,sBAAsB,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IAC9D,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF,KAAK,gCAAgC,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG;IACxE,UAAU,EAAE,cAAc,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,+FAUhC,sBAAsB,4CAmCxB,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,oEAQzC,gCAAgC,4CAkBlC,CAAC"}

package/packages/shared-components/dist/FilterList/FilterPopupWrapper.js

@@ -1,31 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterPopupWrapper = exports.GetFilterPopupComponent = void 0;
+exports.FilterPopUpDateRangeWrapper = exports.FilterPopupWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const FilterPopup_1 = require("./FilterPopup");
-const FormFields_1 = require("../FormFields");
 const material_1 = require("@mui/material");
+const FormFields_1 = require("../FormFields");
 const PadBox_1 = require("../PadBox");
-const GetFilterPopupComponent = (selectedFilter, control) => {
-    const theme = (0, material_1.useTheme)();
-    const { sapphireBlue, black } = theme.palette.app.color;
-    return {
-        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: `Select ${selectedFilter.label}`, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], sx: {
-                maxHeight: "250px",
-                overflowY: "auto",
-                width: "100%",
-                "& .MuiAutocomplete-tag": {
-                    backgroundColor: sapphireBlue[300],
-                    color: black[900],
-                },
-            } })),
-        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: selectedFilter.label })),
-        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
-        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled })),
-    };
-};
-exports.GetFilterPopupComponent = GetFilterPopupComponent;
-const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, onApply, currentFilterValue, }) => {
-    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, exports.GetFilterPopupComponent)(filterItem, control)[filterItem.type] }) }));
+const DateRangePickerPopUp_1 = require("./DateRangePickerPopUp");
+const FilterPopup_1 = require("./FilterPopup");
+const GetFilterPopupComponent_1 = require("./GetFilterPopupComponent");
+const FilterPopupWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, currentFilterValue, reset, }) => {
+    return ((0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { title: filterItem.label, required: filterItem.required, filterItem: filterItem, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, currentFilterValue: currentFilterValue, reset: reset, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsxs)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: [(0, GetFilterPopupComponent_1.getFilterPopupComponent)(filterItem, control, errors)[filterItem.type], filterItem.type === "switch" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { padding: "10px 5px 10px 20px", margin: "auto" }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: filterItem.label }), (0, jsx_runtime_1.jsx)(FormFields_1.Switch, { control: control, name: filterItem.key })] }, filterItem.key))] }) }));
 };
 exports.FilterPopupWrapper = FilterPopupWrapper;
+const FilterPopUpDateRangeWrapper = ({ open, anchorEl, filterItem, onClose, control, errors, onApply, }) => {
+    return ((0, jsx_runtime_1.jsx)(DateRangePickerPopUp_1.DateRangePickerPopUp, { title: filterItem.label, required: filterItem.required, open: open, onClose: onClose, anchorEl: anchorEl, onApply: onApply, showFooter: true, showDivider: true, background: true, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, GetFilterPopupComponent_1.getFilterPopupComponent)(filterItem, control, errors)[filterItem.type] }) }));
+};
+exports.FilterPopUpDateRangeWrapper = FilterPopUpDateRangeWrapper;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts

@@ -15,6 +15,7 @@ export type FilterListType = {
     menuInfo?: string;
     options?: Options;
     multiSelect?: boolean;
+    required?: boolean;
 };
 type FilterTypeWrapperProps = {
     filter: FilterListType;

package/packages/shared-components/dist/FilterList/FilterTypeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterTypeWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterTypeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE5D,MAAM,MAAM,mBAAmB,GAC3B,cAAc,GACd,MAAM,GACN,MAAM,GACN,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,KAAK,OAAO,GAAG,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,EAAE,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,4CAoBxB,CAAC"}
+{"version":3,"file":"FilterTypeWrapper.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterTypeWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG5D,MAAM,MAAM,mBAAmB,GAC3B,cAAc,GACd,MAAM,GACN,MAAM,GACN,WAAW,GACX,UAAU,GACV,OAAO,GACP,QAAQ,CAAC;AAEb,KAAK,OAAO,GAAG,SAAS;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,EAAE,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,sBAG/B,sBAAsB,4CAqBxB,CAAC"}

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.d.ts

@@ -0,0 +1,5 @@
+import { Control, FieldErrors, FieldValues } from "react-hook-form";
+import { FilterPopupComponentType } from "./FilterPopupWrapper";
+import { FilterListType } from "./FilterTypeWrapper";
+export declare const getFilterPopupComponent: (selectedFilter: FilterListType, control: Control<FieldValues>, errors: FieldErrors<FieldValues>) => FilterPopupComponentType;
+//# sourceMappingURL=GetFilterPopupComponent.d.ts.map

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GetFilterPopupComponent.d.ts","sourceRoot":"","sources":["../../src/FilterList/GetFilterPopupComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAOpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,eAAO,MAAM,uBAAuB,GAClC,gBAAgB,cAAc,EAC9B,SAAS,OAAO,CAAC,WAAW,CAAC,EAC7B,QAAQ,WAAW,CAAC,WAAW,CAAC,KAC/B,wBA4DF,CAAC"}

package/packages/shared-components/dist/FilterList/GetFilterPopupComponent.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilterPopupComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const FormFields_1 = require("../FormFields");
+const getFilterPopupComponent = (selectedFilter, control, errors) => {
+    const theme = (0, material_1.useTheme)();
+    const { sapphireBlue, black } = theme.palette.app.color;
+    const errorSelectedKey = errors[selectedFilter.key];
+    return {
+        autoComplete: selectedFilter.options && ((0, jsx_runtime_1.jsx)(FormFields_1.Autocomplete, { disableClearable: true, multiple: selectedFilter.multiSelect ?? false, placeholder: `Select ${selectedFilter.label}`, name: `${selectedFilter.key}`, disabled: selectedFilter.isDisabled, shouldCloseOnSelect: selectedFilter.multiSelect ?? false, control: control, options: selectedFilter.options ?? [], sx: {
+                maxHeight: "250px",
+                overflowY: "auto",
+                width: "100%",
+                "& .MuiAutocomplete-tag": {
+                    backgroundColor: sapphireBlue[300],
+                    color: black[900],
+                },
+            }, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        text: ((0, jsx_runtime_1.jsx)(FormFields_1.TextField, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, placeholder: selectedFilter.label, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        date: ((0, jsx_runtime_1.jsx)(FormFields_1.DatePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+        dateRange: ((0, jsx_runtime_1.jsx)(FormFields_1.DateRangePicker, { name: selectedFilter.key, control: control, disabled: selectedFilter.isDisabled, error: !!errorSelectedKey, helperText: errorSelectedKey?.message })),
+    };
+};
+exports.getFilterPopupComponent = getFilterPopupComponent;

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAiEzB"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;CAChB,CAAC;AAEJ,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,GACN,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkEzB"}

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = DateRangePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = require("react");
 const react_date_range_1 = require("react-date-range");
 const react_hook_form_1 = require("react-hook-form");
 const Skeleton_1 = require("./Skeleton");
-const react_1 = require("react");
 function DateRangePicker({ control, defaultValue, disabled = false, label, name, error = false, helperText, loading = false, required = false, rules, }) {
     const { field: { onChange }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [range, setRange] = (0, react_1.useState)([
@@ -35,5 +35,5 @@ function DateRangePicker({ control, defaultValue, disabled = false, label, name,
                         const endDate = new Date(selectedRange.endDate.toUTCString()).toISOString();
                         onChange([startDate, endDate]);
                     }
-                }, months: 2, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true }), error && (0, jsx_runtime_1.jsx)("span", { style: { color: "red" }, children: helperText })] }));
+                }, months: 1, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true }), error && (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "red", children: helperText })] }));
 }

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts

@@ -1,4 +1,4 @@
-import type { FieldValues, UseControllerProps, UseFormSetError } from "react-hook-form";
+import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
     multiple?: boolean;
     loading?: boolean;
@@ -11,7 +11,11 @@ export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
     accept?: string;
     fileNames: JSX.Element;
     acceptTitle?: string;
-    setError?: UseFormSetError<FieldValues>;
+    setError: (name: keyof P, error: FieldError | {
+        type: string;
+        message?: string;
+    }) => void;
 };
-export declare function FileUpload<P extends FieldValues>({ loading, onChange, isDisabled, multiple, error, helperText, label, fileNames, size, setError, accept, acceptTitle, ...restProps }: FileUploadProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare const error_with_transaltion = "error_with_transaltion";
+export declare function FileUpload<P extends FieldValues>({ loading, onChange, isDisabled, multiple, error, helperText, label, fileNames, size, name, setError, accept, acceptTitle, ...restProps }: FileUploadProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FileUpload.d.ts.map

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,QAAQ,EACR,MAA0C,EAC1C,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6GpB"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA0C,EAC1C,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA6GpB"}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.error_with_transaltion = void 0;
 exports.FileUpload = FileUpload;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
@@ -11,7 +12,8 @@ const Svgs_1 = require("../../Svgs");
 const utils_1 = require("../../utils");
 const FileUpload_styled_1 = require("./FileUpload.styled");
 const Skeleton_1 = require("./Skeleton");
-function FileUpload({ loading = false, onChange, isDisabled, multiple = false, error, helperText, label, fileNames, size = 10, setError, accept = ".png,.jpg,.jpeg,.doc,.docx,.pdf", acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
+exports.error_with_transaltion = "error_with_transaltion";
+function FileUpload({ loading = false, onChange, isDisabled, multiple = false, error, helperText, label, fileNames, size = 10, name, setError, accept = ".png,.jpg,.jpeg,.doc,.docx,.pdf", acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
     const theme = (0, material_1.useTheme)();
     const { red } = theme.palette.app.color;
     const { t } = (0, react_i18next_1.useTranslation)();
@@ -42,8 +44,8 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, e
             }
             if (isShowError) {
                 if ((0, lodash_1.isFunction)(setError)) {
-                    setError("document_url", {
-                        type: "custom",
+                    setError(name, {
+                        type: exports.error_with_transaltion,
                         message: inValidFiles.join("\n"),
                     });
                 }

package/packages/shared-components/dist/Layouts/FormRow/FormRow.styled.js

@@ -15,7 +15,7 @@ function calculateWidth(childrenCount, fullWidth, maxColumn) {
 }
 exports.RowContainerStyled = (0, styles_1.styled)(material_1.Stack, {
     shouldForwardProp(prop) {
-        return prop !== "fullWidth";
+        return prop !== "fullWidth" && prop !== "maxColumn";
     },
 })(({ children, fullWidth, maxColumn, }) => {
     const childrenCount = react_1.Children.toArray(children).length;

package/packages/shared-components/dist/Svgs/SvgExport.d.ts

@@ -0,0 +1,3 @@
+import type { SvgIconProps } from "@mui/material";
+export declare const SvgExport: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgExport.d.ts.map

package/packages/shared-components/dist/Svgs/SvgExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgExport.d.ts","sourceRoot":"","sources":["../../src/Svgs/SvgExport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,eAAO,MAAM,SAAS,GAAI,OAAO,YAAY,4CA8B5C,CAAC"}

package/packages/shared-components/dist/Svgs/SvgExport.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgExport = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SvgExport = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: (0, jsx_runtime_1.jsxs)("g", { id: "Communication / Share_iOS_Export", children: [(0, jsx_runtime_1.jsx)("rect", { x: "0.5", y: "0.5", width: "33", height: "33", rx: "3.5", stroke: "#BCBFC2" }), (0, jsx_runtime_1.jsx)("path", { id: "Vector", d: "M14 11L17 8M17 8L20 11M17 8V18M12.0002 15C11.0683 15 10.6024 15 10.2349 15.1522C9.74481 15.3552 9.35523 15.7448 9.15224 16.2349C9 16.6024 9 17.0681 9 18V22.8C9 23.9201 9 24.4798 9.21799 24.9076C9.40973 25.2839 9.71547 25.5905 10.0918 25.7822C10.5192 26 11.079 26 12.1969 26H21.8036C22.9215 26 23.4805 26 23.9079 25.7822C24.2842 25.5905 24.5905 25.2839 24.7822 24.9076C25 24.4802 25 23.921 25 22.8031V18C25 17.0681 24.9999 16.6024 24.8477 16.2349C24.6447 15.7448 24.2554 15.3552 23.7654 15.1522C23.3978 15 22.9319 15 22 15", stroke: "#4C5D70", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })] }) }));
+};
+exports.SvgExport = SvgExport;

package/packages/shared-components/dist/Svgs/SvgImport.d.ts

@@ -0,0 +1,3 @@
+import type { SvgIconProps } from "@mui/material";
+export declare const SvgImport: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SvgImport.d.ts.map