react-lookup-select 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1604 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LookupSelect: () => LookupSelect
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/LookupSelect.tsx
+var import_react5 = __toESM(require("react"), 1);
+
+// src/internal/state.ts
+var import_react = require("react");
+
+// src/internal/core.ts
+function createSelectionState() {
+  return {
+    selectedIds: /* @__PURE__ */ new Set(),
+    selectedRows: /* @__PURE__ */ new Map()
+  };
+}
+var SelectionManager = class {
+  constructor(mode, mapper, initialState) {
+    this.mode = mode;
+    this.mapper = mapper;
+    this.state = initialState || createSelectionState();
+  }
+  /**
+   * Row selection/deselection
+   */
+  toggleRow(row) {
+    const id = this.mapper.getId(row);
+    const newState = {
+      selectedIds: new Set(this.state.selectedIds),
+      selectedRows: new Map(this.state.selectedRows)
+    };
+    if (this.state.selectedIds.has(id)) {
+      newState.selectedIds.delete(id);
+      newState.selectedRows.delete(id);
+    } else {
+      if (this.mode === "single") {
+        newState.selectedIds.clear();
+        newState.selectedRows.clear();
+      }
+      newState.selectedIds.add(id);
+      newState.selectedRows.set(id, row);
+    }
+    this.state = newState;
+    return newState;
+  }
+  /**
+   * Return selected rows as array
+   */
+  getSelectedRows() {
+    return Array.from(this.state.selectedRows.values());
+  }
+  /**
+   * Check if row is selected
+   */
+  isRowSelected(row) {
+    const id = this.mapper.getId(row);
+    return this.state.selectedIds.has(id);
+  }
+  /**
+   * Clear all selections
+   */
+  clearSelection() {
+    this.state = createSelectionState();
+    return this.state;
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return this.state;
+  }
+};
+function createQueryState(pageSize = 20) {
+  return {
+    page: 1,
+    pageSize,
+    search: void 0,
+    sortBy: void 0,
+    sortDir: void 0
+  };
+}
+var QueryManager = class {
+  constructor(initialState) {
+    this.state = { ...createQueryState(), ...initialState };
+  }
+  /**
+   * Update search term - returns to page 1
+   */
+  updateSearch(search) {
+    this.state = { ...this.state, search, page: 1 };
+    return this.state;
+  }
+  /**
+   * Update pagination
+   */
+  updatePage(page) {
+    this.state = { ...this.state, page };
+    return this.state;
+  }
+  /**
+   * Update sorting - returns to page 1
+   */
+  updateSort(sortBy, sortDir) {
+    this.state = { ...this.state, sortBy, sortDir, page: 1 };
+    return this.state;
+  }
+  /**
+   * Update page size - returns to page 1
+   */
+  updatePageSize(pageSize) {
+    this.state = { ...this.state, pageSize, page: 1 };
+    return this.state;
+  }
+  /**
+   * Get current state
+   */
+  getState() {
+    return this.state;
+  }
+};
+function mapReturnValue(selectedRows, props) {
+  const { returnShape = "id-text", returnMap, mapper, mode = "single" } = props;
+  if (selectedRows.length === 0) {
+    return mode === "single" ? null : [];
+  }
+  let mappedValues;
+  switch (returnShape) {
+    case "id-text":
+      mappedValues = selectedRows.map((row) => ({
+        id: mapper.getId(row),
+        text: mapper.getText(row)
+      }));
+      break;
+    case "row":
+      mappedValues = selectedRows;
+      break;
+    case "custom":
+      if (!returnMap) {
+        throw new Error('returnMap is required when returnShape is "custom"');
+      }
+      mappedValues = selectedRows.map((row) => returnMap.map(row));
+      break;
+    default:
+      throw new Error(`Unknown returnShape: ${returnShape}`);
+  }
+  return mode === "single" ? mappedValues[0] : mappedValues;
+}
+
+// src/internal/state.ts
+function useLookupSelectState(props) {
+  const {
+    mode = "single",
+    mapper,
+    returnShape = "id-text",
+    returnMap,
+    value,
+    defaultValue,
+    onChange,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    pageSize = 20,
+    onQueryChange,
+    onSelectionChange,
+    onConfirm,
+    onCancel,
+    data
+  } = props;
+  const [internalModalOpen, setInternalModalOpen] = (0, import_react.useState)(defaultOpen);
+  const modalOpen = open !== void 0 ? open : internalModalOpen;
+  const handleModalOpenChange = (0, import_react.useCallback)(
+    (newOpen) => {
+      if (open === void 0) {
+        setInternalModalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [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 [currentSelections, setCurrentSelections] = (0, import_react.useState)([]);
+  const resolveValueToRows = (0, import_react.useCallback)(
+    (valueToResolve) => {
+      if (!valueToResolve || !data) return [];
+      const values = Array.isArray(valueToResolve) ? valueToResolve : [valueToResolve];
+      const resolvedRows = [];
+      for (const val of values) {
+        if (typeof val === "object" && val !== null && mapper.getId(val) !== void 0) {
+          resolvedRows.push(val);
+        } else {
+          const searchId = typeof val === "object" && val !== null && "id" in val ? val.id : val;
+          const matchingRow = data.find(
+            (row) => mapper.getId(row) === searchId
+          );
+          if (matchingRow) {
+            resolvedRows.push(matchingRow);
+          }
+        }
+      }
+      return resolvedRows;
+    },
+    [data, mapper]
+  );
+  (0, import_react.useEffect)(() => {
+    const initialValue = value !== void 0 ? value : defaultValue;
+    if (!initialValue || !data) return;
+    const resolvedSelections = resolveValueToRows(initialValue);
+    if (resolvedSelections.length > 0) {
+      selectionManager.clearSelection();
+      for (const row of resolvedSelections) {
+        selectionManager.toggleRow(row);
+      }
+      setCurrentSelections(resolvedSelections);
+    }
+  }, [value, defaultValue, data, resolveValueToRows, selectionManager]);
+  const toggleRowSelection = (0, import_react.useCallback)(
+    (row) => {
+      const newState = selectionManager.toggleRow(row);
+      const selectedRows = selectionManager.getSelectedRows();
+      setCurrentSelections(selectedRows);
+      onSelectionChange?.(selectedRows);
+    },
+    [selectionManager, onSelectionChange]
+  );
+  const clearSelections = (0, import_react.useCallback)(() => {
+    selectionManager.clearSelection();
+    setCurrentSelections([]);
+    onSelectionChange?.([]);
+  }, [selectionManager, onSelectionChange]);
+  const isRowSelected = (0, import_react.useCallback)(
+    (row) => {
+      return selectionManager.isRowSelected(row);
+    },
+    [selectionManager]
+  );
+  const updateQuery = (0, import_react.useCallback)(
+    (updates) => {
+      const currentState = queryManager.getState();
+      const newState = { ...currentState, ...updates };
+      if (updates.search !== void 0) {
+        queryManager.updateSearch(updates.search);
+      }
+      if (updates.page !== void 0) {
+        queryManager.updatePage(updates.page);
+      }
+      if (updates.sortBy !== void 0 && updates.sortDir !== void 0) {
+        queryManager.updateSort(updates.sortBy, updates.sortDir);
+      }
+      if (updates.pageSize !== void 0) {
+        queryManager.updatePageSize(updates.pageSize);
+      }
+      onQueryChange?.(queryManager.getState());
+    },
+    [queryManager, onQueryChange]
+  );
+  const confirmSelection = (0, import_react.useCallback)(() => {
+    const selectedRows = selectionManager.getSelectedRows();
+    const returnValue = mapReturnValue(selectedRows, {
+      mode,
+      mapper,
+      returnShape,
+      returnMap
+    });
+    onChange?.(returnValue);
+    onConfirm?.(returnValue);
+    handleModalOpenChange(false);
+  }, [
+    selectionManager,
+    mode,
+    mapper,
+    returnShape,
+    returnMap,
+    onChange,
+    onConfirm,
+    handleModalOpenChange
+  ]);
+  const cancelSelection = (0, import_react.useCallback)(() => {
+    selectionManager.clearSelection();
+    setCurrentSelections([]);
+    onCancel?.();
+    handleModalOpenChange(false);
+  }, [selectionManager, onCancel, handleModalOpenChange]);
+  const getCurrentQuery = (0, import_react.useCallback)(() => {
+    return queryManager.getState();
+  }, [queryManager]);
+  return {
+    // Modal state
+    modalOpen,
+    openModal: () => handleModalOpenChange(true),
+    closeModal: () => handleModalOpenChange(false),
+    // Selection state
+    currentSelections,
+    toggleRowSelection,
+    clearSelections,
+    isRowSelected,
+    // Query state
+    updateQuery,
+    getCurrentQuery,
+    // Actions
+    confirmSelection,
+    cancelSelection
+  };
+}
+
+// src/hooks/useAccessibility.ts
+var import_react2 = require("react");
+function useKeyboardNavigation({
+  isModalOpen,
+  onClose,
+  onConfirm,
+  onRowSelect,
+  currentData,
+  selectedRows,
+  mode
+}) {
+  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();
+            onConfirm?.();
+          }
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+          break;
+        default:
+          break;
+      }
+    },
+    [isModalOpen, onClose, onConfirm]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (isModalOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [isModalOpen, handleKeyDown]);
+  return {
+    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 useScreenReaderAnnouncements() {
+  const announce = (0, import_react2.useCallback)(
+    (message, priority = "polite") => {
+      const announcement = document.createElement("div");
+      announcement.setAttribute("aria-live", priority);
+      announcement.setAttribute("aria-atomic", "true");
+      announcement.className = "sr-only";
+      announcement.textContent = message;
+      document.body.appendChild(announcement);
+      setTimeout(() => {
+        document.body.removeChild(announcement);
+      }, 1e3);
+    },
+    []
+  );
+  return { announce };
+}
+
+// src/components/Trigger.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Trigger({
+  isOpen,
+  onToggle,
+  selectedItems,
+  placeholder = "Please select",
+  icon,
+  mapper,
+  mode = "single",
+  className,
+  style,
+  renderTrigger,
+  onClear,
+  onRemoveTag
+}) {
+  const selectedValue = mode === "single" ? selectedItems[0] || null : selectedItems;
+  if (renderTrigger) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        onClick: onToggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle();
+          }
+        },
+        className,
+        style,
+        children: renderTrigger(selectedValue)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": isOpen,
+      className: `lookup-select__trigger ${className || ""}`,
+      style,
+      onClick: onToggle,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lookup-select__trigger-content", children: selectedItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lookup-select__placeholder", children: placeholder }) : mode === "single" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "lookup-select__selected-text", children: mapper.getText(selectedItems[0]) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lookup-select__tags", children: [
+          selectedItems.slice(0, 3).map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "lookup-select__tag", children: [
+            mapper.getText(item),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "lookup-select__tag-remove",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemoveTag?.(item);
+                },
+                "aria-label": `Remove ${mapper.getText(item)}`,
+                children: "\xD7"
+              }
+            )
+          ] }, mapper.getId(item))),
+          selectedItems.length > 3 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "lookup-select__tag lookup-select__tag--more", children: [
+            "+",
+            selectedItems.length - 3,
+            " more"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lookup-select__trigger-actions", children: [
+          selectedItems.length > 0 && onClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "lookup-select__clear-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onClear();
+              },
+              "aria-label": "Clear selection",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "path",
+                {
+                  d: "M10.5 5.5L5.5 10.5M5.5 5.5L10.5 10.5",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lookup-select__trigger-icon", children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M4 6L8 10L12 6",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              fill: "none",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ) }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Modal.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Modal({
+  isOpen,
+  onClose,
+  title = "Select Record",
+  className,
+  style,
+  children,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  closeButtonLabel = "Close modal"
+}) {
+  const modalRef = (0, import_react3.useRef)(null);
+  const previousFocusRef = (0, import_react3.useRef)(null);
+  (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"])'
+    );
+    if (focusableElements && focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    const handleTab = (e) => {
+      if (e.key !== "Tab") return;
+      const focusableElements2 = 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 (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          lastElement.focus();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          firstElement.focus();
+          e.preventDefault();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.addEventListener("keydown", handleTab);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleTab);
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus();
+      }
+    };
+  }, [isOpen, onClose]);
+  (0, import_react3.useEffect)(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "lookup-select__modal-overlay",
+        onClick: onClose,
+        role: "presentation",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            ref: modalRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy || (title ? "lookup-select-modal-title" : void 0),
+            "aria-describedby": ariaDescribedBy,
+            className: `lookup-select__modal ${className || ""}`,
+            style,
+            onClick: (e) => e.stopPropagation(),
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lookup-select__modal-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "h2",
+                  {
+                    id: "lookup-select-modal-title",
+                    className: "lookup-select__modal-title",
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lookup-select__modal-close",
+                    onClick: onClose,
+                    "aria-label": closeButtonLabel,
+                    tabIndex: 0,
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lookup-select__modal-body", role: "document", children })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function SearchInput({
+  value,
+  onChange,
+  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"
+      }
+    ),
+    /* @__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" }) }) })
+  ] });
+}
+function ModalFooter({
+  onConfirm,
+  onCancel,
+  confirmText = "Apply",
+  cancelText = "Cancel",
+  selectedCount = 0,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `lookup-select__modal-footer ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "lookup-select__selected-count", children: selectedCount > 0 ? `${selectedCount} selected` : "No selection" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lookup-select__modal-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__button lookup-select__button--secondary",
+          onClick: onCancel,
+          children: cancelText
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__button lookup-select__button--primary",
+          onClick: onConfirm,
+          disabled: selectedCount === 0,
+          children: confirmText
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/Grid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Grid({
+  data,
+  columns,
+  mode,
+  mapper,
+  selectedRows,
+  onRowToggle,
+  onRowClick,
+  isRowSelected,
+  selectableRow,
+  onSort,
+  currentSort,
+  loading = false,
+  error,
+  emptyText = "No records found",
+  className,
+  style
+}) {
+  const handleSort = (columnKey) => {
+    if (!onSort) return;
+    const currentSortBy = currentSort?.sortBy;
+    const currentSortDir = currentSort?.sortDir;
+    let newSortDir = "asc";
+    if (currentSortBy === columnKey) {
+      newSortDir = currentSortDir === "asc" ? "desc" : "asc";
+    }
+    onSort(columnKey, newSortDir);
+  };
+  const getSortIcon = (columnKey) => {
+    if (currentSort?.sortBy !== columnKey) {
+      return "\u2195";
+    }
+    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..." }) }) });
+  }
+  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
+    ] }) }) });
+  }
+  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 }) }) });
+  }
+  const handleRowClick = (row, event) => {
+    if (event.target.closest(".lookup-select__checkbox")) {
+      return;
+    }
+    if (selectableRow && !selectableRow(row)) {
+      return;
+    }
+    if (mapper.getDisabled?.(row)) {
+      return;
+    }
+    onRowClick?.(row);
+    onRowToggle(row);
+  };
+  const handleCheckboxChange = (row, event) => {
+    event.stopPropagation();
+    if (selectableRow && !selectableRow(row)) {
+      return;
+    }
+    if (mapper.getDisabled?.(row)) {
+      return;
+    }
+    onRowToggle(row);
+  };
+  const isRowDisabled = (row) => {
+    if (mapper.getDisabled?.(row)) return true;
+    if (selectableRow && !selectableRow(row)) return true;
+    return false;
+  };
+  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",
+      role: "grid",
+      "aria-label": "Record list",
+      "aria-rowcount": data.length,
+      "aria-multiselectable": mode === "multiple",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: "lookup-select__table-head", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+          mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "lookup-select__table-header lookup-select__table-header--checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: selectedRows.length > 0 && selectedRows.length === data.filter((row) => !isRowDisabled(row)).length,
+              ref: (input) => {
+                if (input) {
+                  input.indeterminate = selectedRows.length > 0 && selectedRows.length < data.filter((row) => !isRowDisabled(row)).length;
+                }
+              },
+              onChange: (e) => {
+                const selectableRows = data.filter(
+                  (row) => !isRowDisabled(row)
+                );
+                if (e.target.checked) {
+                  selectableRows.forEach((row) => {
+                    if (!isRowSelected(row)) {
+                      onRowToggle(row);
+                    }
+                  });
+                } else {
+                  selectedRows.forEach((row) => {
+                    onRowToggle(row);
+                  });
+                }
+              },
+              "aria-label": "Select all"
+            }
+          ) }) }),
+          columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "th",
+            {
+              className: "lookup-select__table-header",
+              style: { width: column.width },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "lookup-select__table-header-content", children: [
+                column.title,
+                column.sortable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lookup-select__sort-button",
+                    "aria-label": `Sort by ${column.title} column`,
+                    onClick: () => handleSort(String(column.key)),
+                    children: getSortIcon(String(column.key))
+                  }
+                )
+              ] })
+            },
+            typeof column.key === "string" ? column.key : String(column.key)
+          ))
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: "lookup-select__table-body", children: data.map((row, rowIndex) => {
+          const rowId = mapper.getId(row);
+          const selected = isRowSelected(row);
+          const disabled = isRowDisabled(row);
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "tr",
+            {
+              className: `
+                  lookup-select__table-row
+                  ${selected ? "lookup-select__table-row--selected" : ""}
+                  ${disabled ? "lookup-select__table-row--disabled" : ""}
+                `,
+              onClick: (e) => !disabled && handleRowClick(row, e),
+              role: disabled ? void 0 : "button",
+              tabIndex: disabled ? void 0 : 0,
+              onKeyDown: (e) => {
+                if (disabled) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onRowToggle(row);
+                }
+              },
+              "aria-label": disabled ? void 0 : `Select ${mapper.getText(row)} row`,
+              children: [
+                mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "lookup-select__table-cell lookup-select__table-cell--checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "lookup-select__checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: selected,
+                    onChange: (e) => handleCheckboxChange(row, e),
+                    disabled,
+                    "aria-label": `Select ${mapper.getText(row)}`
+                  }
+                ) }) }),
+                columns.map((column, columnIndex) => {
+                  const cellKey = `${rowId}-${typeof column.key === "string" ? column.key : String(column.key)}`;
+                  let cellContent;
+                  if (column.render) {
+                    cellContent = column.render(row, rowIndex);
+                  } else {
+                    const value = row[column.key];
+                    cellContent = value?.toString() || "";
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "lookup-select__table-cell", children: cellContent }, cellKey);
+                })
+              ]
+            },
+            rowId
+          );
+        }) })
+      ]
+    }
+  ) });
+}
+
+// src/components/VirtualGrid.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function VirtualGrid(props) {
+  const {
+    data,
+    columns,
+    mode,
+    mapper,
+    selectedRows,
+    onRowToggle,
+    isRowSelected,
+    selectableRow,
+    loading,
+    error,
+    emptyText,
+    className,
+    style,
+    currentSort,
+    onSort,
+    virtualization
+  } = props;
+  const containerRef = import_react4.default.useRef(null);
+  const headerCheckboxRef = import_react4.default.useRef(null);
+  const [scrollTop, setScrollTop] = import_react4.default.useState(0);
+  const [actualContainerHeight, setActualContainerHeight] = import_react4.default.useState(
+    virtualization.containerHeight
+  );
+  import_react4.default.useEffect(() => {
+    if (containerRef.current) {
+      const updateHeight = () => {
+        if (containerRef.current) {
+          setActualContainerHeight(containerRef.current.clientHeight);
+        }
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(containerRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+  import_react4.default.useEffect(() => {
+    if (headerCheckboxRef.current) {
+      const hasSelected = selectedRows.length > 0;
+      const hasUnselected = selectedRows.length < data.length;
+      headerCheckboxRef.current.indeterminate = hasSelected && hasUnselected;
+    }
+  }, [selectedRows.length, data.length]);
+  const itemCount = data.length;
+  const { rowHeight, overscan } = virtualization;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endIndex = Math.min(
+    itemCount - 1,
+    Math.floor((scrollTop + actualContainerHeight) / rowHeight) + overscan
+  );
+  const visibleItems = import_react4.default.useMemo(() => {
+    const items = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+      items.push({
+        index: i,
+        row: data[i],
+        style: {
+          position: "absolute",
+          top: i * rowHeight,
+          left: 0,
+          right: 0,
+          height: rowHeight
+        }
+      });
+    }
+    return items;
+  }, [startIndex, endIndex, data, rowHeight]);
+  const handleScroll = import_react4.default.useCallback((e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  const totalHeight = itemCount * rowHeight;
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__loading", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: "Loading..." }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__error", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { children: [
+      "Error: ",
+      error
+    ] }) }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__grid-state", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__empty", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { children: emptyText }) }) });
+  }
+  const handleSort = (columnKey) => {
+    if (onSort) {
+      const newSortDir = currentSort?.sortBy === columnKey && currentSort.sortDir === "asc" ? "desc" : "asc";
+      onSort(columnKey, newSortDir);
+    }
+  };
+  const getSortIcon = (columnKey) => {
+    if (currentSort?.sortBy !== columnKey) {
+      return "\u2195";
+    }
+    return currentSort.sortDir === "asc" ? "\u2191" : "\u2193";
+  };
+  const handleCheckboxChange = (row, event) => {
+    event.stopPropagation();
+    onRowToggle(row);
+  };
+  const handleRowClick = (row) => {
+    if (mode === "single") {
+      onRowToggle(row);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `lookup-select__virtual-grid ${className || ""}`,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lookup-select__grid-header", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { className: "lookup-select__table", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+          mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "lookup-select__header-cell lookup-select__header-cell--checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              ref: headerCheckboxRef,
+              type: "checkbox",
+              className: "lookup-select__checkbox",
+              checked: selectedRows.length === data.length && data.length > 0,
+              onChange: (e) => {
+                if (e.target.checked) {
+                  data.forEach((row) => {
+                    if (!isRowSelected(row) && (!selectableRow || selectableRow(row))) {
+                      onRowToggle(row);
+                    }
+                  });
+                } else {
+                  selectedRows.forEach((row) => onRowToggle(row));
+                }
+              },
+              "aria-label": "Select all"
+            }
+          ) }),
+          columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "th",
+            {
+              className: `lookup-select__header-cell ${column.sortable ? "lookup-select__header-cell--sortable" : ""}`,
+              style: { width: column.width },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lookup-select__header-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: column.title }),
+                column.sortable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "lookup-select__sort-button",
+                    "aria-label": `Sort by ${column.title} column`,
+                    onClick: () => handleSort(String(column.key)),
+                    children: getSortIcon(String(column.key))
+                  }
+                )
+              ] })
+            },
+            String(column.key)
+          ))
+        ] }) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: containerRef,
+            className: "lookup-select__virtual-container",
+            style: {
+              flex: 1,
+              overflow: "auto",
+              position: "relative"
+            },
+            onScroll: handleScroll,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                className: "lookup-select__virtual-content",
+                style: {
+                  height: totalHeight,
+                  position: "relative"
+                },
+                children: visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  VirtualRow,
+                  {
+                    item,
+                    columns,
+                    mode,
+                    mapper,
+                    isSelected: isRowSelected(item.row),
+                    isSelectable: !selectableRow || selectableRow(item.row),
+                    onToggle: () => onRowToggle(item.row),
+                    onCheckboxChange: (e) => handleCheckboxChange(item.row, e),
+                    onClick: () => handleRowClick(item.row)
+                  },
+                  item.index
+                ))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function VirtualRowComponent({
+  item,
+  columns,
+  mode,
+  mapper,
+  isSelected,
+  isSelectable,
+  onToggle,
+  onCheckboxChange,
+  onClick
+}) {
+  const { row, style } = item;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: `lookup-select__virtual-row ${isSelected ? "lookup-select__row--selected" : ""} ${!isSelectable ? "lookup-select__row--disabled" : ""}`,
+      style,
+      onClick: isSelectable ? onClick : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("table", { className: "lookup-select__table", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+        mode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "lookup-select__cell lookup-select__cell--checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "lookup-select__checkbox",
+            checked: isSelected,
+            disabled: !isSelectable,
+            onChange: onCheckboxChange,
+            onClick: (e) => e.stopPropagation()
+          }
+        ) }),
+        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "td",
+          {
+            className: "lookup-select__cell",
+            style: { width: column.width },
+            children: column.render ? column.render(row, item.index) : String(row[column.key] || "")
+          },
+          String(column.key)
+        ))
+      ] }) }) })
+    }
+  );
+}
+var VirtualRow = import_react4.default.memo(
+  VirtualRowComponent
+);
+
+// src/components/Pagination.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Pagination({
+  currentPage,
+  totalCount,
+  pageSize,
+  onPageChange,
+  className
+}) {
+  const totalPages = Math.ceil(totalCount / pageSize);
+  if (totalPages <= 1) {
+    return null;
+  }
+  const getVisiblePages = () => {
+    const delta = 2;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {
+      range.push(i);
+    }
+    if (currentPage - delta > 2) {
+      rangeWithDots.push(1, "...");
+    } else {
+      rangeWithDots.push(1);
+    }
+    rangeWithDots.push(...range);
+    if (currentPage + delta < totalPages - 1) {
+      rangeWithDots.push("...", totalPages);
+    } else if (totalPages > 1) {
+      rangeWithDots.push(totalPages);
+    }
+    return rangeWithDots;
+  };
+  const visiblePages = getVisiblePages();
+  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.jsxs)("div", { className: "lookup-select__pagination-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__pagination-button",
+          disabled: currentPage === 1,
+          onClick: () => onPageChange(currentPage - 1),
+          "aria-label": "Previous page",
+          children: "\u2039"
+        }
+      ),
+      visiblePages.map((page, index) => {
+        if (page === "...") {
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "span",
+            {
+              className: "lookup-select__pagination-dots",
+              children: "..."
+            },
+            `dots-${index}`
+          );
+        }
+        const pageNum = page;
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `
+                lookup-select__pagination-button
+                ${currentPage === pageNum ? "lookup-select__pagination-button--active" : ""}
+              `,
+            onClick: () => onPageChange(pageNum),
+            "aria-label": `Sayfa ${pageNum}`,
+            "aria-current": currentPage === pageNum ? "page" : void 0,
+            children: pageNum
+          },
+          pageNum
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "lookup-select__pagination-button",
+          disabled: currentPage === totalPages,
+          onClick: () => onPageChange(currentPage + 1),
+          "aria-label": "Next page",
+          children: "\u203A"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/LookupSelect.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LookupSelect(props) {
+  const {
+    columns,
+    mapper,
+    mode = "single",
+    data = [],
+    dataSource,
+    variant = "default",
+    size = "medium",
+    icon,
+    renderTrigger,
+    modalTitle,
+    classNames,
+    styles,
+    theme,
+    i18n,
+    pageSize = 20,
+    selectableRow,
+    virtualization = false,
+    virtualRowHeight = 40,
+    virtualOverscan = 5,
+    virtualContainerHeight = 400,
+    virtualThreshold = 100
+  } = props;
+  const {
+    modalOpen,
+    openModal,
+    closeModal,
+    currentSelections,
+    toggleRowSelection,
+    clearSelections,
+    isRowSelected,
+    updateQuery,
+    getCurrentQuery,
+    confirmSelection,
+    cancelSelection
+  } = useLookupSelectState(props);
+  const texts = {
+    triggerPlaceholder: "Please select",
+    searchPlaceholder: "Search...",
+    confirmText: "Apply",
+    cancelText: "Cancel",
+    modalTitle: "Select Record",
+    emptyText: "No records found",
+    loadingText: "Loading...",
+    errorPrefix: "Error:",
+    selectedCount: (n) => `${n} selected`,
+    clearText: "Clear",
+    selectAllLabel: "Select all",
+    selectRowLabel: (rowText) => `Select ${rowText} option`,
+    sortColumnLabel: (columnTitle) => `Sort by ${columnTitle} column`,
+    closeModalLabel: "Close modal",
+    paginationInfo: (current, total) => `Page ${current} / ${total}`,
+    totalRecords: (total) => `${total} records`,
+    searchResults: (count) => `${count} results found`,
+    ...i18n
+  };
+  const optimizedPageSize = import_react5.default.useMemo(() => {
+    if (dataSource && virtualization) {
+      const containerCapacity = Math.ceil(
+        virtualContainerHeight / virtualRowHeight
+      );
+      return Math.max(pageSize, containerCapacity * 5);
+    }
+    return pageSize;
+  }, [
+    dataSource,
+    virtualization,
+    virtualContainerHeight,
+    virtualRowHeight,
+    pageSize
+  ]);
+  const { announce } = useScreenReaderAnnouncements();
+  useFocusManagement(modalOpen);
+  useKeyboardNavigation({
+    isModalOpen: modalOpen,
+    onClose: closeModal,
+    onConfirm: confirmSelection,
+    currentData: [],
+    selectedRows: currentSelections,
+    mode
+  });
+  const [searchValue, setSearchValue] = import_react5.default.useState("");
+  const [loading, setLoading] = import_react5.default.useState(false);
+  const [error, setError] = import_react5.default.useState();
+  const [serverData, setServerData] = import_react5.default.useState([]);
+  const [totalCount, setTotalCount] = import_react5.default.useState(0);
+  const [currentPage, setCurrentPage] = import_react5.default.useState(1);
+  const handleSearchChange = import_react5.default.useCallback(
+    (value) => {
+      setSearchValue(value);
+      updateQuery({ search: value, page: 1 });
+    },
+    [updateQuery]
+  );
+  const filteredData = import_react5.default.useMemo(() => {
+    if (!searchValue || dataSource) {
+      return data;
+    }
+    return data.filter((item) => {
+      return columns.some((column) => {
+        const cellValue = item[column.key];
+        return cellValue?.toString().toLowerCase().includes(searchValue.toLowerCase());
+      });
+    });
+  }, [data, searchValue, columns, dataSource]);
+  const currentData = dataSource ? serverData : filteredData;
+  const loadServerData = import_react5.default.useCallback(async () => {
+    if (!dataSource) return;
+    setLoading(true);
+    setError(void 0);
+    try {
+      const query = getCurrentQuery();
+      const result = await dataSource({
+        ...query,
+        search: searchValue,
+        page: currentPage,
+        pageSize: optimizedPageSize
+      });
+      setServerData(result.rows);
+      setTotalCount(result.total);
+      setLoading(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Error occurred while loading data"
+      );
+      setLoading(false);
+    }
+  }, [
+    dataSource,
+    getCurrentQuery,
+    searchValue,
+    currentPage,
+    optimizedPageSize
+  ]);
+  import_react5.default.useEffect(() => {
+    if (dataSource && modalOpen) {
+      loadServerData();
+    }
+  }, [dataSource, modalOpen, loadServerData]);
+  const handlePageChange = import_react5.default.useCallback(
+    (newPage) => {
+      setCurrentPage(newPage);
+      updateQuery({ page: newPage });
+    },
+    [updateQuery]
+  );
+  const handleSortChange = import_react5.default.useCallback(
+    (sortBy, sortDir) => {
+      updateQuery({ sortBy, sortDir, page: 1 });
+      setCurrentPage(1);
+    },
+    [updateQuery]
+  );
+  const shouldUseVirtualization = import_react5.default.useMemo(() => {
+    if (!virtualization) return false;
+    return currentData.length >= virtualThreshold;
+  }, [virtualization, currentData.length, virtualThreshold]);
+  const virtualizationConfig = import_react5.default.useMemo(
+    () => ({
+      enabled: shouldUseVirtualization,
+      rowHeight: virtualRowHeight,
+      overscan: virtualOverscan,
+      containerHeight: virtualContainerHeight,
+      threshold: virtualThreshold
+    }),
+    [
+      shouldUseVirtualization,
+      virtualRowHeight,
+      virtualOverscan,
+      virtualContainerHeight,
+      virtualThreshold
+    ]
+  );
+  const renderGrid = import_react5.default.useCallback(() => {
+    const commonGridProps = {
+      data: currentData,
+      columns,
+      mode,
+      mapper,
+      selectedRows: currentSelections,
+      onRowToggle: toggleRowSelection,
+      isRowSelected,
+      selectableRow,
+      loading,
+      error,
+      emptyText: texts.emptyText,
+      className: classNames?.grid,
+      style: styles?.grid,
+      currentSort: dataSource ? {
+        sortBy: getCurrentQuery().sortBy || "",
+        sortDir: getCurrentQuery().sortDir || "asc"
+      } : void 0,
+      onSort: dataSource ? handleSortChange : void 0
+    };
+    if (shouldUseVirtualization) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        VirtualGrid,
+        {
+          ...commonGridProps,
+          virtualization: virtualizationConfig
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Grid, { ...commonGridProps });
+  }, [
+    currentData,
+    columns,
+    mode,
+    mapper,
+    currentSelections,
+    toggleRowSelection,
+    isRowSelected,
+    selectableRow,
+    loading,
+    error,
+    texts.emptyText,
+    classNames?.grid,
+    styles?.grid,
+    dataSource,
+    getCurrentQuery,
+    handleSortChange,
+    shouldUseVirtualization,
+    virtualizationConfig
+  ]);
+  const getThemeClasses = () => {
+    const classes = ["lookup-select"];
+    if (variant && variant !== "default") {
+      classes.push(`lookup-select--theme-${variant}`);
+    }
+    if (size && size !== "medium") {
+      classes.push(`lookup-select--size-${size}`);
+    }
+    if (classNames?.root) {
+      classes.push(classNames.root);
+    }
+    return classes.join(" ");
+  };
+  const getThemeStyles = () => {
+    const themeStyles = {};
+    if (theme) {
+      if (theme.colorPrimary)
+        themeStyles["--lookup-select-color-primary"] = theme.colorPrimary;
+      if (theme.colorBg)
+        themeStyles["--lookup-select-color-bg"] = theme.colorBg;
+      if (theme.colorText)
+        themeStyles["--lookup-select-color-text"] = theme.colorText;
+      if (theme.borderRadius)
+        themeStyles["--lookup-select-border-radius"] = typeof theme.borderRadius === "number" ? `${theme.borderRadius}px` : theme.borderRadius;
+      if (theme.spacing)
+        themeStyles["--lookup-select-spacing"] = `${theme.spacing}px`;
+    }
+    return { ...themeStyles, ...styles?.root };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: getThemeClasses(), style: getThemeStyles(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Trigger,
+      {
+        isOpen: modalOpen,
+        onToggle: openModal,
+        selectedItems: currentSelections,
+        placeholder: texts.triggerPlaceholder,
+        icon,
+        mapper,
+        mode,
+        className: classNames?.trigger,
+        style: styles?.trigger,
+        renderTrigger,
+        onClear: clearSelections,
+        onRemoveTag: (item) => toggleRowSelection(item)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      Modal,
+      {
+        isOpen: modalOpen,
+        onClose: cancelSelection,
+        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
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LookupSelect
+});
+//# sourceMappingURL=index.cjs.map