@apvee/spfx-react-toolkit 1.0.0

package/lib/hooks/useSPFxPnPList.js

@@ -0,0 +1,906 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useSPFxPnPContext } from './useSPFxPnPContext';
+/**
+ * Hook for working with SharePoint lists using PnPjs fluent API.
+ * Provides query execution with automatic .top() detection, CRUD operations, pagination, and state management.
+ *
+ * **Key Features**:
+ * - ✅ Native PnPjs fluent API - full type-safe query building
+ * - ✅ Smart .top() detection - no conflicts between user .top() and pageSize
+ * - ✅ CRUD operations (create, read, update, delete)
+ * - ✅ Batch operations for bulk updates
+ * - ✅ Pagination with `loadMore()` and `hasMore`
+ * - ✅ Automatic refetch after CRUD operations
+ * - ✅ Local state management per component instance
+ * - ✅ Cross-site support via PnPContextInfo
+ * - ✅ ES5 compatibility (IE11 support)
+ *
+ * **How .top() Detection Works**:
+ * The hook uses a recursive Proxy to detect if `.top()` is called in your queryBuilder:
+ * - If `.top()` is specified → uses that value
+ * - If no `.top()` but `pageSize` option → adds `.top(pageSize)` automatically
+ * - If neither → no limit (SharePoint default ~100-5000)
+ * - If both → `.top()` wins, warning logged
+ *
+ * @template T - The type of the list item (default: unknown)
+ * @param listTitle - The title of the SharePoint list
+ * @param options - Optional configuration (pageSize for pagination)
+ * @param pnpContext - Optional PnP context for cross-site scenarios
+ * @returns Object containing query method, items, loading states, error, and CRUD operations
+ *
+ * @example Basic usage with pageSize
+ * ```tsx
+ * import { useSPFxPnPList } from '@apvee/spfx-react-toolkit';
+ *
+ * function TaskList() {
+ *   const { query, items, loading, error } = useSPFxPnPList('Tasks', { pageSize: 50 });
+ *
+ *   useEffect(() => {
+ *     query(q =>
+ *       q.select('Id', 'Title', 'Status', 'Priority')
+ *        .filter("Status eq 'Active'")
+ *        .orderBy('Priority', false)
+ *     );
+ *   }, [query]);
+ *
+ *   if (loading) return <Spinner />;
+ *   if (error) return <MessageBar>Error: {error.message}</MessageBar>;
+ *
+ *   return (
+ *     <ul>
+ *       {items.map(task => (
+ *         <li key={task.Id}>{task.Title} - {task.Status}</li>
+ *       ))}
+ *     </ul>
+ *   );
+ * }
+ * ```
+ *
+ * @example Type-safe fluent filter
+ * ```tsx
+ * interface Task {
+ *   Id: number;
+ *   Title: string;
+ *   Status: string;
+ *   Priority: number;
+ *   DueDate: string;
+ * }
+ *
+ * function ActiveHighPriorityTasks() {
+ *   const { query, items, loading } = useSPFxPnPList<Task>('Tasks', { pageSize: 50 });
+ *
+ *   useEffect(() => {
+ *     query(q =>
+ *       q.select('Id', 'Title', 'Priority', 'DueDate')
+ *        .filter(f => f.text("Status").equals("Active")
+ *                      .and()
+ *                      .number("Priority").greaterThan(3))
+ *        .orderBy('DueDate', true)
+ *     );
+ *   }, [query]);
+ *
+ *   return (
+ *     <div>
+ *       {items.map(task => (
+ *         <TaskCard key={task.Id} task={task} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Query with explicit .top()
+ * ```tsx
+ * const { query, items } = useSPFxPnPList<Task>('Tasks');
+ *
+ * useEffect(() => {
+ *   // User specifies .top() explicitly - takes precedence
+ *   query(q =>
+ *     q.select('Id', 'Title')
+ *      .top(100)  // Hook detects this and uses it
+ *      .orderBy('Created', false)
+ *   );
+ * }, [query]);
+ * ```
+ *
+ * @example CRUD operations
+ * ```tsx
+ * function TaskManager() {
+ *   const { items, create, update, remove, loading } = useSPFxPnPList<Task>('Tasks');
+ *
+ *   const handleCreate = async () => {
+ *     try {
+ *       const newId = await create({
+ *         Title: 'New Task',
+ *         Status: 'Active',
+ *         Priority: 3
+ *       });
+ *       console.log('Created task with ID:', newId);
+ *       // List automatically refetches
+ *     } catch (error) {
+ *       console.error('Create failed:', error);
+ *     }
+ *   };
+ *
+ *   const handleUpdate = async (id: number) => {
+ *     await update(id, { Status: 'Completed' });
+ *     // List automatically refetches
+ *   };
+ *
+ *   const handleDelete = async (id: number) => {
+ *     await remove(id);
+ *     // List automatically refetches
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleCreate}>Create Task</button>
+ *       {items.map(task => (
+ *         <div key={task.Id}>
+ *           <span>{task.Title}</span>
+ *           <button onClick={() => handleUpdate(task.Id)}>Complete</button>
+ *           <button onClick={() => handleDelete(task.Id)}>Delete</button>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Batch operations for bulk updates
+ * ```tsx
+ * function BulkTaskManager() {
+ *   const { createBatch, updateBatch, removeBatch } = useSPFxPnPList<Task>('Tasks');
+ *
+ *   const handleBulkCreate = async () => {
+ *     const ids = await createBatch([
+ *       { Title: 'Task 1', Status: 'Active', Priority: 1 },
+ *       { Title: 'Task 2', Status: 'Active', Priority: 2 },
+ *       { Title: 'Task 3', Status: 'Active', Priority: 3 }
+ *     ]);
+ *     console.log('Created task IDs:', ids);
+ *   };
+ *
+ *   const handleBulkUpdate = async (taskIds: number[]) => {
+ *     await updateBatch([
+ *       { id: taskIds[0], item: { Status: 'Completed' } },
+ *       { id: taskIds[1], item: { Priority: 5 } },
+ *       { id: taskIds[2], item: { Status: 'In Progress', Priority: 4 } }
+ *     ]);
+ *   };
+ *
+ *   const handleBulkDelete = async (taskIds: number[]) => {
+ *     await removeBatch(taskIds);
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={handleBulkCreate}>Create 3 Tasks</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Pagination with loadMore
+ * ```tsx
+ * function InfiniteTaskList() {
+ *   const {
+ *     query,
+ *     items,
+ *     loading,
+ *     loadingMore,
+ *     hasMore,
+ *     loadMore,
+ *     isEmpty
+ *   } = useSPFxPnPList<Task>('Tasks', { pageSize: 50 });
+ *
+ *   useEffect(() => {
+ *     query(q =>
+ *       q.select('Id', 'Title', 'Status')
+ *        .orderBy('Created', false)
+ *     );
+ *   }, [query]);
+ *
+ *   if (loading) return <Spinner label="Loading tasks..." />;
+ *   if (isEmpty) return <MessageBar>No tasks found</MessageBar>;
+ *
+ *   return (
+ *     <div>
+ *       {items.map(task => (
+ *         <TaskCard key={task.Id} task={task} />
+ *       ))}
+ *
+ *       {hasMore && (
+ *         <PrimaryButton
+ *           text={loadingMore ? 'Loading...' : 'Load More'}
+ *           onClick={loadMore}
+ *           disabled={loadingMore}
+ *         />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Cross-site usage
+ * ```tsx
+ * function EmployeeList() {
+ *   // Create context for HR site
+ *   const hrContext = useSPFxPnPContext({
+ *     siteUrl: '/sites/hr'
+ *   });
+ *
+ *   // Query Employees list from HR site
+ *   const { query, items, loading } = useSPFxPnPList<Employee>(
+ *     'Employees',
+ *     { pageSize: 100 },
+ *     hrContext  // Pass context for cross-site query
+ *   );
+ *
+ *   useEffect(() => {
+ *     query(q =>
+ *       q.select('Id', 'Name', 'Department', 'Email')
+ *        .filter("Department eq 'Engineering'")
+ *        .orderBy('Name', true)
+ *     );
+ *   }, [query]);
+ *
+ *   return (
+ *     <div>
+ *       {items.map(emp => (
+ *         <PersonaCard key={emp.Id} employee={emp} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Manual refetch with error handling
+ * ```tsx
+ * function TaskListWithRefresh() {
+ *   const { query, items, loading, error, refetch, clearError } = useSPFxPnPList<Task>('Tasks', { pageSize: 50 });
+ *
+ *   useEffect(() => {
+ *     query(q => q.select('Id', 'Title', 'Status').orderBy('Created', false));
+ *   }, [query]);
+ *
+ *   return (
+ *     <div>
+ *       <CommandBar
+ *         items={[
+ *           {
+ *             key: 'refresh',
+ *             text: 'Refresh',
+ *             iconProps: { iconName: 'Refresh' },
+ *             onClick: () => refetch()
+ *           }
+ *         ]}
+ *       />
+ *
+ *       {error && (
+ *         <MessageBar
+ *           messageBarType={MessageBarType.error}
+ *           onDismiss={clearError}
+ *         >
+ *           Error loading tasks: {error.message}
+ *         </MessageBar>
+ *       )}
+ *
+ *       {loading ? (
+ *         <Spinner />
+ *       ) : (
+ *         <DetailsList items={items} />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Conditional loading (autoLoad: false)
+ * ```tsx
+ * function ConditionalTaskList() {
+ *   const [showCompleted, setShowCompleted] = useState(false);
+ *   const { items, loading, refetch } = useSPFxPnPList<Task>(
+ *     'Tasks',
+ *     {
+ *       filter: showCompleted ? "Status eq 'Completed'" : "Status eq 'Active'",
+ *       autoLoad: false  // Don't load on mount
+ *     }
+ *   );
+ *
+ *   useEffect(() => {
+ *     if (showCompleted) {
+ *       refetch();  // Manually trigger load
+ *     }
+ *   }, [showCompleted, refetch]);
+ *
+ *   return (
+ *     <div>
+ *       <Toggle
+ *         label="Show Completed"
+ *         checked={showCompleted}
+ *         onChange={(_, checked) => setShowCompleted(checked || false)}
+ *       />
+ *       {items.map(task => <TaskCard key={task.Id} task={task} />)}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * **PnPjs Installation**: This hook requires `@pnp/sp` to be installed:
+ * ```bash
+ * npm install @pnp/sp @pnp/core @pnp/queryable
+ * ```
+ *
+ * **SharePoint List View Threshold**: Be aware that querying lists with more than 5000 items
+ * may cause throttling unless:
+ * - Filters use indexed columns
+ * - Query results are under 5000 items
+ * - Proper pagination is used (top + skip)
+ *
+ * **Fluent Filter Requirements**: To use type-safe fluent filters, import types:
+ * ```typescript
+ * import '@pnp/sp/items';  // Enables fluent filter on items
+ * ```
+ *
+ * **State Management**: Each hook instance maintains its own local state (items, loading, error).
+ * State is not shared between components - this follows the standard React hooks pattern.
+ *
+ * **Debounced Refetch**: CRUD operations trigger a debounced refetch (100ms delay) to prevent
+ * race conditions when multiple operations occur in quick succession.
+ *
+ * @see {@link useSPFxPnPContext} for creating PnP contexts
+ * @see {@link PNPContextInfo} for context information
+ */
+export function useSPFxPnPList(listTitle, options, pnpContext) {
+    var _this = this;
+    // Get PnP context (use provided context or create default)
+    var defaultContext = useSPFxPnPContext();
+    var context = pnpContext || defaultContext;
+    // Use the native SPFI instance from context
+    var sp = context === null || context === void 0 ? void 0 : context.sp;
+    // Default pageSize from hook options
+    var defaultPageSize = options === null || options === void 0 ? void 0 : options.pageSize;
+    // Local state management
+    var _a = useState([]), items = _a[0], setItems = _a[1];
+    var _b = useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = useState(false), loadingMore = _c[0], setLoadingMore = _c[1];
+    var _d = useState(), error = _d[0], setError = _d[1];
+    var _e = useState(false), hasMore = _e[0], setHasMore = _e[1];
+    // State for tracking last query (needed for refetch and loadMore)
+    var _f = useState(undefined), lastQueryBuilder = _f[0], setLastQueryBuilder = _f[1];
+    var _g = useState(undefined), lastEffectivePageSize = _g[0], setLastEffectivePageSize = _g[1];
+    var _h = useState(0), currentSkip = _h[0], setCurrentSkip = _h[1];
+    // Refs
+    var refetchTimeoutRef = useRef(undefined);
+    var mountedRef = useRef(true);
+    // Clear error handler
+    var clearError = useCallback(function () {
+        setError(undefined);
+    }, []);
+    /**
+     * Helper: Creates a recursive Proxy to track .top() calls in queryBuilder.
+     * This allows automatic detection of user-specified page size.
+     */
+    var createMonitoredQuery = useCallback(function (target, tracker) {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        return new Proxy(target, {
+            get: function (t, prop) {
+                if (prop === 'top') {
+                    return function (n) {
+                        tracker.top = n;
+                        var result = t.top.call(t, n);
+                        return createMonitoredQuery(result, tracker);
+                    };
+                }
+                var value = t[prop];
+                if (typeof value === 'function') {
+                    return function () {
+                        var args = [];
+                        for (var _i = 0; _i < arguments.length; _i++) {
+                            args[_i] = arguments[_i];
+                        }
+                        var result = value.apply(t, args);
+                        if (result && typeof result === 'object' && typeof result.select === 'function') {
+                            return createMonitoredQuery(result, tracker);
+                        }
+                        return result;
+                    };
+                }
+                return value;
+            }
+        });
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+    }, []);
+    /**
+     * Executes a query with automatic .top() detection.
+     */
+    var query = useCallback(function (queryBuilder, queryOptions) { return __awaiter(_this, void 0, void 0, function () {
+        var err, pageSize, baseQuery, tracker, monitored, userQuery, finalQuery, effectivePageSize, result, err_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        err = new Error('[useSPFxPnPList] PnP context not initialized. Ensure @pnp/sp is installed.');
+                        setError(err);
+                        throw err;
+                    }
+                    setLoading(true);
+                    setError(undefined);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    pageSize = (_a = queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.pageSize) !== null && _a !== void 0 ? _a : defaultPageSize;
+                    baseQuery = sp.web.lists.getByTitle(listTitle).items;
+                    tracker = { top: undefined };
+                    monitored = createMonitoredQuery(baseQuery, tracker);
+                    userQuery = queryBuilder ? queryBuilder(monitored) : monitored;
+                    finalQuery = void 0;
+                    effectivePageSize = void 0;
+                    // Warning if both specified
+                    if (tracker.top !== undefined && pageSize !== undefined) {
+                        console.warn("[useSPFxPnPList] Both .top(".concat(tracker.top, ") and pageSize(").concat(pageSize, ") specified. ") +
+                            "Using .top(".concat(tracker.top, ")."));
+                    }
+                    if (tracker.top !== undefined) {
+                        // User specified .top() explicitly
+                        finalQuery = userQuery;
+                        effectivePageSize = tracker.top;
+                    }
+                    else if (pageSize !== undefined) {
+                        // Use pageSize option
+                        finalQuery = userQuery.top(pageSize);
+                        effectivePageSize = pageSize;
+                    }
+                    else {
+                        // No pagination
+                        finalQuery = userQuery;
+                        effectivePageSize = undefined;
+                    }
+                    return [4 /*yield*/, finalQuery()];
+                case 2:
+                    result = _b.sent();
+                    if (!mountedRef.current)
+                        return [2 /*return*/, result];
+                    // Update state
+                    setItems(result);
+                    setLastQueryBuilder(function () { return queryBuilder; });
+                    setLastEffectivePageSize(effectivePageSize);
+                    setCurrentSkip(result.length);
+                    // hasMore only meaningful with pagination
+                    if (effectivePageSize !== undefined) {
+                        setHasMore(result.length === effectivePageSize);
+                    }
+                    else {
+                        setHasMore(false);
+                    }
+                    setLoading(false);
+                    return [2 /*return*/, result];
+                case 3:
+                    err_1 = _b.sent();
+                    if (mountedRef.current) {
+                        setError(err_1);
+                        setLoading(false);
+                    }
+                    throw err_1;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, defaultPageSize, createMonitoredQuery]);
+    /**
+     * Re-executes the last query (resets pagination).
+     */
+    var refetch = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!lastQueryBuilder) {
+                        throw new Error('[useSPFxPnPList] No previous query to refetch. Call query() first.');
+                    }
+                    setCurrentSkip(0);
+                    return [4 /*yield*/, query(lastQueryBuilder, { pageSize: lastEffectivePageSize })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [lastQueryBuilder, lastEffectivePageSize, query]);
+    /**
+     * Debounced refetch to prevent race conditions during rapid CRUD operations.
+     */
+    var debouncedRefetch = useCallback(function () {
+        if (refetchTimeoutRef.current) {
+            clearTimeout(refetchTimeoutRef.current);
+        }
+        refetchTimeoutRef.current = setTimeout(function () {
+            refetch().catch(function (err) {
+                var error = err;
+                console.error('[useSPFxPnPList] Debounced refetch error:', error);
+                setError(error);
+            });
+        }, 100);
+    }, [refetch]);
+    /**
+     * Loads more items (pagination with last query).
+     */
+    var loadMore = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var baseQuery, tracker, monitored, userQuery, finalQuery, result_1, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!lastQueryBuilder) {
+                        throw new Error('[useSPFxPnPList] No previous query. Call query() first.');
+                    }
+                    if (lastEffectivePageSize === undefined) {
+                        throw new Error('[useSPFxPnPList] Cannot loadMore without pageSize. Specify .top() or pageSize option in query().');
+                    }
+                    if (loadingMore || loading) {
+                        return [2 /*return*/, []];
+                    }
+                    setLoadingMore(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('[useSPFxPnPList] PnP context not initialized');
+                    }
+                    baseQuery = sp.web.lists.getByTitle(listTitle).items;
+                    tracker = { top: undefined };
+                    monitored = createMonitoredQuery(baseQuery, tracker);
+                    userQuery = lastQueryBuilder(monitored);
+                    finalQuery = userQuery.skip(currentSkip).top(lastEffectivePageSize);
+                    return [4 /*yield*/, finalQuery()];
+                case 2:
+                    result_1 = _a.sent();
+                    if (!mountedRef.current)
+                        return [2 /*return*/, result_1];
+                    setItems(function (prevItems) {
+                        return prevItems.concat(result_1);
+                    });
+                    setCurrentSkip(function (prev) {
+                        return prev + result_1.length;
+                    });
+                    setHasMore(result_1.length === lastEffectivePageSize);
+                    setLoadingMore(false);
+                    return [2 /*return*/, result_1];
+                case 3:
+                    err_2 = _a.sent();
+                    if (mountedRef.current) {
+                        setError(err_2);
+                        setLoadingMore(false);
+                    }
+                    throw err_2;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [lastQueryBuilder, lastEffectivePageSize, loadingMore, loading, sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, currentSkip, createMonitoredQuery]);
+    /**
+     * Gets a single item by ID.
+     */
+    var getById = useCallback(function (id) { return __awaiter(_this, void 0, void 0, function () {
+        var item, err_3, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('[useSPFxPnPList] PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sp.web.lists.getByTitle(listTitle).items.getById(id)()];
+                case 2:
+                    item = _a.sent();
+                    return [2 /*return*/, item];
+                case 3:
+                    err_3 = _a.sent();
+                    error_1 = err_3;
+                    console.error('[useSPFxPnPList] getById error:', error_1);
+                    setError(error_1);
+                    return [2 /*return*/, undefined];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle]);
+    /**
+     * Creates a new list item.
+     */
+    var create = useCallback(function (item) { return __awaiter(_this, void 0, void 0, function () {
+        var result, err_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sp.web.lists.getByTitle(listTitle).items.add(item)];
+                case 2:
+                    result = _a.sent();
+                    debouncedRefetch();
+                    return [2 /*return*/, result.data.Id];
+                case 3:
+                    err_4 = _a.sent();
+                    setError(err_4);
+                    throw err_4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Updates an existing list item.
+     */
+    var update = useCallback(function (id, item) { return __awaiter(_this, void 0, void 0, function () {
+        var err_5;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sp.web.lists.getByTitle(listTitle).items.getById(id).update(item)];
+                case 2:
+                    _a.sent();
+                    debouncedRefetch();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_5 = _a.sent();
+                    setError(err_5);
+                    throw err_5;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Deletes a list item.
+     */
+    var remove = useCallback(function (id) { return __awaiter(_this, void 0, void 0, function () {
+        var err_6;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, sp.web.lists.getByTitle(listTitle).items.getById(id).delete()];
+                case 2:
+                    _a.sent();
+                    debouncedRefetch();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_6 = _a.sent();
+                    setError(err_6);
+                    throw err_6;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Creates multiple items in a batch.
+     */
+    var createBatch = useCallback(function (itemsToCreate) { return __awaiter(_this, void 0, void 0, function () {
+        var ids_1, errors_1, batchResult, batchedSP, execute, list, i, batchError, err_7, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    ids_1 = [];
+                    errors_1 = [];
+                    batchResult = sp.batched();
+                    batchedSP = batchResult[0];
+                    execute = batchResult[1];
+                    list = batchedSP.web.lists.getByTitle(listTitle);
+                    // Queue all creates
+                    for (i = 0; i < itemsToCreate.length; i++) {
+                        list.items.add(itemsToCreate[i]).then(function (result) {
+                            ids_1.push(result.data.Id);
+                        }).catch(function (error) {
+                            console.error('Batch create error:', error);
+                            errors_1.push(error);
+                        });
+                    }
+                    // Execute batch
+                    return [4 /*yield*/, execute()];
+                case 2:
+                    // Execute batch
+                    _a.sent();
+                    // If there were errors in individual operations, set error state
+                    if (errors_1.length > 0) {
+                        batchError = new Error("Batch create failed: ".concat(errors_1.length, " of ").concat(itemsToCreate.length, " items failed"));
+                        setError(batchError);
+                        console.error('Batch create summary:', errors_1);
+                    }
+                    debouncedRefetch();
+                    return [2 /*return*/, ids_1];
+                case 3:
+                    err_7 = _a.sent();
+                    error_2 = err_7;
+                    setError(error_2);
+                    throw error_2;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Updates multiple items in a batch.
+     */
+    var updateBatch = useCallback(function (updates) { return __awaiter(_this, void 0, void 0, function () {
+        var errors_2, batchResult, batchedSP, execute, list, i, updateItem, batchError, err_8, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    errors_2 = [];
+                    batchResult = sp.batched();
+                    batchedSP = batchResult[0];
+                    execute = batchResult[1];
+                    list = batchedSP.web.lists.getByTitle(listTitle);
+                    // Queue all updates
+                    for (i = 0; i < updates.length; i++) {
+                        updateItem = updates[i];
+                        list.items.getById(updateItem.id).update(updateItem.item).catch(function (error) {
+                            console.error('Batch update error:', error);
+                            errors_2.push(error);
+                        });
+                    }
+                    // Execute batch
+                    return [4 /*yield*/, execute()];
+                case 2:
+                    // Execute batch
+                    _a.sent();
+                    // If there were errors in individual operations, set error state
+                    if (errors_2.length > 0) {
+                        batchError = new Error("Batch update failed: ".concat(errors_2.length, " of ").concat(updates.length, " items failed"));
+                        setError(batchError);
+                        console.error('Batch update summary:', errors_2);
+                    }
+                    debouncedRefetch();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_8 = _a.sent();
+                    error_3 = err_8;
+                    setError(error_3);
+                    throw error_3;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Deletes multiple items in a batch.
+     */
+    var removeBatch = useCallback(function (ids) { return __awaiter(_this, void 0, void 0, function () {
+        var errors_3, batchResult, batchedSP, execute, list, i, batchError, err_9, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sp || !(context === null || context === void 0 ? void 0 : context.isInitialized)) {
+                        throw new Error('PnP context not initialized');
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    errors_3 = [];
+                    batchResult = sp.batched();
+                    batchedSP = batchResult[0];
+                    execute = batchResult[1];
+                    list = batchedSP.web.lists.getByTitle(listTitle);
+                    // Queue all deletes
+                    for (i = 0; i < ids.length; i++) {
+                        list.items.getById(ids[i]).delete().catch(function (error) {
+                            console.error('Batch delete error:', error);
+                            errors_3.push(error);
+                        });
+                    }
+                    // Execute batch
+                    return [4 /*yield*/, execute()];
+                case 2:
+                    // Execute batch
+                    _a.sent();
+                    // If there were errors in individual operations, set error state
+                    if (errors_3.length > 0) {
+                        batchError = new Error("Batch delete failed: ".concat(errors_3.length, " of ").concat(ids.length, " items failed"));
+                        setError(batchError);
+                        console.error('Batch delete summary:', errors_3);
+                    }
+                    debouncedRefetch();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_9 = _a.sent();
+                    error_4 = err_9;
+                    setError(error_4);
+                    throw error_4;
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); }, [sp, context === null || context === void 0 ? void 0 : context.isInitialized, listTitle, debouncedRefetch]);
+    /**
+     * Cleanup on unmount.
+     */
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+            if (refetchTimeoutRef.current) {
+                clearTimeout(refetchTimeoutRef.current);
+            }
+        };
+    }, []);
+    // Derived state
+    var isEmpty = items.length === 0 && !loading && !error;
+    return {
+        query: query,
+        items: items,
+        loading: loading,
+        loadingMore: loadingMore,
+        error: error,
+        isEmpty: isEmpty,
+        hasMore: hasMore,
+        refetch: refetch,
+        loadMore: loadMore,
+        clearError: clearError,
+        getById: getById,
+        create: create,
+        update: update,
+        remove: remove,
+        createBatch: createBatch,
+        updateBatch: updateBatch,
+        removeBatch: removeBatch,
+    };
+}
+//# sourceMappingURL=useSPFxPnPList.js.map