impact-ui 4.0.6 → 4.0.7-alpha.1

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

@@ -1,255 +0,0 @@
-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";
-import { useTranslation } from "../../../i18n/useTranslation.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 = "L",
-  onNotificationScrollToBottom,
-  scrollThreshold,
-  isWithSearch = true,
-  isChipsExpandable = false,
-  isHoverOnCard = false,
-  isDeleteAlwaysVisible = false,
-  isEmptyState = false,
-  emptyStateTitle,
-  emptyStateDescription,
-  customNotificationJsx
-}) {
-  var _a;
-  const { t } = useTranslation();
-  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) => {
-      if (!showFilter) {
-        return;
-      }
-      const target = event.target;
-      if (!target.closest(".impact-notification-task-list-filter-container")) {
-        setShowFilter(false);
-      }
-    },
-    [showFilter]
-  );
-  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,
-                  setExpandList,
-                  setSearchExpand,
-                  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: t("notification.searchPlaceholder"),
-                        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: t("notification.selectFilter") }),
-                    /* @__PURE__ */ jsx("span", { className: "impact-notification-task-list-title-text-sub", children: isMultiSelectFilter ? t("notification.multiSelect") : t("notification.singleSelect") })
-                  ] }),
-                  /* @__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: t("common.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
-};

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

@@ -1,11 +0,0 @@
-import { NotificationBodyProps } from './NotificationBody.types';
-
-export type { NotificationBodyProps } from './NotificationBody.types';
-/**
- * Body of the Notification drawer: tabs + notification list panels.
- */
-export declare function NotificationBody({ expand, notificationTabs, notificationPanels, onSettingButtonClick, handleTabChange, activeNotiTab, renderPanel, ...panelProps }: NotificationBodyProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NotificationBody {
-    var displayName: string;
-}
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/NotificationBody/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAItE,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,EACX,GAAG,UAAU,EACd,EAAE,qBAAqB,2CAoEvB;yBA7Ee,gBAAgB"}

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

@@ -1,89 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import default_1 from "../../../node_modules/@mui/icons-material/SettingsOutlined.js";
-import { NotificationPanelContent } from "./NotificationPanelContent.js";
-import { Button } from "../../Button/index.js";
-import { Tabs } from "../../Tabs/index.js";
-import { useTranslation } from "../../../i18n/useTranslation.js";
-function NotificationBody({
-  expand = false,
-  notificationTabs,
-  notificationPanels,
-  onSettingButtonClick,
-  handleTabChange,
-  activeNotiTab,
-  renderPanel,
-  ...panelProps
-}) {
-  var _a;
-  const { t } = useTranslation();
-  const tabs = notificationTabs.length > 0 ? notificationTabs : [{ label: "All", value: "all" }];
-  const panels = notificationPanels.length > 0 ? notificationPanels : [{ id: 0, value: "all" }];
-  const [activeTab, setActiveTab] = useState(((_a = tabs[0]) == null ? void 0 : _a.value) ?? "");
-  const selectedValue = activeNotiTab != null && activeNotiTab !== "" ? activeNotiTab : activeTab;
-  const onChangeTab = useCallback(
-    (_event, newValue) => {
-      const val = typeof newValue === "number" ? String(newValue) : newValue;
-      handleTabChange == null ? void 0 : handleTabChange(val);
-      setActiveTab(val);
-    },
-    [handleTabChange]
-  );
-  const renderPanelContent = (item, index) => {
-    if (renderPanel) {
-      return renderPanel(item, index);
-    }
-    return /* @__PURE__ */ jsx(
-      NotificationPanelContent,
-      {
-        expand,
-        notificationPanels: panels,
-        notificationTabs: tabs,
-        panel: item,
-        ...panelProps
-      },
-      item.value
-    );
-  };
-  const tabPanels = panels.map((item, index) => renderPanelContent(item, index));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `impact-notification-body-container ${expand ? "notification-body-container-full" : ""}`,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: `impact-notification-body-header-container ${expand ? "body-header-container-full" : ""}`,
-          children: [
-            /* @__PURE__ */ jsx(
-              Tabs,
-              {
-                tabNames: tabs,
-                tabPanels,
-                value: selectedValue,
-                onChange: onChangeTab
-              }
-            ),
-            onSettingButtonClick != null && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { className: "impact-notification-separator" }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  icon: /* @__PURE__ */ jsx(default_1, {}),
-                  size: "medium",
-                  variant: "text",
-                  onClick: onSettingButtonClick,
-                  children: t("notification.settingAndHelp")
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-NotificationBody.displayName = "NotificationBody";
-export {
-  NotificationBody
-};

package/dist/components/Notification/NotificationFooter.d.ts

@@ -1,11 +0,0 @@
-export interface NotificationFooterProps {
-    secondaryButtonLabel?: string;
-    onSecondaryButtonClick?: () => void;
-    primaryButtonLabel?: string;
-    onPrimaryButtonClick?: () => void;
-}
-export declare function NotificationFooter({ secondaryButtonLabel, onSecondaryButtonClick, primaryButtonLabel, onPrimaryButtonClick, }: NotificationFooterProps): React.ReactElement | null;
-export declare namespace NotificationFooter {
-    var displayName: string;
-}
-//# sourceMappingURL=NotificationFooter.d.ts.map

package/dist/components/Notification/NotificationFooter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationFooter.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,uBAAuB;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,GACrB,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAcrD;yBAnBe,kBAAkB"}

package/dist/components/Notification/NotificationFooter.js

@@ -1,20 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
-function NotificationFooter({
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  primaryButtonLabel,
-  onPrimaryButtonClick
-}) {
-  if (!secondaryButtonLabel && !primaryButtonLabel) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "impact-notification-footer-container", children: [
-    secondaryButtonLabel && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onSecondaryButtonClick, children: secondaryButtonLabel }),
-    primaryButtonLabel && /* @__PURE__ */ jsx(Button, { onClick: onPrimaryButtonClick, children: primaryButtonLabel })
-  ] });
-}
-NotificationFooter.displayName = "NotificationFooter";
-export {
-  NotificationFooter
-};

package/dist/components/Notification/NotificationHeader.d.ts

@@ -1,15 +0,0 @@
-import { DrawerAnchor } from './Notification.types';
-
-export interface NotificationHeaderProps {
-    title?: React.ReactNode;
-    expand: boolean;
-    setExpand: (expand: boolean) => void;
-    toggleDrawer: (anchor: DrawerAnchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => void;
-    anchor: DrawerAnchor;
-    showBadgeLoader?: boolean;
-}
-export declare function NotificationHeader({ title, expand, setExpand, toggleDrawer, anchor, }: NotificationHeaderProps): React.ReactElement;
-export declare namespace NotificationHeader {
-    var displayName: string;
-}
-//# sourceMappingURL=NotificationHeader.d.ts.map

package/dist/components/Notification/NotificationHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NotificationHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CACZ,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,OAAO,KACV,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7D,MAAM,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,MAAM,GACP,EAAE,uBAAuB,GAAG,KAAK,CAAC,YAAY,CAuB9C;yBA7Be,kBAAkB"}

package/dist/components/Notification/NotificationHeader.js

@@ -1,39 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-function NotificationHeader({
-  title,
-  expand,
-  setExpand,
-  toggleDrawer,
-  anchor
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "impact-notification-header", children: [
-    /* @__PURE__ */ jsx("div", { className: "impact-notification-heading", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: "impact-notification-header-action-btns", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": expand ? "Collapse" : "Expand",
-          className: `impact-notification-header-expand-btn ${expand ? "collapse-icon" : "expand-icon"}`,
-          type: "button",
-          onClick: () => {
-            setExpand(!expand);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "impact-notification-separator" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          "aria-label": "Close",
-          className: "impact-notification-header-close-btn",
-          type: "button",
-          onClick: toggleDrawer(anchor, false)
-        }
-      )
-    ] })
-  ] });
-}
-NotificationHeader.displayName = "NotificationHeader";
-export {
-  NotificationHeader
-};

package/dist/components/Notification/index.d.ts

@@ -1,10 +0,0 @@
-import { NotificationProps } from './Notification.types';
-
-export type { NotificationProps, DrawerAnchor } from './Notification.types';
-export { NotificationHeader } from './NotificationHeader';
-export { NotificationFooter } from './NotificationFooter';
-export declare function Notification({ title, anchor, isOpen, setIsOpen, className, handleClose, secondaryButtonLabel, onSecondaryButtonClick, primaryButtonLabel, onPrimaryButtonClick, onSettingButtonClick, handleSelectAll, handleMarkReadAll, handleMoveAllPending, handleNotificationDeleteAll, badgesList, notificationTabs, notificationPanels, setNotificationPanels, handleTabChange, moveToPendingDropdownOptions, activeNotiTab, activeBadge, showBadgeLoader, showNotificationListLoader, displayFormat, onNotificationScrollToBottom, scrollThreshold, isWithSearch, isHoverOnCard, isChipsExpandable, isDeleteAlwaysVisible, isEmptyState, emptyStateTitle, emptyStateDescription, customNotificationJsx, NotificationBodyComponent, }: NotificationProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Notification {
-    var displayName: string;
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Notification/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,sBAAsB,CAAC;AAC5E,OAAO,4BAA4B,CAAC;AAEpC,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAgB,EAChB,MAAM,EACN,SAAS,EACT,SAAS,EACT,WAAW,EACX,oBAAoB,EACpB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,2BAA2B,EAC3B,UAAU,EACV,gBAAgB,EAChB,kBAAkB,EAClB,qBAAqB,EACrB,eAA0B,EAC1B,4BAA4B,EAC5B,aAAa,EACb,WAAW,EACX,eAAe,EACf,0BAA0B,EAC1B,aAAmB,EACnB,4BAA4B,EAC5B,eAAe,EACf,YAAmB,EACnB,aAAqB,EACrB,iBAAyB,EACzB,qBAA6B,EAC7B,YAAY,EACZ,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,yBAAyB,GAC1B,EAAE,iBAAiB,2CA6EnB;yBAnHe,YAAY"}

package/dist/components/Notification/index.js

@@ -1,130 +0,0 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode("@keyframes impact-notification-sync-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.impact-notification-sync-icon--rotating{animation:impact-notification-sync-spin 1s linear infinite}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-container{height:100%;transition:width .2s ease-in;width:600px}.impact-notification-container .impact-notification-header{align-items:center;background-color:#fff;border-bottom:1px solid #d9dde7;display:flex;height:40px;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:1}.impact-notification-container .impact-notification-header .impact-notification-heading{font-size:16px;font-weight:700;line-height:20px}.impact-notification-container .impact-notification-header .impact-notification-header-action-btns{align-items:center;display:flex;gap:12px}.impact-notification-container .impact-notification-header .impact-notification-header-action-btns button{background-color:#f5f6fa;border:none;border-radius:8px;cursor:pointer;height:32px;width:32px}.impact-notification-container .impact-notification-header .collapse-icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/collapse-icon-2.svg) no-repeat;background-position:50%;background-size:16px;cursor:pointer;height:16px;width:16px}.impact-notification-container .impact-notification-header .expand-icon{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/expand-icon.svg) no-repeat;background-position:50%;background-size:20px;cursor:pointer;height:16px;width:16px}.impact-notification-container .impact-notification-header .impact-notification-header-close-btn{background:url(https://impact-kit.devs.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/close-tags.svg) no-repeat;background-position:50%;background-size:24px;cursor:pointer;height:16px;width:16px}.impact-notification-container .impact-notification-body-container{height:calc(100% - 96px);padding:20px 10px}.impact-notification-container .notification-body-container-full{height:calc(100% - 40px)}.impact-notification-container .impact-notification-body-header-container{align-items:baseline;display:flex;flex-direction:row;gap:12px}.impact-notification-container .impact-notification-body-header-container .ia-tabContainer{height:100%;width:100%}.impact-notification-container .impact-notification-body-header-container .ia-tabContainer .impact-tab-panel{height:calc(100% - 156px);overflow:hidden;padding:20px 6px 0;position:absolute;width:calc(100% - 32px)}.impact-notification-container .impact-notification-body-header-container .ia-tabContainer .impact-tab-panel .ia-tabPanel{height:100%}.impact-notification-container .impact-notification-body-header-container .ia-tabContainer .impact-tab-panel .ia-tabPanel .MuiBox-root:has(.empty-state-container){height:100%}.impact-notification-container .impact-notification-body-header-container .ia-styles.ia-btn{flex-shrink:0}.impact-notification-container .impact-notification-task-list-filter-container{background:#fff;border:1px solid #b3bdf8;border-radius:12px;min-height:128px;padding:16px;position:absolute;right:0;top:65px;width:379px;z-index:99999}.impact-notification-container .impact-notification-task-list-filter-item{align-items:center;display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}.impact-notification-container .impact-notification-task-list-title{align-items:center;display:flex;gap:4px;margin-bottom:8px}.impact-notification-container .impact-notification-task-list-title .impact-notification-task-list-title-text{color:#1f2b4d;font-size:16px;font-weight:600;line-height:24px}.impact-notification-container .impact-notification-task-list-title .impact-notification-task-list-title-text-sub{color:#60697d;font-size:12px;font-weight:500;line-height:16px}.impact-notification-container .impact-notification-task-list-filter-item-badge .MuiChip-root.impact_badges_only_label_subtle{background-color:#f5f6fa;border:1px solid #c3c8d4;cursor:pointer}.impact-notification-container .impact-notification-task-list-filter-item-badge .MuiChip-root.impact_badges_only_label_subtle .MuiChip-label{color:#7a8294}.impact-notification-container .impact-notification-task-list-filter-item-badge.selected .MuiChip-root.impact_badges_only_label_subtle{background-color:#eceefd;border:1px solid #4259ee;cursor:pointer}.impact-notification-container .impact-notification-task-list-filter-item-badge.selected .MuiChip-root.impact_badges_only_label_subtle .MuiChip-label{color:#4259ee}.impact-notification-container .body-header-container-full .ia-tabContainer .impact-tab-panel{height:calc(100% - 100px)}.impact-notification-container .impact-notification-footer-container{align-items:center;background:#fff;border-top:1px solid #d9dde7;bottom:0;display:flex;gap:8px;height:56px;justify-content:flex-end;left:0;padding:0 16px;position:absolute;right:0;z-index:1}.impact-notification-task-list-container{height:100vh}.impact-notification-task-list-container.empty-state-container{height:100%}.impact-notification-task-list-container .impact-notification-task-list-header{align-items:center;border-bottom:1px solid #d9dde7;box-sizing:border-box;display:flex;justify-content:space-between;min-height:55px;padding-bottom:20px}.impact-notification-task-list-container .impact-notification-task-list-search-container{position:relative}.impact-notification-task-list-container .impact-notification-task-list-search-container .impact-input-wrapper{height:27px;min-width:100%!important;transition:width .2s ease-in-out;width:35px}.impact-notification-task-list-container .impact-notification-task-list-search-container .right-input-icon{position:relative;right:7px;top:1px}.impact-notification-task-list-container .search-expand .impact-input-wrapper{width:240px}.impact-notification-task-list-container .search-expand .right-input-icon{left:0}.impact-notification-task-list-container .impact-notification-task-list-chips{display:flex;flex-basis:90%;gap:4px;overflow:hidden}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-notification-task-list-item{display:flex;gap:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-notification-task-list-item .MuiChip-label{font-size:12px!important}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-notification-task-list-item-hidden{display:flex;gap:4px;overflow:hidden;transition:width .2s ease-in;width:0}.impact-notification-task-list-container .impact-notification-task-list-chips .list-item-full-width{width:100%}.impact-notification-task-list-container .impact-notification-task-list-actions{align-items:center;display:flex;gap:4px}.impact-notification-list-container{height:100%;padding-top:20px}.impact-notification-list-container .impact-notification-list-header{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding-bottom:20px}.impact-notification-list-container .impact-notification-list-title{color:#1f2b4d;font-family:Manrope,sans-serif;font-size:16px;font-weight:600;line-height:24px}.impact-notification-list-container .impact-notification-list-action-btns{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-notification-list-container .impact-notification-list-items-container{display:flex;flex-direction:column;gap:8px;height:calc(100% - 280px);overflow-y:auto;padding-bottom:20px;scroll-behavior:smooth}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item{align-items:flex-start;background-color:#f8f9fb;border-radius:12px;display:flex;flex-direction:row;gap:8px;padding:16px 12px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item:hover .impact-notification-list-item-header-right{transition:width .4s ease-in-out;width:24%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item:hover .impact-notification-list-item-header-left--btns-3{max-width:76%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item:hover .impact-notification-list-item-header-left--btns-2{max-width:84%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item:hover .impact-notification-list-item-header-left--btns-1{max-width:92%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item:hover .impact-notification-list-item-header-left--btns-0{max-width:100%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-checkbox{padding-top:5px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon .impact-notification-list-item-icon-line{height:15px;width:2px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-success{background-color:#ebf7f1;border:1px solid #108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-success .impact-notification-list-item-icon-line{background-color:#108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-fail{background-color:#fceeee;border:1px solid #ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-fail .impact-notification-list-item-icon-line{background-color:#ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-pending{background-color:#fcf8ea;border:1px solid #ffe174}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .status-pending .impact-notification-list-item-icon-line{background-color:#ffe174}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container{align-items:flex-start;display:flex;flex-direction:column;gap:6px;justify-content:flex-start;min-width:0;width:100%}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:space-between;width:100%}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header:focus,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header:hover{cursor:pointer}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left{flex:1;max-width:100%;transition:max-width .3s ease-out}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right{align-items:center;display:flex;flex-direction:row;gap:12px;justify-content:flex-start}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left .impact-notification-list-item-title-icons,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-title-icons{align-items:center;display:flex;gap:12px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left .impact-notification-list-item-title-icons .title-icon-btn,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-title-icons .title-icon-btn{align-items:center;cursor:pointer;display:flex}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left .impact-notification-list-item-title-icons .title-icon-btn .impact-notification-title-icon,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left .impact-notification-list-item-title-icons .title-icon-btn img,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-title-icons .title-icon-btn .impact-notification-title-icon,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-title-icons .title-icon-btn img{height:16px;width:16px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-left .impact-notification-list-item-title-icons .title-icon-btn:hover .impact-notification-title-icon path,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-title-icons .title-icon-btn:hover .impact-notification-title-icon path{fill:#4259ee}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right{justify-content:flex-end}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-title{color:#0d152c;font-family:Manrope,sans-serif;font-size:14px;font-weight:800;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right{overflow:hidden;width:0}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-delete-btn{display:inline-flex!important;opacity:1!important;visibility:visible!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right .impact-notification-list-item-delete-btn~*{display:none!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header:has(.impact-notification-list-item-delete-btn) .impact-notification-list-item-header-right{width:24%!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-header:hover .impact-notification-list-item-header-right .impact-notification-list-item-delete-btn~*{display:inline-flex!important;opacity:1!important;visibility:visible!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-schedule{align-items:center;color:#5f6673;display:flex;flex-direction:row;font-family:Manrope,sans-serif;font-size:12px;font-weight:500;gap:8px;justify-content:flex-start;line-height:15px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-description{color:#394960;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-description span{color:#4259ee;cursor:pointer}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-container .impact-notification-list-item-action-btns{align-items:center;display:flex;flex-direction:row;gap:8px}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item.impact-notification-list-item-hover-on-card .impact-notification-list-item-container .impact-notification-list-item-header:focus .impact-notification-list-item-header-right,.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item.impact-notification-list-item-hover-on-card .impact-notification-list-item-container .impact-notification-list-item-header:hover .impact-notification-list-item-header-right{width:0!important}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item.impact-notification-list-item-hover-on-card:hover .impact-notification-list-item-container .impact-notification-list-item-header .impact-notification-list-item-header-right{width:24%!important}.impact-notification-list-container .impact-notification-list-items-container .list-item-selected{background-color:#eceefd}.impact-notification-list-container .impact-notification-list-items-container .list-item-read{border-left:3px solid #4259ee}.impact-notification-list-empty-state-container{align-items:center;display:flex;flex-direction:column;gap:16px;height:calc(100% - 48px);justify-content:center}.impact-notification-list-empty-state-container .impact-notification-list-empty-state-icon{height:72px;width:72px}.impact-notification-list-empty-state-container .impact-notification-list-empty-state-content{align-items:center;display:flex;flex-direction:column;gap:4px;justify-content:center}.impact-notification-list-empty-state-container .impact-notification-list-empty-state-content .impact-notification-list-empty-state-title{color:#0d152c;font-size:20px;font-weight:800;line-height:28px}.impact-notification-list-empty-state-container .impact-notification-list-empty-state-content .impact-notification-list-empty-state-description{color:#7a8294;font-size:14px;font-weight:500;line-height:21px}.impact-notification-container-expand{width:800px}.impact-notification-list-item-bookmark-btn.ia-styles.ia-btn.ia-btn-text svg path{fill:#4258ed!important}.impact-notification-list-header .impact-notification-list-title-loader .css-tqb5fd-MuiSkeleton-root{display:none}.impact-notification-list-header .impact-notification-list-title-loader .css-58ftfq-MuiSkeleton-root{width:40px!important}.impact-notification-list-loader-container .css-70qvj9{left:calc(50% - 157px);position:absolute;top:calc(50% - 15px)}.impact-notification-list-action-btns-loader .css-tqb5fd-MuiSkeleton-root{display:none}.impact-notification-list-action-btns-loader .css-1366qbr{position:absolute;right:calc(50% - 150px)}")),document.head.appendChild(i)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, Suspense } from "react";
-import { NotificationBody } from "./NotificationBody/index.js";
-import { NotificationFooter } from "./NotificationFooter.js";
-import { NotificationHeader } from "./NotificationHeader.js";
-
-import Drawer from "../../node_modules/@mui/material/Drawer/Drawer.js";
-function Notification({
-  title,
-  anchor = "right",
-  isOpen,
-  setIsOpen,
-  className,
-  handleClose,
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  primaryButtonLabel,
-  onPrimaryButtonClick,
-  onSettingButtonClick,
-  handleSelectAll,
-  handleMarkReadAll,
-  handleMoveAllPending,
-  handleNotificationDeleteAll,
-  badgesList,
-  notificationTabs,
-  notificationPanels,
-  setNotificationPanels,
-  handleTabChange = () => {
-  },
-  moveToPendingDropdownOptions,
-  activeNotiTab,
-  activeBadge,
-  showBadgeLoader,
-  showNotificationListLoader,
-  displayFormat = "L",
-  onNotificationScrollToBottom,
-  scrollThreshold,
-  isWithSearch = true,
-  isHoverOnCard = false,
-  isChipsExpandable = false,
-  isDeleteAlwaysVisible = false,
-  isEmptyState,
-  emptyStateTitle,
-  emptyStateDescription,
-  customNotificationJsx,
-  NotificationBodyComponent
-}) {
-  const [expand, setExpand] = useState(false);
-  const BodyComponent = NotificationBodyComponent ?? NotificationBody;
-  const toggleDrawer = useCallback(
-    (_anchor, _open) => (event) => {
-      if (event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
-        return;
-      }
-      if (handleClose) {
-        handleClose();
-      } else {
-        setIsOpen == null ? void 0 : setIsOpen(!isOpen);
-      }
-    },
-    [handleClose, isOpen, setIsOpen]
-  );
-  return /* @__PURE__ */ jsx(Drawer, { anchor, open: isOpen, onClose: toggleDrawer(anchor, false), children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `impact-notification-container ${expand ? "impact-notification-container-expand" : ""} ${className ?? ""}`.trim(),
-      children: [
-        /* @__PURE__ */ jsx(
-          NotificationHeader,
-          {
-            anchor,
-            expand,
-            setExpand,
-            showBadgeLoader,
-            title,
-            toggleDrawer
-          }
-        ),
-        /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "impact-notification-body-container" }), children: /* @__PURE__ */ jsx(
-          BodyComponent,
-          {
-            activeBadge,
-            activeNotiTab,
-            badgesList,
-            customNotificationJsx,
-            displayFormat,
-            emptyStateDescription,
-            emptyStateTitle,
-            expand: !primaryButtonLabel && !secondaryButtonLabel,
-            handleMarkReadAll,
-            handleMoveAllPending,
-            handleNotificationDeleteAll,
-            handleSelectAll,
-            handleTabChange,
-            isChipsExpandable,
-            isDeleteAlwaysVisible,
-            isEmptyState,
-            isHoverOnCard,
-            isWithSearch,
-            moveToPendingDropdownOptions,
-            notificationPanels: notificationPanels ?? [],
-            notificationTabs: notificationTabs ?? [],
-            scrollThreshold,
-            setNotificationPanels,
-            showBadgeLoader,
-            showNotificationListLoader,
-            onNotificationScrollToBottom,
-            onSettingButtonClick
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          NotificationFooter,
-          {
-            primaryButtonLabel,
-            secondaryButtonLabel,
-            onPrimaryButtonClick,
-            onSecondaryButtonClick
-          }
-        )
-      ]
-    }
-  ) });
-}
-Notification.displayName = "Notification";
-export {
-  Notification,
-  NotificationFooter,
-  NotificationHeader
-};

package/dist/components/Notification/mockData.d.ts

@@ -1,14 +0,0 @@
-import { NotificationBadgeList, NotificationListItemHandler, NotificationPanelItem, NotificationTabItem } from './Notification.types';
-
-export declare function createToggleSelectHandler(): NotificationListItemHandler;
-export declare const mockBadgeLists: NotificationBadgeList[];
-export declare const mockNotificationTabs: NotificationTabItem[];
-export declare const mockNotificationPanels: NotificationPanelItem[];
-/** Single task-list panel — matches promo Notifications usage */
-export declare const promoNotificationTabs: NotificationTabItem[];
-export declare const promoNotificationPanels: NotificationPanelItem[];
-export declare const moveToPendingDropdownOptions: {
-    label: string;
-    value: string;
-}[];
-//# sourceMappingURL=mockData.d.ts.map