react-lookup-select 1.0.3 → 1.0.5

package/LICENSE

@@ -0,0 +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.

package/dist/index.cjs

@@ -217,6 +217,7 @@ function useLookupSelectState(props) {
     return new QueryManager({ pageSize });
   }, [pageSize]);
   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 [];
@@ -256,15 +257,19 @@ function useLookupSelectState(props) {
       const newState = 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);
@@ -314,17 +319,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,
@@ -1292,6 +1304,12 @@ function LookupSelect(props) {
     size = "medium",
     icon,
     renderTrigger,
+    renderModal,
+    renderGrid,
+    renderHeader,
+    renderFooter,
+    renderSearch,
+    renderPagination,
     modalTitle,
     classNames,
     styles,
@@ -1455,7 +1473,7 @@ function LookupSelect(props) {
       virtualThreshold
     ]
   );
-  const renderGrid = import_react5.default.useCallback(() => {
+  const renderGridComponent = import_react5.default.useCallback(() => {
     const commonGridProps = {
       data: currentData,
       columns,
@@ -1506,6 +1524,96 @@ function LookupSelect(props) {
     shouldUseVirtualization,
     virtualizationConfig
   ]);
+  const renderModalContent = () => {
+    const defaultContent = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      renderSearch ? renderSearch({
+        value: searchValue,
+        onChange: handleSearchChange,
+        placeholder: texts.searchPlaceholder,
+        loading,
+        onClear: () => handleSearchChange("")
+      }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        SearchInput,
+        {
+          value: searchValue,
+          onChange: handleSearchChange,
+          placeholder: texts.searchPlaceholder
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lookup-select__modal-content", children: [
+        renderGrid ? renderGrid({
+          data: currentData,
+          columns,
+          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) {
+              clearSelections();
+            } else {
+              currentData.forEach((row) => {
+                if (!isRowSelected(row)) {
+                  toggleRowSelection(row);
+                }
+              });
+            }
+          } : void 0,
+          onClearAll: clearSelections,
+          loading,
+          error,
+          mode,
+          mapper,
+          virtualization: shouldUseVirtualization ? virtualizationConfig : void 0,
+          selectableRow,
+          onSortChange: handleSortChange,
+          sortBy: getCurrentQuery().sortBy,
+          sortDir: getCurrentQuery().sortDir
+        }) : renderGridComponent(),
+        dataSource && !renderPagination && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Pagination,
+          {
+            currentPage,
+            totalCount,
+            pageSize: optimizedPageSize,
+            onPageChange: handlePageChange
+          }
+        ),
+        dataSource && renderPagination && renderPagination({
+          currentPage,
+          totalPages: Math.ceil(totalCount / optimizedPageSize),
+          onPageChange: handlePageChange,
+          pageSize: optimizedPageSize,
+          onPageSizeChange: (newSize) => {
+          },
+          totalCount,
+          loading
+        })
+      ] }),
+      renderFooter ? renderFooter({
+        selectedCount: currentSelections.length,
+        totalCount,
+        onConfirm: confirmSelection,
+        onCancel: cancelSelection,
+        currentPage,
+        totalPages: Math.ceil(totalCount / optimizedPageSize),
+        onPageChange: handlePageChange,
+        pageSize: optimizedPageSize,
+        loading,
+        mode
+      }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ModalFooter,
+        {
+          onConfirm: confirmSelection,
+          onCancel: cancelSelection,
+          confirmText: texts.confirmText,
+          cancelText: texts.cancelText,
+          selectedCount: currentSelections.length
+        }
+      )
+    ] });
+    return defaultContent;
+  };
   const getThemeClasses = () => {
     const classes = ["lookup-select"];
     if (variant && variant !== "default") {
@@ -1553,7 +1661,17 @@ function LookupSelect(props) {
         onRemoveTag: (item) => toggleRowSelection(item)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    renderModal ? renderModal({
+      isOpen: modalOpen,
+      onClose: cancelSelection,
+      children: renderModalContent(),
+      title: modalTitle || texts.modalTitle,
+      loading,
+      error,
+      query: getCurrentQuery(),
+      selectedCount: currentSelections.length,
+      totalCount
+    }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       Modal,
       {
         isOpen: modalOpen,
@@ -1561,38 +1679,7 @@ function LookupSelect(props) {
         title: modalTitle || texts.modalTitle,
         className: classNames?.modal,
         style: styles?.modal,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            SearchInput,
-            {
-              value: searchValue,
-              onChange: handleSearchChange,
-              placeholder: texts.searchPlaceholder
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "lookup-select__modal-content", children: [
-            renderGrid(),
-            dataSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              Pagination,
-              {
-                currentPage,
-                totalCount,
-                pageSize: optimizedPageSize,
-                onPageChange: handlePageChange
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            ModalFooter,
-            {
-              onConfirm: confirmSelection,
-              onCancel: cancelSelection,
-              confirmText: texts.confirmText,
-              cancelText: texts.cancelText,
-              selectedCount: currentSelections.length
-            }
-          )
-        ]
+        children: renderModalContent()
       }
     )
   ] });