impact-ui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/components/Notification/NotificationBody/NotificationList/NotificationListItem.js

@@ -0,0 +1,299 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import default_1$1 from "../../../../node_modules/@mui/icons-material/BookmarkBorderOutlined.js";
+import default_1 from "../../../../node_modules/@mui/icons-material/DeleteOutlineOutlined.js";
+import default_1$2 from "../../../../node_modules/@mui/icons-material/FileDownloadOutlined.js";
+import moment from "moment";
+import { getAssetUrl } from "../../../../utils/assetBase.js";
+import { Badge } from "../../../Badge/index.js";
+import { Button } from "../../../Button/index.js";
+import { Checkbox } from "../../../Checkbox/index.js";
+const NotificationReadIcon = getAssetUrl("icons/notification-read.svg");
+const NotificationBookmarkIcon = getAssetUrl("icons/notification-bookmark.svg");
+const BookMarkedFillIcon = getAssetUrl("icons/bookMarkedFill.svg");
+function invokeHandler(handler, type, notificationPanels, setNotificationPanels, list) {
+  handler == null ? void 0 : handler(type, notificationPanels, setNotificationPanels, list);
+}
+function getStatusClass(status) {
+  switch (status) {
+    case "fail":
+      return "status-fail";
+    case "pending":
+      return "status-pending";
+    case "success":
+    default:
+      return "status-success";
+  }
+}
+function isInteractiveNotificationTarget(target, currentTarget) {
+  const interactiveElements = [
+    "a",
+    "button",
+    "input",
+    '[role="button"]',
+    ".nav-link",
+    "[data-clickable]"
+  ];
+  return interactiveElements.some((selector) => {
+    const closest = target.closest(selector);
+    if (selector === '[role="button"]' && closest === currentTarget) {
+      return false;
+    }
+    return target.matches(selector) || closest != null;
+  });
+}
+function NotificationListItem({
+  list,
+  type,
+  notificationPanels,
+  setNotificationPanels,
+  displayFormat,
+  isHoverOnCard = false,
+  isDeleteAlwaysVisible = false
+}) {
+  const [showMore, setShowMore] = useState(false);
+  const handleSelectChange = useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      invokeHandler(list.handleSelectChange, type, notificationPanels, setNotificationPanels, list);
+    },
+    [list, notificationPanels, setNotificationPanels, type]
+  );
+  const description = list.description ?? "";
+  const isLongDescription = description.length > 150;
+  const showHeaderIcons = !!list.showOverdueIcon || !!list.showFastApproachingIcon;
+  const showBookmarkControl = list.handleBookMark != null || Boolean(list.showBookMark);
+  const handleRowActivate = useCallback(
+    (e) => {
+      const target = e.target;
+      if (target.closest(".impact-notification-list-item-checkbox") != null) {
+        return;
+      }
+      if (isInteractiveNotificationTarget(target, e.currentTarget)) {
+        return;
+      }
+      if ("key" in e) {
+        invokeHandler(
+          list.handleSelectChange,
+          type,
+          notificationPanels,
+          setNotificationPanels,
+          list
+        );
+        return;
+      }
+      handleSelectChange(e);
+    },
+    [handleSelectChange, list, notificationPanels, setNotificationPanels, type]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `impact-notification-list-item ${list.selected ? "list-item-selected" : ""} ${!list.read ? "list-item-read" : ""} ${isHoverOnCard ? "impact-notification-list-item-hover-on-card" : ""}`,
+      role: "button",
+      tabIndex: 0,
+      onClick: handleRowActivate,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleRowActivate(e);
+        }
+      },
+      children: [
+        list.checkBoxClick && /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-checkbox", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: Boolean(list.selected),
+            variant: "default",
+            onChange: (event) => {
+              event.stopPropagation();
+              invokeHandler(
+                list.checkBoxClick,
+                type,
+                notificationPanels,
+                setNotificationPanels,
+                list
+              );
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: `impact-notification-list-item-icon ${getStatusClass(list.status)}`, children: /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-icon-line" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-container", children: [
+          /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-header-left", children: [
+              /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-title", children: list.label }),
+              showHeaderIcons && /* @__PURE__ */ jsx("span", { className: "impact-notification-separator" }),
+              list.showNOverdueIcon && /* @__PURE__ */ jsx("img", { alt: "notification-read", src: NotificationReadIcon }),
+              list.showFastApproachingIcon && /* @__PURE__ */ jsx("img", { alt: "notification-bookmark", src: NotificationBookmarkIcon })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-header-right", children: [
+              list.handleDeleteNotification && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: isDeleteAlwaysVisible ? "impact-notification-list-item-delete-btn" : void 0,
+                  icon: /* @__PURE__ */ jsx(default_1, {}),
+                  size: "small",
+                  variant: "text",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    invokeHandler(
+                      list.handleDeleteNotification,
+                      type,
+                      notificationPanels,
+                      setNotificationPanels,
+                      list
+                    );
+                  }
+                }
+              ),
+              showBookmarkControl && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: list.bookMarked ? "impact-notification-list-item-bookmark-btn" : void 0,
+                  disabled: list.showBookMark,
+                  icon: list.bookMarked ? /* @__PURE__ */ jsx("img", { alt: "bookmarked", src: BookMarkedFillIcon }) : /* @__PURE__ */ jsx(default_1$1, {}),
+                  size: "small",
+                  variant: "text",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    invokeHandler(
+                      list.handleBookMark,
+                      type,
+                      notificationPanels,
+                      setNotificationPanels,
+                      list
+                    );
+                  }
+                }
+              ),
+              list.handleDownloadNotification && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: /* @__PURE__ */ jsx(default_1$2, {}),
+                  size: "small",
+                  variant: "text",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    invokeHandler(
+                      list.handleDownloadNotification,
+                      type,
+                      notificationPanels,
+                      setNotificationPanels,
+                      list
+                    );
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-schedule", children: [
+            /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-date", children: moment(list.date).format(displayFormat) }),
+            /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-separator", children: "-" }),
+            /* @__PURE__ */ jsx("div", { className: "impact-notification-list-item-date", children: moment(list.time).format("h:mm:ss a") }),
+            list.bookMarked && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                isIcon: true,
+                color: "info",
+                icon: /* @__PURE__ */ jsx(default_1$1, {}),
+                label: "Bookmarked",
+                size: "small",
+                variant: "subtle"
+              }
+            )
+          ] }),
+          isLongDescription ? /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-description", children: [
+            /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: description.slice(0, 150) } }),
+            showMore ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: description.slice(150) } }) : null,
+            "... ",
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setShowMore((prev) => !prev);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowMore((prev) => !prev);
+                  }
+                },
+                children: showMore ? "Read Less" : "Read More"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "impact-notification-list-item-description",
+              dangerouslySetInnerHTML: { __html: description }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-action-btns", children: [
+            list.handleMarkCompleted && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "secondary",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  invokeHandler(
+                    list.handleMarkCompleted,
+                    type,
+                    notificationPanels,
+                    setNotificationPanels,
+                    list
+                  );
+                },
+                children: "Mark as completed"
+              }
+            ),
+            list.handleMoveToPending && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "text",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  invokeHandler(
+                    list.handleMoveToPending,
+                    type,
+                    notificationPanels,
+                    setNotificationPanels,
+                    list
+                  );
+                },
+                children: list.moveToPendingText ?? "Move to pending"
+              }
+            ),
+            list.handleMarkAsRead && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: "url",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  invokeHandler(
+                    list.handleMarkAsRead,
+                    type,
+                    notificationPanels,
+                    setNotificationPanels,
+                    list
+                  );
+                },
+                children: !list.read ? "Mark as read" : "Mark as unread"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NotificationListItem
+};

package/dist/components/Notification/NotificationBody/NotificationPanelContent.d.ts

@@ -0,0 +1,9 @@
+import { NotificationBodyProps } from './NotificationBody.types';
+import { NotificationPanelItem } from '../Notification.types';
+
+type NotificationPanelContentProps = NotificationBodyProps & {
+    panel: NotificationPanelItem;
+};
+export declare function NotificationPanelContent({ panel, expand, badgesList, notificationPanels, setNotificationPanels, handleSelectAll, handleMarkReadAll, handleMoveAllPending, moveToPendingDropdownOptions, handleNotificationDeleteAll, showNotificationListLoader, showBadgeLoader, displayFormat, onNotificationScrollToBottom, scrollThreshold, isWithSearch, isChipsExpandable, isHoverOnCard, isDeleteAlwaysVisible, isEmptyState, emptyStateTitle, emptyStateDescription, customNotificationJsx, activeBadge, }: NotificationPanelContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationPanelContent.d.ts.map

package/dist/components/Notification/NotificationBody/NotificationPanelContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPanelContent.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationBody/NotificationPanelContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,KAAK,6BAA6B,GAAG,qBAAqB,GAAG;IAC3D,KAAK,EAAE,qBAAqB,CAAC;CAC9B,CAAC;AAEF,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,MAAc,EACd,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,4BAA4B,EAC5B,2BAA2B,EAC3B,0BAA0B,EAC1B,eAAe,EACf,aAA4B,EAC5B,4BAA4B,EAC5B,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,GACZ,EAAE,6BAA6B,2CA2C/B"}

package/dist/components/Notification/NotificationBody/NotificationPanelContent.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { getPanelNotificationList } from "./NotificationList/NotificationList.js";
+import { NotificationTaskList } from "./NotificationTaskList.js";
+function NotificationPanelContent({
+  panel,
+  expand = false,
+  badgesList,
+  notificationPanels,
+  setNotificationPanels,
+  handleSelectAll,
+  handleMarkReadAll,
+  handleMoveAllPending,
+  moveToPendingDropdownOptions,
+  handleNotificationDeleteAll,
+  showNotificationListLoader,
+  showBadgeLoader,
+  displayFormat = "MM/DD/YYYY",
+  onNotificationScrollToBottom,
+  scrollThreshold,
+  isWithSearch,
+  isChipsExpandable,
+  isHoverOnCard,
+  isDeleteAlwaysVisible,
+  isEmptyState,
+  emptyStateTitle,
+  emptyStateDescription,
+  customNotificationJsx,
+  activeBadge
+}) {
+  var _a;
+  const notificationList = getPanelNotificationList(panel);
+  const listTypes = ((_a = badgesList == null ? void 0 : badgesList.find((badgeGroup) => badgeGroup.value === panel.value)) == null ? void 0 : _a.lists) ?? [];
+  return /* @__PURE__ */ jsx(
+    NotificationTaskList,
+    {
+      activeBadge,
+      customNotificationJsx,
+      displayFormat,
+      emptyStateDescription,
+      emptyStateTitle,
+      expand,
+      filterChip: panel.filterChip,
+      handleApplyFilter: panel.handleApplyFilter,
+      handleMarkReadAll,
+      handleMoveAllPending,
+      handleNotificationDeleteAll,
+      handleSelectAll,
+      handleSettingClick: panel.handleSettingClick,
+      isChipsExpandable,
+      isDeleteAlwaysVisible,
+      isEmptyState,
+      isHoverOnCard,
+      isMultiSelectFilter: panel.isMultiSelectFilter,
+      isWithSearch,
+      listTypes,
+      moveToPendingDropdownOptions,
+      notificationList,
+      notificationPanels,
+      scrollThreshold,
+      selectedFilterChip: panel.selectedFilterChip,
+      setNotificationPanels,
+      showBadgeLoader,
+      showNotificationListLoader,
+      type: panel.value,
+      onNotificationScrollToBottom
+    }
+  );
+}
+export {
+  NotificationPanelContent
+};

package/dist/components/Notification/NotificationBody/NotificationTaskList.d.ts

@@ -0,0 +1,43 @@
+import { NotificationChipItem } from './NotificationList/NotificationChipsList';
+import { SelectOption } from '../../Select/Select.types';
+import { NotificationListItemData, NotificationPanelItem } from '../Notification.types';
+
+interface FilterChipOption {
+    label: string;
+    value: string | number;
+}
+export interface NotificationTaskListProps {
+    expand?: boolean;
+    type: string;
+    listTypes?: NotificationChipItem[];
+    notificationList: NotificationListItemData[];
+    handleSettingClick?: () => void;
+    handleSelectAll?: (type?: string, notificationList?: NotificationListItemData[]) => void;
+    handleMarkReadAll?: (type?: string, notificationList?: NotificationListItemData[]) => void;
+    handleMoveAllPending?: (type?: string, selectedItems?: NotificationListItemData[], selectedOption?: unknown) => void;
+    moveToPendingDropdownOptions?: SelectOption[];
+    handleNotificationDeleteAll?: (type?: string, selectedItems?: NotificationListItemData[]) => void;
+    notificationPanels: NotificationPanelItem[];
+    setNotificationPanels?: (panels: NotificationPanelItem[]) => void;
+    activeBadge?: string;
+    filterChip?: FilterChipOption[];
+    handleApplyFilter?: (selected: FilterChipOption | FilterChipOption[] | null) => void;
+    isMultiSelectFilter?: boolean;
+    showBadgeLoader?: boolean;
+    showNotificationListLoader?: boolean;
+    selectedFilterChip?: FilterChipOption | FilterChipOption[];
+    displayFormat?: string;
+    onNotificationScrollToBottom?: () => void | Promise<void>;
+    scrollThreshold?: number;
+    isWithSearch?: boolean;
+    isChipsExpandable?: boolean;
+    isHoverOnCard?: boolean;
+    isDeleteAlwaysVisible?: boolean;
+    isEmptyState?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    customNotificationJsx?: React.ReactNode;
+}
+export declare function NotificationTaskList({ expand, type, listTypes, notificationList, handleSettingClick, handleSelectAll, handleMarkReadAll, handleMoveAllPending, moveToPendingDropdownOptions, handleNotificationDeleteAll, notificationPanels, setNotificationPanels, activeBadge, filterChip, handleApplyFilter, isMultiSelectFilter, showBadgeLoader, showNotificationListLoader, selectedFilterChip, displayFormat, onNotificationScrollToBottom, scrollThreshold, isWithSearch, isChipsExpandable, isHoverOnCard, isDeleteAlwaysVisible, isEmptyState, emptyStateTitle, emptyStateDescription, customNotificationJsx, }: NotificationTaskListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationTaskList.d.ts.map

package/dist/components/Notification/NotificationBody/NotificationTaskList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationTaskList.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationBody/NotificationTaskList.tsx"],"names":[],"mappings":"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"}

package/dist/components/Notification/NotificationBody/NotificationTaskList.js

@@ -0,0 +1,245 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import default_1$1 from "../../../node_modules/@mui/icons-material/FilterListOutlined.js";
+import default_1 from "../../../node_modules/@mui/icons-material/SearchOutlined.js";
+import { Badge } from "../../Badge/index.js";
+import { Button } from "../../Button/index.js";
+import { Input } from "../../Input/index.js";
+import { NotificationChipsList } from "./NotificationList/NotificationChipsList.js";
+import { NotificationList } from "./NotificationList/NotificationList.js";
+function NotificationTaskList({
+  expand = false,
+  type,
+  listTypes = [],
+  notificationList,
+  handleSettingClick,
+  handleSelectAll,
+  handleMarkReadAll,
+  handleMoveAllPending,
+  moveToPendingDropdownOptions,
+  handleNotificationDeleteAll,
+  notificationPanels,
+  setNotificationPanels,
+  activeBadge,
+  filterChip,
+  handleApplyFilter,
+  isMultiSelectFilter = false,
+  showBadgeLoader,
+  showNotificationListLoader,
+  selectedFilterChip,
+  displayFormat = "MM/DD/YYYY",
+  onNotificationScrollToBottom,
+  scrollThreshold,
+  isWithSearch = true,
+  isChipsExpandable = false,
+  isHoverOnCard = false,
+  isDeleteAlwaysVisible = false,
+  isEmptyState = false,
+  emptyStateTitle,
+  emptyStateDescription,
+  customNotificationJsx
+}) {
+  var _a;
+  const [list, setList] = useState(listTypes);
+  const [currActiveListType, setCurrActiveListType] = useState(
+    activeBadge ?? ((_a = listTypes[0]) == null ? void 0 : _a.label) ?? ""
+  );
+  const [notificationListItems, setNotificationListItems] = useState(notificationList);
+  const [expandList, setExpandList] = useState(isChipsExpandable);
+  const [searchExpand, setSearchExpand] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
+  const [showFilter, setShowFilter] = useState(false);
+  const searchInputRef = useRef(null);
+  useEffect(() => {
+    var _a2;
+    if (searchExpand) {
+      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [searchExpand]);
+  const [selectedFilter, setSelectedFilter] = useState(selectedFilterChip ?? (isMultiSelectFilter ? [] : null));
+  useEffect(() => {
+    var _a2;
+    if (Array.isArray(listTypes)) {
+      setList(listTypes);
+      if (listTypes.length > 0) {
+        setCurrActiveListType(activeBadge ?? ((_a2 = listTypes[0]) == null ? void 0 : _a2.label) ?? "");
+      }
+    }
+  }, [listTypes, activeBadge]);
+  useEffect(() => {
+    setNotificationListItems(notificationList);
+  }, [notificationList]);
+  useEffect(() => {
+    setExpandList(isChipsExpandable);
+  }, [isChipsExpandable]);
+  const handleSearch = useCallback(
+    (event) => {
+      setSearchInput(event.target.value);
+      const searchTerm = event.target.value.trim().toUpperCase();
+      const searchTerms = searchTerm.split(/\s+/).filter(Boolean);
+      if (searchTerms.length > 0) {
+        const searchResults = notificationList.filter(
+          (option) => searchTerms.every((term) => new RegExp(term, "i").test(option.label))
+        );
+        setNotificationListItems([...searchResults]);
+      } else {
+        setNotificationListItems(notificationList);
+      }
+    },
+    [notificationList]
+  );
+  const handleClickOutside = useCallback((event) => {
+    const target = event.target;
+    if (!target.closest(".impact-notification-task-list-filter-container")) {
+      setShowFilter(false);
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  const listTitle = activeBadge != null && activeBadge !== "" ? activeBadge : currActiveListType;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `impact-notification-task-list-container ${isEmptyState ? "empty-state-container" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "impact-notification-task-list-header",
+            style: {
+              justifyContent: list.length > 0 ? "space-between" : "flex-end"
+            },
+            children: [
+              list.length > 0 && /* @__PURE__ */ jsx(
+                NotificationChipsList,
+                {
+                  activeBadge,
+                  currActiveListType,
+                  expandList,
+                  list,
+                  notificationList: notificationListItems,
+                  setCurrActiveListType,
+                  showBadgeLoader
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "impact-notification-task-list-actions", children: [
+                isWithSearch && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `impact-notification-task-list-search-container ${searchExpand ? "search-expand" : ""}`,
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        ref: searchInputRef,
+                        placeholder: "Search notification...",
+                        rightIcon: /* @__PURE__ */ jsx(default_1, {}),
+                        rightIconClick: () => {
+                          if (expandList) {
+                            setExpandList(false);
+                          }
+                          setSearchExpand((prev) => !prev);
+                        },
+                        value: searchInput,
+                        onChange: handleSearch
+                      }
+                    )
+                  }
+                ),
+                handleSettingClick && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: /* @__PURE__ */ jsx(default_1$1, {}),
+                    size: "medium",
+                    variant: "text",
+                    onClick: () => {
+                      setShowFilter((prev) => !prev);
+                      handleSettingClick();
+                    },
+                    children: filterChip && filterChip.length > 0 ? filterChip.length : null
+                  }
+                ),
+                showFilter && filterChip && filterChip.length > 0 && /* @__PURE__ */ jsxs("div", { className: "impact-notification-task-list-filter-container", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "impact-notification-task-list-title", children: [
+                    /* @__PURE__ */ jsx("span", { className: "impact-notification-task-list-title-text", children: "Select Filter" }),
+                    /* @__PURE__ */ jsx("span", { className: "impact-notification-task-list-title-text-sub", children: isMultiSelectFilter ? "(Multi Select)" : "(Single Select)" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "impact-notification-task-list-filter-item", children: filterChip.map((item) => {
+                    const isSelected = isMultiSelectFilter ? Array.isArray(selectedFilter) && selectedFilter.some((filter) => filter.value === item.value) : (selectedFilter == null ? void 0 : selectedFilter.value) === item.value;
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: `impact-notification-task-list-filter-item-badge ${isSelected ? "selected" : ""}`,
+                        children: /* @__PURE__ */ jsx(
+                          Badge,
+                          {
+                            label: item.label,
+                            variant: "subtle",
+                            onClick: () => {
+                              setSelectedFilter((prev) => {
+                                if (isMultiSelectFilter) {
+                                  const prevArr = Array.isArray(prev) ? prev : [];
+                                  return prevArr.some((el) => el.value === item.value) ? prevArr.filter((filter) => filter.value !== item.value) : [...prevArr, item];
+                                }
+                                return prev === item ? null : item;
+                              });
+                            }
+                          }
+                        )
+                      },
+                      item.value
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "url",
+                      onClick: () => {
+                        handleApplyFilter == null ? void 0 : handleApplyFilter(selectedFilter);
+                        setShowFilter(false);
+                      },
+                      children: "Apply"
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NotificationList,
+          {
+            customNotificationJsx,
+            displayFormat,
+            emptyStateDescription,
+            emptyStateTitle,
+            expand,
+            handleMarkReadAll,
+            handleMoveAllPending,
+            handleNotificationDeleteAll,
+            handleSelectAll,
+            isDeleteAlwaysVisible,
+            isEmptyState,
+            isHoverOnCard,
+            moveToPendingDropdownOptions,
+            notificationList: notificationListItems,
+            notificationPanels,
+            scrollThreshold,
+            setNotificationPanels,
+            showBadgeLoader,
+            showNotificationListLoader,
+            title: listTitle,
+            type,
+            onNotificationScrollToBottom
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  NotificationTaskList
+};