@erpsquad/common 1.8.44 → 1.8.46

package/dist/components/reports-title-bar/reports-title-bar/index.esm.js

@@ -1,735 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import Button from "../../button/button/index.esm.js";
-import { Typography } from "../../typography/typography/index.esm.js";
-/* empty css                                  */
-import TitleDropdownButton from "../../title-dropdown-button/title-dropdown-button/index.esm.js";
-import React__default, { useState, useRef, useEffect } from "react";
-import default_1 from "../../../node_modules/@mui/icons-material/KeyboardArrowDown/index.esm.js";
-import { generateFields } from "../../../utils/common/index.esm.js";
-import ReportButtons from "../report-buttons/report-buttons/index.esm.js";
-import TabBar from "../../tabs/tabs/index.esm.js";
-import { images } from "../../../images/index.esm.js";
-import { RANGE, handleCompareDateRange } from "../../../utils/date-range/index.esm.js";
-import { DateRange, Calendar as Calendar$1 } from "react-date-range";
-import dayjs from "dayjs";
-import { useAppDispatch } from "../../../redux/hooks/index.esm.js";
-import { fetchCompanies } from "../redux/actionCreator/index.esm.js";
-import SearchableSelect from "../../searchable-select/index.esm.js";
-import Checkbox from "../../checkbox/checkbox/index.esm.js";
-import { useTranslation } from "react-i18next";
-import { enUS } from "date-fns/locale";
-import Menu from "../../../node_modules/@mui/material/Menu/Menu/index.esm.js";
-import MenuItem from "../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
-import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
-import { Export } from "../../icons/export/index.esm.js";
-import { Filter } from "../../icons/filter/index.esm.js";
-import Divider from "../../../node_modules/@mui/material/Divider/Divider/index.esm.js";
-import ButtonGroup from "../../../node_modules/@mui/material/ButtonGroup/ButtonGroup/index.esm.js";
-import Button$1 from "../../../node_modules/@mui/material/Button/Button/index.esm.js";
-import { Calendar } from "../../icons/calendar/index.esm.js";
-import Popper from "../../../node_modules/@mui/material/Popper/Popper/index.esm.js";
-import Grow from "../../../node_modules/@mui/material/Grow/Grow/index.esm.js";
-import Paper from "../../../node_modules/@mui/material/Paper/Paper/index.esm.js";
-import { ClickAwayListener } from "../../../node_modules/@mui/material/ClickAwayListener/ClickAwayListener/index.esm.js";
-const ReportsTitleBar = (props) => {
-  var _a;
-  const {
-    title,
-    handleAddButton,
-    buttons = [],
-    dropdownMenuButtonData,
-    isTitleMenu = false,
-    titleMenus = [],
-    reportFilterFields = [],
-    toggleCallback,
-    tabs,
-    activeValue,
-    setActiveValue,
-    isDateFilterEnabled = true,
-    onDateFilterChange,
-    // showCancelButton,
-    filters = {},
-    isDateRange = true,
-    showDateFilter = false,
-    dateFilter = "TODAY",
-    filterDropDown,
-    handleRowsCollapse,
-    handleRowsExpand,
-    showLevelBtn = false,
-    dataLength = 0,
-    filterKeys = {}
-  } = props;
-  const dispatch = useAppDispatch();
-  const customStyle = {
-    "&.MuiOutlinedInput-root": {
-      "& fieldset": {
-        border: "none",
-        borderColor: `#ade7cb`,
-        borderRadius: `25px`
-      },
-      "& .MuiSelect-outlined": {
-        padding: `4.5px 14px !important`
-      },
-      // '&:hover fieldset': {
-      //   border: 'none',
-      // },
-      // '&.Mui-focused fieldset': {
-      //   border: 'none',
-      // },
-      display: `flex`,
-      gap: `4px`,
-      width: `220px`,
-      // height: 30px,
-      border: `1px solid #ade7cb`,
-      borderRadius: `50px`,
-      backgroundColor: `#ebf9f2`,
-      color: `#289b64`,
-      alignItems: `center`,
-      cursor: `pointer`
-      // height: `30px`
-    }
-  };
-  const inputStyle = {
-    border: "none",
-    "&.Mui-focused": {
-      borderColor: "transparent"
-    },
-    "& .MuiOutlinedInput-input": {
-      // padding: "0px",
-      fontSize: "14px",
-      color: "#289b64"
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      border: "none"
-    },
-    "& .MuiSelect-icon": {
-      color: "green"
-    }
-  };
-  const defaultSelected = [
-    {
-      value: "company"
-    }
-  ];
-  const [selectedItems, setSelectedItems] = useState(defaultSelected);
-  const [level, setLevel] = useState(1);
-  const [actionAnchorEl, setActionAnchorEl] = useState(
-    null
-  );
-  const [allFields, setAllFields] = useState([]);
-  const [dateRange, setDateRange] = useState();
-  const [open, setOpen] = useState(false);
-  const [exportAnchorEl, setExportAnchorEl] = useState(null);
-  const [customDate, setCustomDate] = useState(
-    new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
-  );
-  const { t } = useTranslation();
-  const [customDateRange, setCustomDateRange] = useState({
-    startDate: new Date(dayjs((filters == null ? void 0 : filters.start_date) || "").format("YYYY-MM-DD")),
-    endDate: new Date(dayjs((filters == null ? void 0 : filters.end_date) || "").format("YYYY-MM-DD")),
-    key: "selection"
-  });
-  const anchorRef = useRef(null);
-  const dateSelectRef = useRef(null);
-  const chipDateSelectRef = useRef(null);
-  const handleCloseDatePopper = () => {
-    anchorRef.current = null;
-    setOpen(false);
-  };
-  const handleDateChange = async (range) => {
-    setDateRange(range);
-    if (range === "CUSTOM") {
-      anchorRef.current = dateSelectRef.current;
-      setOpen(true);
-    } else {
-      const data = await handleCompareDateRange({
-        range: RANGE[range],
-        from: "",
-        to: ""
-      });
-      onDateFilterChange == null ? void 0 : onDateFilterChange({
-        start_date: (data == null ? void 0 : data.from) ? data == null ? void 0 : data.from : "",
-        end_date: (data == null ? void 0 : data.to) ? data == null ? void 0 : data.to : ""
-      });
-      handleCloseDatePopper();
-    }
-  };
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    handleCloseDatePopper();
-  };
-  const handleSelectChange = (value) => {
-    if (selectedItems.some((item) => item.value == value.value)) {
-      setSelectedItems(selectedItems.filter((item) => (item == null ? void 0 : item.value) != value.value));
-      return;
-    }
-    setSelectedItems([...selectedItems, value]);
-  };
-  const filtersConfig = (filterDropDown == null ? void 0 : filterDropDown.map((filter) => ({
-    key: filter.value || filter.key,
-    label: filter.name || filter.label || `Search ${filter.value || filter.key}`,
-    placeholder: filter.placeholder || filter.name || filter.label,
-    apiType: filter.apiType || filter.value || filter.key,
-    valueKey: (filterKeys == null ? void 0 : filterKeys[filter.value || filter.key]) || filter.value || filter.key,
-    customFilter: filter.customFilter || null,
-    multiple: filter.multiple || false
-  }))) || [];
-  const options = [
-    {
-      label: RANGE.TODAY,
-      callback: () => {
-        handleDateChange("TODAY");
-      }
-    },
-    {
-      label: RANGE.THIS_WEEK,
-      callback: () => {
-        handleDateChange("THIS_WEEK");
-      }
-    },
-    {
-      label: RANGE.THIS_MONTH,
-      callback: () => {
-        handleDateChange("THIS_MONTH");
-      }
-    },
-    {
-      label: RANGE.THIS_QUARTER,
-      callback: () => {
-        handleDateChange("THIS_QUARTER");
-      }
-    },
-    {
-      label: RANGE.THIS_YEAR,
-      callback: () => {
-        handleDateChange("THIS_YEAR");
-      }
-    },
-    {
-      label: RANGE.YESTERDAY,
-      callback: () => {
-        handleDateChange("YESTERDAY");
-      }
-    },
-    {
-      label: RANGE.PREVIOUS_WEEK,
-      callback: () => {
-        handleDateChange("PREVIOUS_WEEK");
-      }
-    },
-    {
-      label: RANGE.PREVIOUS_MONTH,
-      callback: () => {
-        handleDateChange("PREVIOUS_MONTH");
-      }
-    },
-    {
-      label: RANGE.PREVIOUS_QUARTER,
-      callback: () => {
-        handleDateChange("PREVIOUS_QUARTER");
-      }
-    },
-    {
-      label: RANGE.PREVIOUS_YEAR,
-      callback: () => {
-        handleDateChange("PREVIOUS_YEAR");
-      }
-    },
-    {
-      label: RANGE.CUSTOM,
-      callback: () => {
-        handleDateChange("CUSTOM");
-      }
-    }
-  ];
-  const isChecked = (value) => {
-    return selectedItems.some((item) => (item == null ? void 0 : item.value) == (value == null ? void 0 : value.value));
-  };
-  const handleFilterPopperSubmit = () => {
-    const dateRangeFilter = {
-      start_date: dayjs(customDateRange.startDate).format("YYYY-MM-DD"),
-      end_date: dayjs(customDateRange.endDate).format("YYYY-MM-DD")
-    };
-    const dateFilter2 = {
-      as_of_date: dayjs(customDate).format("YYYY-MM-DD")
-    };
-    onDateFilterChange == null ? void 0 : onDateFilterChange({
-      ...isDateRange ? dateRangeFilter : dateFilter2
-    });
-    handleCloseDatePopper();
-  };
-  function showFilter(val) {
-    return selectedItems.some((item) => (item == null ? void 0 : item.value) == val);
-  }
-  const getStartAndEndDate = (filters2) => {
-    const startDate = dayjs(filters2 == null ? void 0 : filters2.start_date).isValid() ? dayjs(filters2.start_date).toDate() : /* @__PURE__ */ new Date();
-    const endDate = dayjs(filters2 == null ? void 0 : filters2.end_date).isValid() ? dayjs(filters2.end_date).toDate() : /* @__PURE__ */ new Date();
-    return { startDate, endDate };
-  };
-  useEffect(() => {
-    setCustomDate(
-      new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
-    );
-  }, [filters == null ? void 0 : filters.as_of_date]);
-  useEffect(() => {
-    setCustomDateRange({
-      ...customDateRange,
-      ...getStartAndEndDate(filters)
-    });
-  }, [filters == null ? void 0 : filters.end_date, filters == null ? void 0 : filters.start_date]);
-  useEffect(() => {
-    if (open) {
-      if (isDateRange) {
-        setCustomDateRange({
-          ...customDateRange,
-          ...getStartAndEndDate(filters)
-        });
-      } else {
-        setCustomDate(
-          new Date(dayjs((filters == null ? void 0 : filters.as_of_date) || "").format("YYYY-MM-DD"))
-        );
-      }
-    }
-  }, [open, isDateRange]);
-  useEffect(() => {
-    dispatch(fetchCompanies());
-  }, []);
-  useEffect(() => {
-    setAllFields(generateFields(reportFilterFields));
-  }, []);
-  useEffect(() => {
-    handleDateChange(dateFilter);
-  }, [dateFilter]);
-  const filterDropDownFunc = () => {
-    return /* @__PURE__ */ jsx(
-      Menu,
-      {
-        anchorEl: actionAnchorEl,
-        open: Boolean(actionAnchorEl),
-        onClose: handleFilterClose,
-        children: filterDropDown == null ? void 0 : filterDropDown.map((item) => /* @__PURE__ */ jsxs(MenuItem, { onClick: () => handleSelectChange(item), value: item == null ? void 0 : item.value, children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: isChecked(item) }),
-          /* @__PURE__ */ jsx(Typography, { sx: { marginLeft: "10px" }, color: "theme.neutral.800", type: "s3", children: item == null ? void 0 : item.name })
-        ] }, item))
-      }
-    );
-  };
-  const renderFilter = ({
-    key,
-    label,
-    placeholder,
-    apiType,
-    valueKey,
-    customFilter,
-    multiple = false,
-    options: options2,
-    show = true,
-    showCancelButton = true
-  }) => {
-    if (!showFilter(key) || !show) return null;
-    return (
-      // <div className="search-filter" key={key}>
-      /* @__PURE__ */ jsx(
-        SearchableSelect,
-        {
-          labelId: `${key}-label`,
-          searchPlaceholder: label,
-          value: filters == null ? void 0 : filters[valueKey],
-          onChange: (e) => onDateFilterChange({ [valueKey]: e.target.value }),
-          showCancelButton,
-          apiType,
-          options: options2,
-          multiple,
-          placeholder,
-          customeFilter: customFilter,
-          customStyle,
-          inputStyle
-        }
-      )
-    );
-  };
-  const FilterContainer = () => /* @__PURE__ */ jsx(Fragment, { children: filtersConfig.map(renderFilter) });
-  const handleFilterClose = () => {
-    setActionAnchorEl(null);
-  };
-  const ExportContainer = React__default.memo(() => {
-    var _a2;
-    const handleClose2 = () => setExportAnchorEl(null);
-    return /* @__PURE__ */ jsx(
-      Menu,
-      {
-        open: Boolean(exportAnchorEl),
-        anchorEl: exportAnchorEl,
-        onClose: handleClose2,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "right"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "right"
-        },
-        children: (_a2 = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a2.map((option, index) => /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            onClick: () => {
-              option.callback();
-              setExportAnchorEl(null);
-            },
-            children: /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", color: "inherit", children: [
-              " ",
-              option.label
-            ] })
-          },
-          index
-        ))
-      }
-    );
-  });
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "reportsTitleBar", children: [
-      /* @__PURE__ */ jsx("div", { className: "reportsTitleBar--LeftContent", children: isTitleMenu ? /* @__PURE__ */ jsx("div", { style: { zIndex: 999 }, children: /* @__PURE__ */ jsx(
-        TitleDropdownButton,
-        {
-          onClick: handleAddButton,
-          options: titleMenus,
-          isMenuThirdItemDisabled: true,
-          children: title
-        }
-      ) }) : /* @__PURE__ */ jsx(Typography, { type: "h3", weight: "medium", color: "theme.secondary.1000", children: title }) }),
-      /* @__PURE__ */ jsx(
-        ReportButtons,
-        {
-          zIndex: 999,
-          className: "reportsTitleBar--RightContent",
-          buttons
-        }
-      )
-    ] }),
-    (tabs == null ? void 0 : tabs.length) ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-      TabBar,
-      {
-        tabs: tabs || [],
-        activeValue,
-        setActiveValue,
-        isTabViewOnly: true
-      }
-    ) }) : null,
-    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", my: 2.5, mx: 1 }, children: [
-      /* @__PURE__ */ jsxs("div", { className: "reportsTitleBar--FilterWrapper", children: [
-        FilterContainer(),
-        (filters == null ? void 0 : filters.end_date) && showDateFilter && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "reportsTitleBar--FilterWrapper--Chip",
-            ref: chipDateSelectRef,
-            onClick: () => {
-              if (!open) {
-                anchorRef.current = chipDateSelectRef.current;
-                setOpen(true);
-              } else {
-                handleCloseDatePopper();
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
-                  title: `${dayjs(filters == null ? void 0 : filters.start_date).format("DD/MM/YYYY")} - ${dayjs(filters == null ? void 0 : filters.end_date).format("DD/MM/YYYY")}`,
-                  children: [
-                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
-                      t("common.dateRange"),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxs(
-                      Typography,
-                      {
-                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
-                        type: "s4",
-                        children: [
-                          dayjs(filters == null ? void 0 : filters.start_date).format("DD/MM/YYYY"),
-                          " -",
-                          " ",
-                          dayjs(filters == null ? void 0 : filters.end_date).format("DD/MM/YYYY")
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(default_1, {})
-            ]
-          }
-        ) }),
-        (customDateRange == null ? void 0 : customDateRange.startDate) && (customDateRange == null ? void 0 : customDateRange.endDate) && isDateFilterEnabled && !["TODAY", "YESTERDAY"].includes(dateRange) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          (customDateRange == null ? void 0 : customDateRange.startDate) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "reportsTitleBar--FilterWrapper--Chip",
-              style: { padding: " 5px 12px" },
-              ref: chipDateSelectRef,
-              children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
-                  title: `${dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")}`,
-                  children: [
-                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
-                      t("common.startDate"),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
-                        type: "s4",
-                        children: dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ) }),
-          (customDateRange == null ? void 0 : customDateRange.endDate) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "reportsTitleBar--FilterWrapper--Chip",
-              ref: chipDateSelectRef,
-              style: { padding: " 5px 12px" },
-              children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
-                  title: `${dayjs(customDateRange == null ? void 0 : customDateRange.startDate).format("DD/MM/YYYY")}`,
-                  children: [
-                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
-                      t("common.endDate"),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
-                        type: "s4",
-                        children: dayjs(customDateRange == null ? void 0 : customDateRange.endDate).format("DD/MM/YYYY")
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          ) })
-        ] }),
-        (filters == null ? void 0 : filters.as_of_date) && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px" }, children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "reportsTitleBar--FilterWrapper--Chip",
-            ref: chipDateSelectRef,
-            onClick: () => {
-              if (!open) {
-                anchorRef.current = chipDateSelectRef.current;
-                setOpen(true);
-              } else {
-                handleCloseDatePopper();
-              }
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "reportsTitleBar--FilterWrapper--Chip--Text",
-                  title: `${dayjs(filters == null ? void 0 : filters.as_of_date).format("DD/MM/YYYY")}`,
-                  children: [
-                    /* @__PURE__ */ jsxs(Typography, { type: "s4", weight: "medium", children: [
-                      t("common.date"),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Typography,
-                      {
-                        className: "reportsTitleBar--FilterWrapper--Chip--Text--Value",
-                        type: "s4",
-                        children: dayjs(filters == null ? void 0 : filters.as_of_date).format("DD/MM/YYYY")
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(default_1, {})
-            ]
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "report-display", children: [
-        ((_a = dropdownMenuButtonData == null ? void 0 : dropdownMenuButtonData.options) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              sx: ({ palette }) => ({
-                border: "1px solid",
-                borderColor: "grey.200",
-                borderRadius: "50px",
-                color: `${palette.grey[800]} !important`,
-                "&:hover": {
-                  bgcolor: `${palette.grey[200]} !important`
-                }
-              }),
-              variant: "text",
-              startIcon: /* @__PURE__ */ jsx(Export, { fontSize: "small" }),
-              onClick: (event) => setExportAnchorEl(event.currentTarget),
-              children: t("common.export")
-            }
-          ),
-          exportAnchorEl && /* @__PURE__ */ jsx(ExportContainer, {})
-        ] }),
-        (filterDropDown == null ? void 0 : filterDropDown.length) && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              sx: ({ palette }) => ({
-                border: "1px solid",
-                borderColor: "grey.200",
-                borderRadius: "50px",
-                color: `${palette.grey[800]} !important`,
-                "&:hover": {
-                  bgcolor: `${palette.grey[200]} !important`
-                }
-              }),
-              variant: "text",
-              startIcon: /* @__PURE__ */ jsx(Filter, { fontSize: "small" }),
-              onClick: (event) => setActionAnchorEl(event.currentTarget),
-              children: t("common.filter")
-            }
-          ) }),
-          showLevelBtn && /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
-        ] }),
-        filterDropDownFunc(),
-        showLevelBtn && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Box, { className: "reportsTitleBar--FilterAction--lvWrapper", children: [
-            /* @__PURE__ */ jsxs(Typography, { type: "s3", weight: "medium", color: "grey.800", children: [
-              " Level ",
-              level,
-              " of ",
-              dataLength
-            ] }),
-            /* @__PURE__ */ jsxs(ButtonGroup, { variant: "outlined", disableElevation: true, sx: ({ palette }) => ({
-              "& .MuiButton-root": {
-                borderColor: `${palette.grey[200]} !important`,
-                "&:hover": {
-                  bgcolor: `${palette.grey[200]} !important`
-                }
-              },
-              "& .MuiButtonGroup-firstButton": {
-                borderTopLeftRadius: 20,
-                borderBottomLeftRadius: 20
-              },
-              "& .MuiButtonGroup-lastButton": {
-                borderTopRightRadius: 20,
-                borderBottomRightRadius: 20
-              }
-            }), children: [
-              /* @__PURE__ */ jsx(Button$1, { onClick: () => {
-                setLevel(level == dataLength ? level : level + 1);
-                handleRowsCollapse == null ? void 0 : handleRowsCollapse(level);
-              }, children: /* @__PURE__ */ jsx("img", { src: images.common.expand }) }),
-              /* @__PURE__ */ jsx(Button$1, { onClick: () => {
-                setLevel(level != 1 ? level - 1 : 1);
-                handleRowsExpand == null ? void 0 : handleRowsExpand(level);
-              }, children: /* @__PURE__ */ jsx("img", { src: images.common.collapse }) })
-            ] })
-          ] }),
-          isDateFilterEnabled && /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical", sx: { height: "50%", alignSelf: "auto" } })
-        ] }),
-        isDateFilterEnabled && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx(Typography, { type: "s3", weight: "medium", color: "grey.800", children: "As of: " }),
-          /* @__PURE__ */ jsx(
-            ReportButtons,
-            {
-              zIndex: 997,
-              className: "reportsTitleBar--RightContent",
-              dropdownMenuButtonData: {
-                icon: /* @__PURE__ */ jsx(Calendar, { fontSize: "small" }),
-                children: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  RANGE[dateRange],
-                  /* @__PURE__ */ jsx(default_1, {})
-                ] }),
-                options
-              },
-              toggleCallback
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { ref: dateSelectRef })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Popper,
-      {
-        sx: {
-          zIndex: 9999
-        },
-        open,
-        anchorEl: anchorRef.current,
-        role: void 0,
-        transition: true,
-        disablePortal: true,
-        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx(
-          Grow,
-          {
-            ...TransitionProps,
-            style: {
-              margin: "0 20px 0 20px",
-              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
-            },
-            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxs(
-              Box,
-              {
-                sx: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "flex-end"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("div", { children: isDateRange ? /* @__PURE__ */ jsx(
-                    DateRange,
-                    {
-                      editableDateInputs: true,
-                      onChange: (item) => setCustomDateRange(item.selection),
-                      moveRangeOnFirstSelection: false,
-                      ranges: [customDateRange],
-                      locale: enUS
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    Calendar$1,
-                    {
-                      onChange: (item) => setCustomDate(item),
-                      date: customDate,
-                      locale: enUS
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(Box, { sx: { padding: "0 12px 12px 0" }, children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "contained",
-                      sx: { width: "fit-content" },
-                      onClick: handleFilterPopperSubmit,
-                      children: t("common.apply")
-                    }
-                  ) })
-                ]
-              }
-            ) }) })
-          }
-        )
-      }
-    )
-  ] });
-};
-export {
-  ReportsTitleBar as default
-};
-//# sourceMappingURL=index.esm.js.map