react-lookup-select 1.0.5 → 1.1.0

package/dist/index.js

@@ -2,7 +2,7 @@
 import React3 from "react";
 
 // src/internal/state.ts
-import { useState, useCallback, useMemo, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 
 // src/internal/core.ts
 function createSelectionState() {
@@ -174,12 +174,16 @@ function useLookupSelectState(props) {
     },
     [open, onOpenChange]
   );
-  const selectionManager = useMemo(() => {
-    return new SelectionManager(mode, mapper);
-  }, [mode, mapper]);
-  const queryManager = useMemo(() => {
-    return new QueryManager({ pageSize });
-  }, [pageSize]);
+  const selectionManagerRef = useRef(null);
+  if (!selectionManagerRef.current) {
+    selectionManagerRef.current = new SelectionManager(mode, mapper);
+  }
+  const selectionManager = selectionManagerRef.current;
+  const queryManagerRef = useRef(null);
+  if (!queryManagerRef.current) {
+    queryManagerRef.current = new QueryManager({ pageSize });
+  }
+  const queryManager = queryManagerRef.current;
   const [currentSelections, setCurrentSelections] = useState([]);
   const [backupSelections, setBackupSelections] = useState([]);
   const resolveValueToRows = useCallback(
@@ -197,6 +201,10 @@ function useLookupSelectState(props) {
           );
           if (matchingRow) {
             resolvedRows.push(matchingRow);
+          } else if (typeof console !== "undefined") {
+            console.warn(
+              `[react-lookup-select] Could not resolve value with id "${searchId}" from data. Ensure the value matches an item in the data array.`
+            );
           }
         }
       }
@@ -218,7 +226,7 @@ function useLookupSelectState(props) {
   }, [value, defaultValue, data, resolveValueToRows, selectionManager]);
   const toggleRowSelection = useCallback(
     (row) => {
-      const newState = selectionManager.toggleRow(row);
+      selectionManager.toggleRow(row);
       const selectedRows = selectionManager.getSelectedRows();
       setCurrentSelections(selectedRows);
       if (!modalOpen) {
@@ -242,8 +250,6 @@ function useLookupSelectState(props) {
   );
   const updateQuery = useCallback(
     (updates) => {
-      const currentState = queryManager.getState();
-      const newState = { ...currentState, ...updates };
       if (updates.search !== void 0) {
         queryManager.updateSearch(updates.search);
       }
@@ -320,21 +326,12 @@ function useLookupSelectState(props) {
 import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
 function useKeyboardNavigation({
   isModalOpen,
-  onClose,
-  onConfirm,
-  onRowSelect,
-  currentData,
-  selectedRows,
-  mode
+  onConfirm
 }) {
   const handleKeyDown = useCallback2(
     (event) => {
       if (!isModalOpen) return;
       switch (event.key) {
-        case "Escape":
-          event.preventDefault();
-          onClose();
-          break;
         case "Enter":
           if (event.ctrlKey || event.metaKey) {
             event.preventDefault();
@@ -342,13 +339,62 @@ function useKeyboardNavigation({
           }
           break;
         case "ArrowDown":
-        case "ArrowUp":
+        case "ArrowUp": {
+          const grid = document.querySelector(
+            ".lookup-select__grid tbody, .lookup-select__virtual-grid-body"
+          );
+          if (!grid) break;
+          const rows = grid.querySelectorAll(
+            'tr[tabindex="0"], tr[role="row"]'
+          );
+          if (rows.length === 0) break;
+          const currentIndex = Array.from(rows).findIndex(
+            (row) => row === document.activeElement
+          );
+          let nextIndex;
+          if (event.key === "ArrowDown") {
+            nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, rows.length - 1);
+          } else {
+            nextIndex = currentIndex < 0 ? rows.length - 1 : Math.max(currentIndex - 1, 0);
+          }
+          event.preventDefault();
+          rows[nextIndex]?.focus();
+          break;
+        }
+        case "Home": {
+          const gridHome = document.querySelector(
+            ".lookup-select__grid tbody, .lookup-select__virtual-grid-body"
+          );
+          if (!gridHome) break;
+          const firstRow = gridHome.querySelector(
+            'tr[tabindex="0"], tr[role="row"]'
+          );
+          if (firstRow) {
+            event.preventDefault();
+            firstRow.focus();
+          }
           break;
+        }
+        case "End": {
+          const gridEnd = document.querySelector(
+            ".lookup-select__grid tbody, .lookup-select__virtual-grid-body"
+          );
+          if (!gridEnd) break;
+          const allRows = gridEnd.querySelectorAll(
+            'tr[tabindex="0"], tr[role="row"]'
+          );
+          const lastRow = allRows[allRows.length - 1];
+          if (lastRow) {
+            event.preventDefault();
+            lastRow.focus();
+          }
+          break;
+        }
         default:
           break;
       }
     },
-    [isModalOpen, onClose, onConfirm]
+    [isModalOpen, onConfirm]
   );
   useEffect2(() => {
     if (isModalOpen) {
@@ -362,36 +408,7 @@ function useKeyboardNavigation({
     handleKeyDown
   };
 }
-function useFocusManagement(isOpen) {
-  useEffect2(() => {
-    if (!isOpen) return;
-    const modal = document.querySelector('[role="dialog"]');
-    if (!modal) return;
-    const focusableElements = modal.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    const firstFocusable = focusableElements[0];
-    const lastFocusable = focusableElements[focusableElements.length - 1];
-    firstFocusable?.focus();
-    const handleTabKey = (e) => {
-      if (e.key !== "Tab") return;
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusable) {
-          e.preventDefault();
-          lastFocusable?.focus();
-        }
-      } else {
-        if (document.activeElement === lastFocusable) {
-          e.preventDefault();
-          firstFocusable?.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", handleTabKey);
-    return () => {
-      document.removeEventListener("keydown", handleTabKey);
-    };
-  }, [isOpen]);
+function useFocusManagement(_isOpen) {
 }
 function useScreenReaderAnnouncements() {
   const announce = useCallback2(
@@ -530,7 +547,7 @@ function Trigger({
 }
 
 // src/components/Modal.tsx
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Modal({
@@ -545,16 +562,23 @@ function Modal({
   ariaDescribedBy,
   closeButtonLabel = "Close modal"
 }) {
-  const modalRef = useRef(null);
-  const previousFocusRef = useRef(null);
+  const modalRef = useRef2(null);
+  const previousFocusRef = useRef2(null);
   useEffect3(() => {
     if (!isOpen) return;
     previousFocusRef.current = document.activeElement;
-    const focusableElements = modalRef.current?.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    const autoFocusElement = modalRef.current?.querySelector(
+      "[data-autofocus]"
     );
-    if (focusableElements && focusableElements.length > 0) {
-      focusableElements[0].focus();
+    if (autoFocusElement) {
+      autoFocusElement.focus();
+    } else {
+      const focusableElements = modalRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusableElements && focusableElements.length > 0) {
+        focusableElements[0].focus();
+      }
     }
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -563,12 +587,12 @@ function Modal({
     };
     const handleTab = (e) => {
       if (e.key !== "Tab") return;
-      const focusableElements2 = modalRef.current?.querySelectorAll(
+      const focusableElements = modalRef.current?.querySelectorAll(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
-      if (!focusableElements2 || focusableElements2.length === 0) return;
-      const firstElement = focusableElements2[0];
-      const lastElement = focusableElements2[focusableElements2.length - 1];
+      if (!focusableElements || focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
       if (e.shiftKey) {
         if (document.activeElement === firstElement) {
           lastElement.focus();
@@ -659,23 +683,17 @@ function SearchInput({
   placeholder = "Search...",
   className
 }) {
-  const inputRef = useRef(null);
-  useEffect3(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
   return /* @__PURE__ */ jsxs2("div", { className: `lookup-select__search ${className || ""}`, children: [
     /* @__PURE__ */ jsx2(
       "input",
       {
-        ref: inputRef,
         type: "text",
         value,
         onChange: (e) => onChange(e.target.value),
         placeholder,
         className: "lookup-select__search-input",
-        "aria-label": "Search records"
+        "aria-label": "Search records",
+        "data-autofocus": true
       }
     ),
     /* @__PURE__ */ jsx2("div", { className: "lookup-select__search-icon", children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" }) }) })
@@ -732,6 +750,7 @@ function Grid({
   loading = false,
   error,
   emptyText = "No records found",
+  onRetry,
   className,
   style
 }) {
@@ -752,13 +771,33 @@ function Grid({
     return currentSort.sortDir === "asc" ? "\u2191" : "\u2193";
   };
   if (loading) {
-    return /* @__PURE__ */ jsx3("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ jsx3("div", { className: "lookup-select__loading", children: /* @__PURE__ */ jsx3("p", { children: "Loading..." }) }) });
+    return /* @__PURE__ */ jsx3("div", { className: `lookup-select__grid ${className || ""}`, style, children: /* @__PURE__ */ jsxs3("table", { className: "lookup-select__table", children: [
+      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+        mode === "multiple" && /* @__PURE__ */ jsx3("th", { className: "lookup-select__header-cell lookup-select__header-cell--checkbox" }),
+        columns.map((column) => /* @__PURE__ */ jsx3("th", { className: "lookup-select__header-cell", children: column.title }, String(column.key)))
+      ] }) }),
+      /* @__PURE__ */ jsx3("tbody", { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs3("tr", { className: "lookup-select__grid-row lookup-select__grid-row--skeleton", children: [
+        mode === "multiple" && /* @__PURE__ */ jsx3("td", { className: "lookup-select__cell" }),
+        columns.map((col, j) => /* @__PURE__ */ jsx3("td", { className: "lookup-select__cell", children: /* @__PURE__ */ jsx3("div", { className: "lookup-select__skeleton-line" }) }, j))
+      ] }, i)) })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx3("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ jsx3("div", { className: "lookup-select__error", children: /* @__PURE__ */ jsxs3("p", { children: [
-      "Error: ",
-      error
-    ] }) }) });
+    return /* @__PURE__ */ jsx3("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ jsxs3("div", { className: "lookup-select__error", children: [
+      /* @__PURE__ */ jsxs3("p", { children: [
+        "Error: ",
+        error
+      ] }),
+      onRetry && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__button lookup-select__button--secondary",
+          onClick: onRetry,
+          children: "Retry"
+        }
+      )
+    ] }) });
   }
   if (data.length === 0) {
     return /* @__PURE__ */ jsx3("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ jsx3("div", { className: "lookup-select__empty", children: /* @__PURE__ */ jsx3("p", { children: emptyText }) }) });
@@ -830,7 +869,7 @@ function Grid({
               "aria-label": "Select all"
             }
           ) }) }),
-          columns.map((column, index) => /* @__PURE__ */ jsx3(
+          columns.map((column) => /* @__PURE__ */ jsx3(
             "th",
             {
               className: "lookup-select__table-header",
@@ -886,7 +925,7 @@ function Grid({
                     "aria-label": `Select ${mapper.getText(row)}`
                   }
                 ) }) }),
-                columns.map((column, columnIndex) => {
+                columns.map((column) => {
                   const cellKey = `${rowId}-${typeof column.key === "string" ? column.key : String(column.key)}`;
                   let cellContent;
                   if (column.render) {
@@ -948,13 +987,16 @@ function VirtualGrid(props) {
       return () => resizeObserver.disconnect();
     }
   }, []);
+  const selectableCount = React2.useMemo(() => {
+    return selectableRow ? data.filter(selectableRow).length : data.length;
+  }, [data, selectableRow]);
   React2.useEffect(() => {
     if (headerCheckboxRef.current) {
       const hasSelected = selectedRows.length > 0;
-      const hasUnselected = selectedRows.length < data.length;
+      const hasUnselected = selectedRows.length < selectableCount;
       headerCheckboxRef.current.indeterminate = hasSelected && hasUnselected;
     }
-  }, [selectedRows.length, data.length]);
+  }, [selectedRows.length, selectableCount]);
   const itemCount = data.length;
   const { rowHeight, overscan } = virtualization;
   const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
@@ -1029,7 +1071,7 @@ function VirtualGrid(props) {
               ref: headerCheckboxRef,
               type: "checkbox",
               className: "lookup-select__checkbox",
-              checked: selectedRows.length === data.length && data.length > 0,
+              checked: selectedRows.length === selectableCount && selectableCount > 0,
               onChange: (e) => {
                 if (e.target.checked) {
                   data.forEach((row) => {
@@ -1112,9 +1154,11 @@ function VirtualRowComponent({
   item,
   columns,
   mode,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   mapper,
   isSelected,
   isSelectable,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onToggle,
   onCheckboxChange,
   onClick
@@ -1156,13 +1200,14 @@ var VirtualRow = React2.memo(
 );
 
 // src/components/Pagination.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Pagination({
   currentPage,
   totalCount,
   pageSize,
   onPageChange,
-  className
+  className,
+  i18n
 }) {
   const totalPages = Math.ceil(totalCount / pageSize);
   if (totalPages <= 1) {
@@ -1192,14 +1237,7 @@ function Pagination({
   const startRecord = (currentPage - 1) * pageSize + 1;
   const endRecord = Math.min(currentPage * pageSize, totalCount);
   return /* @__PURE__ */ jsxs5("div", { className: `lookup-select__pagination ${className || ""}`, children: [
-    /* @__PURE__ */ jsx5("div", { className: "lookup-select__pagination-info", children: totalCount > 0 ? /* @__PURE__ */ jsxs5(Fragment, { children: [
-      startRecord,
-      "-",
-      endRecord,
-      " / ",
-      totalCount,
-      " records"
-    ] }) : "0 records" }),
+    /* @__PURE__ */ jsx5("div", { className: "lookup-select__pagination-info", children: totalCount > 0 ? i18n?.recordsInfo ? i18n.recordsInfo(startRecord, endRecord, totalCount) : `${startRecord}-${endRecord} / ${totalCount} records` : "0 records" }),
     /* @__PURE__ */ jsxs5("div", { className: "lookup-select__pagination-controls", children: [
       /* @__PURE__ */ jsx5(
         "button",
@@ -1208,7 +1246,7 @@ function Pagination({
           className: "lookup-select__pagination-button",
           disabled: currentPage === 1,
           onClick: () => onPageChange(currentPage - 1),
-          "aria-label": "Previous page",
+          "aria-label": i18n?.previousPage || "Previous page",
           children: "\u2039"
         }
       ),
@@ -1233,7 +1271,7 @@ function Pagination({
                 ${currentPage === pageNum ? "lookup-select__pagination-button--active" : ""}
               `,
             onClick: () => onPageChange(pageNum),
-            "aria-label": `Sayfa ${pageNum}`,
+            "aria-label": i18n?.pageLabel ? i18n.pageLabel(pageNum) : `Page ${pageNum}`,
             "aria-current": currentPage === pageNum ? "page" : void 0,
             children: pageNum
           },
@@ -1247,7 +1285,7 @@ function Pagination({
           className: "lookup-select__pagination-button",
           disabled: currentPage === totalPages,
           onClick: () => onPageChange(currentPage + 1),
-          "aria-label": "Next page",
+          "aria-label": i18n?.nextPage || "Next page",
           children: "\u203A"
         }
       )
@@ -1256,7 +1294,7 @@ function Pagination({
 }
 
 // src/components/LookupSelect.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function LookupSelect(props) {
   const {
     columns,
@@ -1270,7 +1308,6 @@ function LookupSelect(props) {
     renderTrigger,
     renderModal,
     renderGrid,
-    renderHeader,
     renderFooter,
     renderSearch,
     renderPagination,
@@ -1290,7 +1327,6 @@ function LookupSelect(props) {
   const {
     modalOpen,
     openModal,
-    closeModal,
     currentSelections,
     toggleRowSelection,
     clearSelections,
@@ -1335,11 +1371,10 @@ function LookupSelect(props) {
     virtualRowHeight,
     pageSize
   ]);
-  const { announce } = useScreenReaderAnnouncements();
+  useScreenReaderAnnouncements();
   useFocusManagement(modalOpen);
   useKeyboardNavigation({
     isModalOpen: modalOpen,
-    onClose: closeModal,
     onConfirm: confirmSelection,
     currentData: [],
     selectedRows: currentSelections,
@@ -1351,13 +1386,34 @@ function LookupSelect(props) {
   const [serverData, setServerData] = React3.useState([]);
   const [totalCount, setTotalCount] = React3.useState(0);
   const [currentPage, setCurrentPage] = React3.useState(1);
+  const [sortState, setSortState] = React3.useState({});
+  const [debouncedSearch, setDebouncedSearch] = React3.useState("");
+  const debounceTimerRef = React3.useRef(null);
   const handleSearchChange = React3.useCallback(
     (value) => {
       setSearchValue(value);
-      updateQuery({ search: value, page: 1 });
+      if (dataSource) {
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+          setDebouncedSearch(value);
+          setCurrentPage(1);
+          updateQuery({ search: value, page: 1 });
+        }, 300);
+      } else {
+        updateQuery({ search: value, page: 1 });
+      }
     },
-    [updateQuery]
+    [updateQuery, dataSource]
   );
+  React3.useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
   const filteredData = React3.useMemo(() => {
     if (!searchValue || dataSource) {
       return data;
@@ -1375,13 +1431,14 @@ function LookupSelect(props) {
     setLoading(true);
     setError(void 0);
     try {
-      const query = getCurrentQuery();
-      const result = await dataSource({
-        ...query,
-        search: searchValue,
+      const query = {
+        search: debouncedSearch,
         page: currentPage,
-        pageSize: optimizedPageSize
-      });
+        pageSize: optimizedPageSize,
+        sortBy: sortState.sortBy,
+        sortDir: sortState.sortDir
+      };
+      const result = await dataSource(query);
       setServerData(result.rows);
       setTotalCount(result.total);
       setLoading(false);
@@ -1393,10 +1450,10 @@ function LookupSelect(props) {
     }
   }, [
     dataSource,
-    getCurrentQuery,
-    searchValue,
+    debouncedSearch,
     currentPage,
-    optimizedPageSize
+    optimizedPageSize,
+    sortState
   ]);
   React3.useEffect(() => {
     if (dataSource && modalOpen) {
@@ -1412,8 +1469,9 @@ function LookupSelect(props) {
   );
   const handleSortChange = React3.useCallback(
     (sortBy, sortDir) => {
-      updateQuery({ sortBy, sortDir, page: 1 });
+      setSortState({ sortBy, sortDir });
       setCurrentPage(1);
+      updateQuery({ sortBy, sortDir, page: 1 });
     },
     [updateQuery]
   );
@@ -1450,11 +1508,12 @@ function LookupSelect(props) {
       loading,
       error,
       emptyText: texts.emptyText,
+      onRetry: dataSource ? loadServerData : void 0,
       className: classNames?.grid,
       style: styles?.grid,
       currentSort: dataSource ? {
-        sortBy: getCurrentQuery().sortBy || "",
-        sortDir: getCurrentQuery().sortDir || "asc"
+        sortBy: sortState.sortBy || "",
+        sortDir: sortState.sortDir || "asc"
       } : void 0,
       onSort: dataSource ? handleSortChange : void 0
     };
@@ -1489,7 +1548,7 @@ function LookupSelect(props) {
     virtualizationConfig
   ]);
   const renderModalContent = () => {
-    const defaultContent = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    const defaultContent = /* @__PURE__ */ jsxs6(Fragment, { children: [
       renderSearch ? renderSearch({
         value: searchValue,
         onChange: handleSearchChange,
@@ -1511,12 +1570,14 @@ function LookupSelect(props) {
           selectedIds: currentSelections.map(mapper.getId),
           onRowSelect: toggleRowSelection,
           onSelectAll: mode === "multiple" ? () => {
-            const allIds = currentData.map(mapper.getId);
-            const selectedIds = currentSelections.map(mapper.getId);
-            if (allIds.length === selectedIds.length) {
+            const selectableData = selectableRow ? currentData.filter(selectableRow) : currentData;
+            const allSelected = selectableData.every(
+              (row) => isRowSelected(row)
+            );
+            if (allSelected) {
               clearSelections();
             } else {
-              currentData.forEach((row) => {
+              selectableData.forEach((row) => {
                 if (!isRowSelected(row)) {
                   toggleRowSelection(row);
                 }
@@ -1531,8 +1592,8 @@ function LookupSelect(props) {
           virtualization: shouldUseVirtualization ? virtualizationConfig : void 0,
           selectableRow,
           onSortChange: handleSortChange,
-          sortBy: getCurrentQuery().sortBy,
-          sortDir: getCurrentQuery().sortDir
+          sortBy: sortState.sortBy,
+          sortDir: sortState.sortDir
         }) : renderGridComponent(),
         dataSource && !renderPagination && /* @__PURE__ */ jsx6(
           Pagination,
@@ -1540,7 +1601,12 @@ function LookupSelect(props) {
             currentPage,
             totalCount,
             pageSize: optimizedPageSize,
-            onPageChange: handlePageChange
+            onPageChange: handlePageChange,
+            i18n: {
+              previousPage: i18n?.previousPage,
+              nextPage: i18n?.nextPage,
+              pageLabel: i18n?.paginationInfo ? (pageNum) => i18n.paginationInfo(pageNum, Math.ceil(totalCount / optimizedPageSize)) : void 0
+            }
           }
         ),
         dataSource && renderPagination && renderPagination({
@@ -1548,7 +1614,7 @@ function LookupSelect(props) {
           totalPages: Math.ceil(totalCount / optimizedPageSize),
           onPageChange: handlePageChange,
           pageSize: optimizedPageSize,
-          onPageSizeChange: (newSize) => {
+          onPageSizeChange: (_newSize) => {
           },
           totalCount,
           loading