react-lookup-select 1.0.2 → 1.0.4

package/dist/index.d.cts

@@ -71,6 +71,21 @@ type ValueMapper<T> = {
     /** Optional: disable check */
     getDisabled?: (row: T) => boolean;
 };
+/**
+ * Virtualization configuration
+ */
+type VirtualizationConfig = {
+    /** Is virtualization active? */
+    enabled: boolean;
+    /** Fixed row height (px) */
+    rowHeight: number;
+    /** Number of extra rows to render outside visible area */
+    overscan: number;
+    /** Container height (px) */
+    containerHeight: number;
+    /** Virtualization threshold - activates with more items than this number */
+    threshold: number;
+};
 /**
  * Return value shape
  */
@@ -134,6 +149,130 @@ type i18nStrings = {
     /** Clear filters - "Clear filters" */
     clearFilters?: string;
 };
+/**
+ * Render Props Interfaces - for custom rendering functions
+ */
+type ModalRenderProps<T> = {
+    /** Is modal open? */
+    isOpen: boolean;
+    /** Close modal callback */
+    onClose: () => void;
+    /** Modal content */
+    children: ReactNode;
+    /** Modal title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string | null;
+    /** Current query state */
+    query?: QueryState;
+    /** Selected items count */
+    selectedCount: number;
+    /** Total items count */
+    totalCount: number;
+};
+type GridRenderProps<T> = {
+    /** Grid data */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Selected row IDs */
+    selectedIds: (string | number)[];
+    /** Row selection callback */
+    onRowSelect: (row: T) => void;
+    /** Select all callback */
+    onSelectAll?: () => void;
+    /** Clear all selections callback */
+    onClearAll?: () => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: string | null;
+    /** Selection mode */
+    mode: SelectMode;
+    /** Value mapper */
+    mapper: ValueMapper<T>;
+    /** Virtualization config */
+    virtualization?: VirtualizationConfig;
+    /** Row selectability checker */
+    selectableRow?: (row: T) => boolean;
+    /** Sort change callback */
+    onSortChange?: (sortBy: string, sortDir: 'asc' | 'desc') => void;
+    /** Current sort state */
+    sortBy?: string;
+    sortDir?: 'asc' | 'desc';
+};
+type HeaderRenderProps<T> = {
+    /** Current search value */
+    searchValue: string;
+    /** Search change callback */
+    onSearchChange: (value: string) => void;
+    /** Total items count */
+    totalCount: number;
+    /** Selected items count */
+    selectedCount: number;
+    /** Clear all selections callback */
+    onClearAll: () => void;
+    /** Modal title */
+    title?: string;
+    /** Close modal callback */
+    onClose: () => void;
+    /** Loading state */
+    loading?: boolean;
+};
+type FooterRenderProps<T> = {
+    /** Selected items count */
+    selectedCount: number;
+    /** Total items count */
+    totalCount: number;
+    /** Confirm selection callback */
+    onConfirm: () => void;
+    /** Cancel selection callback */
+    onCancel: () => void;
+    /** Current page info */
+    currentPage: number;
+    /** Total pages */
+    totalPages: number;
+    /** Page change callback */
+    onPageChange: (page: number) => void;
+    /** Page size */
+    pageSize: number;
+    /** Page size change callback */
+    onPageSizeChange?: (size: number) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Selection mode */
+    mode: SelectMode;
+};
+type SearchRenderProps = {
+    /** Current search value */
+    value: string;
+    /** Search change callback */
+    onChange: (value: string) => void;
+    /** Search placeholder */
+    placeholder?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Clear search callback */
+    onClear?: () => void;
+};
+type PaginationRenderProps = {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Total pages */
+    totalPages: number;
+    /** Page change callback */
+    onPageChange: (page: number) => void;
+    /** Page size */
+    pageSize: number;
+    /** Page size change callback */
+    onPageSizeChange?: (size: number) => void;
+    /** Total items count */
+    totalCount: number;
+    /** Loading state */
+    loading?: boolean;
+};
 /**
  * Component overrides - preserves headless core
  */
@@ -247,6 +386,18 @@ type LookupSelectProps<T> = {
     icon?: ReactNode;
     /** Completely custom trigger render function */
     renderTrigger?: (selected: T | T[] | null) => ReactNode;
+    /** Custom modal render function */
+    renderModal?: (props: ModalRenderProps<T>) => ReactNode;
+    /** Custom grid render function */
+    renderGrid?: (props: GridRenderProps<T>) => ReactNode;
+    /** Custom header render function */
+    renderHeader?: (props: HeaderRenderProps<T>) => ReactNode;
+    /** Custom footer render function */
+    renderFooter?: (props: FooterRenderProps<T>) => ReactNode;
+    /** Custom search input render function */
+    renderSearch?: (props: SearchRenderProps) => ReactNode;
+    /** Custom pagination render function */
+    renderPagination?: (props: PaginationRenderProps) => ReactNode;
     /** Row-based selection constraint function */
     selectableRow?: (row: T) => boolean;
     /** Is virtualization active for large data? */
@@ -290,4 +441,4 @@ type LookupSelectProps<T> = {
  */
 declare function LookupSelect<T = any>(props: LookupSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-export { type ClassNames, type ColumnDef, type ComponentsOverrides, type DataSourceFn, type DataSourceResult, LookupSelect, type LookupSelectProps, type QueryState, type ReturnMap, type ReturnShape, type SelectMode, type Styles, type ThemeTokens, type ValueMapper, type i18nStrings };
+export { type ClassNames, type ColumnDef, type ComponentsOverrides, type DataSourceFn, type DataSourceResult, type FooterRenderProps, type GridRenderProps, type HeaderRenderProps, LookupSelect, type LookupSelectProps, type ModalRenderProps, type PaginationRenderProps, type QueryState, type ReturnMap, type ReturnShape, type SearchRenderProps, type SelectMode, type Styles, type ThemeTokens, type ValueMapper, type i18nStrings };

package/dist/index.d.ts

@@ -71,6 +71,21 @@ type ValueMapper<T> = {
     /** Optional: disable check */
     getDisabled?: (row: T) => boolean;
 };
+/**
+ * Virtualization configuration
+ */
+type VirtualizationConfig = {
+    /** Is virtualization active? */
+    enabled: boolean;
+    /** Fixed row height (px) */
+    rowHeight: number;
+    /** Number of extra rows to render outside visible area */
+    overscan: number;
+    /** Container height (px) */
+    containerHeight: number;
+    /** Virtualization threshold - activates with more items than this number */
+    threshold: number;
+};
 /**
  * Return value shape
  */
@@ -134,6 +149,130 @@ type i18nStrings = {
     /** Clear filters - "Clear filters" */
     clearFilters?: string;
 };
+/**
+ * Render Props Interfaces - for custom rendering functions
+ */
+type ModalRenderProps<T> = {
+    /** Is modal open? */
+    isOpen: boolean;
+    /** Close modal callback */
+    onClose: () => void;
+    /** Modal content */
+    children: ReactNode;
+    /** Modal title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string | null;
+    /** Current query state */
+    query?: QueryState;
+    /** Selected items count */
+    selectedCount: number;
+    /** Total items count */
+    totalCount: number;
+};
+type GridRenderProps<T> = {
+    /** Grid data */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Selected row IDs */
+    selectedIds: (string | number)[];
+    /** Row selection callback */
+    onRowSelect: (row: T) => void;
+    /** Select all callback */
+    onSelectAll?: () => void;
+    /** Clear all selections callback */
+    onClearAll?: () => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: string | null;
+    /** Selection mode */
+    mode: SelectMode;
+    /** Value mapper */
+    mapper: ValueMapper<T>;
+    /** Virtualization config */
+    virtualization?: VirtualizationConfig;
+    /** Row selectability checker */
+    selectableRow?: (row: T) => boolean;
+    /** Sort change callback */
+    onSortChange?: (sortBy: string, sortDir: 'asc' | 'desc') => void;
+    /** Current sort state */
+    sortBy?: string;
+    sortDir?: 'asc' | 'desc';
+};
+type HeaderRenderProps<T> = {
+    /** Current search value */
+    searchValue: string;
+    /** Search change callback */
+    onSearchChange: (value: string) => void;
+    /** Total items count */
+    totalCount: number;
+    /** Selected items count */
+    selectedCount: number;
+    /** Clear all selections callback */
+    onClearAll: () => void;
+    /** Modal title */
+    title?: string;
+    /** Close modal callback */
+    onClose: () => void;
+    /** Loading state */
+    loading?: boolean;
+};
+type FooterRenderProps<T> = {
+    /** Selected items count */
+    selectedCount: number;
+    /** Total items count */
+    totalCount: number;
+    /** Confirm selection callback */
+    onConfirm: () => void;
+    /** Cancel selection callback */
+    onCancel: () => void;
+    /** Current page info */
+    currentPage: number;
+    /** Total pages */
+    totalPages: number;
+    /** Page change callback */
+    onPageChange: (page: number) => void;
+    /** Page size */
+    pageSize: number;
+    /** Page size change callback */
+    onPageSizeChange?: (size: number) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Selection mode */
+    mode: SelectMode;
+};
+type SearchRenderProps = {
+    /** Current search value */
+    value: string;
+    /** Search change callback */
+    onChange: (value: string) => void;
+    /** Search placeholder */
+    placeholder?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Clear search callback */
+    onClear?: () => void;
+};
+type PaginationRenderProps = {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Total pages */
+    totalPages: number;
+    /** Page change callback */
+    onPageChange: (page: number) => void;
+    /** Page size */
+    pageSize: number;
+    /** Page size change callback */
+    onPageSizeChange?: (size: number) => void;
+    /** Total items count */
+    totalCount: number;
+    /** Loading state */
+    loading?: boolean;
+};
 /**
  * Component overrides - preserves headless core
  */
@@ -247,6 +386,18 @@ type LookupSelectProps<T> = {
     icon?: ReactNode;
     /** Completely custom trigger render function */
     renderTrigger?: (selected: T | T[] | null) => ReactNode;
+    /** Custom modal render function */
+    renderModal?: (props: ModalRenderProps<T>) => ReactNode;
+    /** Custom grid render function */
+    renderGrid?: (props: GridRenderProps<T>) => ReactNode;
+    /** Custom header render function */
+    renderHeader?: (props: HeaderRenderProps<T>) => ReactNode;
+    /** Custom footer render function */
+    renderFooter?: (props: FooterRenderProps<T>) => ReactNode;
+    /** Custom search input render function */
+    renderSearch?: (props: SearchRenderProps) => ReactNode;
+    /** Custom pagination render function */
+    renderPagination?: (props: PaginationRenderProps) => ReactNode;
     /** Row-based selection constraint function */
     selectableRow?: (row: T) => boolean;
     /** Is virtualization active for large data? */
@@ -290,4 +441,4 @@ type LookupSelectProps<T> = {
  */
 declare function LookupSelect<T = any>(props: LookupSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-export { type ClassNames, type ColumnDef, type ComponentsOverrides, type DataSourceFn, type DataSourceResult, LookupSelect, type LookupSelectProps, type QueryState, type ReturnMap, type ReturnShape, type SelectMode, type Styles, type ThemeTokens, type ValueMapper, type i18nStrings };
+export { type ClassNames, type ColumnDef, type ComponentsOverrides, type DataSourceFn, type DataSourceResult, type FooterRenderProps, type GridRenderProps, type HeaderRenderProps, LookupSelect, type LookupSelectProps, type ModalRenderProps, type PaginationRenderProps, type QueryState, type ReturnMap, type ReturnShape, type SearchRenderProps, type SelectMode, type Styles, type ThemeTokens, type ValueMapper, type i18nStrings };

package/dist/index.js

@@ -1244,7 +1244,7 @@ function Pagination({
 }
 
 // src/components/LookupSelect.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function LookupSelect(props) {
   const {
     columns,
@@ -1256,6 +1256,12 @@ function LookupSelect(props) {
     size = "medium",
     icon,
     renderTrigger,
+    renderModal,
+    renderGrid,
+    renderHeader,
+    renderFooter,
+    renderSearch,
+    renderPagination,
     modalTitle,
     classNames,
     styles,
@@ -1419,7 +1425,7 @@ function LookupSelect(props) {
       virtualThreshold
     ]
   );
-  const renderGrid = React3.useCallback(() => {
+  const renderGridComponent = React3.useCallback(() => {
     const commonGridProps = {
       data: currentData,
       columns,
@@ -1470,6 +1476,96 @@ function LookupSelect(props) {
     shouldUseVirtualization,
     virtualizationConfig
   ]);
+  const renderModalContent = () => {
+    const defaultContent = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      renderSearch ? renderSearch({
+        value: searchValue,
+        onChange: handleSearchChange,
+        placeholder: texts.searchPlaceholder,
+        loading,
+        onClear: () => handleSearchChange("")
+      }) : /* @__PURE__ */ jsx6(
+        SearchInput,
+        {
+          value: searchValue,
+          onChange: handleSearchChange,
+          placeholder: texts.searchPlaceholder
+        }
+      ),
+      /* @__PURE__ */ jsxs6("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__ */ jsx6(
+          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__ */ jsx6(
+        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") {
@@ -1517,7 +1613,17 @@ function LookupSelect(props) {
         onRemoveTag: (item) => toggleRowSelection(item)
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    renderModal ? renderModal({
+      isOpen: modalOpen,
+      onClose: cancelSelection,
+      children: renderModalContent(),
+      title: modalTitle || texts.modalTitle,
+      loading,
+      error,
+      query: getCurrentQuery(),
+      selectedCount: currentSelections.length,
+      totalCount
+    }) : /* @__PURE__ */ jsx6(
       Modal,
       {
         isOpen: modalOpen,
@@ -1525,38 +1631,7 @@ function LookupSelect(props) {
         title: modalTitle || texts.modalTitle,
         className: classNames?.modal,
         style: styles?.modal,
-        children: [
-          /* @__PURE__ */ jsx6(
-            SearchInput,
-            {
-              value: searchValue,
-              onChange: handleSearchChange,
-              placeholder: texts.searchPlaceholder
-            }
-          ),
-          /* @__PURE__ */ jsxs6("div", { className: "lookup-select__modal-content", children: [
-            renderGrid(),
-            dataSource && /* @__PURE__ */ jsx6(
-              Pagination,
-              {
-                currentPage,
-                totalCount,
-                pageSize: optimizedPageSize,
-                onPageChange: handlePageChange
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx6(
-            ModalFooter,
-            {
-              onConfirm: confirmSelection,
-              onCancel: cancelSelection,
-              confirmText: texts.confirmText,
-              cancelText: texts.cancelText,
-              selectedCount: currentSelections.length
-            }
-          )
-        ]
+        children: renderModalContent()
       }
     )
   ] });