impact-ui 4.0.18 → 5.0.0-alpha.2

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

@@ -1,29 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { Plus as Plus_default, SaveViewDeleteIcon as SaveViewDeleteIcon_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import default_1 from "../../node_modules/@mui/icons-material/DragIndicator.js";
+import { getAssetUrl } from "../../utils/assetBase.js";
 import { Badge } from "../Badge/index.js";
 import { Button } from "../Button/index.js";
 import { Modal } from "../Modal/index.js";
 import { Select } from "../Select/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { useTranslation } from "../../i18n/useTranslation.js";
-function getSortOrderOptionsByFilter(filterType, t) {
-  const textOptions = [
-    { label: t("table.sort.ascending"), value: "asc" },
-    { label: t("table.sort.descending"), value: "desc" }
-  ];
-  const numberOptions = [
-    { label: t("table.sort.smallestToLargest"), value: "asc" },
-    { label: t("table.sort.largestToSmallest"), value: "desc" }
-  ];
+const SaveViewDeleteIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/saveViewDeleteIcon.svg"), ...props });
+const AddOutlinedIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/plus.svg"), ...props });
+const SORT_ORDER_OPTIONS_TEXT = [
+  { label: "Ascending (A To Z)", value: "asc" },
+  { label: "Descending (Z To A)", value: "desc" }
+];
+const SORT_ORDER_OPTIONS_NUMBER = [
+  { label: "Smallest to largest", value: "asc" },
+  { label: "Largest to smallest", value: "desc" }
+];
+function getSortOrderOptionsByFilter(filterType) {
   if (filterType === "agNumberColumnFilter") {
-    return numberOptions;
+    return SORT_ORDER_OPTIONS_NUMBER;
   }
   if (filterType === "agTextColumnFilter") {
-    return textOptions;
+    return SORT_ORDER_OPTIONS_TEXT;
   }
-  return textOptions;
+  return SORT_ORDER_OPTIONS_TEXT;
 }
 let nextId = 1;
 const generateId = () => `sort-row-${nextId++}`;
@@ -60,20 +61,19 @@ function SortRow({
   onOrderChange,
   onDelete,
   dragHandlers,
-  rowsCount,
-  t
+  rowsCount
 }) {
   const [columnIsOpen, setColumnIsOpen] = useState(false);
   const [orderIsOpen, setOrderIsOpen] = useState(false);
   const [columnCurrentOptions, setColumnCurrentOptions] = useState(availableColumnOptions);
   const [orderCurrentOptions, setOrderCurrentOptions] = useState(
-    getSortOrderOptionsByFilter(selectedColumnFilter, t)
+    getSortOrderOptionsByFilter(selectedColumnFilter)
   );
   useEffect(() => {
     setColumnCurrentOptions(availableColumnOptions);
   }, [availableColumnOptions]);
   useEffect(() => {
-    setOrderCurrentOptions(getSortOrderOptionsByFilter(selectedColumnFilter, t));
+    setOrderCurrentOptions(getSortOrderOptionsByFilter(selectedColumnFilter));
   }, [selectedColumnFilter]);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -99,9 +99,9 @@ function SortRow({
                 handleChange: (val) => onColumnChange(index, val),
                 initialOptions: availableColumnOptions,
                 isOpen: columnIsOpen,
-                label: t("table.sort.column"),
+                label: "Column",
                 minWidth: "210px",
-                placeholder: t("table.sort.selectColumn"),
+                placeholder: "Select column",
                 selectedOptions: selectedColumnOption,
                 setCurrentOptions: setColumnCurrentOptions,
                 setIsOpen: setColumnIsOpen,
@@ -115,11 +115,11 @@ function SortRow({
                 withPortal: true,
                 currentOptions: orderCurrentOptions,
                 handleChange: (val) => onOrderChange(index, val),
-                initialOptions: getSortOrderOptionsByFilter(selectedColumnFilter, t),
+                initialOptions: getSortOrderOptionsByFilter(selectedColumnFilter),
                 isOpen: orderIsOpen,
-                label: t("table.sort.sortingOrder"),
+                label: "Sorting Order",
                 minWidth: "210px",
-                placeholder: t("table.sort.selectSortingOrder"),
+                placeholder: "Select sorting order",
                 selectedOptions: selectedOrderOption,
                 setCurrentOptions: setOrderCurrentOptions,
                 setIsOpen: setOrderIsOpen,
@@ -134,7 +134,7 @@ function SortRow({
             Badge,
             {
               color: "default",
-              label: t("table.sort.priority", { number: index + 1 }),
+              label: `Priority ${index + 1}`,
               size: "default",
               sx: {
                 background: "#F1F3FE !important",
@@ -146,11 +146,11 @@ function SortRow({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "divider-line" }),
-          /* @__PURE__ */ jsx(Tooltip, { title: t("table.sort.delete"), variant: "tertiary", children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Tooltip, { title: "Delete", variant: "tertiary", children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block" }, children: /* @__PURE__ */ jsx(
             Button,
             {
               disabled: rowsCount === 1,
-              icon: /* @__PURE__ */ jsx(SaveViewDeleteIcon_default, {}),
+              icon: /* @__PURE__ */ jsx(SaveViewDeleteIcon, {}),
               size: "medium",
               type: "destructive",
               variant: "secondary",
@@ -163,7 +163,6 @@ function SortRow({
   );
 }
 function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply }) {
-  const { t } = useTranslation();
   const [rows, setRows] = useState([makeEmptyRow()]);
   const dragIndexRef = useRef(null);
   const dragOverIndexRef = useRef(null);
@@ -234,7 +233,7 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
   const getSelectedOrderOption = (order, colId) => {
     var _a;
     const filterType = (_a = getSelectedColumnOption(colId)) == null ? void 0 : _a.filter;
-    return getSortOrderOptionsByFilter(filterType, t).find((o) => o.value === order) || null;
+    return getSortOrderOptionsByFilter(filterType).find((o) => o.value === order) || null;
   };
   const usedColIds = rows.map((r) => r.colId).filter(Boolean);
   const getAvailableColumnOptionsForRow = (rowColId) => columnOptions.filter((opt) => opt.value === rowColId || !usedColIds.includes(opt.value));
@@ -243,17 +242,17 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
     {
       className: "advance-sort-modal",
       open,
-      primaryButtonLabel: t("common.apply"),
-      secondaryButtonLabel: t("common.cancel"),
+      primaryButtonLabel: "Apply",
+      secondaryButtonLabel: "Cancel",
       size: "medium",
-      title: t("table.sort.title"),
+      title: "Advance Sort",
       onClose,
       onPrimaryButtonClick: handleApply,
       onSecondaryButtonClick: onClose,
       children: /* @__PURE__ */ jsxs("div", { className: "advance-sort-modal-body", children: [
         /* @__PURE__ */ jsxs("div", { className: "advance-sort-section-header", children: [
-          /* @__PURE__ */ jsx("span", { className: "advance-sort-section-title", children: t("table.sort.columnSort") }),
-          /* @__PURE__ */ jsx(Button, { variant: "url", onClick: handleClearAll, children: t("common.clearAll") })
+          /* @__PURE__ */ jsx("span", { className: "advance-sort-section-title", children: "Column sort" }),
+          /* @__PURE__ */ jsx(Button, { variant: "url", onClick: handleClearAll, children: "Clear All" })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "advance-sort-rows", children: rows.map((row, index) => {
           var _a;
@@ -268,7 +267,6 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
               selectedColumnFilter: (_a = getSelectedColumnOption(row.colId)) == null ? void 0 : _a.filter,
               selectedColumnOption: getSelectedColumnOption(row.colId),
               selectedOrderOption: getSelectedOrderOption(row.order, row.colId),
-              t,
               onColumnChange: handleColumnChange,
               onDelete: handleDeleteRow,
               onOrderChange: handleOrderChange
@@ -277,16 +275,16 @@ function AdvanceSortModal({ open, onClose, colDefs = [], sortState = [], onApply
           );
         }) }),
         /* @__PURE__ */ jsxs("div", { className: "advance-sort-footer-actions", children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClearValues, children: t("table.sort.clearValues") }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleClearValues, children: "Clear Values" }),
           /* @__PURE__ */ jsx(
             Button,
             {
               className: "advance-sort-add-level-button",
               disabled: columnOptions.length === rows.length,
-              icon: /* @__PURE__ */ jsx(Plus_default, {}),
+              icon: /* @__PURE__ */ jsx(AddOutlinedIcon, {}),
               variant: "tertiary",
               onClick: handleAddLevel,
-              children: t("table.sort.addLevel")
+              children: "Add Level"
             }
           )
         ] })

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

@@ -11,5 +11,6 @@ declare function AgGridHeader({ children, sortModel, handleInlineSearch, handleC
     initialFilters: any;
     enableHeaderTextWrap?: boolean | undefined;
 }): React.JSX.Element | null;
-export default AgGridHeader;
+declare const _default: React.MemoExoticComponent<typeof AgGridHeader>;
+export default _default;
 //# sourceMappingURL=AgGridHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/AgGridHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAoBxF,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,YAAY,EACZ,cAAc,EACd,oBAA2B,EAC3B,GAAG,IAAI,EACR;;;;;;;;;;CAAA,4BAo7BA;;AA2BD,wBAAuD"}

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

@@ -1,5 +1,5 @@
 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 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";
@@ -10,11 +10,11 @@ import { DatePicker } from "../DatePicker/index.js";
 import { DateRangePicker } from "../DateRangePicker/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 TableSortIcon = getAssetUrl("icons/tableSortIcon.svg");
 const TableSortAscIcon = getAssetUrl("icons/Up.svg");
 const TableSortDescIcon = getAssetUrl("icons/Down.svg");
 function AgGridHeader({
@@ -28,8 +28,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 +86,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 +114,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 +132,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 +141,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 +267,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 +284,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 +320,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 +337,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 +375,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 +417,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 +427,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 +452,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 +485,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 +501,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 +537,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 +555,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 +579,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 +587,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 +630,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 +664,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 +692,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 +710,18 @@ 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(
+                (_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(
                   "img",
                   {
                     alt: "TableSortIcon",
                     className: "ia-table-sort-icon",
-                    src: currentSort === "asc" ? TableSortAscIcon : currentSort === "desc" ? TableSortDescIcon : TableSortIconUrl,
+                    src: currentSort === "asc" ? TableSortAscIcon : currentSort === "desc" ? TableSortDescIcon : TableSortIcon,
                     onClick: onHeaderClick
                   }
                 )
@@ -763,10 +733,10 @@ 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",
@@ -787,7 +757,7 @@ 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,
@@ -807,6 +777,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"}