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

package/dist/_virtual/index2.js

@@ -1,4 +1,4 @@
-var reactIs = { exports: {} };
+var propTypes = { exports: {} };
 export {
-  reactIs as __module
+  propTypes as __module
 };

package/dist/_virtual/index3.js

@@ -1,4 +1,6 @@
-var propTypes = { exports: {} };
+import { getAugmentedNamespace } from "./_commonjsHelpers.js";
+import * as index from "../node_modules/@mui/system/node_modules/@mui/utils/esm/formatMuiErrorMessage/index.js";
+const require$$1 = /* @__PURE__ */ getAugmentedNamespace(index);
 export {
-  propTypes as __module
+  require$$1 as default
 };

package/dist/_virtual/index4.js

@@ -1,6 +1,6 @@
 import { getAugmentedNamespace } from "./_commonjsHelpers.js";
-import * as index from "../node_modules/@mui/system/node_modules/@mui/utils/esm/formatMuiErrorMessage/index.js";
-const require$$1 = /* @__PURE__ */ getAugmentedNamespace(index);
+import * as index from "../node_modules/@mui/system/node_modules/@mui/utils/esm/clamp/index.js";
+const require$$2 = /* @__PURE__ */ getAugmentedNamespace(index);
 export {
-  require$$1 as default
+  require$$2 as default
 };

package/dist/_virtual/index5.js

@@ -1,6 +1,4 @@
-import { getAugmentedNamespace } from "./_commonjsHelpers.js";
-import * as index from "../node_modules/@mui/system/node_modules/@mui/utils/esm/clamp/index.js";
-const require$$2 = /* @__PURE__ */ getAugmentedNamespace(index);
+var reactIs = { exports: {} };
 export {
-  require$$2 as default
+  reactIs as __module
 };

package/dist/components/Menu/Menu.types.d.ts

@@ -74,13 +74,13 @@ export interface MenuProps extends BaseComponentProps {
     iconPlacement?: 'left' | 'top';
     /** When true, show checkboxes and multi-select; does not close menu on item click */
     withCheckbox?: boolean;
-    /** When true (and withCheckbox), show Cancel/Apply buttons at bottom */
+    /** When true (and withCheckbox), show Apply at bottom; pass tertiaryButtonLabel to also show Cancel */
     withActionButtons?: boolean;
     /** Called when Apply is clicked */
     onPrimaryButtonClick?: () => void;
     /** Called when the tertiary (left) action button is clicked */
     onTertiaryButtonClick?: () => void;
-    /** Label for the tertiary action button (defaults to "Cancel") */
+    /** When set, renders the tertiary action button (e.g. "Cancel") */
     tertiaryButtonLabel?: string;
     /** Unused; kept for API compat */
     withSection?: boolean;
@@ -110,6 +110,8 @@ export interface MenuProps extends BaseComponentProps {
     onClearSelection?: () => void;
     /** Apply button props (loading, label, disabled) */
     primaryButtonProps?: MenuPrimaryButtonProps;
+    /** Tertiary action button props (label, disabled) */
+    tertiaryButtonProps?: MenuPrimaryButtonProps;
     /** Class name for the MUI Menu paper container */
     menuContainerClassName?: string;
     /** When true, close menu after clicking a leaf item (default: false to match old behavior) */

package/dist/components/Menu/Menu.types.d.ts.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,oBAAoB,CAAC;AAE5B,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,IAAI,uHA6NhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,oBAAoB,CAAC;AAE5B,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,IAAI,uHAoOhB,CAAC"}

package/dist/components/Menu/index.js

@@ -35,6 +35,7 @@ const Menu = forwardRef(
       menuContainerClassName,
       className,
       id,
+      tertiaryButtonProps = {},
       "data-testid": dataTestId,
       ...rest
     } = props;
@@ -152,7 +153,15 @@ const Menu = forwardRef(
           renderHeader(),
           isLoading ? renderLoadingState() : isSearching ? renderSearchingState() : hasEmptySearch ? renderEmptySearchState() : hasNoInitialData ? renderNoDataState() : /* @__PURE__ */ jsx("div", { className: "menu-scroll-area", children: menuItems }),
           withActionButtons && withCheckbox && !isLoading && !isSearching && ((data == null ? void 0 : data.length) ?? 0) > 0 && /* @__PURE__ */ jsx("div", { className: "bottom_action", children: /* @__PURE__ */ jsxs("div", { className: "ia-menu-action-button-container", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onTertiaryButtonClick, children: tertiaryButtonLabel ?? "Cancel" }),
+            tertiaryButtonLabel && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                onClick: onTertiaryButtonClick,
+                ...tertiaryButtonProps,
+                children: tertiaryButtonLabel || "Cancel"
+              }
+            ),
             /* @__PURE__ */ jsx(
               Button,
               {

package/dist/components/Notification/NotificationBody/NotificationList/NotificationChipsList.d.ts

@@ -15,7 +15,9 @@ interface NotificationChipsListProps {
     showBadgeLoader?: boolean;
     notificationList: NotificationListItemData[];
     expandList: boolean;
+    setExpandList: (value: boolean | ((prev: boolean) => boolean)) => void;
+    setSearchExpand: (value: boolean | ((prev: boolean) => boolean)) => void;
 }
-export declare function NotificationChipsList({ list, currActiveListType, setCurrActiveListType, activeBadge, showBadgeLoader, notificationList, expandList, }: NotificationChipsListProps): import("react/jsx-runtime").JSX.Element;
+export declare function NotificationChipsList({ list, currActiveListType, setCurrActiveListType, activeBadge, showBadgeLoader, notificationList, expandList, setExpandList, setSearchExpand, }: NotificationChipsListProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationChipsList.d.ts.map

package/dist/components/Notification/NotificationBody/NotificationList/NotificationChipsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationChipsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notification/NotificationBody/NotificationList/NotificationChipsList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,wBAAwB,EAAE,CAAC;IAC7C,UAAU,EAAE,OAAO,CAAC;CACrB;AAWD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,UAAU,GACX,EAAE,0BAA0B,2CA4B5B"}
+{"version":3,"file":"NotificationChipsList.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notification/NotificationBody/NotificationList/NotificationChipsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,0BAA0B;IAClC,IAAI,EAAE,oBAAoB,EAAE,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,wBAAwB,EAAE,CAAC;IAC7C,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC;IACvE,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,CAAC;CAC1E;AAmBD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,UAAU,EACV,aAAa,EACb,eAAe,GAChB,EAAE,0BAA0B,2CAuD5B"}

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

@@ -1,5 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { Badge } from "../../../Badge/index.js";
+import { FilterSlider } from "../../../FiltersStrip/FilterSlider.js";
 import { Loader } from "../../../Loader/index.js";
 function getBadgeLabel(item, notificationList) {
   const baseLabel = item.label || "";
@@ -9,6 +11,13 @@ function getBadgeLabel(item, notificationList) {
   const count = notificationList.filter((listItem) => listItem.badge === item.label).length;
   return count > 0 ? `${baseLabel} (${count})` : baseLabel;
 }
+function toFilterSliderList(list) {
+  return list.map((item) => ({
+    id: String(item.id ?? item.label),
+    label: item.label,
+    values: []
+  }));
+}
 function NotificationChipsList({
   list,
   currActiveListType,
@@ -16,31 +25,61 @@ function NotificationChipsList({
   activeBadge,
   showBadgeLoader,
   notificationList,
-  expandList
+  expandList,
+  setExpandList,
+  setSearchExpand
 }) {
+  const handleClick = useCallback(
+    (chip) => {
+      var _a, _b;
+      (_a = chip.handleClick) == null ? void 0 : _a.call(chip);
+      (_b = chip.onClick) == null ? void 0 : _b.call(chip);
+      setCurrActiveListType(chip.label);
+    },
+    [setCurrActiveListType]
+  );
+  const handleExpandClick = useCallback(() => {
+    if (!expandList) {
+      setSearchExpand(false);
+    }
+    setExpandList((prev) => !prev);
+  }, [expandList, setExpandList, setSearchExpand]);
   if (showBadgeLoader) {
-    return /* @__PURE__ */ jsx(Loader, { showSkeleton: true, size: "small" });
+    return /* @__PURE__ */ jsx(Loader, { showSkeleton: true });
   }
   const activeLabel = activeBadge != null && activeBadge !== "" ? activeBadge : currActiveListType;
   return /* @__PURE__ */ jsx("div", { className: "impact-notification-task-list-chips", children: /* @__PURE__ */ jsx(
     "div",
     {
       className: `impact-notification-task-list-item ${expandList ? "list-item-full-width" : ""}`,
-      children: list.map((item, index) => /* @__PURE__ */ jsx(
-        Badge,
+      children: /* @__PURE__ */ jsx(
+        FilterSlider,
         {
-          color: activeLabel === item.label ? "info" : void 0,
-          label: getBadgeLabel(item, notificationList),
-          variant: "stroke",
-          onClick: () => {
-            var _a, _b;
-            (_a = item.handleClick) == null ? void 0 : _a.call(item);
-            (_b = item.onClick) == null ? void 0 : _b.call(item);
-            setCurrActiveListType(item.label);
-          }
-        },
-        item.id ?? index
-      ))
+          currDropShow: null,
+          handleExpandClick,
+          isExpanded: expandList,
+          list: toFilterSliderList(list),
+          tagsChildren: (item, index) => {
+            const chip = list[index];
+            if (!chip) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              Badge,
+              {
+                color: activeLabel === chip.label ? "info" : void 0,
+                label: getBadgeLabel(chip, notificationList),
+                variant: "stroke",
+                onClick: () => {
+                  handleClick(chip);
+                }
+              },
+              item.id
+            );
+          },
+          width: expandList || list.length < 3 ? "75%" : "20%"
+        }
+      )
     }
   ) });
 }

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

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".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 16px}.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 0 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;display:flex;justify-content:space-between;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 .ia-styles.ia-btn.ia-btn-text:focus{outline:none}.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 .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 .impact-notification-list-item-icon.status-success{background-color:#ebf7f1;border:1px solid #108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-success .impact-notification-list-item-icon-line{background-color:#108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-fail{background-color:#fceeee;border:1px solid #ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-fail .impact-notification-list-item-icon-line{background-color:#ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-pending{background-color:#fcf8ea;border:1px solid #ffe174}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.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;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:focus .impact-notification-list-item-header-right,.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{width:24%}.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:8px}.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}.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;transition:width .4s ease-in-out;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}.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)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".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;display:flex;justify-content:space-between;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-chips .impact-selected-filter-container{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:space-between}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags{align-items:center;display:flex;flex:1 0 auto;flex-direction:row;gap:8px;max-width:100%;overflow:scroll;scrollbar-width:none;width:700px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:6px;position:relative;transition:transform .5s ease-in-out}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper .impact-selected-filter-tags-container{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags.collapsed{overflow:hidden}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn{align-items:center;background-color:#f5f6fa;cursor:pointer;display:flex;justify-content:center;padding:8px 4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn svg{color:#60697d;font-size:18px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .prev{border-bottom-left-radius:4px;border-top-left-radius:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .next{border-bottom-right-radius:4px;border-top-right-radius:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .expand{border-radius:8px;color:#60697d;font-size:14px}.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 .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:focus .impact-notification-list-item-header-right,.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{width:24%}.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:8px}.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}.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;transition:width .4s ease-in-out;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 { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import default_1 from "../../../../node_modules/@mui/icons-material/DeleteOutlineOutlined.js";

package/dist/components/Notification/NotificationBody/NotificationList/NotificationListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notification/NotificationBody/NotificationList/NotificationListItem.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,wBAAwB,EAExB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAMlC,UAAU,yBAAyB;IACjC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,qBAAqB,EAAE,CAAC;IAC5C,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AA6CD,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,aAAqB,EACrB,qBAA6B,GAC9B,EAAE,yBAAyB,2CAsQ3B"}
+{"version":3,"file":"NotificationListItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/Notification/NotificationBody/NotificationList/NotificationListItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,wBAAwB,EAExB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAkGlC,UAAU,yBAAyB;IACjC,IAAI,EAAE,wBAAwB,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB,EAAE,qBAAqB,EAAE,CAAC;IAC5C,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,EAAE,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AA6CD,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,qBAAqB,EACrB,aAAa,EACb,aAAqB,EACrB,qBAA6B,GAC9B,EAAE,yBAAyB,2CAyS3B"}

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

@@ -1,5 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } 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";
@@ -11,6 +11,86 @@ 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");
+const NOTIFICATION_DESCRIPTION_VISIBLE_MAX = 150;
+function getVisibleTextLengthFromHtml(html) {
+  if (!html) {
+    return 0;
+  }
+  const doc = new DOMParser().parseFromString(
+    `<div data-notification-desc-root>${html}</div>`,
+    "text/html"
+  );
+  const root = doc.querySelector("[data-notification-desc-root]");
+  return root ? root.textContent.length : 0;
+}
+function truncateHtmlByVisibleLength(html, maxVisibleLen) {
+  if (!html || maxVisibleLen <= 0) {
+    return { html: "", isTruncated: false };
+  }
+  const doc = new DOMParser().parseFromString(
+    `<div data-notification-desc-root>${html}</div>`,
+    "text/html"
+  );
+  const sourceRoot = doc.querySelector("[data-notification-desc-root]");
+  if (!sourceRoot) {
+    return { html, isTruncated: false };
+  }
+  const fullLen = sourceRoot.textContent.length;
+  if (fullLen <= maxVisibleLen) {
+    return { html, isTruncated: false };
+  }
+  let remaining = maxVisibleLen;
+  function processNode(node) {
+    if (remaining <= 0) {
+      return null;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent ?? "";
+      if (!text) {
+        return null;
+      }
+      if (text.length <= remaining) {
+        remaining -= text.length;
+        return doc.createTextNode(text);
+      }
+      const chunk = text.slice(0, remaining);
+      remaining = 0;
+      return doc.createTextNode(chunk);
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      const clone = element.cloneNode(false);
+      for (const child of Array.from(element.childNodes)) {
+        if (remaining <= 0) {
+          break;
+        }
+        const processed = processNode(child);
+        if (processed) {
+          clone.appendChild(processed);
+        }
+      }
+      if (clone.childNodes.length === 0 && element.childNodes.length === 0) {
+        return clone;
+      }
+      if (clone.childNodes.length === 0 && element.childNodes.length > 0) {
+        return null;
+      }
+      return clone;
+    }
+    return null;
+  }
+  const out = doc.createElement("div");
+  for (const child of Array.from(sourceRoot.childNodes)) {
+    if (remaining <= 0) {
+      break;
+    }
+    const processed = processNode(child);
+    if (processed) {
+      out.appendChild(processed);
+    }
+  }
+  return { html: out.innerHTML, isTruncated: true };
+}
 function invokeHandler(handler, type, notificationPanels, setNotificationPanels, list) {
   handler == null ? void 0 : handler(type, notificationPanels, setNotificationPanels, list);
 }
@@ -60,8 +140,17 @@ function NotificationListItem({
     },
     [list, notificationPanels, setNotificationPanels, type]
   );
-  const description = list.description ?? "";
-  const isLongDescription = description.length > 150;
+  const description = list.description;
+  const { visibleTextLength, truncatedHtml } = useMemo(() => {
+    const len = getVisibleTextLengthFromHtml(description);
+    if (len <= NOTIFICATION_DESCRIPTION_VISIBLE_MAX) {
+      return { visibleTextLength: len, truncatedHtml: description };
+    }
+    return {
+      visibleTextLength: len,
+      truncatedHtml: truncateHtmlByVisibleLength(description, NOTIFICATION_DESCRIPTION_VISIBLE_MAX).html
+    };
+  }, [description]);
   const showHeaderIcons = !!list.showOverdueIcon || !!list.showFastApproachingIcon;
   const showBookmarkControl = list.handleBookMark != null || Boolean(list.showBookMark);
   const handleRowActivate = useCallback(
@@ -203,11 +292,37 @@ function NotificationListItem({
               }
             )
           ] }),
-          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,
-            "... ",
+          visibleTextLength > NOTIFICATION_DESCRIPTION_VISIBLE_MAX ? /* @__PURE__ */ jsxs("div", { className: "impact-notification-list-item-description", children: [
             /* @__PURE__ */ jsx(
+              "div",
+              {
+                dangerouslySetInnerHTML: {
+                  __html: showMore ? description : truncatedHtml
+                }
+              }
+            ),
+            !showMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              "... ",
+              /* @__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: "Read More"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
               "span",
               {
                 role: "button",
@@ -223,7 +338,7 @@ function NotificationListItem({
                     setShowMore((prev) => !prev);
                   }
                 },
-                children: showMore ? "Read Less" : "Read More"
+                children: "Read Less"
               }
             )
           ] }) : /* @__PURE__ */ jsx(

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

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

@@ -88,12 +88,18 @@ function NotificationTaskList({
     },
     [notificationList]
   );
-  const handleClickOutside = useCallback((event) => {
-    const target = event.target;
-    if (!target.closest(".impact-notification-task-list-filter-container")) {
-      setShowFilter(false);
-    }
-  }, []);
+  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 () => {
@@ -123,6 +129,8 @@ function NotificationTaskList({
                   list,
                   notificationList: notificationListItems,
                   setCurrActiveListType,
+                  setExpandList,
+                  setSearchExpand,
                   showBadgeLoader
                 }
               ),

package/dist/components/Notification/index.js

@@ -1,4 +1,4 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".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 16px}.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 0 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;display:flex;justify-content:space-between;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 .ia-styles.ia-btn.ia-btn-text:focus{outline:none}.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 .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 .impact-notification-list-item-icon.status-success{background-color:#ebf7f1;border:1px solid #108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-success .impact-notification-list-item-icon-line{background-color:#108431}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-fail{background-color:#fceeee;border:1px solid #ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-fail .impact-notification-list-item-icon-line{background-color:#ec4c5c}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.status-pending{background-color:#fcf8ea;border:1px solid #ffe174}.impact-notification-list-container .impact-notification-list-items-container .impact-notification-list-item .impact-notification-list-item-icon.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;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:focus .impact-notification-list-item-header-right,.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{width:24%}.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:8px}.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}.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;transition:width .4s ease-in-out;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}.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)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".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;display:flex;justify-content:space-between;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-chips .impact-selected-filter-container{align-items:center;display:flex;flex-direction:row;gap:8px;justify-content:space-between}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags{align-items:center;display:flex;flex:1 0 auto;flex-direction:row;gap:8px;max-width:100%;overflow:scroll;scrollbar-width:none;width:700px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper{align-items:center;display:flex;flex-direction:row;flex-shrink:0;gap:6px;position:relative;transition:transform .5s ease-in-out}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags .impact-selected-filter-wrapper .impact-selected-filter-tags-container{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-tags.collapsed{overflow:hidden}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns{align-items:center;display:flex;flex-direction:row;gap:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn{align-items:center;background-color:#f5f6fa;cursor:pointer;display:flex;justify-content:center;padding:8px 4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .impact-selected-filter-action-btn svg{color:#60697d;font-size:18px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .prev{border-bottom-left-radius:4px;border-top-left-radius:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .next{border-bottom-right-radius:4px;border-top-right-radius:4px}.impact-notification-task-list-container .impact-notification-task-list-chips .impact-selected-filter-container .impact-selected-filter-action-btns .expand{border-radius:8px;color:#60697d;font-size:14px}.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 .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:focus .impact-notification-list-item-header-right,.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{width:24%}.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:8px}.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}.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;transition:width .4s ease-in-out;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";

package/dist/components/Table/CommentsPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Table/CommentsPortal.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,cAAc,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BvB,uCAyZA,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CommentsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Table/CommentsPortal.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,cAAc,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BvB,uCAoaA,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/Table/CommentsPortal.js

@@ -86,9 +86,14 @@ const CommentsPortal = ({
         setAdjustedPosition({ top: newTop, left: (position == null ? void 0 : position.left) || 0 });
       }
     } else {
-      setAdjustedPosition(position);
+      setAdjustedPosition((prev) => {
+        if ((prev == null ? void 0 : prev.top) === (position == null ? void 0 : position.top) && (prev == null ? void 0 : prev.left) === (position == null ? void 0 : position.left) && (prev == null ? void 0 : prev.side) === (position == null ? void 0 : position.side)) {
+          return prev;
+        }
+        return position;
+      });
     }
-  }, [openFullReplies, comments, position]);
+  }, [openFullReplies, comments, position == null ? void 0 : position.top, position == null ? void 0 : position.left, position == null ? void 0 : position.side]);
   useEffect(() => {
     var _a;
     if (!isOpen) return;
@@ -121,8 +126,10 @@ const CommentsPortal = ({
       } catch (e) {
       }
     });
-    if (onMarkAsReadClick && !((_a = comments[0]) == null ? void 0 : _a.read)) onMarkAsReadClick(cellId);
-  }, [isOpen, openFullReplies, comments == null ? void 0 : comments.length, messageId]);
+    if (onMarkAsReadClick && !((_a = comments[0]) == null ? void 0 : _a.read) && (openedBy === "click" || openFullReplies)) {
+      onMarkAsReadClick(cellId);
+    }
+  }, [isOpen, openFullReplies, comments == null ? void 0 : comments.length, messageId, openedBy, onMarkAsReadClick, cellId]);
   useEffect(() => {
     if (!isOpen) return;
     const isNoCommentsOutsidePortal = !(comments && comments.length > 0);

package/dist/components/Table/TableImpl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableImpl.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableImpl.tsx"],"names":[],"mappings":"AAaA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,8CAA8C,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAe7B,eAAO,MAAM,KAAK,mFAwgEjB,CAAC"}
+{"version":3,"file":"TableImpl.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableImpl.tsx"],"names":[],"mappings":"AAaA,OAAO,sCAAsC,CAAC;AAC9C,OAAO,8CAA8C,CAAC;AACtD,OAAO,qBAAqB,CAAC;AAe7B,eAAO,MAAM,KAAK,mFAokEjB,CAAC"}

package/dist/components/Table/TableImpl.js

@@ -735,20 +735,44 @@ const Table = forwardRef(
       }
     }, [handleCommentNotification, triggerCommentClick]);
     const [popup, setPopup] = useState(null);
+    const prevPopupCellIdRef = useRef(null);
+    const isPointerOverPortalRef = useRef(false);
     useEffect(() => {
       const api = getLiveGridApi();
-      if (api) {
+      if (!api) return;
+      const currentCellId = (popup == null ? void 0 : popup.cellId) ?? null;
+      const prevCellId = prevPopupCellIdRef.current;
+      if (currentCellId === prevCellId) return;
+      prevPopupCellIdRef.current = currentCellId;
+      const colIds = /* @__PURE__ */ new Set();
+      const addColIdFromCellId = (cellId) => {
+        if (!cellId) return;
+        const parts = String(cellId).split("__");
+        if (parts[1]) colIds.add(parts[1]);
+      };
+      addColIdFromCellId(prevCellId);
+      addColIdFromCellId(currentCellId);
+      if (colIds.size > 0) {
         api.refreshCells({
           force: true,
-          suppressFlash: true
+          suppressFlash: true,
+          columns: Array.from(colIds)
         });
       }
-    }, [popup, resolvedComments]);
+    }, [popup == null ? void 0 : popup.cellId]);
+    useEffect(() => {
+      const api = getLiveGridApi();
+      if (!api) return;
+      api.refreshCells({
+        force: true,
+        suppressFlash: true
+      });
+    }, [resolvedComments]);
     useEffect(() => {
       const scrollableElement = document.querySelector(".ag-body-viewport");
       const bodyElement = document.querySelector("body");
       const preventScroll = (e) => {
-        const portalElement = e.target.closest(".comments-portal");
+        const portalElement = e.target.closest(".comments-portal-container");
         const portalListElement = e.target.closest(".comments-portal-list");
         const panelListElement = e.target.closest(".comment-panel-content");
         const textareaElement = e.target.closest(".comments-textarea");
@@ -1066,46 +1090,68 @@ const Table = forwardRef(
     }, [comments]);
     const handleCommentIconHover = useCallback(
       (params) => {
-        var _a2, _b2;
+        var _a2;
         if (params.eGridCell) {
           const rect = params.eGridCell.getBoundingClientRect();
           const rowIdentifier = (commentProps == null ? void 0 : commentProps.colIdentifierKey) ? ((_a2 = params.data) == null ? void 0 : _a2[commentProps.colIdentifierKey]) || params.node.id : params.node.id;
           const baseCellId = `${rowIdentifier}__${params.column.getColId()}`;
           const cellId = getLatestUnresolvedThreadId(baseCellId);
           if (!cellId) return;
-          const position = calculatePopupPosition(rect, comments[cellId], "hover");
-          setPopup({
-            position,
-            // { top: rect.top, left: rect.right + 5 },
-            rowId: rowIdentifier,
-            colId: params.column.getColId(),
-            cellId,
-            comment: comments[cellId],
-            author: (commentProps == null ? void 0 : commentProps.author) || "Current User",
-            openedBy: "hover",
-            data: (_b2 = params.node) == null ? void 0 : _b2.data
+          setPopup((current) => {
+            var _a3;
+            if ((current == null ? void 0 : current.openedBy) === "hover" && current.cellId === cellId) {
+              return current;
+            }
+            const position = calculatePopupPosition(rect, comments[cellId], "hover");
+            return {
+              position,
+              rowId: rowIdentifier,
+              colId: params.column.getColId(),
+              cellId,
+              comment: comments[cellId],
+              author: (commentProps == null ? void 0 : commentProps.author) || "Current User",
+              openedBy: "hover",
+              data: (_a3 = params.node) == null ? void 0 : _a3.data
+            };
           });
         }
       },
-      [getLatestUnresolvedThreadId, calculatePopupPosition, comments, commentProps == null ? void 0 : commentProps.author]
+      [
+        getLatestUnresolvedThreadId,
+        calculatePopupPosition,
+        comments,
+        commentProps == null ? void 0 : commentProps.author,
+        commentProps == null ? void 0 : commentProps.colIdentifierKey
+      ]
     );
     const handleMouseLeave = useCallback(() => {
-      if ((popup == null ? void 0 : popup.openedBy) === "hover") {
-        hoverTimeoutRef.current = setTimeout(() => {
-          if (!menuAnchorEl) {
-            setPopup(null);
-            setEditingComment(null);
-            setSelectedComment(null);
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = setTimeout(() => {
+        if (isPointerOverPortalRef.current || menuAnchorEl) return;
+        setPopup((current) => {
+          if ((current == null ? void 0 : current.openedBy) !== "hover") {
+            return current;
           }
-        }, 200);
-      } else {
-        setPopup(null);
+          return null;
+        });
         setEditingComment(null);
         setSelectedComment(null);
-      }
-    }, [popup, menuAnchorEl]);
+      }, 200);
+    }, [menuAnchorEl]);
     const handleMouseEnter = useCallback(() => {
-      if ((popup == null ? void 0 : popup.openedBy) === "hover") {
+      clearTimeout(hoverTimeoutRef.current);
+    }, []);
+    const handlePortalMouseEnter = useCallback(() => {
+      isPointerOverPortalRef.current = true;
+      handleMouseEnter();
+    }, [handleMouseEnter]);
+    const handlePortalMouseLeave = useCallback(() => {
+      isPointerOverPortalRef.current = false;
+      handleMouseLeave();
+    }, [handleMouseLeave]);
+    useEffect(() => {
+      if (!popup) {
+        isPointerOverPortalRef.current = false;
         clearTimeout(hoverTimeoutRef.current);
       }
     }, [popup]);
@@ -1738,8 +1784,8 @@ const Table = forwardRef(
                   onMarkAsReadClick: ((_c = commentProps == null ? void 0 : commentProps.configuration) == null ? void 0 : _c.disableMarkAsRead) ? null : commentProps == null ? void 0 : commentProps.handleMarkAsRead,
                   onMarkAsResolvedClick: ((_d = commentProps == null ? void 0 : commentProps.configuration) == null ? void 0 : _d.disableMarkAsResolved) ? null : handleMarkAsResolved,
                   onMenuClick: handleMenuClick,
-                  onMouseEnter: handleMouseEnter,
-                  onMouseLeave: handleMouseLeave,
+                  onMouseEnter: handlePortalMouseEnter,
+                  onMouseLeave: handlePortalMouseLeave,
                   onUpdateComment: handleUpdateComment
                 },
                 (popup == null ? void 0 : popup.cellId) || "comments-portal"

package/dist/components/Table/withCommentIcon.js

@@ -67,11 +67,11 @@ const withCommentIcon = (Renderer) => {
             zIndex: 2
           },
           title: `${commentsArray.length} comment${commentsArray.length > 1 ? "s" : ""}`,
-          onMouseLeave: handleMouseLeave,
-          onMouseOver: () => {
+          onMouseEnter: () => {
             handleMouseEnter();
             handleCommentIconHover(props);
           },
+          onMouseLeave: handleMouseLeave,
           children: /* @__PURE__ */ jsx("img", { alt: "", src: CommentIndicator })
         }
       )

package/dist/mcp-component-registry.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-06-24T14:29:53.334Z",
+  "generatedAt": "2026-06-26T12:21:22.614Z",
   "components": {
     "Accordion": {
       "title": "Components/Accordion",
@@ -1875,7 +1875,7 @@
           "required": true
         },
         "withActionButtons": {
-          "description": "Show Cancel/Apply at bottom (use with withCheckbox)",
+          "description": "Show Apply at bottom (use with withCheckbox); pass tertiaryButtonLabel to show Cancel",
           "type": "unknown",
           "required": true
         },

package/dist/node_modules/@mui/system/colorManipulator.js

@@ -1,7 +1,7 @@
 import { __exports as colorManipulator } from "../../../_virtual/colorManipulator.js";
 import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import require$$1 from "../../../_virtual/index4.js";
-import require$$2 from "../../../_virtual/index5.js";
+import require$$1 from "../../../_virtual/index3.js";
+import require$$2 from "../../../_virtual/index4.js";
 var _interopRequireDefault = require$$0;
 Object.defineProperty(colorManipulator, "__esModule", {
   value: true

package/dist/node_modules/prop-types/index.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from "../../_virtual/_commonjsHelpers.js";
-import { __module as propTypes } from "../../_virtual/index3.js";
+import { __module as propTypes } from "../../_virtual/index2.js";
 import { __require as requireReactIs } from "./node_modules/react-is/index.js";
 import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.js";
 import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.js";

package/dist/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as reactIs } from "../../_virtual/index2.js";
+import { __module as reactIs } from "../../_virtual/index5.js";
 import { __require as requireReactIs_production } from "./cjs/react-is.production.js";
 import { __require as requireReactIs_development } from "./cjs/react-is.development.js";
 if (process.env.NODE_ENV === "production") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "4.0.0-alpha.21",
+  "version": "4.0.0-alpha.22",
   "description": "Impact Analytics UI library",
   "type": "module",
   "main": "./dist/components/index.js",