@codezee/sixtify-brahma 0.2.7 → 0.2.9

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerCollapse.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDrawerCollapse = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const OpenDrawerCollapse = ({ children, ...rest }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: "auto", unmountOnExit: true, ...rest, children: children }));
+};
+exports.OpenDrawerCollapse = OpenDrawerCollapse;

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItem.d.ts

@@ -0,0 +1,13 @@
+import type { SxProps, Theme } from "@mui/material";
+import { type MenuItemProps } from "../MenuItem";
+type OpenDrawerMenuItemProps = {
+    icon?: MenuItemProps["icon"];
+    title: MenuItemProps["title"];
+    isShowEndAdornment?: boolean;
+    selected?: MenuItemProps["selected"];
+    onClick: MenuItemProps["onClick"];
+    sx?: SxProps<Theme>;
+};
+export declare const OpenDrawerMenuItem: ({ icon, title, isShowEndAdornment, selected, onClick, sx, }: OpenDrawerMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=OpenDrawerMenuItem.d.ts.map

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenDrawerMenuItem.d.ts","sourceRoot":"","sources":["../../../src/Drawer/OpenDrawer/OpenDrawerMenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,KAAK,uBAAuB,GAAG;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gEAO5B,uBAAuB,4CAuBzB,CAAC"}

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDrawerMenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const Bullet_1 = require("../Bullet");
+const MenuItem_1 = require("../MenuItem");
+const OpenDrawerMenuItem = ({ icon = (0, jsx_runtime_1.jsx)(Bullet_1.Bullet, {}), title, isShowEndAdornment = false, selected = false, onClick, sx, }) => {
+    const theme = (0, material_1.useTheme)();
+    const { butterflyBlue } = theme.palette.app.color;
+    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+            bgcolor: selected && !isShowEndAdornment ? butterflyBlue[900] : "",
+        }, children: (0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { sx: sx, title: title, icon: icon, onClick: onClick, selected: selected, endAdornment: isShowEndAdornment && (selected ? (0, jsx_runtime_1.jsx)(icons_material_1.ExpandLess, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {})) }) }));
+};
+exports.OpenDrawerMenuItem = OpenDrawerMenuItem;

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItemList.d.ts

@@ -0,0 +1,23 @@
+import type { MenuItem } from "../Drawer";
+type OpenDrawerMenuItemListProps = {
+    menuItems: MenuItem[];
+    currentPathname: string;
+};
+export type NestedMenuState = {
+    [K in MenuItem["key"]]?: boolean | {
+        [SubK in MenuItem["key"]]?: boolean | NestedMenuState;
+    };
+};
+type MenuItemRecursiveProps = {
+    menuItem: MenuItem;
+    level?: number;
+    parentPath?: string;
+    subMenusOpen: NestedMenuState;
+    setSubMenusOpen: (value: NestedMenuState | ((prev: NestedMenuState) => NestedMenuState)) => void;
+    currentPathMenuOpen: NestedMenuState;
+};
+export declare const isMenuOpen: (state: NestedMenuState, path: string[]) => boolean;
+export declare const MenuItemRecursive: ({ menuItem, level, parentPath, subMenusOpen, setSubMenusOpen, currentPathMenuOpen, }: MenuItemRecursiveProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const OpenDrawerMenuItemList: ({ menuItems, currentPathname, }: OpenDrawerMenuItemListProps) => import("react/jsx-runtime").JSX.Element[];
+export {};
+//# sourceMappingURL=OpenDrawerMenuItemList.d.ts.map

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenDrawerMenuItemList.d.ts","sourceRoot":"","sources":["../../../src/Drawer/OpenDrawer/OpenDrawerMenuItemList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI1C,KAAK,2BAA2B,GAAG;IACjC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;KAC3B,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EACnB,OAAO,GACP;SACG,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,eAAe;KACtD;CACN,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,eAAe,CAAC;IAC9B,eAAe,EAAE,CACf,KAAK,EAAE,eAAe,GAAG,CAAC,CAAC,IAAI,EAAE,eAAe,KAAK,eAAe,CAAC,KAClE,IAAI,CAAC;IACV,mBAAmB,EAAE,eAAe,CAAC;CACtC,CAAC;AA4BF,eAAO,MAAM,UAAU,UAAW,eAAe,QAAQ,MAAM,EAAE,YAIhE,CAAC;AAEF,eAAO,MAAM,iBAAiB,yFAO3B,sBAAsB,wDAyFxB,CAAC;AAEF,eAAO,MAAM,sBAAsB,oCAGhC,2BAA2B,8CA6B7B,CAAC"}

package/packages/shared-components/dist/Drawer/OpenDrawer/OpenDrawerMenuItemList.js

@@ -0,0 +1,96 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenDrawerMenuItemList = exports.MenuItemRecursive = exports.isMenuOpen = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const lodash_1 = require("lodash");
+const react_1 = require("react");
+const urlToNestedObject_1 = require("../../utils/urlToNestedObject");
+const OpenDrawerCollapse_1 = require("./OpenDrawerCollapse");
+const OpenDrawerMenuItem_1 = require("./OpenDrawerMenuItem");
+const getNestedMenuState = (state, path) => {
+    if (path.length === 0) {
+        return false;
+    }
+    if (typeof state !== "object") {
+        return false;
+    }
+    const first = path[0];
+    if (!first) {
+        return false;
+    }
+    const rest = path.slice(1);
+    const nextState = state[first];
+    if (rest.length === 0) {
+        return Boolean(nextState);
+    }
+    return getNestedMenuState(nextState, rest);
+};
+const isMenuOpen = (state, path) => {
+    const value = getNestedMenuState(state, path);
+    return Boolean(value);
+};
+exports.isMenuOpen = isMenuOpen;
+const MenuItemRecursive = ({ menuItem, level = 0, parentPath = "", subMenusOpen, setSubMenusOpen, currentPathMenuOpen, }) => {
+    const theme = (0, material_1.useTheme)();
+    if (level === 3) {
+        return;
+    }
+    const { butterflyBlue, slate } = theme.palette.app.color;
+    const { key, icon, title, onClick, menuItems = [] } = menuItem;
+    const currentPath = parentPath ? `${parentPath}/${key}` : key;
+    const pathArray = currentPath.split("/");
+    const isMenuSelected = (0, exports.isMenuOpen)(subMenusOpen, pathArray);
+    const dynamicPadding = level * 3 + 1.5;
+    const handleClick = (target) => {
+        if (menuItems.length > 0) {
+            setSubMenusOpen((prev) => {
+                const newState = { ...prev };
+                let current = newState;
+                for (let i = 0; i < pathArray.length - 1; i++) {
+                    const segment = pathArray[i];
+                    if (!segment) {
+                        continue;
+                    }
+                    current[segment] =
+                        typeof current[segment] === "object" ? current[segment] : {};
+                    current = current[segment];
+                }
+                const lastSegment = pathArray[pathArray.length - 1];
+                if (lastSegment) {
+                    current[lastSegment] = !isMenuSelected;
+                }
+                return newState;
+            });
+        }
+        else if (onClick && !isMenuSelected) {
+            const path = key === "home" ? "/" : `/${currentPath}`;
+            onClick(path, target);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(OpenDrawerMenuItem_1.OpenDrawerMenuItem, { sx: {
+                    paddingLeft: dynamicPadding,
+                    ":focus-visible": {
+                        border: `1px solid ${butterflyBlue[900]}`,
+                        backgroundColor: slate[900],
+                    },
+                }, onClick: handleClick, icon: level === 0 ? icon : undefined, title: title, isShowEndAdornment: menuItems.length > 0 && level < 2, selected: isMenuSelected }), menuItems.length > 0 && ((0, jsx_runtime_1.jsx)(OpenDrawerCollapse_1.OpenDrawerCollapse, { in: isMenuSelected, children: (0, jsx_runtime_1.jsx)(material_1.List, { component: "div", disablePadding: true, children: menuItems.map((subMenuItem) => ((0, jsx_runtime_1.jsx)(exports.MenuItemRecursive, { menuItem: subMenuItem, level: level + 1, parentPath: currentPath, subMenusOpen: subMenusOpen, setSubMenusOpen: setSubMenusOpen, currentPathMenuOpen: currentPathMenuOpen }, subMenuItem.key))) }) }))] }, key));
+};
+exports.MenuItemRecursive = MenuItemRecursive;
+const OpenDrawerMenuItemList = ({ menuItems, currentPathname, }) => {
+    const [subMenusOpen, setSubMenusOpen] = (0, react_1.useState)({});
+    const [currentPathMenuOpen, setCurrentPathMenuOpen] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        const obj = (0, urlToNestedObject_1.urlToNestedObject)(currentPathname);
+        if ((0, lodash_1.isEmpty)(obj)) {
+            setSubMenusOpen({ home: true });
+            setCurrentPathMenuOpen({ home: true });
+            return;
+        }
+        setSubMenusOpen(obj);
+        setCurrentPathMenuOpen(obj);
+    }, [currentPathname]);
+    return menuItems.map((menuItem) => ((0, jsx_runtime_1.jsx)(exports.MenuItemRecursive, { menuItem: menuItem, subMenusOpen: subMenusOpen, setSubMenusOpen: setSubMenusOpen, currentPathMenuOpen: currentPathMenuOpen }, menuItem.key)));
+};
+exports.OpenDrawerMenuItemList = OpenDrawerMenuItemList;

package/packages/shared-components/dist/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Drawer";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/packages/shared-components/dist/Drawer/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Drawer"), exports);

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

@@ -0,0 +1,6 @@
+import type { FilterListType } from "./FilterTypeWrapper";
+export type FilterListProps = {
+    filterListItems: FilterListType[];
+};
+export declare const FilterList: ({ filterListItems }: FilterListProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterList.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAY1D,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,cAAc,EAAE,CAAC;CACnC,CAAC;AACF,eAAO,MAAM,UAAU,wBAAyB,eAAe,4CA0J9D,CAAC"}

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const FilterTypeWrapper_1 = require("./FilterTypeWrapper");
+const FilterPopup_1 = require("./FilterPopup");
+const FilterPopupWrapper_1 = require("./FilterPopupWrapper");
+const react_hook_form_1 = require("react-hook-form");
+const SvgFilterList_1 = require("../Svgs/SvgFilterList");
+const Button_1 = require("../Button");
+const Tooltip_1 = require("../Tooltip");
+const FilterPill_1 = require("../Chips/FilterPill");
+const getFormData_1 = require("./getFormData");
+const FilterList = ({ filterListItems }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const filterPopupAnchorElm = (0, react_1.useRef)(null);
+    const [openFilterPopup, setOpenFilterPopup] = (0, react_1.useState)(false);
+    const [filterListData, setFilterListData] = (0, react_1.useState)();
+    const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
+    const { control, handleSubmit, setValue, reset, watch } = (0, react_hook_form_1.useForm)();
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const onSubmit = (data) => {
+        setOpenFilterPopup(false);
+        setCurrentFilter(null);
+        handleClose();
+        setFilterListData(data);
+    };
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleCloseFilterPopup = () => {
+        setOpenFilterPopup(false);
+    };
+    const handleFilterItemClick = (filter) => {
+        setOpenFilterPopup(true);
+        setAnchorEl(null);
+        setCurrentFilter(filter);
+    };
+    const handlerReset = () => {
+        reset();
+        setFilterListData(undefined);
+    };
+    const handleDelete = (key) => {
+        setValue(`${key}`, null);
+        setFilterListData((prevData) => {
+            const newData = { ...prevData };
+            delete newData[key];
+            return newData;
+        });
+    };
+    const getFilterItem = (key) => {
+        return filterListItems.find((item) => item.key === key);
+    };
+    const currentFilterValue = currentFilter?.key
+        ? watch(currentFilter.key)
+        : null;
+    const open = Boolean(anchorEl);
+    const renderChips = (data) => {
+        return Object.entries(data).map(([key, value]) => {
+            if (!value) {
+                return;
+            }
+            const item = getFilterItem(key);
+            const keyValue = item && (0, getFormData_1.getFormValue)(value, item);
+            return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: filterPopupAnchorElm, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: `${keyValue}`, children: `${item?.label}: ${keyValue}` }), onDelete: () => handleDelete(key), onClick: (e) => {
+                    setOpenFilterPopup(true);
+                    filterPopupAnchorElm.current = e.currentTarget;
+                    const item = getFilterItem(key);
+                    if (item) {
+                        setCurrentFilter(item);
+                        handleFilterItemClick(item);
+                    }
+                } }, key));
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [filterListData && renderChips(filterListData), (0, jsx_runtime_1.jsx)(material_1.IconButton
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    , { 
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        ref: filterPopupAnchorElm, onClick: handleClick, sx: { height: "40px" }, children: (0, jsx_runtime_1.jsx)(SvgFilterList_1.SvgFilterList, {}) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => handlerReset(), variant: "text", children: "Clear Filter" })] }), (0, jsx_runtime_1.jsx)(FilterPopup_1.FilterPopup, { open: open, anchorEl: anchorEl, onClose: handleClose, onApply: () => {
+                    handleSubmit(onSubmit)();
+                }, children: filterListItems.map((filter) => ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => filter.type !== "switch" && handleFilterItemClick(filter), children: (0, jsx_runtime_1.jsx)(FilterTypeWrapper_1.FilterTypeWrapper, { filter: filter, control: control }) }, filter.key))) }), currentFilter && currentFilter.type !== "switch" && ((0, jsx_runtime_1.jsx)(FilterPopupWrapper_1.FilterPopupWrapper, { open: openFilterPopup, onClose: handleCloseFilterPopup, onApply: () => {
+                    handleSubmit(onSubmit)();
+                }, control: control, currentFilterValue: currentFilterValue, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter }))] }));
+};
+exports.FilterList = FilterList;

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

@@ -0,0 +1,14 @@
+import type { FieldValues } from "react-hook-form";
+import type { FilterListType } from "./FilterTypeWrapper";
+export type FilterListV2Props = {
+    filterListItems: FilterListType[];
+    isDisabled?: boolean;
+    filterListData?: FieldValues;
+    onApply: (data: FieldValues, isPopup?: boolean, key?: string) => void;
+    onChange: (data: FieldValues, isPopup: boolean) => void;
+    onClear: () => void;
+    resetFormBasedOnFields?: string;
+    dateKeys?: string[];
+};
+export declare const FilterListV2: ({ filterListItems, isDisabled, filterListData, onApply, onClear, onChange, dateKeys, }: FilterListV2Props) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterListV2.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterListV2.d.ts","sourceRoot":"","sources":["../../src/FilterList/FilterListV2.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAanD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,2FAQtB,iBAAiB,4CA+cnB,CAAC"}

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

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterListV2 = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const icons_1 = require("@mui/x-date-pickers/icons");
+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 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 Tooltip_1 = require("../Tooltip");
+const FilterPopupWrapper_1 = require("./FilterPopupWrapper");
+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 [openFilterPopup, setOpenFilterPopup] = (0, react_1.useState)(false);
+    const [currentFilter, setCurrentFilter] = (0, react_1.useState)(null);
+    const handleDateRange = (filter) => {
+        setCurrentFilter(filter);
+        setOpenFilterPopup(true);
+    };
+    const defaultValues = (0, react_1.useMemo)(() => {
+        return filterListItems.reduce((acc, item) => {
+            acc[item.key] = item.value ?? null;
+            return acc;
+        }, {});
+    }, [filterListData]);
+    const { control, handleSubmit, setValue, reset, formState: { dirtyFields }, watch, } = (0, react_hook_form_1.useForm)({
+        values: defaultValues,
+    });
+    const company_id = watch("company_id");
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleCloseFilterPopup = () => {
+        if (currentFilter?.key) {
+            setValue(`${currentFilter?.key}`, filterListData?.[currentFilter.key]);
+        }
+        setOpenFilterPopup(false);
+    };
+    const handlerReset = () => {
+        reset();
+        onClear();
+        handleClose();
+    };
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onSubmit = (data) => {
+        setOpenFilterPopup(false);
+        setCurrentFilter(null);
+        const filteredData = Object.fromEntries(Object.entries(data).filter(([, value]) => value && !(Array.isArray(value) && value.length === 0)));
+        onApply(filteredData, openFilterPopup, currentFilter?.key);
+    };
+    const handleDelete = (key) => {
+        setValue(`${key}`, null);
+        const newData = { ...filterListData };
+        delete newData[key];
+        onApply(newData, true, key);
+    };
+    const formData = (0, react_hook_form_1.useWatch)({ control });
+    const currentFilterValue = currentFilter?.key
+        ? watch(currentFilter.key)
+        : null;
+    (0, react_1.useEffect)(() => {
+        onChange(formData, openFilterPopup);
+    }, [formData, onChange]);
+    (0, react_1.useMemo)(() => {
+        if (company_id !== filterListData?.company_id && !openFilterPopup) {
+            filterListItems.forEach((item) => {
+                setValue(`${item.key}`, null);
+            });
+            setValue("company_id", company_id);
+        }
+    }, [company_id]);
+    const getFilterItem = (key) => {
+        return filterListItems.find((item) => item.key === key);
+    };
+    const open = Boolean(anchorEl);
+    const shouldFormSubmit = (0, react_1.useMemo)(() => {
+        return ((0, lodash_1.isEmpty)(dirtyFields) ||
+            Object.keys(formData).every((key) => !formData[key]));
+    }, [formData, dirtyFields]);
+    const renderChips = (data) => {
+        return Object.entries(data).map(([key, value]) => {
+            if (!value) {
+                return;
+            }
+            const item = getFilterItem(key);
+            const keyValue = item &&
+                (0, getFormData_1.getFormValue)(dateKeys?.includes(item?.key)
+                    ? luxon_1.DateTime.fromISO(value).toFormat(FormFields_1.dateFormats.dateWithEuropean)
+                    : value, item);
+            if (!keyValue) {
+                return;
+            }
+            return ((0, jsx_runtime_1.jsx)(FilterPill_1.FilterPill, { ref: filterPopupAnchorElm, label: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip
+                // eslint-disable-next-line sonarjs/no-base-to-string
+                , { 
+                    // eslint-disable-next-line sonarjs/no-base-to-string
+                    toolTipLabel: `${keyValue}`, children: `${item?.label}: ${keyValue}` }), onDelete: () => handleDelete(key), onClick: (e) => {
+                    setOpenFilterPopup(true);
+                    filterPopupAnchorElm.current = e.currentTarget;
+                    const item = getFilterItem(key);
+                    if (item) {
+                        setCurrentFilter(item);
+                    }
+                } }, key));
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { flexGrow: 1 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "flex-start", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", alignItems: "flex-start", sx: {
+                            maxWidth: {
+                                xs: "40vw",
+                                md: "45vw",
+                                lg: "57vw",
+                            },
+                        }, children: filterListData &&
+                            Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: {
+                                        minWidth: "60px",
+                                        marginTop: "8px",
+                                    }, children: "Filters:" }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", marginTop: "3px", alignItems: "center", sx: { flexWrap: "wrap", maxWidth: "100%" }, children: renderChips(filterListData) })] })) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [filterListData &&
+                                Object.values(filterListData).some((value) => value) && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => handlerReset(), variant: "text", children: "Clear Filter" })), !isDisabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleClick, sx: { height: "40px" }, children: (0, jsx_runtime_1.jsx)(SvgFilterList_1.SvgFilterList, {}) }))] })] }), (0, jsx_runtime_1.jsx)("form", { onSubmit: (e) => {
+                    e.preventDefault();
+                    if (!shouldFormSubmit) {
+                        handleSubmit((data) => {
+                            onSubmit(data);
+                            handleClose();
+                        })();
+                    }
+                }, onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        if (!shouldFormSubmit) {
+                            handleSubmit((data) => {
+                                onSubmit(data);
+                                handleClose();
+                            })();
+                        }
+                    }
+                }, children: (0, jsx_runtime_1.jsxs)(material_1.Drawer, { open: open, onClose: (_event, reason) => {
+                        if (reason === "backdropClick") {
+                            return;
+                        }
+                        handleClose();
+                    }, anchor: "right", sx: {
+                        zIndex: theme.zIndex.drawer + 2,
+                        "& .MuiPaper-root": {
+                            width: "350px",
+                        },
+                    }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "flex-end", sx: {
+                                background: iron[600],
+                            }, 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: {
+                                    "&.MuiAccordion-root.Mui-expanded": {
+                                        margin: "0 !important",
+                                    },
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMore, {}), "aria-controls": "panel1a-content", id: "panel1a-header", sx: {
+                                            flexDirection: "row-reverse",
+                                            "& MuiAccordionSummary-root.Mui-expanded": {
+                                                marginRight: "10px",
+                                                transform: "rotate(-90deg)",
+                                            },
+                                            "&.Mui-expanded": {
+                                                minHeight: "40px",
+                                                paddingY: "5px",
+                                            },
+                                            "& .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: {
+                                            background: slate[600],
+                                            borderRadius: "5px",
+                                            padding: "0px",
+                                        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: {
+                                                paddingLeft: "15px",
+                                                paddingY: "5px",
+                                                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;
+                                                }, 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: {
+                                                            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: () => {
+                    handleSubmit(onSubmit)();
+                }, control: control, anchorEl: filterPopupAnchorElm.current, filterItem: currentFilter, currentFilterValue: currentFilterValue }))] }));
+};
+exports.FilterListV2 = FilterListV2;

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

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from "react";
+import type { PopoverProps } from "@mui/material";
+import type { FilterListType } from "./FilterTypeWrapper";
+type FilterPopupProps = PropsWithChildren<PopoverProps> & {
+    onApply?: () => void;
+    showFooter?: boolean;
+    showDivider?: boolean;
+    title?: string;
+    background?: boolean;
+    filterItem?: FilterListType;
+    currentFilterValue?: string | string[] | null;
+};
+export declare const FilterPopup: ({ open, anchorEl, onClose, children, onApply, showDivider, showFooter, title, filterItem, 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

@@ -0,0 +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,gIAYrB,gBAAgB,4CA4GlB,CAAC"}

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

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 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 theme = (0, material_1.useTheme)();
+    const { slate } = theme.palette.app.color;
+    const [initialValue, setInitialValue] = (0, react_1.useState)(null);
+    const [isDisabled, setIsDisabled] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            if (!initialValue && !!currentFilterValue) {
+                const changedValue = filterItem?.multiSelect
+                    ? (0, lodash_1.sortBy)(currentFilterValue)
+                    : currentFilterValue;
+                setInitialValue(changedValue);
+            }
+        }
+        else {
+            setInitialValue(null);
+        }
+        if (!!currentFilterValue && !!initialValue) {
+            const isChanged = filterItem?.multiSelect
+                ? JSON.stringify((0, lodash_1.sortBy)(currentFilterValue)) !==
+                    JSON.stringify(initialValue)
+                : currentFilterValue !== initialValue;
+            setIsDisabled(!isChanged);
+        }
+    }, [open, currentFilterValue, initialValue, filterItem?.multiSelect]);
+    const handleApply = () => {
+        setInitialValue(null);
+        if ((0, lodash_1.isFunction)(onApply)) {
+            onApply();
+        }
+    };
+    const handleClose = () => {
+        setInitialValue(null);
+        if ((0, lodash_1.isFunction)(onClose)) {
+            onClose({}, "backdropClick");
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.Popover, { open: open, anchorEl: anchorEl, anchorOrigin: { vertical: "bottom", horizontal: "left" }, onClose: (_event, reason) => {
+            if (reason === "backdropClick") {
+                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: {
+                    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" }) }) }))] }));
+};
+exports.FilterPopup = FilterPopup;