@procore/data-table 13.3.0 → 13.3.2

package/dist/modern/index.js

@@ -1011,6 +1011,41 @@ var rowHeightMap = {
   [rowSize.md]: "medium",
   [rowSize.lg]: "large"
 };
+var Spinner = ({
+  loading,
+  ...rest
+}) => /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { "data-qa": loading ? "loading" : "loaded", display: "flex-row", flex: 1 }, /* @__PURE__ */ React82__default.default.createElement(coreReact.Spinner, { loading, size: "md", centered: true, ...rest }));
+function isNestedColumnDefinition(Column2) {
+  return "children" in Column2;
+}
+function isNestedColDef(colDef) {
+  if (!colDef.groupId) {
+    return false;
+  }
+  return "groupId" in colDef;
+}
+function getLeafColDefs(columnDefinitions) {
+  return columnDefinitions.flatMap((colDef) => {
+    return isNestedColDef(colDef) ? getLeafColDefs(colDef.children) : [colDef];
+  });
+}
+function isFirstColumn(params) {
+  const displayedColumns = params?.columnApi?.getAllDisplayedColumns() || [];
+  return displayedColumns.length ? displayedColumns[0] === params.column : false;
+}
+function getCheckboxColumn(columnApi) {
+  const isGrouping = columnApi?.getRowGroupColumns?.()?.length !== 0;
+  if (isGrouping) {
+    return null;
+  }
+  const displayedColumns = columnApi?.getAllDisplayedColumns() || [];
+  return displayedColumns.length ? displayedColumns[0] : null;
+}
+function removeEventListenerFromGrid(event, listener, gridApi) {
+  if (!gridApi || gridApi?.destroyCalled)
+    return;
+  gridApi?.removeEventListener(event, listener);
+}
 
 // src/styles.scss
 var styles_exports = {};
@@ -54010,8 +54045,16 @@ function useFilterState({
     }
     return () => {
       listenersEnabled.current = false;
-      gridApi?.removeEventListener("filterChanged", filterEventFunction);
-      gridApi?.removeEventListener("rowDataUpdated", filterEventFunction);
+      removeEventListenerFromGrid(
+        "filterChanged",
+        filterEventFunction,
+        gridApi
+      );
+      removeEventListenerFromGrid(
+        "rowDataUpdated",
+        filterEventFunction,
+        gridApi
+      );
     };
   }, [gridApi, columnDefinitions]);
   return { allAvailableFilters, changeFilterValue, filterableColumns };
@@ -54493,36 +54536,6 @@ var ServerSideFilter = ({
     )
   );
 };
-var Spinner2 = ({
-  loading,
-  ...rest
-}) => /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { "data-qa": loading ? "loading" : "loaded", display: "flex-row", flex: 1 }, /* @__PURE__ */ React82__default.default.createElement(coreReact.Spinner, { loading, size: "md", centered: true, ...rest }));
-function isNestedColumnDefinition(Column2) {
-  return "children" in Column2;
-}
-function isNestedColDef(colDef) {
-  if (!colDef.groupId) {
-    return false;
-  }
-  return "groupId" in colDef;
-}
-function getLeafColDefs(columnDefinitions) {
-  return columnDefinitions.flatMap((colDef) => {
-    return isNestedColDef(colDef) ? getLeafColDefs(colDef.children) : [colDef];
-  });
-}
-function isFirstColumn(params) {
-  const displayedColumns = params?.columnApi?.getAllDisplayedColumns() || [];
-  return displayedColumns.length ? displayedColumns[0] === params.column : false;
-}
-function getCheckboxColumn(columnApi) {
-  const isGrouping = columnApi?.getRowGroupColumns?.()?.length !== 0;
-  if (isGrouping) {
-    return null;
-  }
-  const displayedColumns = columnApi?.getAllDisplayedColumns() || [];
-  return displayedColumns.length ? displayedColumns[0] : null;
-}
 
 // src/utils/transformers.ts
 var emptyObject = {};
@@ -55220,7 +55233,7 @@ function ClientSideRowCheckbox(props) {
   React82.useEffect(() => {
     props.api.addEventListener("rowSelected", handleRowSelection);
     return () => {
-      props.api.removeEventListener("rowSelected", handleRowSelection);
+      removeEventListenerFromGrid("rowSelected", handleRowSelection, props.api);
     };
   }, []);
   return /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { paddingRight: "md" }, /* @__PURE__ */ React82__default.default.createElement(
@@ -55331,7 +55344,11 @@ function GroupCaret(props) {
     props.api.addEventListener("rowGroupOpened", handleRowGroupToggle);
     return () => {
       mounted.current = false;
-      props.api.removeEventListener("rowGroupOpened", handleRowGroupToggle);
+      removeEventListenerFromGrid(
+        "rowGroupOpened",
+        handleRowGroupToggle,
+        props.api
+      );
     };
   }, []);
   return /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { className: AutoGroupCell_default.expandableCaret }, props.node.isExpandable() && /* @__PURE__ */ React82__default.default.createElement(
@@ -55357,7 +55374,11 @@ var AutoGroupCellRenderer = (props) => {
   React82.useEffect(() => {
     props.api.addEventListener("cellValueChanged", handleCellValueChange);
     return () => {
-      props.api.removeEventListener("cellValueChanged", handleCellValueChange);
+      removeEventListenerFromGrid(
+        "cellValueChanged",
+        handleCellValueChange,
+        props.api
+      );
     };
   }, []);
   const adjustedLevel = props.node.footer ? props.node.level + 1 : props.node.level;
@@ -56208,7 +56229,7 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener("columnMoved", calculatePosition);
     calculatePosition();
     return () => {
-      props.api.removeEventListener("columnMoved", calculatePosition);
+      removeEventListenerFromGrid("columnMoved", calculatePosition, props.api);
     };
   }, []);
   const onSortToggled = (event) => {
@@ -56285,7 +56306,11 @@ var GenericHeaderRenderer = (props) => {
     };
     props.api?.addEventListener("expandOrCollapseAll", onExpandAllChange);
     return () => {
-      props.api?.removeEventListener("expandOrCollapseAll", onExpandAllChange);
+      removeEventListenerFromGrid(
+        "expandOrCollapseAll",
+        onExpandAllChange,
+        props.api
+      );
     };
   }, [props.api]);
   React82__default.default.useEffect(() => {
@@ -56376,7 +56401,11 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener(selectionChanged, onSelectionChanged);
     onSelectionChanged();
     return () => {
-      props.api.removeEventListener(selectionChanged, onSelectionChanged);
+      removeEventListenerFromGrid(
+        selectionChanged,
+        onSelectionChanged,
+        props.api
+      );
     };
   }, [isFirstColumn2, selectAll]);
   const { ref, isOverflowing, recalculate } = useOverflowObserver();
@@ -56385,8 +56414,8 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener("cellMouseOver", handler);
     props.api.addEventListener("columnResized", handler);
     return () => {
-      props.api.removeEventListener("cellMouseOver", handler);
-      props.api.removeEventListener("columnResized", handler);
+      removeEventListenerFromGrid("cellMouseOver", handler, props.api);
+      removeEventListenerFromGrid("columnResized", handler, props.api);
     };
   }, []);
   React82__default.default.useEffect(() => {
@@ -56412,8 +56441,16 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
     return () => {
-      props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
-      props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
+      removeEventListenerFromGrid(
+        selectionChanged,
+        updateSelectAllCheckbox,
+        props.api
+      );
+      removeEventListenerFromGrid(
+        paginationChanged,
+        updateSelectAllCheckbox,
+        props.api
+      );
     };
   }, [isFirstColumn2, props.selectionSSREnabled, props.api, onSSDR]);
   const toggleSelectAll = React82__default.default.useCallback(() => {
@@ -56621,7 +56658,7 @@ function CustomLoader(params) {
         level: params.node.level,
         lastRowInGroup: params.node === groupNodes.last
       }
-    ), /* @__PURE__ */ React82__default.default.createElement(Spinner2, { loading: true, size: "sm" }), /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React82__default.default.createElement(coreReact.Typography, { color: "gray15", italic: true, intent: "small" }, I18n.t(
+    ), /* @__PURE__ */ React82__default.default.createElement(Spinner, { loading: true, size: "sm" }), /* @__PURE__ */ React82__default.default.createElement(coreReact.Box, { paddingLeft: "sm" }, /* @__PURE__ */ React82__default.default.createElement(coreReact.Typography, { color: "gray15", italic: true, intent: "small" }, I18n.t(
       `dataTable.loading.${params.node === groupNodes.first ? "initial" : "secondary"}`
     ))));
   }
@@ -56631,7 +56668,7 @@ var DefaultFrameworkComponents = {
   agColumnHeader: GenericHeaderRenderer,
   agLoadingCellRenderer: CustomLoader,
   agColumnGroupHeader: GenericColumnGroupHeader,
-  loadingOverlayRenderer: Spinner2,
+  loadingOverlayRenderer: Spinner,
   emptyStateRenderer: EmptyState
 };
 function getFrameworkComponents(headerMenuConfig, onSelectAll, selectionSSREnabled) {
@@ -58768,12 +58805,18 @@ var useRowSelectionState = () => {
   const { gridApi, rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function selectionEventFunction() {
-      setSelectedRows(getSelectedRows({ gridApi, rowSelectionRef }));
+      if (!gridApi?.destroyCalled) {
+        setSelectedRows(getSelectedRows({ gridApi, rowSelectionRef }));
+      }
     }
     selectionEventFunction();
     gridApi?.addEventListener("selectionChanged", selectionEventFunction);
     return () => {
-      gridApi?.removeEventListener("selectionChanged", selectionEventFunction);
+      removeEventListenerFromGrid(
+        "selectionChanged",
+        selectionEventFunction,
+        gridApi
+      );
     };
   }, [gridApi]);
   return selectedRows;
@@ -76602,7 +76645,7 @@ var BulkEditInput = (props) => {
         );
       } else {
         console.warn(
-          `@procore/labs-data-table: Unable to find the field for ${props.editor}. Will fallback to a Form.Text.`
+          `@procore/data-table: Unable to find the field for ${props.editor}. Will fallback to a Form.Text.`
         );
         return defaultField;
       }
@@ -77063,9 +77106,10 @@ var ConfigurationColumns = React82__default.default.forwardRef(
         onDisplayedColumnsChanged
       );
       return () => {
-        gridApi?.removeEventListener(
+        removeEventListenerFromGrid(
           "displayedColumnsChanged",
-          onDisplayedColumnsChanged
+          onDisplayedColumnsChanged,
+          gridApi
         );
       };
     }, [gridApi, colDefs]);
@@ -77910,9 +77954,10 @@ var RowGroupSelector = ({ localeText }) => {
       onDisplayedColumnsChanged
     );
     return () => {
-      gridApi?.removeEventListener(
+      removeEventListenerFromGrid(
         "displayedColumnsChanged",
-        onDisplayedColumnsChanged
+        onDisplayedColumnsChanged,
+        gridApi
       );
     };
   }, [gridApi]);
@@ -79706,6 +79751,150 @@ var is_IS_default = {
   }
 };
 
+// src/locales/ja-JP.json
+var ja_JP_default = {
+  dataTable: {
+    emptyState: {
+      noFilteredResults: {
+        description: "\u30B9\u30DA\u30EB\u3068\u30D5\u30A3\u30EB\u30BF\u30FC\u30AA\u30D7\u30B7\u30E7\u30F3\u3092\u78BA\u8A8D\u3059\u308B\u304B\u3001\u5225\u306E\u30AD\u30FC\u30EF\u30FC\u30C9\u3092\u691C\u7D22\u3057\u307E\u3059\u3002",
+        title: "\u691C\u7D22\u306B\u4E00\u81F4\u3059\u308B\u9805\u76EE\u306F\u3042\u308A\u307E\u305B\u3093",
+        itemsTitle: "\u691C\u7D22\u306B\u4E00\u81F4\u3059\u308B%{itemsLabel}\u306F\u3042\u308A\u307E\u305B\u3093"
+      },
+      noResults: {
+        description: "\u30C1\u30FC\u30E0\u304C\u3053\u308C\u3089\u306E\u9805\u76EE\u3092\u4F5C\u6210\u3057\u305F\u3089\u3001\u3053\u3061\u3089\u3067\u30A2\u30AF\u30BB\u30B9\u3067\u304D\u307E\u3059\u3002 ",
+        title: "\u73FE\u5728\u3001\u8868\u793A\u3059\u308B\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093",
+        itemsTitle: "\u73FE\u5728\u3001\u8868\u793A\u3059\u308B%{itemsLabel}\u304C\u3042\u308A\u307E\u305B\u3093",
+        tooltip: "\u60C5\u5831\u3092%{tableName}\u306B\u8FFD\u52A0\u3059\u308B\u3068\u3001[%{featureName}]\u30DC\u30BF\u30F3\u304C\u6709\u52B9\u306B\u306A\u308A\u307E\u3059",
+        featureFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC",
+        featureSearch: "\u691C\u7D22",
+        featureGroupBy: "\u30B0\u30EB\u30FC\u30D7\u5316",
+        featureConfigure: "\u69CB\u6210",
+        tableNameFallback: "\u8868"
+      }
+    },
+    bulkActions: {
+      apply: "\u9069\u7528\u3059\u308B",
+      bulkEdit: "\u4E00\u62EC\u7DE8\u96C6",
+      cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+      editValues: "\u5024\u3092\u7DE8\u96C6\u3059\u308B",
+      error: "\u7533\u3057\u8A33\u3042\u308A\u307E\u305B\u3093\u304C\u3001\u9805\u76EE\u3092\u66F4\u65B0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u518D\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",
+      placeholderForField: "%{fieldName}\u3092\u5165\u529B\u3059\u308B",
+      selection: "%{count}%{number}\u3092\u9078\u629E\u3057\u307E\u3057\u305F",
+      success: "\u9805\u76EE\u306F\u6B63\u5E38\u306B\u66F4\u65B0\u3055\u308C\u307E\u3057\u305F\u3002",
+      one: "\u9805\u76EE",
+      many: "\u9805\u76EE"
+    },
+    exporting: "\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u4E2D...",
+    filters: {
+      filters: "\u30D5\u30A3\u30EB\u30BF\u30FC",
+      moreFilters: "\u305D\u306E\u4ED6\u306E\u30D5\u30A3\u30EB\u30BF\u30FC",
+      clearAllFilters: "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+      close: "\u9589\u3058\u308B",
+      locationFilter: {
+        selectAll: "\u3059\u3079\u3066\u3092\u9078\u629E\u3059\u308B",
+        includeSublocations: "\u30B5\u30D6\u30ED\u30B1\u30FC\u30B7\u30E7\u30F3\u3092\u542B\u3081\u308B",
+        searchLocations: "\u5834\u6240\u3092\u691C\u7D22",
+        locations: "\u5834\u6240"
+      },
+      numberFilter: {
+        labels: {
+          and: "\u305D\u3057\u3066",
+          input_placeholder: "\u5024\u3092\u5165\u529B",
+          placeholder: "\u9805\u76EE\u3092\u9078\u629E\u3059\u308B"
+        },
+        options: {
+          any_value: "\u4EFB\u610F\u306E\u5024",
+          is_between: "\u9593\u306B\u3042\u308B",
+          greater_than: "\u3088\u308A\u5927\u304D\u3044",
+          greater_than_equal_to: "\u4EE5\u4E0A\u3067\u3042\u308B",
+          less_than: "\u672A\u6E80\u3067\u3042\u308B",
+          less_than_equal_to: "\u4EE5\u4E0B\u3067\u3059",
+          no_value: "\u5024\u304C\u3042\u308A\u307E\u305B\u3093"
+        }
+      }
+    },
+    loading: {
+      initial: "\u60C5\u5831\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059\u3002",
+      secondary: "\u60C5\u5831\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059\u3002\u3057\u3070\u3089\u304F\u304A\u5F85\u3061\u304F\u3060\u3055\u3044\u3002"
+    },
+    menuOptions: {
+      sortMenuItem: {
+        label: "\u3053\u306E\u5217\u3067\u4E26\u3079\u66FF\u3048\u308B",
+        sortAscItem: "\u5217\u3092\u6607\u9806\u306B\u4E26\u3079\u66FF\u3048\u308B",
+        sortDescItem: "\u5217\u3092\u964D\u9806\u306B\u4E26\u3079\u66FF\u3048\u308B",
+        sortResetItem: "\u5217\u306F\u4E26\u3079\u66FF\u3048\u3089\u308C\u3066\u3044\u307E\u305B\u3093"
+      },
+      expandAllGroups: "\u3059\u3079\u3066\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u5C55\u958B\u3059\u308B",
+      collapseAllGroups: "\u3059\u3079\u3066\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u6298\u308A\u305F\u305F\u3080",
+      pinColumn: "\u5217\u3092\u30D4\u30F3\u7559\u3081\u3059\u308B",
+      pinLeft: "\u5DE6\u5074\u3092\u30D4\u30F3\u7559\u3081\u3059\u308B",
+      pinRight: "\u53F3\u5074\u3092\u30D4\u30F3\u7559\u3081\u3059\u308B",
+      noPin: "\u30D4\u30F3\u7559\u3081\u306F\u3042\u308A\u307E\u305B\u3093",
+      autoSizeThisColumn: "\u3053\u306E\u5217\u3092\u81EA\u52D5\u30B5\u30A4\u30BA\u8ABF\u6574\u3059\u308B",
+      autoSizeAllColumns: "\u3059\u3079\u3066\u306E\u5217\u3092\u81EA\u52D5\u30B5\u30A4\u30BA\u8ABF\u6574\u3059\u308B",
+      resetColumns: "\u5217\u3092\u30EA\u30BB\u30C3\u30C8\u3059\u308B",
+      unGroupBy: "{{label}}\u3067\u30B0\u30EB\u30FC\u30D7\u5316\u3092\u89E3\u9664\u3059\u308B",
+      groupBy: "{{label}}\u3067\u30B0\u30EB\u30FC\u30D7\u5316\u3059\u308B"
+    },
+    grandTotals: "\u5358\u7D14\u96C6\u8A08",
+    search: "\u691C\u7D22",
+    subtotals: "\u5C0F\u8A08",
+    tableSettings: {
+      configureColumns: "\u5217\u3092\u69CB\u6210",
+      resetToDefault: "\u3059\u3079\u3066\u3092\u8868\u793A\u3059\u308B",
+      rowHeight: "\u5217\u306E\u9AD8\u3055",
+      small: "\u5C0F",
+      medium: "\u4E2D",
+      large: "\u5927",
+      tableSettings: "\u8868\u306E\u8A2D\u5B9A",
+      groupBy: "\u30B0\u30EB\u30FC\u30D7\u5316:",
+      reset: "\u30EA\u30BB\u30C3\u30C8",
+      selectColumnGroup: "\u30B0\u30EB\u30FC\u30D7\u5316\u3059\u308B\u5217\u3092\u9078\u629E"
+    },
+    rowGroupToggle: {
+      expandTierOne: "\u8868\u306E\u6700\u521D\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u958B\u304D\u307E\u3059\u3002",
+      expandAll: "\u8868\u306E\u3059\u3079\u3066\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u958B\u304D\u307E\u3059\u3002",
+      collapseAll: "\u8868\u306E\u3059\u3079\u3066\u306E\u30B0\u30EB\u30FC\u30D7\u3092\u9589\u3058\u307E\u3059\u3002"
+    },
+    columnGroupToggle: {
+      collapse: "\u5217\u30B0\u30EB\u30FC\u30D7\u3092\u6298\u308A\u7573\u3080",
+      expand: "\u5217\u30B0\u30EB\u30FC\u30D7\u3092\u5C55\u958B\u3059\u308B"
+    },
+    cells: {
+      textCell: {
+        placeholder: "\u30C6\u30AD\u30B9\u30C8\u3092\u5165\u529B\u3059\u308B"
+      },
+      currencyCell: {
+        placeholder: "\u901A\u8CA8\u3092\u5165\u529B\u3059\u308B"
+      },
+      numberCell: {
+        placeholder: "\u756A\u53F7\u3092\u5165\u529B\u3059\u308B"
+      },
+      percentCell: {
+        placeholder: "%\u3092\u5165\u529B"
+      },
+      pillCell: {
+        placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
+      },
+      selectCell: {
+        placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
+      },
+      booleanCell: {
+        options: {
+          yes: "\u306F\u3044",
+          no: "\u3044\u3044\u3048"
+        }
+      }
+    },
+    filterRenders: {
+      dateFilter: {
+        single: "\u5358\u72EC",
+        range: "\u7BC4\u56F2"
+      }
+    }
+  }
+};
+
 // src/locales/pt-BR.json
 var pt_BR_default = {
   dataTable: {
@@ -80150,6 +80339,7 @@ var translations = {
   "fr-CA": fr_CA_default,
   "fr-FR": fr_FR_default,
   "is-IS": is_IS_default,
+  "ja-JP": ja_JP_default,
   "pt-BR": pt_BR_default,
   "th-TH": th_TH_default,
   "zh-SG": zh_SG_default
@@ -81420,7 +81610,9 @@ var Table = (props) => {
         maxHeight = nodeHeight;
       }
     });
-    gridApi?.setHeaderHeight(maxHeight);
+    if (!gridApi?.destroyCalled) {
+      gridApi?.setHeaderHeight(maxHeight);
+    }
   }
   React82__default.default.useEffect(() => {
     if (gridApi && columnApi && internalTableContext.tableRef?.current) {
@@ -81431,7 +81623,11 @@ var Table = (props) => {
       gridApi.addEventListener("firstDataRendered", setHeaderHeight);
       setHeaderHeight();
       return () => {
-        gridApi.removeEventListener("firstDataRendered", setHeaderHeight);
+        removeEventListenerFromGrid(
+          "firstDataRendered",
+          setHeaderHeight,
+          gridApi
+        );
       };
     }
     return;
@@ -81663,6 +81859,8 @@ var Table = (props) => {
   const onDisplayedColumnsChanged = React82__default.default.useCallback(
     (event) => {
       if (props.onRowDragEnd) {
+        if (event.columnApi?.destroyCalled)
+          return;
         const firstVisibleColumn = event.columnApi.getAllGridColumns().find((col) => col.isVisible());
         if (!firstVisibleColumn?.getColDef().rowDrag) {
           adjustRowDragIcon(event.api, event.columnApi);
@@ -81956,7 +82154,7 @@ var Table = (props) => {
     props.UNSAFE_internalAGGridOverrides ?? {}
   );
   return /* @__PURE__ */ React82__default.default.createElement(
-    Spinner2,
+    Spinner,
     {
       loading: loadingStatus.loading,
       label: loadingStatus.message,
@@ -82123,7 +82321,11 @@ var TablePagination = ({
     }
     gridApi?.addEventListener("paginationChanged", onPaginationChanged);
     return () => {
-      gridApi?.removeEventListener("paginationChanged", onPaginationChanged);
+      removeEventListenerFromGrid(
+        "paginationChanged",
+        onPaginationChanged,
+        gridApi
+      );
     };
   }, []);
   return /* @__PURE__ */ React82__default.default.createElement(