@apvee/spfx-react-toolkit 1.2.0 → 1.2.1

package/lib/webparts/spFxReactToolkitTest/components/SpFxReactToolkitTest.js

@@ -46,723 +46,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import styles from './SpFxReactToolkitTest.module.scss';
 import { Stack, Pivot, PivotItem, TextField, PrimaryButton, DefaultButton, MessageBar, MessageBarType, Separator, Label, Icon, } from '@fluentui/react';
-/* eslint-disable max-lines */
-// Import all hooks from SPFx React Toolkit
-import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxUserPhoto, useSPFxPnPContext, useSPFxPnP, useSPFxPnPList, useSPFxPnPSearch, SearchVerticals, } from '../../../hooks';
-import '@pnp/sp/webs';
-import '@pnp/sp/lists';
-import '@pnp/sp/items';
-import '@pnp/sp/site-users';
+import { InfoRow, StatusBadge } from './shared';
+import { HttpClientDemo, PnPContextDemo, PnPOperationsDemo, PnPListDemo, PnPSearchBasicDemo, PnPSearchAdvancedDemo, PnPSearchRefinersDemo, PnPSearchSuggestionsDemo, } from './demos';
+// Import hooks from SPFx React Toolkit (used in main component)
+import { useSPFxProperties, useSPFxThemeInfo, useSPFxUserInfo, useSPFxEnvironmentInfo, useSPFxSiteInfo, useSPFxDisplayMode, useSPFxInstanceInfo, useSPFxPageContext, useSPFxTeams, useSPFxListInfo, useSPFxLocaleInfo, useSPFxHubSiteInfo, useSPFxCorrelationInfo, useSPFxPermissions, useSPFxCrossSitePermissions, useSPFxContainerSize, useSPFxContainerInfo, useSPFxSessionStorage, useSPFxLocalStorage, useSPFxLogger, useSPFxPageType, useSPFxServiceScope, useSPFxSPHttpClient, useSPFxMSGraphClient, useSPFxAadHttpClient, useSPFxPerformance, useSPFxFluent9ThemeInfo, useSPFxOneDriveAppData, useSPFxTenantProperty, useSPFxUserPhoto, } from '../../../hooks';
 import { SPPermission } from '@microsoft/sp-page-context';
-import { HttpClient } from '@microsoft/sp-http';
-// =============================================
-// Helper Components (Must be defined first)
-// =============================================
-// Helper component for displaying info rows
-var InfoRow = function (_a) {
-    var label = _a.label, value = _a.value, icon = _a.icon;
-    return (React.createElement("div", { className: styles.infoRow },
-        icon && React.createElement(Icon, { iconName: icon }),
-        React.createElement(Label, null,
-            label,
-            ":"),
-        React.createElement("span", null, value || 'N/A')));
-};
-// Helper component for status badges
-var StatusBadge = function (_a) {
-    var available = _a.available, label = _a.label;
-    return (React.createElement("div", { className: "".concat(styles.statusBadge, " ").concat(available ? styles.success : styles.error) },
-        React.createElement(Icon, { iconName: available ? 'Completed' : 'ErrorBadge' }),
-        label));
-};
-// =============================================
-// HttpClient Example Component
-// =============================================
-/**
- * Example: useSPFxHttpClient
- * Demonstrates calling external public APIs using HttpClient
- */
-var HttpClientExample = function () {
-    var _a = useSPFxHttpClient(), invoke = _a.invoke, isLoading = _a.isLoading, error = _a.error, clearError = _a.clearError;
-    var _b = React.useState([]), todos = _b[0], setTodos = _b[1];
-    var _c = React.useState(null), selectedTodo = _c[0], setSelectedTodo = _c[1];
-    var loadTodos = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var data, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, invoke(function (client) {
-                            return client.get('https://jsonplaceholder.typicode.com/todos?_limit=5', HttpClient.configurations.v1).then(function (res) { return res.json(); });
-                        })];
-                case 1:
-                    data = _a.sent();
-                    setTodos(data);
-                    setSelectedTodo(null);
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_1 = _a.sent();
-                    console.error('Failed to load todos:', err_1);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [invoke]);
-    var loadTodoDetails = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var data, err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, invoke(function (client) {
-                            return client.get("https://jsonplaceholder.typicode.com/todos/".concat(id), HttpClient.configurations.v1).then(function (res) { return res.json(); });
-                        })];
-                case 1:
-                    data = _a.sent();
-                    setSelectedTodo(data);
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_2 = _a.sent();
-                    console.error('Failed to load todo details:', err_2);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [invoke]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 15 }, styles: { root: { padding: '16px', border: '1px solid #ddd', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "CloudDownload", style: { marginRight: '8px' } }),
-            "HttpClient Example - Public API Call"),
-        React.createElement(MessageBar, { messageBarType: MessageBarType.info },
-            "This example demonstrates calling a public REST API (JSONPlaceholder) using ",
-            React.createElement("strong", null, "useSPFxHttpClient"),
-            ". The hook provides automatic state management (loading/error) for external HTTP calls."),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 10 } },
-            React.createElement(PrimaryButton, { text: "Load Todos", onClick: loadTodos, disabled: isLoading, iconProps: { iconName: 'Download' } }),
-            error && (React.createElement(DefaultButton, { text: "Clear Error", onClick: clearError, iconProps: { iconName: 'Clear' } }))),
-        isLoading && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
-            React.createElement(Icon, { iconName: "Sync", style: { marginRight: '8px' } }),
-            "Loading data from external API...")),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error },
-            React.createElement("strong", null, "Error:"),
-            " ",
-            error.message)),
-        todos.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 10 } },
-            React.createElement(Label, null, "Todos from JSONPlaceholder API:"),
-            todos.map(function (todo) { return (React.createElement(Stack, { key: todo.id, horizontal: true, tokens: { childrenGap: 10 }, styles: {
-                    root: {
-                        padding: '8px',
-                        border: '1px solid #eee',
-                        borderRadius: '4px',
-                        cursor: 'pointer',
-                        ':hover': { backgroundColor: '#f5f5f5' }
-                    }
-                }, onClick: function () { return loadTodoDetails(todo.id); } },
-                React.createElement(Icon, { iconName: todo.completed ? 'CompletedSolid' : 'CircleRing' }),
-                React.createElement("span", null, todo.title))); }))),
-        selectedTodo && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f0f0f0', borderRadius: '4px' } } },
-            React.createElement(Label, null, "Selected Todo Details:"),
-            React.createElement(InfoRow, { label: "ID", value: String(selectedTodo.id), icon: "NumberField" }),
-            React.createElement(InfoRow, { label: "User ID", value: String(selectedTodo.userId), icon: "Contact" }),
-            React.createElement(InfoRow, { label: "Title", value: selectedTodo.title, icon: "TextDocument" }),
-            React.createElement(InfoRow, { label: "Completed", value: selectedTodo.completed ? 'Yes' : 'No', icon: selectedTodo.completed ? 'CompletedSolid' : 'CircleRing' })))));
-};
-// =============================================
-// PnPjs Example Components
-// =============================================
-/**
- * Example 1: useSPFxPnPContext
- * Shows how to create PnP contexts for current and cross-site scenarios
- */
-var PnPContextExample = function () {
-    var _a = React.useState(''), crossSiteUrl = _a[0], setCrossSiteUrl = _a[1];
-    var _b = React.useState(null), siteInfo = _b[0], setSiteInfo = _b[1];
-    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
-    var _d = React.useState(null), errorMsg = _d[0], setErrorMsg = _d[1];
-    // Current site context (default)
-    var currentContext = useSPFxPnPContext();
-    // Cross-site context (only when URL is provided)
-    var crossSiteContext = useSPFxPnPContext(crossSiteUrl || undefined);
-    var handleLoadCurrentSite = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var web, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!currentContext.sp)
-                        return [2 /*return*/];
-                    setLoading(true);
-                    setErrorMsg(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, currentContext.sp.web.select('Title', 'Url', 'Description')()];
-                case 2:
-                    web = _a.sent();
-                    setSiteInfo({
-                        title: web.Title,
-                        url: web.Url,
-                        description: web.Description || '(no description)'
-                    });
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_1 = _a.sent();
-                    console.error('Error loading site:', error_1);
-                    setErrorMsg(error_1 instanceof Error ? error_1.message : 'Unknown error');
-                    setSiteInfo(null);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [currentContext.sp]);
-    var handleLoadCrossSite = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var web, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!crossSiteContext.sp || !crossSiteUrl)
-                        return [2 /*return*/];
-                    setLoading(true);
-                    setErrorMsg(null);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, crossSiteContext.sp.web.select('Title', 'Url', 'Description')()];
-                case 2:
-                    web = _a.sent();
-                    setSiteInfo({
-                        title: web.Title,
-                        url: web.Url,
-                        description: web.Description || '(no description)'
-                    });
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_2 = _a.sent();
-                    console.error('Error loading cross-site:', error_2);
-                    setErrorMsg(error_2 instanceof Error ? error_2.message : 'Unknown error');
-                    setSiteInfo(null);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); }, [crossSiteContext.sp, crossSiteUrl]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "Globe", style: { marginRight: '8px' } }),
-            "Example 1: useSPFxPnPContext - Site Information"),
-        React.createElement(Separator, null),
-        errorMsg && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: function () { return setErrorMsg(null); } }, errorMsg)),
-        React.createElement(Stack, { tokens: { childrenGap: 8 } },
-            React.createElement(Label, null, "Current Site Context"),
-            React.createElement(InfoRow, { label: "Effective URL", value: currentContext.siteUrl, icon: "Link" }),
-            React.createElement(InfoRow, { label: "Is Initialized", value: currentContext.isInitialized ? 'Yes' : 'No', icon: "CheckMark" }),
-            currentContext.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
-                "Init Error: ",
-                currentContext.error.message)),
-            React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load Current Site Info', onClick: handleLoadCurrentSite, disabled: !currentContext.isInitialized || loading, iconProps: { iconName: 'CloudDownload' } })),
-        React.createElement(Stack, { tokens: { childrenGap: 8 } },
-            React.createElement(Label, null, "Cross-Site Context (Optional)"),
-            React.createElement(TextField, { label: "Site URL", value: crossSiteUrl, onChange: function (_, newValue) { return setCrossSiteUrl(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "e.g., /sites/hr or https://contoso.sharepoint.com/sites/hr", description: "Leave empty to use current site" }),
-            crossSiteUrl && (React.createElement(React.Fragment, null,
-                React.createElement(InfoRow, { label: "Resolved URL", value: crossSiteContext.siteUrl, icon: "Link" }),
-                React.createElement(InfoRow, { label: "Is Initialized", value: crossSiteContext.isInitialized ? 'Yes' : 'No', icon: "CheckMark" }),
-                crossSiteContext.error && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning },
-                    "Init Error: ",
-                    crossSiteContext.error.message)),
-                React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load Cross-Site Info', onClick: handleLoadCrossSite, disabled: !crossSiteContext.isInitialized || loading, iconProps: { iconName: 'Globe' } })))),
-        siteInfo && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-            React.createElement(Label, { style: { fontWeight: 600 } },
-                React.createElement(Icon, { iconName: "CheckMark", style: { marginRight: '4px', color: '#107c10' } }),
-                "Site Information Loaded:"),
-            React.createElement(InfoRow, { label: "Title", value: siteInfo.title, icon: "CityNext" }),
-            React.createElement(InfoRow, { label: "URL", value: siteInfo.url, icon: "Link" }),
-            React.createElement(InfoRow, { label: "Description", value: siteInfo.description, icon: "Info" }))),
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "useSPFxPnPContext creates configured SPFI instances. Use for cross-site scenarios or when you need custom cache/batch config.")));
-};
-/**
- * Example 2: useSPFxPnP
- * Shows invoke() for single operations and batch() for multiple operations
- */
-var PnPOperationsExample = function () {
-    var _a = useSPFxPnP(), invoke = _a.invoke, batch = _a.batch, isLoading = _a.isLoading, error = _a.error, clearError = _a.clearError;
-    var _b = React.useState([]), lists = _b[0], setLists = _b[1];
-    var _c = React.useState(null), batchData = _c[0], setBatchData = _c[1];
-    var handleInvokeLists = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result, err_3;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    clearError();
-                    return [4 /*yield*/, invoke(function (sp) {
-                            return sp.web.lists
-                                .select('Title', 'ItemCount')
-                                .filter('Hidden eq false')
-                                .top(10)();
-                        })];
-                case 1:
-                    result = _a.sent();
-                    setLists(result);
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_3 = _a.sent();
-                    console.error('Invoke error:', err_3);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [invoke, clearError]);
-    var handleBatchOperations = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var results, listsResult, userResult, webResult, err_4;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 2, , 3]);
-                    clearError();
-                    return [4 /*yield*/, batch(function (batchedSP) { return __awaiter(void 0, void 0, void 0, function () {
-                            var listsPromise, userPromise, webPromise;
-                            return __generator(this, function (_a) {
-                                listsPromise = batchedSP.web.lists.select('Title').top(5)();
-                                userPromise = batchedSP.web.currentUser.select('Title')();
-                                webPromise = batchedSP.web.select('Title')();
-                                // Wait for all batched operations to complete
-                                return [2 /*return*/, Promise.all([listsPromise, userPromise, webPromise])];
-                            });
-                        }); })];
-                case 1:
-                    results = _a.sent();
-                    listsResult = results[0], userResult = results[1], webResult = results[2];
-                    setBatchData({
-                        lists: listsResult,
-                        user: userResult,
-                        webTitle: webResult.Title
-                    });
-                    return [3 /*break*/, 3];
-                case 2:
-                    err_4 = _a.sent();
-                    console.error('Batch error:', err_4);
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
-            }
-        });
-    }); }, [batch, clearError]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "CloudUpload", style: { marginRight: '8px' } }),
-            "Example 2: useSPFxPnP - Operations & Batching"),
-        React.createElement(Separator, null),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
-        React.createElement(Stack, { tokens: { childrenGap: 8 } },
-            React.createElement(Label, null, "Single Operation with invoke()"),
-            React.createElement(PrimaryButton, { text: isLoading ? 'Loading...' : 'Load Lists (invoke)', onClick: handleInvokeLists, disabled: isLoading, iconProps: { iconName: 'BulletedList' } }),
-            lists.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 4 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-                React.createElement(Label, null, "Lists (top 10, non-hidden):"),
-                lists.map(function (list, idx) { return (React.createElement("div", { key: idx, style: { padding: '4px 0', borderBottom: idx < lists.length - 1 ? '1px solid #edebe9' : 'none' } },
-                    React.createElement("strong", null, list.Title),
-                    " - ",
-                    list.ItemCount,
-                    " items")); })))),
-        React.createElement(Stack, { tokens: { childrenGap: 8 } },
-            React.createElement(Label, null, "Batch Operations with batch()"),
-            React.createElement(PrimaryButton, { text: isLoading ? 'Loading...' : 'Load Multiple (batch)', onClick: handleBatchOperations, disabled: isLoading, iconProps: { iconName: 'Streaming' } }),
-            batchData && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { padding: '12px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-                React.createElement(InfoRow, { label: "Web Title", value: batchData.webTitle, icon: "CityNext" }),
-                React.createElement(InfoRow, { label: "Current User", value: batchData.user.Title, icon: "Contact" }),
-                React.createElement(Label, null, "Lists (top 5):"),
-                batchData.lists.map(function (list, idx) { return (React.createElement("div", { key: idx, style: { paddingLeft: '16px' } },
-                    "\u2022 ",
-                    list.Title)); })))),
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "invoke() for single operations, batch() combines multiple requests into ONE HTTP call for better performance.")));
-};
-/**
- * Example 3: useSPFxPnPSearch - Basic Search
- */
-var PnPSearchBasicExample = function () {
-    var _a = React.useState(''), searchText = _a[0], setSearchText = _a[1];
-    var _b = useSPFxPnPSearch({
-        pageSize: 10
-    }), search = _b.search, results = _b.results, totalResults = _b.totalResults, loading = _b.loading, error = _b.error, clearError = _b.clearError;
-    var handleSearch = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var searchResults, err_5;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!searchText.trim())
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, search(searchText)];
-                case 2:
-                    searchResults = _a.sent();
-                    console.log('[PnPSearchBasic] Search completed:', {
-                        returnedResults: searchResults.length,
-                        stateResults: results.length,
-                        totalResults: totalResults
-                    });
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_5 = _a.sent();
-                    console.error('Search error:', err_5);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [searchText, search, results.length, totalResults]);
-    // Debug: log quando results cambia
-    React.useEffect(function () {
-        console.log('[PnPSearchBasic] Results state updated:', {
-            resultsLength: results.length,
-            totalResults: totalResults,
-            loading: loading
-        });
-    }, [results, totalResults, loading]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "Search", style: { marginRight: '8px' } }),
-            "Example 1: Basic Search"),
-        React.createElement(Separator, null),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 8 } },
-            React.createElement(TextField, { value: searchText, onChange: function (_, newValue) { return setSearchText(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Search SharePoint...", styles: { root: { flexGrow: 1 } }, onKeyDown: function (e) {
-                    if (e.key === 'Enter') {
-                        handleSearch().catch(function (err) { return console.error('Search error:', err); });
-                    }
-                } }),
-            React.createElement(PrimaryButton, { text: loading ? 'Searching...' : 'Search', onClick: handleSearch, disabled: !searchText.trim() || loading, iconProps: { iconName: 'Search' } })),
-        totalResults !== undefined && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
-            "Found ",
-            totalResults,
-            " result",
-            totalResults !== 1 ? 's' : '')),
-        results.length > 0 ? (React.createElement(Stack, { tokens: { childrenGap: 6 } }, results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 4 }, styles: { root: { padding: '10px', backgroundColor: '#faf9f8', borderRadius: '4px' } } },
-            React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
-            React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '12px' } }, result.data.Path),
-            result.data.FileType && React.createElement(Label, null,
-                "Type: ",
-                result.data.FileType))); }))) : totalResults === 0 ? (React.createElement(MessageBar, null, "No results found. Try a different query.")) : null,
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Simple text search. Try: \"document\", \"report\", \"ContentType:Document\"")));
-};
-/**
- * Example 4: Advanced Search with Builder and Verticals
- */
-var PnPSearchAdvancedExample = function () {
-    var _a = React.useState('All'), selectedVertical = _a[0], setSelectedVertical = _a[1];
-    var _b = useSPFxPnPSearch({
-        pageSize: 5,
-        selectProperties: ['Title', 'Path', 'Author', 'LastModifiedTime', 'FileType']
-    }), search = _b.search, results = _b.results, totalResults = _b.totalResults, loading = _b.loading, loadMore = _b.loadMore, hasMore = _b.hasMore, error = _b.error, clearError = _b.clearError;
-    var getVerticalSourceId = function (vertical) {
-        switch (vertical) {
-            case 'People': return SearchVerticals.People;
-            case 'Documents': return SearchVerticals.Documents;
-            case 'Pages': return SearchVerticals.Pages;
-            case 'Videos': return SearchVerticals.Videos;
-            default: return undefined;
-        }
-    };
-    var handleSearch = React.useCallback(function (query) {
-        search(function (builder) {
-            var result = builder.text(query).sortList({ Property: 'LastModifiedTime', Direction: 1 });
-            var sourceId = getVerticalSourceId(selectedVertical);
-            if (sourceId)
-                result = result.sourceId(sourceId);
-            return result;
-        }).catch(function (err) { return console.error('Search error:', err); });
-    }, [search, selectedVertical]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "SearchAndApps", style: { marginRight: '8px' } }),
-            "Example 2: Advanced Search with Builder"),
-        React.createElement(Separator, null),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 }, wrap: true }, ['All', 'Documents', 'Pages', 'People', 'Videos'].map(function (v) { return (React.createElement(DefaultButton, { key: v, text: v, onClick: function () { return setSelectedVertical(v); }, primary: selectedVertical === v })); })),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 } },
-            React.createElement(PrimaryButton, { text: "Search All", onClick: function () { return handleSearch('*'); }, disabled: loading }),
-            React.createElement(DefaultButton, { text: "Search Documents", onClick: function () { return handleSearch('filetype:docx OR filetype:pdf'); }, disabled: loading })),
-        totalResults !== undefined && (React.createElement(MessageBar, { messageBarType: MessageBarType.info },
-            "Found ",
-            totalResults,
-            " result",
-            totalResults !== 1 ? 's' : '',
-            " in \"",
-            selectedVertical,
-            "\"")),
-        results.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 6 } },
-            results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 2 }, styles: { root: { padding: '10px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-                React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
-                React.createElement(Label, null,
-                    result.data.Author,
-                    " - ",
-                    result.data.LastModifiedTime ? new Date(result.data.LastModifiedTime).toLocaleDateString() : 'N/A'),
-                React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '11px' } }, result.data.Path))); }),
-            hasMore && (React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Load More', onClick: loadMore, disabled: loading })))),
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Builder API with verticals (People, Documents, Pages, Videos) and pagination.")));
-};
-/**
- * Example 5: Faceted Search with Refiners
- */
-var PnPSearchRefinersExample = function () {
-    var _a = useSPFxPnPSearch({
-        pageSize: 10,
-        selectProperties: ['Title', 'Path', 'FileType', 'Author'],
-        refiners: 'FileType,Author'
-    }), search = _a.search, results = _a.results, refiners = _a.refiners, totalResults = _a.totalResults, loading = _a.loading, applyRefiner = _a.applyRefiner, error = _a.error, clearError = _a.clearError;
-    var handleSearch = React.useCallback(function () {
-        search('*').catch(function (err) { return console.error('Search error:', err); });
-    }, [search]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "FilterSettings", style: { marginRight: '8px' } }),
-            "Example 3: Faceted Search with Refiners"),
-        React.createElement(Separator, null),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
-        React.createElement(PrimaryButton, { text: loading ? 'Loading...' : 'Search All Content', onClick: handleSearch, disabled: loading, iconProps: { iconName: 'Search' } }),
-        totalResults !== undefined && (React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "SearchIssue", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Found ",
-            totalResults,
-            " results")),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 12 }, styles: { root: { alignItems: 'flex-start' } } },
-            refiners.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 8 }, styles: { root: { width: '200px', padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-                React.createElement(Label, { style: { fontWeight: 600 } }, "Filters"),
-                refiners.map(function (refiner) { return (React.createElement(Stack, { key: refiner.name, tokens: { childrenGap: 2 } },
-                    React.createElement(Label, null, refiner.name),
-                    refiner.entries.slice(0, 5).map(function (entry) { return (React.createElement(DefaultButton, { key: entry.value, text: "".concat(entry.value, " (").concat(entry.count, ")"), onClick: function () { return applyRefiner(refiner.name, entry.value); }, styles: { root: { height: '28px', fontSize: '12px' } } })); }))); }))),
-            React.createElement(Stack, { tokens: { childrenGap: 6 }, styles: { root: { flexGrow: 1 } } }, results.length > 0 ? (results.map(function (result) { return (React.createElement(Stack, { key: result.id, tokens: { childrenGap: 2 }, styles: { root: { padding: '8px', backgroundColor: '#faf9f8', borderRadius: '4px' } } },
-                React.createElement("div", { style: { fontWeight: 600 } }, result.data.Title || '(No Title)'),
-                React.createElement(Label, null,
-                    result.data.FileType,
-                    " | ",
-                    result.data.Author),
-                React.createElement("a", { href: result.data.Path, target: "_blank", rel: "noopener noreferrer", style: { fontSize: '11px' } }, result.data.Path))); })) : (React.createElement(Label, null, "Click \"Search All Content\" to see results.")))),
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Faceted search with FileType and Author refiners. Click to filter/toggle.")));
-};
-/**
- * Example 6: Search Suggestions (Autocomplete)
- */
-var PnPSearchSuggestionsExample = function () {
-    var _a = React.useState(''), query = _a[0], setQuery = _a[1];
-    var _b = React.useState([]), suggestions = _b[0], setSuggestions = _b[1];
-    var suggest = useSPFxPnPSearch().suggest;
-    // Track if component is mounted to prevent state updates after unmount
-    var mountedRef = React.useRef(true);
-    // Cleanup on unmount
-    React.useEffect(function () {
-        mountedRef.current = true;
-        return function () {
-            mountedRef.current = false;
-        };
-    }, []);
-    var handleSuggest = React.useCallback(function (value) { return __awaiter(void 0, void 0, void 0, function () {
-        var results, err_6;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!value || value.length < 2) {
-                        if (mountedRef.current) {
-                            setSuggestions([]);
-                        }
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, suggest(value)];
-                case 2:
-                    results = _a.sent();
-                    if (mountedRef.current) {
-                        setSuggestions(results);
-                    }
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_6 = _a.sent();
-                    console.error('[PnPSearchSuggestions] Error:', err_6);
-                    if (mountedRef.current) {
-                        setSuggestions([]);
-                    }
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [suggest]);
-    // Debounced suggest with proper cleanup
-    var debouncedSuggest = React.useMemo(function () {
-        var timeoutId;
-        // Return debounced function
-        var debounced = function (value) {
-            if (timeoutId !== undefined) {
-                clearTimeout(timeoutId);
-            }
-            timeoutId = window.setTimeout(function () { return handleSuggest(value); }, 300);
-        };
-        // Cleanup function stored in the debounced function
-        debounced.cancel = function () {
-            if (timeoutId !== undefined) {
-                clearTimeout(timeoutId);
-                timeoutId = undefined;
-            }
-        };
-        return debounced;
-    }, [handleSuggest]);
-    // Cleanup timeout on unmount
-    React.useEffect(function () {
-        return function () {
-            var _a;
-            (_a = debouncedSuggest.cancel) === null || _a === void 0 ? void 0 : _a.call(debouncedSuggest);
-        };
-    }, [debouncedSuggest]);
-    var handleQueryChange = React.useCallback(function (value) {
-        setQuery(value);
-        debouncedSuggest(value);
-    }, [debouncedSuggest]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "SearchBookmark", style: { marginRight: '8px' } }),
-            "Example 4: Search Suggestions (Autocomplete)"),
-        React.createElement(Separator, null),
-        React.createElement(TextField, { label: "Search with Autocomplete", value: query, onChange: function (_, newValue) { return handleQueryChange(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "Type at least 2 characters..." }),
-        suggestions.length > 0 ? (React.createElement(Stack, { tokens: { childrenGap: 2 }, styles: { root: { padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-            React.createElement(Label, null,
-                "Suggestions (",
-                suggestions.length,
-                "):"),
-            suggestions.map(function (s, idx) { return (React.createElement("div", { key: idx, style: { padding: '6px', backgroundColor: '#fff', borderRadius: '2px', cursor: 'pointer' }, onClick: function () { return setQuery(s); } }, s)); }))) : query.length >= 2 ? (React.createElement(MessageBar, { messageBarType: MessageBarType.info }, "No suggestions available. This is normal in dev/test environments where there isn't enough indexed content. Try in a production environment with more search activity.")) : null,
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Real-time autocomplete with 300ms debounce. Requires indexed content and search activity.")));
-};
-/**
- * Example 7: useSPFxPnPList - CRUD Operations
- */
-var PnPListExample = function () {
-    var _a = React.useState(''), listTitle = _a[0], setListTitle = _a[1];
-    var _b = React.useState(''), newTitle = _b[0], setNewTitle = _b[1];
-    var _c = React.useState(null), editingId = _c[0], setEditingId = _c[1];
-    var _d = React.useState(''), editTitle = _d[0], setEditTitle = _d[1];
-    var _e = useSPFxPnPList(listTitle, { pageSize: 10 }), query = _e.query, items = _e.items, loading = _e.loading, error = _e.error, isEmpty = _e.isEmpty, hasMore = _e.hasMore, loadMore = _e.loadMore, clearError = _e.clearError, create = _e.create, update = _e.update, remove = _e.remove;
-    var handleLoadList = React.useCallback(function () {
-        query(function (q) { return q.select('Id', 'Title').orderBy('Id', false); }).catch(function (err) { return console.error('Load error:', err); });
-    }, [query]);
-    var handleCreate = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var err_7;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!newTitle || !listTitle)
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, create({ Title: newTitle })];
-                case 2:
-                    _a.sent();
-                    setNewTitle('');
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_7 = _a.sent();
-                    console.error('Create error:', err_7);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [create, newTitle, listTitle]);
-    var handleUpdate = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var err_8;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!editTitle)
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, update(id, { Title: editTitle })];
-                case 2:
-                    _a.sent();
-                    setEditingId(null);
-                    setEditTitle('');
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_8 = _a.sent();
-                    console.error('Update error:', err_8);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [update, editTitle]);
-    var handleDelete = React.useCallback(function (id) { return __awaiter(void 0, void 0, void 0, function () {
-        var err_9;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!confirm('Delete this item?'))
-                        return [2 /*return*/];
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, remove(id)];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_9 = _a.sent();
-                    console.error('Delete error:', err_9);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); }, [remove]);
-    return (React.createElement(Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: '16px', border: '1px solid #edebe9', borderRadius: '4px' } } },
-        React.createElement("h3", null,
-            React.createElement(Icon, { iconName: "BulletedList", style: { marginRight: '8px' } }),
-            "Example 3: useSPFxPnPList - CRUD Operations"),
-        React.createElement(Separator, null),
-        React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 } },
-            React.createElement(TextField, { label: "List Title", value: listTitle, onChange: function (_, newValue) { return setListTitle(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "e.g., Site Pages", styles: { root: { flexGrow: 1 } } }),
-            React.createElement(PrimaryButton, { text: "Load", onClick: handleLoadList, disabled: !listTitle || loading, styles: { root: { marginTop: '28px' } } })),
-        error && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: clearError }, error.message)),
-        listTitle && (React.createElement(Stack, { horizontal: true, tokens: { childrenGap: 6 }, styles: { root: { padding: '8px', backgroundColor: '#f3f2f1', borderRadius: '4px' } } },
-            React.createElement(TextField, { value: newTitle, onChange: function (_, newValue) { return setNewTitle(newValue !== null && newValue !== void 0 ? newValue : ''); }, placeholder: "New item title...", styles: { root: { flexGrow: 1 } } }),
-            React.createElement(PrimaryButton, { text: "Create", onClick: handleCreate, disabled: !newTitle || loading }))),
-        loading && React.createElement(MessageBar, null, "Loading..."),
-        isEmpty && !loading && React.createElement(MessageBar, null, "No items found."),
-        items.length > 0 && (React.createElement(Stack, { tokens: { childrenGap: 3 } },
-            React.createElement(Label, null,
-                "Items (",
-                items.length,
-                "):"),
-            items.map(function (item) { return (React.createElement(Stack, { key: item.Id, horizontal: true, tokens: { childrenGap: 6 }, styles: { root: { padding: '6px', backgroundColor: '#faf9f8', borderRadius: '4px' } } }, editingId === item.Id ? (React.createElement(React.Fragment, null,
-                React.createElement(TextField, { value: editTitle, onChange: function (_, v) { return setEditTitle(v !== null && v !== void 0 ? v : ''); }, styles: { root: { flexGrow: 1 } } }),
-                React.createElement(DefaultButton, { text: "Save", onClick: function () { return handleUpdate(item.Id); } }),
-                React.createElement(DefaultButton, { text: "Cancel", onClick: function () { setEditingId(null); setEditTitle(''); } }))) : (React.createElement(React.Fragment, null,
-                React.createElement("div", { style: { flexGrow: 1 } },
-                    "#",
-                    item.Id,
-                    " - ",
-                    item.Title),
-                React.createElement(DefaultButton, { text: "Edit", onClick: function () { setEditingId(item.Id); setEditTitle(item.Title); } }),
-                React.createElement(DefaultButton, { text: "Delete", onClick: function () { return handleDelete(item.Id); } }))))); }),
-            hasMore && React.createElement(PrimaryButton, { text: "Load More", onClick: loadMore, disabled: loading }))),
-        React.createElement(Label, null,
-            React.createElement(Icon, { iconName: "InfoSolid", style: { marginRight: '4px', color: '#0078d4' } }),
-            "Complete CRUD with auto-refetch. Try with \"Site Pages\" or \"Documents\".")));
-};
 // Helper function to safely stringify objects with circular references
 var safeStringify = function (obj, indent) {
     if (indent === void 0) { indent = 2; }
@@ -918,7 +206,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [oneDriveData]);
     var handleSaveOneDrive = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newData, error_3;
+        var newData, error_1;
         var _a, _b;
         return __generator(this, function (_c) {
             switch (_c.label) {
@@ -938,8 +226,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 3];
                 case 2:
-                    error_3 = _c.sent();
-                    setMessageText("Save failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
+                    error_1 = _c.sent();
+                    setMessageText("Save failed: ".concat(error_1 instanceof Error ? error_1.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 3];
@@ -948,7 +236,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [oneDriveMessage, oneDriveData]);
     var handleLoadTenantProperty = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_4;
+        var error_2;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -964,8 +252,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 3];
                 case 2:
-                    error_4 = _a.sent();
-                    setMessageText("Load failed: ".concat(error_4 instanceof Error ? error_4.message : 'Unknown error'));
+                    error_2 = _a.sent();
+                    setMessageText("Load failed: ".concat(error_2 instanceof Error ? error_2.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 3];
@@ -974,7 +262,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantVersion, tenantCounter]);
     var handleSaveTenantVersion = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var error_5;
+        var error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -996,8 +284,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_5 = _a.sent();
-                    setMessageText("Save failed: ".concat(error_5 instanceof Error ? error_5.message : 'Unknown error'));
+                    error_3 = _a.sent();
+                    setMessageText("Save failed: ".concat(error_3 instanceof Error ? error_3.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -1006,7 +294,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantVersionInput, tenantVersion]);
     var handleIncrementTenantCounter = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
-        var newValue, error_6;
+        var newValue, error_4;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
@@ -1029,8 +317,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_6 = _b.sent();
-                    setMessageText("Increment failed: ".concat(error_6 instanceof Error ? error_6.message : 'Unknown error'));
+                    error_4 = _b.sent();
+                    setMessageText("Increment failed: ".concat(error_4 instanceof Error ? error_4.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -1039,7 +327,7 @@ var SpFxReactToolkitTest = function () {
         });
     }); }, [tenantCounter]);
     var handleRemoveTenantProperty = React.useCallback(function (propertyName) { return __awaiter(void 0, void 0, void 0, function () {
-        var hook, error_7;
+        var hook, error_5;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -1064,8 +352,8 @@ var SpFxReactToolkitTest = function () {
                     setTimeout(function () { return setShowMessage(false); }, 3000);
                     return [3 /*break*/, 4];
                 case 3:
-                    error_7 = _a.sent();
-                    setMessageText("Remove failed: ".concat(error_7 instanceof Error ? error_7.message : 'Unknown error'));
+                    error_5 = _a.sent();
+                    setMessageText("Remove failed: ".concat(error_5 instanceof Error ? error_5.message : 'Unknown error'));
                     setShowMessage(true);
                     setTimeout(function () { return setShowMessage(false); }, 5000);
                     return [3 /*break*/, 4];
@@ -1427,22 +715,22 @@ var SpFxReactToolkitTest = function () {
                         "This hook provides access to the generic HttpClient for calling external APIs (non-SharePoint). For SharePoint REST API calls, use ",
                         React.createElement("strong", null, "useSPFxSPHttpClient"),
                         " instead."),
-                    React.createElement(HttpClientExample, null))),
+                    React.createElement(HttpClientDemo, null))),
             React.createElement(PivotItem, { headerText: "PnPjs", itemIcon: "CloudDownload" },
                 React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
-                    React.createElement(PnPContextExample, null),
-                    React.createElement(PnPOperationsExample, null),
-                    React.createElement(PnPListExample, null))),
+                    React.createElement(PnPContextDemo, null),
+                    React.createElement(PnPOperationsDemo, null),
+                    React.createElement(PnPListDemo, null))),
             React.createElement(PivotItem, { headerText: "Search", itemIcon: "Search" },
                 React.createElement(Stack, { tokens: { childrenGap: 20 }, styles: { root: { marginTop: '16px' } } },
                     React.createElement(MessageBar, { messageBarType: MessageBarType.info },
                         React.createElement("strong", null, "useSPFxPnPSearch Hook Examples"),
                         React.createElement("br", null),
                         "These examples demonstrate SharePoint Search capabilities using the native PnPjs SearchQueryBuilder API."),
-                    React.createElement(PnPSearchBasicExample, null),
-                    React.createElement(PnPSearchAdvancedExample, null),
-                    React.createElement(PnPSearchRefinersExample, null),
-                    React.createElement(PnPSearchSuggestionsExample, null))))));
+                    React.createElement(PnPSearchBasicDemo, null),
+                    React.createElement(PnPSearchAdvancedDemo, null),
+                    React.createElement(PnPSearchRefinersDemo, null),
+                    React.createElement(PnPSearchSuggestionsDemo, null))))));
 };
 export default SpFxReactToolkitTest;
 //# sourceMappingURL=SpFxReactToolkitTest.js.map