impact-ui 4.0.17 → 5.0.0-beta.1

package/dist/components/{Table → TableV36}/AgGridHeader.js

@@ -1,22 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef, useState, useCallback, useEffect, Fragment } from "react";
+import React__default, { memo, useRef, useState, useCallback, useEffect, Fragment } from "react";
+import { Up as Up_default, Down as Down_default, TableSortIcon as TableSortIcon_default, MenuTable as MenuTable_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import default_1$1 from "../../node_modules/@mui/icons-material/Close.js";
 import default_1$2 from "../../node_modules/@mui/icons-material/Search.js";
 import default_1 from "../../node_modules/@mui/icons-material/Tune.js";
 import moment from "moment";
-import { getAssetUrl } from "../../utils/assetBase.js";
 import { debounce } from "../../utils/debounce.js";
 import { DatePicker } from "../DatePicker/index.js";
 import { DateRangePicker } from "../DateRangePicker/index.js";
+import { ImpactIcon, impactIconSource } from "../ImpactIcon/index.js";
 import { Input } from "../Input/index.js";
 import { Select } from "../Select/index.js";
-import { isNumericValueColumn, handleNumericKeyDown, isPartialNumericInput, handleNumericPaste, syncFiltersWithModal, parseInlineSearchValue, buildFilterModelEntry } from "./filterUtils.js";
+import { syncFiltersWithModal, parseInlineSearchValue, buildFilterModelEntry } from "./filterUtils.js";
+import HighlightedText from "./HighlightedText.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { useTranslation } from "../../i18n/useTranslation.js";
 import Badge from "../../node_modules/@mui/material/Badge/Badge.js";
-const TableSortIconUrl = getAssetUrl("icons/tableSortIcon.svg");
-const TableSortAscIcon = getAssetUrl("icons/Up.svg");
-const TableSortDescIcon = getAssetUrl("icons/Down.svg");
 function AgGridHeader({
   children,
   sortModel,
@@ -28,8 +26,7 @@ function AgGridHeader({
   enableHeaderTextWrap = true,
   ...rest
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa;
-  const { t } = useTranslation();
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa;
   if (!rest.column || !rest.api) {
     return null;
   }
@@ -87,7 +84,7 @@ function AgGridHeader({
   const containerRef = useRef(null);
   const [containerHeight, setContainerHeight] = useState(0);
   const onFilterChanged = useCallback(() => {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
     const newFilterModel = (_a2 = rest.api) == null ? void 0 : _a2.getFilterModel();
     const columnId = ((_b2 = rest.column) == null ? void 0 : _b2.field) || ((_c2 = rest.column) == null ? void 0 : _c2.colId);
     const columnFilter = newFilterModel == null ? void 0 : newFilterModel[columnId];
@@ -115,13 +112,13 @@ function AgGridHeader({
         }
       } else {
         filterValue = isMultiSelect && (columnFilter == null ? void 0 : columnFilter.conditions) ? (_f2 = columnFilter == null ? void 0 : columnFilter.conditions) == null ? void 0 : _f2.map((condition) => condition.filter) : columnFilter == null ? void 0 : columnFilter.filter;
-        if (((_h2 = (_g2 = rest.column) == null ? void 0 : _g2.colDef) == null ? void 0 : _h2.thirdOptionAsDropdown) && filterValue != null && filterValue !== "") {
+        if (((_h2 = (_g2 = rest.column) == null ? void 0 : _g2.colDef) == null ? void 0 : _h2.thirdOptionAsDropdown) && filterValue) {
           const initialDropdownOption = (_j2 = (_i2 = rest.column) == null ? void 0 : _i2.colDef) == null ? void 0 : _j2.thirdOptionDropdownOptions;
           let option = null;
           if (isMultiSelect) {
             option = initialDropdownOption == null ? void 0 : initialDropdownOption.filter((option2) => filterValue.includes(option2.value));
           } else {
-            option = initialDropdownOption == null ? void 0 : initialDropdownOption.find((option2) => option2.value == filterValue);
+            option = initialDropdownOption == null ? void 0 : initialDropdownOption.find((option2) => option2.value === filterValue);
           }
           if (option) {
             setSelectedDropdownOption(
@@ -133,12 +130,8 @@ function AgGridHeader({
           setSearchText(displayValue);
         }
       }
-      const gridModel = (_m2 = (_l2 = rest.api) == null ? void 0 : _l2.getModel) == null ? void 0 : _m2.call(_l2);
-      const advancedFilterModel = gridModel == null ? void 0 : gridModel.advancedFilterModel;
-      if (advancedFilterModel && ((_n2 = rest.column) == null ? void 0 : _n2.colId) && advancedFilterModel[rest.column.colId]) ;
     }
-    const isFilterEmpty = filterValue === null || filterValue === void 0 || filterValue === "";
-    if (isFilterEmpty) {
+    if (!filterValue) {
       setSearchText("");
       setSelectedDropdownOption(isMultiSelect ? [] : null);
       setSelectedDate(null);
@@ -146,8 +139,8 @@ function AgGridHeader({
       setEndDate(null);
       setHasActiveSearch(false);
     } else {
-      if (!((_p2 = (_o2 = rest.column) == null ? void 0 : _o2.colDef) == null ? void 0 : _p2.thirdOptionAsDropdown)) {
-        const displayValue = getLabelFromDropdownValue(filterValue, (_q2 = rest.column) == null ? void 0 : _q2.colDef);
+      if (!((_m2 = (_l2 = rest.column) == null ? void 0 : _l2.colDef) == null ? void 0 : _m2.thirdOptionAsDropdown)) {
+        const displayValue = getLabelFromDropdownValue(filterValue, (_n2 = rest.column) == null ? void 0 : _n2.colDef);
         setSearchText(displayValue);
       }
       setHasActiveSearch(true);
@@ -272,17 +265,15 @@ function AgGridHeader({
     }, 0);
   };
   const applyFilterToGrid = (inputValue, filterType) => {
-    var _a2, _b2, _c2, _d2, _e2;
-    const currentFilterModel = {
-      ...rest.sortModel || ((_b2 = (_a2 = rest.api) == null ? void 0 : _a2.getFilterModel) == null ? void 0 : _b2.call(_a2)) || {}
-    };
-    const filterEntry = buildFilterModelEntry(inputValue, filterType, (_c2 = rest.column) == null ? void 0 : _c2.colDef);
+    var _a2;
+    const currentFilterModel = rest.sortModel || rest.api.getFilterModel();
+    const filterEntry = buildFilterModelEntry(inputValue, filterType, (_a2 = rest.column) == null ? void 0 : _a2.colDef);
     if (filterEntry === void 0) {
       delete currentFilterModel[rest.column.colId];
     } else {
       currentFilterModel[rest.column.colId] = filterEntry;
     }
-    (_e2 = (_d2 = rest.api) == null ? void 0 : _d2.setFilterModel) == null ? void 0 : _e2.call(_d2, currentFilterModel);
+    rest.api.setFilterModel(currentFilterModel);
     updateEmptyStateOverlay();
   };
   const debouncedHandleSearchChange = useCallback(
@@ -291,11 +282,6 @@ function AgGridHeader({
     }, debounceTime),
     []
   );
-  const applySearchText = (value) => {
-    setSearchText(value);
-    setHasActiveSearch(value != null && value !== "");
-    debouncedHandleSearchChange(value);
-  };
   const handleSearch = (e) => {
     var _a2, _b2;
     e.stopPropagation();
@@ -332,7 +318,6 @@ function AgGridHeader({
     }
     updateEmptyStateOverlay();
   };
-  const isNumericSearchColumn = isNumericValueColumn((_k = rest.column) == null ? void 0 : _k.colDef);
   const MIN_SEARCH_WIDTH = 200;
   const expandColumnIfNeeded = () => {
     var _a2;
@@ -350,10 +335,11 @@ function AgGridHeader({
       originalColumnWidthRef.current = null;
     }
   };
-  const handleClickOutside = (event) => {
-    setMenuvisible(false);
-  };
   useEffect(() => {
+    if (!menuVisible) return void 0;
+    const handleClickOutside = () => {
+      setMenuvisible(false);
+    };
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
@@ -387,30 +373,31 @@ function AgGridHeader({
       return (_a3 = rest.api) == null ? void 0 : _a3.removeEventListener("sortChanged", onSortChanged);
     };
   }, [rest.api, rest.column]);
-  const onColumnMoved = (params) => {
-    var _a2;
-    if (((_a2 = params == null ? void 0 : params.column) == null ? void 0 : _a2.colId) && (showInputField || showDatePicker)) {
-      rest.api.applyColumnState({
-        state: [
-          {
-            colId: params.column.colId,
-            width: params.column.actualWidth
-          }
-        ],
-        defaultState: { width: null }
-      });
-    }
-  };
+  const onColumnMoved = useCallback(
+    (params) => {
+      var _a2, _b2;
+      if (((_a2 = params == null ? void 0 : params.column) == null ? void 0 : _a2.colId) && (showInputField || showDatePicker)) {
+        (_b2 = rest.api) == null ? void 0 : _b2.applyColumnState({
+          state: [
+            {
+              colId: params.column.colId,
+              width: params.column.actualWidth
+            }
+          ],
+          defaultState: { width: null }
+        });
+      }
+    },
+    [rest.api, showInputField, showDatePicker]
+  );
   useEffect(() => {
-    var _a2;
-    if (rest) {
-      (_a2 = rest.api) == null ? void 0 : _a2.addEventListener("columnResized", onColumnMoved);
-    }
+    const api = rest.api;
+    if (!api) return void 0;
+    api.addEventListener("columnResized", onColumnMoved);
     return () => {
-      var _a3;
-      (_a3 = rest.api) == null ? void 0 : _a3.removeEventListener("columnResized", onColumnMoved);
+      api.removeEventListener("columnResized", onColumnMoved);
     };
-  }, [rest]);
+  }, [rest.api, onColumnMoved]);
   useEffect(() => {
     var _a2;
     const colDef = (_a2 = rest.column) == null ? void 0 : _a2.colDef;
@@ -428,7 +415,7 @@ function AgGridHeader({
         colDef.suppressHeaderKeyboardEvent = originalSuppressHeaderKeyboardEventRef.current;
       }
     };
-  }, [isInputFocused, (_l = rest.column) == null ? void 0 : _l.colId]);
+  }, [isInputFocused, (_k = rest.column) == null ? void 0 : _k.colId]);
   useEffect(() => {
     if (containerRef.current) {
       setContainerHeight(containerRef.current.clientHeight);
@@ -438,15 +425,15 @@ function AgGridHeader({
     "div",
     {
       ref: containerRef,
-      className: `custom-ag-header-container ${((_n = (_m = rest.column) == null ? void 0 : _m.colDef) == null ? void 0 : _n.checkboxSelection) ? "checkbox-selection" : ""} ${((_p = (_o = rest.column) == null ? void 0 : _o.colDef) == null ? void 0 : _p.customHeaderIcons) || !((_r = (_q = rest.column) == null ? void 0 : _q.colDef) == null ? void 0 : _r.suppressMenu) || ((_t = (_s = rest.column) == null ? void 0 : _s.colDef) == null ? void 0 : _t.isSearchable) ? "with-icons" : ""}`,
+      className: `custom-ag-header-container ${((_m = (_l = rest.column) == null ? void 0 : _l.colDef) == null ? void 0 : _m.checkboxSelection) || ((_n = rest.column) == null ? void 0 : _n.colId) === "ag-Grid-SelectionColumn" ? "checkbox-selection" : ""} ${((_p = (_o = rest.column) == null ? void 0 : _o.colDef) == null ? void 0 : _p.customHeaderIcons) || !(((_r = (_q = rest.column) == null ? void 0 : _q.colDef) == null ? void 0 : _r.suppressHeaderMenuButton) ?? ((_t = (_s = rest.column) == null ? void 0 : _s.colDef) == null ? void 0 : _t.suppressMenu)) || ((_v = (_u = rest.column) == null ? void 0 : _u.colDef) == null ? void 0 : _v.isSearchable) ? "with-icons" : ""}`,
       onClick: () => rest.onClick(),
       children: showDatePicker ? /* @__PURE__ */ jsxs("div", { className: `ia-search-input-field ia-search-input-narrow`, children: [
-        ((_v = (_u = rest.column) == null ? void 0 : _u.colDef) == null ? void 0 : _v.thirdOptionAsDateRangePicker) ? /* @__PURE__ */ jsx(
+        ((_x = (_w = rest.column) == null ? void 0 : _w.colDef) == null ? void 0 : _x.thirdOptionAsDateRangePicker) ? /* @__PURE__ */ jsx(
           DateRangePicker,
           {
             fullWidth: true,
             withPortal: true,
-            customIcon: ((_x = (_w = rest.column) == null ? void 0 : _w.colDef) == null ? void 0 : _x.advanceSearchEnabled) && /* @__PURE__ */ jsx(
+            customIcon: ((_z = (_y = rest.column) == null ? void 0 : _y.colDef) == null ? void 0 : _z.advanceSearchEnabled) && /* @__PURE__ */ jsx(
               default_1,
               {
                 className: "ia-search-input-field-custom-icon",
@@ -463,7 +450,7 @@ function AgGridHeader({
                 }
               }
             ),
-            displayFormat: ((_z = (_y = rest.column) == null ? void 0 : _y.colDef) == null ? void 0 : _z.displayFormat) || "MM-DD-YYYY",
+            displayFormat: ((_B = (_A = rest.column) == null ? void 0 : _A.colDef) == null ? void 0 : _B.displayFormat) || "MM-DD-YYYY",
             endDate,
             handleDatesChange: (start, end) => {
               setStartDate(start);
@@ -496,7 +483,7 @@ function AgGridHeader({
             fullWidth: true,
             showMonthYearSelect: true,
             withPortal: true,
-            customIcon: ((_B = (_A = rest.column) == null ? void 0 : _A.colDef) == null ? void 0 : _B.advanceSearchEnabled) && /* @__PURE__ */ jsx(
+            customIcon: ((_D = (_C = rest.column) == null ? void 0 : _C.colDef) == null ? void 0 : _D.advanceSearchEnabled) && /* @__PURE__ */ jsx(
               default_1,
               {
                 className: "ia-search-input-field-custom-icon",
@@ -512,10 +499,10 @@ function AgGridHeader({
                 }
               }
             ),
-            displayFormat: ((_D = (_C = rest.column) == null ? void 0 : _C.colDef) == null ? void 0 : _D.displayFormat) || "MM-DD-YYYY",
+            displayFormat: ((_F = (_E = rest.column) == null ? void 0 : _E.colDef) == null ? void 0 : _F.displayFormat) || "MM-DD-YYYY",
             maxDate: /* @__PURE__ */ new Date("2100-12-31"),
             minDate: /* @__PURE__ */ new Date("2000-01-01"),
-            placeholder: t("table.filter.selectDate"),
+            placeholder: "Select Date",
             selectedDate,
             setSelectedDate,
             onPrimaryButtonClick: () => {
@@ -548,9 +535,9 @@ function AgGridHeader({
         "div",
         {
           className: `ia-search-input-field ia-search-input-narrow
-             ${((_F = (_E = rest.column) == null ? void 0 : _E.colDef) == null ? void 0 : _F.thirdOptionAsDropdown) ? "with-dropdown" : ""}`,
+             ${((_H = (_G = rest.column) == null ? void 0 : _G.colDef) == null ? void 0 : _H.thirdOptionAsDropdown) ? "with-dropdown" : ""}`,
           children: [
-            ((_H = (_G = rest.column) == null ? void 0 : _G.colDef) == null ? void 0 : _H.thirdOptionAsDropdown) && !((_J = (_I = rest.column) == null ? void 0 : _I.colDef) == null ? void 0 : _J.toShowDuplicateColumnInAdvanceSearch) ? /* @__PURE__ */ jsxs(
+            ((_J = (_I = rest.column) == null ? void 0 : _I.colDef) == null ? void 0 : _J.thirdOptionAsDropdown) && !((_L = (_K = rest.column) == null ? void 0 : _K.colDef) == null ? void 0 : _L.toShowDuplicateColumnInAdvanceSearch) ? /* @__PURE__ */ jsxs(
               "div",
               {
                 id: "ia-select-option-dropdown-container",
@@ -566,13 +553,13 @@ function AgGridHeader({
                     {
                       currentOptions: currentDropdownOptions,
                       dropDownPortalClassName: "ag-select-dropdown-portal",
-                      initialOptions: (_L = (_K = rest == null ? void 0 : rest.column) == null ? void 0 : _K.colDef) == null ? void 0 : _L.thirdOptionDropdownOptions,
+                      initialOptions: (_N = (_M = rest == null ? void 0 : rest.column) == null ? void 0 : _M.colDef) == null ? void 0 : _N.thirdOptionDropdownOptions,
                       isClearable: true,
-                      isMulti: (_N = (_M = rest == null ? void 0 : rest.column) == null ? void 0 : _M.colDef) == null ? void 0 : _N.enableMultiSelect,
+                      isMulti: (_P = (_O = rest == null ? void 0 : rest.column) == null ? void 0 : _O.colDef) == null ? void 0 : _P.enableMultiSelect,
                       isOpen: isDropdownOpen,
                       isSelectAll,
-                      isWithSearch: (_P = (_O = rest == null ? void 0 : rest.column) == null ? void 0 : _O.colDef) == null ? void 0 : _P.enableSearch,
-                      placeholder: t("table.filter.selectOption"),
+                      isWithSearch: (_R = (_Q = rest == null ? void 0 : rest.column) == null ? void 0 : _Q.colDef) == null ? void 0 : _R.enableSearch,
+                      placeholder: "Select option",
                       selectedOptions: selectedDropdownOption,
                       setCurrentOptions: setCurrentDropdownOptions,
                       setIsOpen: setIsDropdownOpen,
@@ -590,7 +577,7 @@ function AgGridHeader({
                           }
                         }
                       },
-                      toggleSelectAll: (_R = (_Q = rest == null ? void 0 : rest.column) == null ? void 0 : _Q.colDef) == null ? void 0 : _R.enableMultiSelect,
+                      toggleSelectAll: (_T = (_S = rest == null ? void 0 : rest.column) == null ? void 0 : _S.colDef) == null ? void 0 : _T.enableMultiSelect,
                       onClearAll: () => {
                         setSelectedDropdownOption(isMultiSelect ? [] : null);
                         setHasActiveSearch(false);
@@ -598,22 +585,17 @@ function AgGridHeader({
                         setIsSelectAll(false);
                       },
                       onDropdownClose: () => {
-                        if (isMultiSelect) {
-                          if ((selectedDropdownOption == null ? void 0 : selectedDropdownOption.length) > 0) {
-                            setHasActiveSearch(true);
-                            handleSearchChange(selectedDropdownOption);
-                          } else {
-                            setHasActiveSearch(false);
-                            handleSearchChange(null);
-                          }
+                        if (isMultiSelect && (selectedDropdownOption == null ? void 0 : selectedDropdownOption.length) > 0) {
+                          setHasActiveSearch(true);
+                          handleSearchChange(selectedDropdownOption);
                         }
                       },
                       withPortal: true,
                       minWidth: "100%",
-                      ...(_T = (_S = rest.column) == null ? void 0 : _S.colDef) == null ? void 0 : _T.selectProps
+                      ...(_V = (_U = rest.column) == null ? void 0 : _U.colDef) == null ? void 0 : _V.selectProps
                     }
                   ),
-                  ((_V = (_U = rest.column) == null ? void 0 : _U.colDef) == null ? void 0 : _V.advanceSearchEnabled) && /* @__PURE__ */ jsx(
+                  ((_X = (_W = rest.column) == null ? void 0 : _W.colDef) == null ? void 0 : _X.advanceSearchEnabled) && /* @__PURE__ */ jsx(
                     default_1,
                     {
                       className: "ia-search-input-field-custom-icon",
@@ -646,21 +628,9 @@ function AgGridHeader({
               Input,
               {
                 ref: inputRef,
-                iconClickOnDisabled: (_X = (_W = rest.column) == null ? void 0 : _W.colDef) == null ? void 0 : _X.toShowDuplicateColumnInAdvanceSearch,
-                inputProps: {
-                  ...isNumericSearchColumn ? {
-                    // "text" so Shift+Minus (_) is not blocked by decimal inputMode; keys are
-                    // still validated in handleNumericKeyDown / isPartialNumericInput.
-                    inputMode: "text",
-                    onKeyDown: handleNumericKeyDown,
-                    onPaste: (e) => {
-                      handleNumericPaste(e, applySearchText);
-                    }
-                  } : {},
-                  ...((_Z = (_Y = rest.column) == null ? void 0 : _Y.colDef) == null ? void 0 : _Z.inputProps) ?? {}
-                },
+                iconClickOnDisabled: (_Z = (_Y = rest.column) == null ? void 0 : _Y.colDef) == null ? void 0 : _Z.toShowDuplicateColumnInAdvanceSearch,
                 isDisabled: (_$ = (__ = rest.column) == null ? void 0 : __.colDef) == null ? void 0 : _$.toShowDuplicateColumnInAdvanceSearch,
-                placeholder: t("common.search"),
+                placeholder: "Search",
                 rightIcon: /* @__PURE__ */ jsxs(Fragment, { children: [
                   searchText.toString().length > 0 && /* @__PURE__ */ jsx(
                     default_1$1,
@@ -692,11 +662,9 @@ function AgGridHeader({
                 ] }),
                 value: searchText,
                 onChange: (e) => {
-                  const nextValue = e.target.value;
-                  if (isNumericSearchColumn && !isPartialNumericInput(nextValue)) {
-                    return;
-                  }
-                  applySearchText(nextValue);
+                  setSearchText(e.target.value);
+                  setHasActiveSearch(!!e.target.value);
+                  debouncedHandleSearchChange(e.target.value);
                 }
               }
             ),
@@ -722,7 +690,7 @@ function AgGridHeader({
             {
               className: `ag-header-cell-text ${((_da = (_ca = rest.column) == null ? void 0 : _ca.colDef) == null ? void 0 : _da.sortable) ? "sortable" : ""} ${enableHeaderTextWrap ? "header-wrap-enabled" : ""}`,
               children: [
-                ((_fa = (_ea = rest.column) == null ? void 0 : _ea.colDef) == null ? void 0 : _fa.field) === "Selection" || ((_ha = (_ga = rest.column) == null ? void 0 : _ga.colDef) == null ? void 0 : _ha.checkboxSelection) ? children : /* @__PURE__ */ jsx(
+                ((_fa = (_ea = rest.column) == null ? void 0 : _ea.colDef) == null ? void 0 : _fa.field) === "Selection" || ((_ha = (_ga = rest.column) == null ? void 0 : _ga.colDef) == null ? void 0 : _ha.checkboxSelection) || ((_ia = rest.column) == null ? void 0 : _ia.colId) === "ag-Grid-SelectionColumn" ? children : /* @__PURE__ */ jsx(
                   "div",
                   {
                     ref: headerTextRef,
@@ -740,18 +708,20 @@ function AgGridHeader({
                         orientation: "top",
                         title: isOverflowText && children !== "Selection" ? children : "",
                         variant: "tertiary",
-                        children
+                        children: typeof children === "string" && ((_ja = rest.context) == null ? void 0 : _ja.columnSearchText) ? /* @__PURE__ */ jsx(HighlightedText, { searchText: rest.context.columnSearchText, text: children }) : children
                       }
                     )
                   }
                 ),
-                (_ja = (_ia = rest.column) == null ? void 0 : _ia.colDef) == null ? void 0 : _ja.headerIcons,
-                ((_la = (_ka = rest.column) == null ? void 0 : _ka.colDef) == null ? void 0 : _la.sortable) && /* @__PURE__ */ jsx(
-                  "img",
+                (_la = (_ka = rest.column) == null ? void 0 : _ka.colDef) == null ? void 0 : _la.headerIcons,
+                ((_na = (_ma = rest.column) == null ? void 0 : _ma.colDef) == null ? void 0 : _na.sortable) && /* @__PURE__ */ jsx(
+                  ImpactIcon,
                   {
-                    alt: "TableSortIcon",
                     className: "ia-table-sort-icon",
-                    src: currentSort === "asc" ? TableSortAscIcon : currentSort === "desc" ? TableSortDescIcon : TableSortIconUrl,
+                    icon: impactIconSource(
+                      currentSort === "asc" ? Up_default : currentSort === "desc" ? Down_default : TableSortIcon_default
+                    ),
+                    size: 16,
                     onClick: onHeaderClick
                   }
                 )
@@ -763,17 +733,17 @@ function AgGridHeader({
             {
               className: `ia-icon-div ${hasActiveSearch ? "has-active-search" : ""} ${menuVisible ? "menu-visible" : ""}`,
               children: [
-                (_oa = (_na = (_ma = rest.column) == null ? void 0 : _ma.colDef) == null ? void 0 : _na.customHeaderIcons) == null ? void 0 : _oa.map((icon) => {
+                (_qa = (_pa = (_oa = rest.column) == null ? void 0 : _oa.colDef) == null ? void 0 : _pa.customHeaderIcons) == null ? void 0 : _qa.map((icon) => {
                   return icon;
                 }),
-                ((_qa = (_pa = rest.column) == null ? void 0 : _pa.colDef) == null ? void 0 : _qa.isSearchable) && (hasActiveSearch || !showInputField) && /* @__PURE__ */ jsx(Badge, { invisible: !hasActiveSearch, variant: "dot", children: /* @__PURE__ */ jsx(
+                ((_sa = (_ra = rest.column) == null ? void 0 : _ra.colDef) == null ? void 0 : _sa.isSearchable) && (hasActiveSearch || !showInputField) && /* @__PURE__ */ jsx(Badge, { invisible: !hasActiveSearch, variant: "dot", children: /* @__PURE__ */ jsx(
                   default_1$2,
                   {
                     fontSize: "small",
                     style: {
-                      color: "#60697D",
+                      color: "var(--iu-on-surface-label)",
                       cursor: "pointer",
-                      backgroundColor: hasActiveSearch && "#ECEEFD",
+                      backgroundColor: hasActiveSearch && "var(--iu-bg-primary-subtle)",
                       display: menuVisible && !hasActiveSearch ? "none" : "block"
                     },
                     onClick: rest.onColumnSearchClick ? () => {
@@ -787,16 +757,26 @@ function AgGridHeader({
                     } : handleSearch
                   }
                 ) }),
-                !((_sa = (_ra = rest.column) == null ? void 0 : _ra.colDef) == null ? void 0 : _sa.suppressMenu) && /* @__PURE__ */ jsx("div", { className: "custom-ag-header-icons", children: /* @__PURE__ */ jsx(
+                !(((_ua = (_ta = rest.column) == null ? void 0 : _ta.colDef) == null ? void 0 : _ua.suppressHeaderMenuButton) ?? ((_wa = (_va = rest.column) == null ? void 0 : _va.colDef) == null ? void 0 : _wa.suppressMenu)) && /* @__PURE__ */ jsx("div", { className: "custom-ag-header-icons", children: /* @__PURE__ */ jsx(
                   "button",
                   {
                     ref: menuRef,
-                    className: `custom-ag-menu-icon-button`,
+                    "aria-label": "Column menu",
+                    className: "custom-ag-menu-icon-button",
+                    type: "button",
                     onClick: (e) => {
                       e.stopPropagation();
                       rest.showColumnMenu(menuRef.current);
                       setMenuvisible(true);
-                    }
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      ImpactIcon,
+                      {
+                        className: "ia-header-column-menu-icon",
+                        icon: impactIconSource(MenuTable_default),
+                        size: 14
+                      }
+                    )
                   }
                 ) })
               ]
@@ -807,6 +787,24 @@ function AgGridHeader({
     }
   );
 }
+function areHeaderPropsEqual(prev, next) {
+  const prevCol = prev == null ? void 0 : prev.column;
+  const nextCol = next == null ? void 0 : next.column;
+  if ((prevCol == null ? void 0 : prevCol.colId) !== (nextCol == null ? void 0 : nextCol.colId)) return false;
+  if ((prev == null ? void 0 : prev.displayName) !== (next == null ? void 0 : next.displayName)) return false;
+  if ((prev == null ? void 0 : prev.enableHeaderTextWrap) !== (next == null ? void 0 : next.enableHeaderTextWrap)) return false;
+  if ((prev == null ? void 0 : prev.debounceTime) !== (next == null ? void 0 : next.debounceTime)) return false;
+  const prevDef = (prevCol == null ? void 0 : prevCol.colDef) || {};
+  const nextDef = (nextCol == null ? void 0 : nextCol.colDef) || {};
+  if (prevDef.isSearchable !== nextDef.isSearchable) return false;
+  if (prevDef.sortable !== nextDef.sortable) return false;
+  if (prevDef.filter !== nextDef.filter) return false;
+  if ((prevDef.suppressHeaderMenuButton ?? prevDef.suppressMenu) !== (nextDef.suppressHeaderMenuButton ?? nextDef.suppressMenu)) {
+    return false;
+  }
+  return true;
+}
+const AgGridHeader$1 = memo(AgGridHeader, areHeaderPropsEqual);
 export {
-  AgGridHeader as default
+  AgGridHeader$1 as default
 };

package/dist/components/TableV36/AgGridHeaderGroup.d.ts

@@ -0,0 +1,3 @@
+export declare const AgGridHeaderGroup: import('react').NamedExoticComponent<object>;
+export default AgGridHeaderGroup;
+//# sourceMappingURL=AgGridHeaderGroup.d.ts.map

package/dist/components/TableV36/AgGridHeaderGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridHeaderGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/AgGridHeaderGroup.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,8CA0B5B,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/dist/components/TableV36/AgGridHeaderGroup.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useRef, useState } from "react";
+import HighlightedText from "./HighlightedText.js";
+import { Tooltip } from "../Tooltip/index.js";
+const AgGridHeaderGroup = memo((props) => {
+  const { displayName, context } = props;
+  const textRef = useRef(null);
+  const [isOverflowText, setIsOverflowText] = useState(false);
+  const searchText = context == null ? void 0 : context.columnSearchText;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: textRef,
+      className: "ia-header-group-text",
+      onMouseEnter: () => {
+        var _a, _b, _c, _d;
+        setIsOverflowText(
+          ((_a = textRef.current) == null ? void 0 : _a.scrollWidth) > ((_b = textRef.current) == null ? void 0 : _b.clientWidth) || ((_c = textRef.current) == null ? void 0 : _c.scrollHeight) > ((_d = textRef.current) == null ? void 0 : _d.clientHeight) + 1
+        );
+      },
+      children: /* @__PURE__ */ jsx(Tooltip, { orientation: "top", title: isOverflowText ? displayName : "", variant: "tertiary", children: searchText ? /* @__PURE__ */ jsx(HighlightedText, { searchText, text: displayName }) : /* @__PURE__ */ jsx("span", { children: displayName }) })
+    }
+  );
+});
+AgGridHeaderGroup.displayName = "AgGridHeaderGroup";
+export {
+  AgGridHeaderGroup,
+  AgGridHeaderGroup as default
+};

package/dist/components/TableV36/CellTooltip.d.ts

@@ -0,0 +1,14 @@
+import { CustomTooltipProps } from 'ag-grid-react';
+
+/**
+ * Impact-styled replacement for AG Grid's built-in tooltip bubble.
+ *
+ * AG Grid owns the trigger, positioning and show/hide of its tooltip and renders this component
+ * inside an already-placed popup, so the MUI-based `Tooltip` cannot be reused here — it needs its
+ * own hover anchor. This renders the bubble body only; `.impact-ag-tooltip` in `Table.styles.scss`
+ * mirrors the `tertiary` Tooltip variant. There is no arrow because AG Grid does not expose which
+ * side of the cell it placed the popup on.
+ */
+declare const CellTooltip: ({ value, valueFormatted }: CustomTooltipProps) => import("react").JSX.Element | null;
+export default CellTooltip;
+//# sourceMappingURL=CellTooltip.d.ts.map

package/dist/components/TableV36/CellTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/CellTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,2BAA2B,kBAAkB,uCAYjE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/TableV36/CellTooltip.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const CellTooltip = ({ value, valueFormatted }) => {
+  const raw = valueFormatted ?? value;
+  if (raw === null || raw === void 0 || raw === "") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "impact-ag-tooltip", children: typeof raw === "object" ? JSON.stringify(raw) : String(raw) });
+};
+export {
+  CellTooltip as default
+};

package/dist/components/{Table → TableV36}/CommentsPortal.d.ts

@@ -1,11 +1,13 @@
-declare const CommentsPortal: ({ isOpen, onClose, comments, onAddComment, cellId, position, author: authorProp, onMouseEnter, onMouseLeave, openedBy, onMenuClick, onMarkAsReadClick, onMarkAsResolvedClick, editCommentText, isLoading, error, onClearError, currentAuthor, editingComment, onUpdateComment, setEditingComment, loadParticipantsAvatar, resolvedComments, messageId, configuration, }: {
+import { default as React } from 'react';
+
+declare const CommentsPortal: ({ isOpen, onClose, comments, onAddComment, cellId, position, author, onMouseEnter, onMouseLeave, openedBy, onMenuClick, onMarkAsReadClick, onMarkAsResolvedClick, editCommentText, isLoading, error, onClearError, currentAuthor, editingComment, onUpdateComment, setEditingComment, loadParticipantsAvatar, resolvedComments, messageId, configuration, }: {
     isOpen: any;
     onClose: any;
     comments: any;
     onAddComment: any;
     cellId: any;
     position: any;
-    author: any;
+    author?: string | undefined;
     onMouseEnter: any;
     onMouseLeave: any;
     openedBy: any;
@@ -24,6 +26,6 @@ declare const CommentsPortal: ({ isOpen, onClose, comments, onAddComment, cellId
     resolvedComments?: never[] | undefined;
     messageId?: null | undefined;
     configuration: any;
-}) => import('react').ReactPortal | null;
+}) => React.ReactPortal | null;
 export default CommentsPortal;
 //# sourceMappingURL=CommentsPortal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsPortal.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/CommentsPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAepE,OAAO,4CAA4C,CAAC;AAGpD,QAAA,MAAM,cAAc,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BvB,6BA2WA,CAAC;AAEF,eAAe,cAAc,CAAC"}