react-lookup-select 1.0.4 → 1.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Onur Altuntaş
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Onur Altuntaş
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -210,13 +210,18 @@ function useLookupSelectState(props) {
     },
     [open, onOpenChange]
   );
-  const selectionManager = (0, import_react.useMemo)(() => {
-    return new SelectionManager(mode, mapper);
-  }, [mode, mapper]);
-  const queryManager = (0, import_react.useMemo)(() => {
-    return new QueryManager({ pageSize });
-  }, [pageSize]);
+  const selectionManagerRef = (0, import_react.useRef)(null);
+  if (!selectionManagerRef.current) {
+    selectionManagerRef.current = new SelectionManager(mode, mapper);
+  }
+  const selectionManager = selectionManagerRef.current;
+  const queryManagerRef = (0, import_react.useRef)(null);
+  if (!queryManagerRef.current) {
+    queryManagerRef.current = new QueryManager({ pageSize });
+  }
+  const queryManager = queryManagerRef.current;
   const [currentSelections, setCurrentSelections] = (0, import_react.useState)([]);
+  const [backupSelections, setBackupSelections] = (0, import_react.useState)([]);
   const resolveValueToRows = (0, import_react.useCallback)(
     (valueToResolve) => {
       if (!valueToResolve || !data) return [];
@@ -232,6 +237,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.`
+            );
           }
         }
       }
@@ -253,18 +262,22 @@ function useLookupSelectState(props) {
   }, [value, defaultValue, data, resolveValueToRows, selectionManager]);
   const toggleRowSelection = (0, import_react.useCallback)(
     (row) => {
-      const newState = selectionManager.toggleRow(row);
+      selectionManager.toggleRow(row);
       const selectedRows = selectionManager.getSelectedRows();
       setCurrentSelections(selectedRows);
-      onSelectionChange?.(selectedRows);
+      if (!modalOpen) {
+        onSelectionChange?.(selectedRows);
+      }
     },
-    [selectionManager, onSelectionChange]
+    [selectionManager, onSelectionChange, modalOpen]
   );
   const clearSelections = (0, import_react.useCallback)(() => {
     selectionManager.clearSelection();
     setCurrentSelections([]);
-    onSelectionChange?.([]);
-  }, [selectionManager, onSelectionChange]);
+    if (!modalOpen) {
+      onSelectionChange?.([]);
+    }
+  }, [selectionManager, onSelectionChange, modalOpen]);
   const isRowSelected = (0, import_react.useCallback)(
     (row) => {
       return selectionManager.isRowSelected(row);
@@ -273,8 +286,6 @@ function useLookupSelectState(props) {
   );
   const updateQuery = (0, import_react.useCallback)(
     (updates) => {
-      const currentState = queryManager.getState();
-      const newState = { ...currentState, ...updates };
       if (updates.search !== void 0) {
         queryManager.updateSearch(updates.search);
       }
@@ -314,17 +325,24 @@ function useLookupSelectState(props) {
   ]);
   const cancelSelection = (0, import_react.useCallback)(() => {
     selectionManager.clearSelection();
-    setCurrentSelections([]);
+    for (const row of backupSelections) {
+      selectionManager.toggleRow(row);
+    }
+    setCurrentSelections([...backupSelections]);
     onCancel?.();
     handleModalOpenChange(false);
-  }, [selectionManager, onCancel, handleModalOpenChange]);
+  }, [selectionManager, backupSelections, onCancel, handleModalOpenChange]);
   const getCurrentQuery = (0, import_react.useCallback)(() => {
     return queryManager.getState();
   }, [queryManager]);
+  const openModal = (0, import_react.useCallback)(() => {
+    setBackupSelections([...currentSelections]);
+    handleModalOpenChange(true);
+  }, [currentSelections, handleModalOpenChange]);
   return {
     // Modal state
     modalOpen,
-    openModal: () => handleModalOpenChange(true),
+    openModal,
     closeModal: () => handleModalOpenChange(false),
     // Selection state
     currentSelections,
@@ -344,21 +362,12 @@ function useLookupSelectState(props) {
 var import_react2 = require("react");
 function useKeyboardNavigation({
   isModalOpen,
-  onClose,
-  onConfirm,
-  onRowSelect,
-  currentData,
-  selectedRows,
-  mode
+  onConfirm
 }) {
   const handleKeyDown = (0, import_react2.useCallback)(
     (event) => {
       if (!isModalOpen) return;
       switch (event.key) {
-        case "Escape":
-          event.preventDefault();
-          onClose();
-          break;
         case "Enter":
           if (event.ctrlKey || event.metaKey) {
             event.preventDefault();
@@ -366,13 +375,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]
   );
   (0, import_react2.useEffect)(() => {
     if (isModalOpen) {
@@ -386,36 +444,7 @@ function useKeyboardNavigation({
     handleKeyDown
   };
 }
-function useFocusManagement(isOpen) {
-  (0, import_react2.useEffect)(() => {
-    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 = (0, import_react2.useCallback)(
@@ -574,11 +603,18 @@ function Modal({
   (0, import_react3.useEffect)(() => {
     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") {
@@ -587,12 +623,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();
@@ -683,23 +719,17 @@ function SearchInput({
   placeholder = "Search...",
   className
 }) {
-  const inputRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lookup-select__search ${className || ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lookup-select__search-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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" }) }) })
@@ -756,6 +786,7 @@ function Grid({
   loading = false,
   error,
   emptyText = "No records found",
+  onRetry,
   className,
   style
 }) {
@@ -776,13 +807,33 @@ function Grid({
     return currentSort.sortDir === "asc" ? "\u2191" : "\u2193";
   };
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__loading", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: "Loading..." }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `lookup-select__grid ${className || ""}`, style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "lookup-select__table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "lookup-select__header-cell lookup-select__header-cell--checkbox" }),
+        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "lookup-select__header-cell", children: column.title }, String(column.key)))
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: "lookup-select__grid-row lookup-select__grid-row--skeleton", children: [
+        mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "lookup-select__cell" }),
+        columns.map((col, j) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "lookup-select__cell", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__skeleton-line" }) }, j))
+      ] }, i)) })
+    ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__error", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
-      "Error: ",
-      error
-    ] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lookup-select__error", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { children: [
+        "Error: ",
+        error
+      ] }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__button lookup-select__button--secondary",
+          onClick: onRetry,
+          children: "Retry"
+        }
+      )
+    ] }) });
   }
   if (data.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__empty", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: emptyText }) }) });
@@ -854,7 +905,7 @@ function Grid({
               "aria-label": "Select all"
             }
           ) }) }),
-          columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "th",
             {
               className: "lookup-select__table-header",
@@ -910,7 +961,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) {
@@ -972,13 +1023,16 @@ function VirtualGrid(props) {
       return () => resizeObserver.disconnect();
     }
   }, []);
+  const selectableCount = import_react4.default.useMemo(() => {
+    return selectableRow ? data.filter(selectableRow).length : data.length;
+  }, [data, selectableRow]);
   import_react4.default.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);
@@ -1053,7 +1107,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) => {
@@ -1136,9 +1190,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
@@ -1186,7 +1242,8 @@ function Pagination({
   totalCount,
   pageSize,
   onPageChange,
-  className
+  className,
+  i18n
 }) {
   const totalPages = Math.ceil(totalCount / pageSize);
   if (totalPages <= 1) {
@@ -1216,14 +1273,7 @@ function Pagination({
   const startRecord = (currentPage - 1) * pageSize + 1;
   const endRecord = Math.min(currentPage * pageSize, totalCount);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `lookup-select__pagination ${className || ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lookup-select__pagination-info", children: totalCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      startRecord,
-      "-",
-      endRecord,
-      " / ",
-      totalCount,
-      " records"
-    ] }) : "0 records" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lookup-select__pagination-info", children: totalCount > 0 ? i18n?.recordsInfo ? i18n.recordsInfo(startRecord, endRecord, totalCount) : `${startRecord}-${endRecord} / ${totalCount} records` : "0 records" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "lookup-select__pagination-controls", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
@@ -1232,7 +1282,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"
         }
       ),
@@ -1257,7 +1307,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
           },
@@ -1271,7 +1321,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"
         }
       )
@@ -1294,7 +1344,6 @@ function LookupSelect(props) {
     renderTrigger,
     renderModal,
     renderGrid,
-    renderHeader,
     renderFooter,
     renderSearch,
     renderPagination,
@@ -1314,7 +1363,6 @@ function LookupSelect(props) {
   const {
     modalOpen,
     openModal,
-    closeModal,
     currentSelections,
     toggleRowSelection,
     clearSelections,
@@ -1359,11 +1407,10 @@ function LookupSelect(props) {
     virtualRowHeight,
     pageSize
   ]);
-  const { announce } = useScreenReaderAnnouncements();
+  useScreenReaderAnnouncements();
   useFocusManagement(modalOpen);
   useKeyboardNavigation({
     isModalOpen: modalOpen,
-    onClose: closeModal,
     onConfirm: confirmSelection,
     currentData: [],
     selectedRows: currentSelections,
@@ -1375,13 +1422,34 @@ function LookupSelect(props) {
   const [serverData, setServerData] = import_react5.default.useState([]);
   const [totalCount, setTotalCount] = import_react5.default.useState(0);
   const [currentPage, setCurrentPage] = import_react5.default.useState(1);
+  const [sortState, setSortState] = import_react5.default.useState({});
+  const [debouncedSearch, setDebouncedSearch] = import_react5.default.useState("");
+  const debounceTimerRef = import_react5.default.useRef(null);
   const handleSearchChange = import_react5.default.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]
   );
+  import_react5.default.useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
   const filteredData = import_react5.default.useMemo(() => {
     if (!searchValue || dataSource) {
       return data;
@@ -1399,13 +1467,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);
@@ -1417,10 +1486,10 @@ function LookupSelect(props) {
     }
   }, [
     dataSource,
-    getCurrentQuery,
-    searchValue,
+    debouncedSearch,
     currentPage,
-    optimizedPageSize
+    optimizedPageSize,
+    sortState
   ]);
   import_react5.default.useEffect(() => {
     if (dataSource && modalOpen) {
@@ -1436,8 +1505,9 @@ function LookupSelect(props) {
   );
   const handleSortChange = import_react5.default.useCallback(
     (sortBy, sortDir) => {
-      updateQuery({ sortBy, sortDir, page: 1 });
+      setSortState({ sortBy, sortDir });
       setCurrentPage(1);
+      updateQuery({ sortBy, sortDir, page: 1 });
     },
     [updateQuery]
   );
@@ -1474,11 +1544,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
     };
@@ -1535,12 +1606,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);
                 }
@@ -1555,8 +1628,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__ */ (0, import_jsx_runtime6.jsx)(
           Pagination,
@@ -1564,7 +1637,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({
@@ -1572,7 +1650,7 @@ function LookupSelect(props) {
           totalPages: Math.ceil(totalCount / optimizedPageSize),
           onPageChange: handlePageChange,
           pageSize: optimizedPageSize,
-          onPageSizeChange: (newSize) => {
+          onPageSizeChange: (_newSize) => {
           },
           totalCount,
           loading