@apvee/spfx-react-toolkit 1.1.0 → 1.2.1

package/lib/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Example 6: Search Suggestions (Autocomplete)
+ */
+export declare const PnPSearchSuggestionsDemo: React.FC;
+//# sourceMappingURL=PnPSearchSuggestionsDemo.d.ts.map

package/lib/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PnPSearchSuggestionsDemo.d.ts","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAgH5C,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.js

@@ -0,0 +1,134 @@
+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 * as React from 'react';
+import { Stack, TextField, MessageBar, MessageBarType, Separator, Label, Icon, } from '@fluentui/react';
+import { useSPFxPnPSearch } from '../../../../hooks';
+/**
+ * Example 6: Search Suggestions (Autocomplete)
+ */
+export var PnPSearchSuggestionsDemo = 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_1;
+        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_1 = _a.sent();
+                    console.error('[PnPSearchSuggestions] Error:', err_1);
+                    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.")));
+};
+//# sourceMappingURL=PnPSearchSuggestionsDemo.js.map

package/lib/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PnPSearchSuggestionsDemo.js","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/demos/PnPSearchSuggestionsDemo.tsx"],"names":[],"mappings":"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"}

package/lib/webparts/spFxReactToolkitTest/components/demos/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Demo components for SpFxReactToolkitTest webpart
+ * Each demo showcases specific hooks from the SPFx React Toolkit
+ */
+export { HttpClientDemo } from './HttpClientDemo';
+export { PnPContextDemo } from './PnPContextDemo';
+export { PnPOperationsDemo } from './PnPOperationsDemo';
+export { PnPListDemo } from './PnPListDemo';
+export { PnPSearchBasicDemo } from './PnPSearchBasicDemo';
+export { PnPSearchAdvancedDemo } from './PnPSearchAdvancedDemo';
+export { PnPSearchRefinersDemo } from './PnPSearchRefinersDemo';
+export { PnPSearchSuggestionsDemo } from './PnPSearchSuggestionsDemo';
+//# sourceMappingURL=index.d.ts.map

package/lib/webparts/spFxReactToolkitTest/components/demos/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/demos/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/demos/index.js

@@ -0,0 +1,18 @@
+/**
+ * Demo components for SpFxReactToolkitTest webpart
+ * Each demo showcases specific hooks from the SPFx React Toolkit
+ */
+// HTTP Client demo
+export { HttpClientDemo } from './HttpClientDemo';
+// PnP Context demo
+export { PnPContextDemo } from './PnPContextDemo';
+// PnP Operations (invoke/batch) demo
+export { PnPOperationsDemo } from './PnPOperationsDemo';
+// PnP List CRUD demo
+export { PnPListDemo } from './PnPListDemo';
+// PnP Search demos
+export { PnPSearchBasicDemo } from './PnPSearchBasicDemo';
+export { PnPSearchAdvancedDemo } from './PnPSearchAdvancedDemo';
+export { PnPSearchRefinersDemo } from './PnPSearchRefinersDemo';
+export { PnPSearchSuggestionsDemo } from './PnPSearchSuggestionsDemo';
+//# sourceMappingURL=index.js.map

package/lib/webparts/spFxReactToolkitTest/components/demos/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/demos/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,mBAAmB;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,mBAAmB;AACnB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,qCAAqC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,qBAAqB;AACrB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,mBAAmB;AACnB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/InfoRow.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Props for the InfoRow component
+ */
+export interface IInfoRowProps {
+    /** Label text to display */
+    label: string;
+    /** Value to display (shows 'N/A' if undefined) */
+    value: string | undefined;
+    /** Optional Fluent UI icon name */
+    icon?: string;
+}
+/**
+ * Helper component for displaying labeled information rows
+ * with optional icon prefix
+ */
+export declare const InfoRow: React.FC<IInfoRowProps>;
+//# sourceMappingURL=InfoRow.d.ts.map

package/lib/webparts/spFxReactToolkitTest/components/shared/InfoRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM3C,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/InfoRow.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Label, Icon } from '@fluentui/react';
+import styles from '../SpFxReactToolkitTest.module.scss';
+/**
+ * Helper component for displaying labeled information rows
+ * with optional icon prefix
+ */
+export 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')));
+};
+//# sourceMappingURL=InfoRow.js.map

package/lib/webparts/spFxReactToolkitTest/components/shared/InfoRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.js","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qCAAqC,CAAC;AAczD;;;GAGG;AACH,MAAM,CAAC,IAAM,OAAO,GAA4B,UAAC,EAAsB;QAApB,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAAO,OAAA,CAC1E,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;QAC3B,IAAI,IAAI,oBAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,GAAI;QACjC,oBAAC,KAAK;YAAE,KAAK;gBAAU;QACvB,kCAAO,KAAK,IAAI,KAAK,CAAQ,CACzB,CACP;AAN2E,CAM3E,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/StatusBadge.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Props for the StatusBadge component
+ */
+export interface IStatusBadgeProps {
+    /** Whether the status is available/active */
+    available: boolean;
+    /** Label text to display */
+    label: string;
+}
+/**
+ * Helper component for displaying status badges
+ * with success/error styling based on availability
+ */
+export declare const StatusBadge: React.FC<IStatusBadgeProps>;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/lib/webparts/spFxReactToolkitTest/components/shared/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAKnD,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/StatusBadge.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Icon } from '@fluentui/react';
+import styles from '../SpFxReactToolkitTest.module.scss';
+/**
+ * Helper component for displaying status badges
+ * with success/error styling based on availability
+ */
+export 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));
+};
+//# sourceMappingURL=StatusBadge.js.map

package/lib/webparts/spFxReactToolkitTest/components/shared/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,MAAM,MAAM,qCAAqC,CAAC;AAYzD;;;GAGG;AACH,MAAM,CAAC,IAAM,WAAW,GAAgC,UAAC,EAAoB;QAAlB,SAAS,eAAA,EAAE,KAAK,WAAA;IAAO,OAAA,CAChF,6BAAK,SAAS,EAAE,UAAG,MAAM,CAAC,WAAW,cAAI,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAE;QAClF,oBAAC,IAAI,IAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAAI;QACzD,KAAK,CACF,CACP;AALiF,CAKjF,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared UI components for SpFxReactToolkitTest webpart
+ */
+export { InfoRow, type IInfoRowProps } from './InfoRow';
+export { StatusBadge, type IStatusBadgeProps } from './StatusBadge';
+//# sourceMappingURL=index.d.ts.map

package/lib/webparts/spFxReactToolkitTest/components/shared/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/lib/webparts/spFxReactToolkitTest/components/shared/index.js

@@ -0,0 +1,6 @@
+/**
+ * Shared UI components for SpFxReactToolkitTest webpart
+ */
+export { InfoRow } from './InfoRow';
+export { StatusBadge } from './StatusBadge';
+//# sourceMappingURL=index.js.map

package/lib/webparts/spFxReactToolkitTest/components/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/webparts/spFxReactToolkitTest/components/shared/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,EAAsB,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,WAAW,EAA0B,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apvee/spfx-react-toolkit",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Comprehensive React runtime and hooks library for SharePoint Framework (SPFx)",
   "private": false,
   "engines": {
@@ -20,27 +20,28 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@fluentui/react": "^8.106.4",
     "@fluentui/react-migration-v8-v9": "^9.9.12",
     "@fluentui/react-theme": "^9.2.0",
     "@microsoft/sp-application-base": ">=1.18.0",
     "@microsoft/sp-component-base": ">=1.18.0",
     "@microsoft/sp-core-library": ">=1.18.0",
     "@microsoft/sp-listview-extensibility": ">=1.18.0",
-    "@microsoft/sp-lodash-subset": ">=1.18.0",
-    "@microsoft/sp-office-ui-fabric-core": ">=1.18.0",
-    "@microsoft/sp-property-pane": ">=1.18.0",
     "@microsoft/sp-webpart-base": ">=1.18.0",
+    "jotai": "^2.6.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "tslib": "2.3.1"
   },
   "devDependencies": {
+    "@fluentui/react": "^8.106.4",
     "@microsoft/eslint-config-spfx": ">=1.18.0",
     "@microsoft/eslint-plugin-spfx": ">=1.18.0",
     "@microsoft/rush-stack-compiler-5.3": "0.1.0",
     "@microsoft/sp-build-web": ">=1.18.0",
+    "@microsoft/sp-lodash-subset": ">=1.18.0",
     "@microsoft/sp-module-interfaces": ">=1.18.0",
+    "@microsoft/sp-office-ui-fabric-core": ">=1.18.0",
+    "@microsoft/sp-property-pane": ">=1.18.0",
     "@rushstack/eslint-config": "4.0.1",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
@@ -54,8 +55,7 @@
   "peerDependencies": {
     "@pnp/core": "^4.0.0",
     "@pnp/queryable": "^4.0.0",
-    "@pnp/sp": "^4.0.0",
-    "jotai": "^2.0.0"
+    "@pnp/sp": "^4.0.0"
   },
   "homepage": "https://github.com/apvee/spfx-react-toolkit#readme",
   "repository": {