diff --git a/samples/react-tree-orgchart/package-lock.json b/samples/react-tree-orgchart/package-lock.json index e271317c8..967df76ba 100644 --- a/samples/react-tree-orgchart/package-lock.json +++ b/samples/react-tree-orgchart/package-lock.json @@ -15,13 +15,14 @@ "@microsoft/sp-office-ui-fabric-core": "1.20.0", "@microsoft/sp-property-pane": "1.20.0", "@microsoft/sp-webpart-base": "1.20.0", - "@nosferatu500/react-sortable-tree": "^4.4.0", "@pnp/graph": "^4.5.0", "@pnp/sp": "^4.5.0", "@pnp/spfx-controls-react": "^4.0.0-beta.6059091", - "@pnp/spfx-property-controls": "^3.18", + "@pnp/spfx-property-controls": "^4.0.0-beta.6059131", + "@types/react-sortable-tree": "^0.3.23", "react": "17.0.1", "react-dom": "17.0.1", + "react-sortable-tree-patch-react-17": "^2.9.0", "tslib": "2.3.1" }, "devDependencies": { @@ -8684,82 +8685,6 @@ "node": ">= 8" } }, - "node_modules/@nosferatu500/react-sortable-tree": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@nosferatu500/react-sortable-tree/-/react-sortable-tree-4.4.0.tgz", - "integrity": "sha512-TN3IYLM1y+ZZAM3ulMXnxwcwX6TPokTczkf3UZ9h0dZ/GE3wSlC1Db4crFjvrEgyHWRGX73lA779Um9wtS9tAQ==", - "dependencies": { - "@nosferatu500/react-dnd-scrollzone": "^2.0.10", - "lodash.isequal": "^4.5.0", - "react-dnd": "14.0.4", - "react-dnd-html5-backend": "^14.1.0", - "react-virtuoso": "^4.3.1" - }, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "react": "^17.0.0 || ^18.0.0", - "react-dnd": "14.0.4", - "react-dom": "^17.0.0 || ^18.0.0" - } - }, - "node_modules/@nosferatu500/react-sortable-tree/node_modules/@nosferatu500/react-dnd-scrollzone": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/@nosferatu500/react-dnd-scrollzone/-/react-dnd-scrollzone-2.0.10.tgz", - "integrity": "sha512-PBJtyBQrm47ifesOfIOsJd2SaxSpjkfKSoQOHewkI4UeYLyEc4hX0BY3vlVxW0zzak2+IneJghmGnp5lznVo6A==", - "dependencies": { - "hoist-non-react-statics": "^3.3.2", - "lodash.throttle": "^4.1.1" - }, - "engines": { - "node": ">=16" - }, - "peerDependencies": { - "react": ">=17.0.2", - "react-dnd": "14.0.4", - "react-dom": ">=17.0.2" - } - }, - "node_modules/@nosferatu500/react-sortable-tree/node_modules/@types/node": { - "version": "22.7.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.7.4.tgz", - "integrity": "sha512-y+NPi1rFzDs1NdQHHToqeiX2TIS79SWEAw9GYhkkx8bD0ChpfqC+n2j5OXOCpzfojBEBt6DnEnnG9MY0zk1XLg==", - "optional": true, - "peer": true, - "dependencies": { - "undici-types": "~6.19.2" - } - }, - "node_modules/@nosferatu500/react-sortable-tree/node_modules/react-dnd": { - "version": "14.0.4", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.4.tgz", - "integrity": "sha512-AFJJXzUIWp5WAhgvI85ESkDCawM0lhoVvfo/lrseLXwFdH3kEO3v8I2C81QPqBW2UEyJBIPStOhPMGYGFtq/bg==", - "dependencies": { - "@react-dnd/invariant": "^2.0.0", - "@react-dnd/shallowequal": "^2.0.0", - "dnd-core": "14.0.1", - "fast-deep-equal": "^3.1.3", - "hoist-non-react-statics": "^3.3.2" - }, - "peerDependencies": { - "@types/hoist-non-react-statics": ">= 3.3.1", - "@types/node": ">= 12", - "@types/react": ">= 16", - "react": ">= 16.14" - }, - "peerDependenciesMeta": { - "@types/hoist-non-react-statics": { - "optional": true - }, - "@types/node": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, "node_modules/@opentelemetry/api": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz", @@ -9647,19 +9572,18 @@ } }, "node_modules/@pnp/spfx-property-controls": { - "version": "3.18.0", - "resolved": "https://registry.npmjs.org/@pnp/spfx-property-controls/-/spfx-property-controls-3.18.0.tgz", - "integrity": "sha512-hEHdfZHqv+y4q0qoDElx4YlfZ7O+GOwbBlHtgML8ztgo/6uP3i/NWnQDY5D+E2UJyo3eb2b4eULUDCtH446nyg==", + "version": "4.0.0-beta.6059131", + "resolved": "https://registry.npmjs.org/@pnp/spfx-property-controls/-/spfx-property-controls-4.0.0-beta.6059131.tgz", + "integrity": "sha512-kHMoz8xwEHtFgoQpWajawwpaOO2tx6GgLMvVRNE7VsPtLMsqrhKWAIsFuzxpt6yN9xzOMk+B/b4xdG5PxCfYyA==", "hasInstallScript": true, "dependencies": { - "@fluentui/react": "8.106.4", - "@fluentui/react-components": "^9.48.0", - "@microsoft/sp-adaptive-card-extension-base": "1.19.0", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-office-ui-fabric-core": "1.19.0", - "@microsoft/sp-property-pane": "1.19.0", - "@microsoft/sp-webpart-base": "1.19.0", + "@fluentui/react": "^7.199.1", + "@microsoft/sp-adaptive-card-extension-base": "1.17.3", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-office-ui-fabric-core": "1.17.3", + "@microsoft/sp-property-pane": "1.17.3", + "@microsoft/sp-webpart-base": "1.17.3", "@monaco-editor/loader": "^1.2.0", "@pnp/common": "1.3.11", "@pnp/logging": "1.3.11", @@ -9673,53 +9597,94 @@ "lodash.omit": "4.5.0", "markdown-to-jsx": "^6.11.4", "monaco-editor": "^0.32.1", + "office-ui-fabric-react": "^7.199.1", "react": "17.0.1", "react-ace": "10.1.0", "react-dom": "17.0.1" }, "engines": { - "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0" + "node": ">=16.13.0 <17.0.0" } }, - "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-adaptive-card-extension-base": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-adaptive-card-extension-base/-/sp-adaptive-card-extension-base-1.19.0.tgz", - "integrity": "sha512-tCJXQ8jIuJZ9okAg3zGYOnDlGJCYZY4/JPt5cmCNd/jQoqd1YH69qa8AO74PjdeK5CUVC5Eq//7VVyw3GHg5SA==", + "node_modules/@pnp/spfx-property-controls/node_modules/@azure/msal-browser": { + "version": "2.28.1", + "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.28.1.tgz", + "integrity": "sha512-5uAfwpNGBSRzBGTSS+5l4Zw6msPV7bEmq99n0U3n/N++iTcha+nIp1QujxTPuOLHmTNCeySdMx9qzGqWuy22zQ==", + "deprecated": "A newer major version of this library is available. Please upgrade to the latest available version.", "dependencies": { - "@microsoft/sp-component-base": "1.19.0", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-http": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-loader": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", - "@microsoft/sp-property-pane": "1.19.0", - "@microsoft/teams-js-v2": "npm:@microsoft/teams-js@2.12.0", - "adaptivecards": "2.11.2", + "@azure/msal-common": "^7.3.0" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@pnp/spfx-property-controls/node_modules/@azure/msal-common": { + "version": "7.6.0", + "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-7.6.0.tgz", + "integrity": "sha512-XqfbglUTVLdkHQ8F9UQJtKseRr3sSnr9ysboxtoswvaMVaEfvyLtMoHv9XdKUfOc0qKGzNgRFd9yRjIWVepl6Q==", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@pnp/spfx-property-controls/node_modules/@fluentui/react": { + "version": "7.204.0", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-7.204.0.tgz", + "integrity": "sha512-WQKHcO6cboGO0eCPsiNSzUwnMWBmAvdltu4X0tvXwb+q8W3wZzCQiU1voDVYNm4Nz/Jgiiy8jbMcesmNAq7jsw==", + "dependencies": { + "@uifabric/set-version": "^7.0.24", + "office-ui-fabric-react": "^7.204.0", + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + } + }, + "node_modules/@pnp/spfx-property-controls/node_modules/@fluentui/react/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-adaptive-card-extension-base": { + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-adaptive-card-extension-base/-/sp-adaptive-card-extension-base-1.17.3.tgz", + "integrity": "sha512-3rXAxLzwCFUIP2ngTB1aurTMiFwSYP1MzvuEmj4NW5zElhYg+kFr0MMqCrBYkSdEXKDLZ++B9b5uKxAInW+gMQ==", + "dependencies": { + "@microsoft/sp-component-base": "1.17.3", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-http": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-loader": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", + "@microsoft/sp-property-pane": "1.17.3", + "adaptivecards": "2.11.1", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-component-base": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-component-base/-/sp-component-base-1.19.0.tgz", - "integrity": "sha512-FtJMBewzS4+8tUSTE+K5ndiWvEbWWhu0uIP3M265d/+LDUzp1UX9RcpWHlcqIAdHw9P6VaX+5ADsXE0XDn4jZw==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-component-base/-/sp-component-base-1.17.3.tgz", + "integrity": "sha512-7Xey4caHNTkz5EtN6BVRj/PUCaLMVV+dYMZbwgoa9grIUFYwGKP8M0m3RZRUUNX9EPaumo+5QUufVVl159nHKA==", "dependencies": { - "@fluentui/react": "^8.110.12", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-dynamic-data": "1.19.0", - "@microsoft/sp-http": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", - "@microsoft/sp-page-context": "1.19.0", + "@fluentui/react": "^8.106.4", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-dynamic-data": "1.17.3", + "@microsoft/sp-http": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-component-base/node_modules/@fluentui/react": { @@ -9750,17 +9715,17 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-core-library": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-core-library/-/sp-core-library-1.19.0.tgz", - "integrity": "sha512-FzXy27IyS5acxgDvxGlycaoB1RLH9Mq0TDYT0UXrch9wBiQ7Cs2Lvh2qJbT954KdtrR5pyz7mWJP2MKPXKSmyA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-core-library/-/sp-core-library-1.17.3.tgz", + "integrity": "sha512-NEMW4xHsiUyFhQnmj2pU4pEQB1Dy5QoZNU0Qys66PXdJFwJgrGn9PUjRReZlN3dyX1jwSzLCgzWU73bJrcB/1w==", "dependencies": { - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", - "@microsoft/sp-odata-types": "1.19.0", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", + "@microsoft/sp-odata-types": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" }, "peerDependencies": { "@types/react": ">=16.9.51 <18.0.0", @@ -9770,73 +9735,75 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-diagnostics": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-diagnostics/-/sp-diagnostics-1.19.0.tgz", - "integrity": "sha512-w5D3oz8sbEwOPStOupjJwT/1Ud0ujwbQ27SCBPncVYO/EXD4RWTM50+ZLoZepPnK0GDX0FCZsYMDaKnNZHlB6A==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-diagnostics/-/sp-diagnostics-1.17.3.tgz", + "integrity": "sha512-vUFkFr78QCEEXgiWNbWjI8mUUDKPXVX0/eSVuAClXhENmxRqhS4nvkckTm/acmXvcw8az3G1r2ou6Q7hFX3d9Q==", "dependencies": { - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0" + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-dynamic-data": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-dynamic-data/-/sp-dynamic-data-1.19.0.tgz", - "integrity": "sha512-yKHCyV+YXI9HhkTWBVF/odGWofjQFRw9JaZ8C06JrmGaJ7raQc8d0nTuc13Y/1tpGmAd/tvbkcqd006k8WvJsw==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-dynamic-data/-/sp-dynamic-data-1.17.3.tgz", + "integrity": "sha512-+lE9U+28JjrV5Q5NucntkbLyx5LvdipQU0ppvti1SuEHCnetqPOVEI/axUjY1MbvmLBHngQUFj/U4UAIQse9KQ==", "dependencies": { - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-http": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-http/-/sp-http-1.19.0.tgz", - "integrity": "sha512-9tu580LgtkCheDYgYXHMDD3x6Plz5x1c3fTWSwWpjEOIFZGK/Fmse1c1YopQyLu/YUHinW+01TYnF/XyQywoKg==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-http/-/sp-http-1.17.3.tgz", + "integrity": "sha512-7ctnBEJd8ak4VLSPakMX42GF/DAz66RL5dlPJzx16e2pycJoNIKL0vBsEalZ5RWmkcjE6jGRi2xtSPwhIiJWlA==", "dependencies": { "@microsoft/microsoft-graph-clientv1": "npm:@microsoft/microsoft-graph-client@1.7.2-spfx", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-http-msgraph": "1.19.0", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-http-msgraph": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-http-base": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-http-base/-/sp-http-base-1.19.0.tgz", - "integrity": "sha512-jd3eX9agA+r/BUuMFBPS+BR18OfH/+a5cJL0RVaB4jRUX6FplAaOgkMbG71orDc1I8WWG2MWgK+XZ419hPKPVw==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-http-base/-/sp-http-base-1.17.3.tgz", + "integrity": "sha512-D0KsLakRuR1iDZa27CSEhW84KPs9/BMIaezxK/M3076WyldRtA0zQwk8rwmoDgU3K3GqqspwP0T0KWT9QH3t4w==", "dependencies": { - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-page-context": "1.19.0", - "@microsoft/teams-js-v2": "npm:@microsoft/teams-js@2.12.0", + "@azure/msal-browser": "2.28.1", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", + "@microsoft/teams-js-v2": "npm:@microsoft/teams-js@2.9.1", "adal-angular": "1.0.16", + "msal": "1.4.17", "msalBrowserLegacy": "npm:@azure/msal-browser@2.22.0", "msalLegacy": "npm:msal@1.4.12", "tslib": "2.3.1" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-http-msgraph": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-http-msgraph/-/sp-http-msgraph-1.19.0.tgz", - "integrity": "sha512-wjRQ+VBenkqZg9GTHpV0Y7YWDEII3Kzihe2exdwBgLMZlUnf60M1222foHtGrd/PzyLyHbntuqzGfmE36VNlfQ==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-http-msgraph/-/sp-http-msgraph-1.17.3.tgz", + "integrity": "sha512-2ZbDZaNFGNg6nAvkOzEK0hjqkj9f+cN+ugZSFAANoF8wV7szYA/wRcLjvM+Kq3Ol7fGu/OrQeHrTEBWBekP2XQ==", "dependencies": { "@microsoft/microsoft-graph-clientv1": "npm:@microsoft/microsoft-graph-client@1.7.2-spfx", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-loader": "1.19.0", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-loader": "1.17.3", "tslib": "2.3.1" }, "peerDependencies": { @@ -9844,21 +9811,21 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-image-helper": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-image-helper/-/sp-image-helper-1.19.0.tgz", - "integrity": "sha512-tsgy9iy/8NqXqywYm0M+XBt1fAO03mwEccALoICNECU5CX+KRb/a80FfQ1CbaqvzQqeuAzFp48ZIHqFAgzxE9Q==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-image-helper/-/sp-image-helper-1.17.3.tgz", + "integrity": "sha512-Kbw/v2f3STTxcucRPBgJWuVaYY6K4oMhWK4WuSRWKFfOZX3xTlznzBbNQLf5OWTwrsDngoFDoyREI3spME5UbQ==", "dependencies": { - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-http": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-loader": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-page-context": "1.19.0", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-http": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-loader": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" }, "peerDependencies": { "@types/react": ">=16.9.51 <18.0.0", @@ -9868,20 +9835,20 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-loader": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-loader/-/sp-loader-1.19.0.tgz", - "integrity": "sha512-KFQ7AvTXn+PKT5YzxZMvgrjRDq0UZxZp6MoZP14mjo/fJ/vU5SQJG1csWz/0MdTpv3OooxeqgstwOL2hM/cB4A==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-loader/-/sp-loader-1.17.3.tgz", + "integrity": "sha512-qmG5XoXSuHyAeryeuNQIGIEMKePEGkxmPhgULnGLX6chGKLimtVL+SzOc8+hVet49Rr1B6eIIMaIV6ajZx/qoQ==", "dependencies": { - "@fluentui/react": "^8.110.12", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-dynamic-data": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", - "@microsoft/sp-odata-types": "1.19.0", - "@microsoft/sp-page-context": "1.19.0", - "@rushstack/loader-raw-script": "1.4.37", + "@fluentui/react": "^8.106.4", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-dynamic-data": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", + "@microsoft/sp-odata-types": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", + "@rushstack/loader-raw-script": "1.3.281", "@types/requirejs": "2.1.29", "raw-loader": "~0.5.1", "react": "17.0.1", @@ -9890,7 +9857,7 @@ "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" }, "peerDependencies": { "@types/react": ">=16.9.51 <18.0.0", @@ -9925,87 +9892,87 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-lodash-subset": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-lodash-subset/-/sp-lodash-subset-1.19.0.tgz", - "integrity": "sha512-jTFdYxU52dYFNbEuIy7p7QPG6ujO5ZaX/pKmxRpXZb1v6JM0l7SzaLMEEyhBeu/HFovlErAM6n5IOccJx31SXA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-lodash-subset/-/sp-lodash-subset-1.17.3.tgz", + "integrity": "sha512-VmtfG+hcJVxnBcrU4atlOFEUwpRYgJjAj993cg+VacLNYtevf2AVdqkvhRNguXM8smJZdKpMJj1ygtPhdrdBxg==", "dependencies": { "@types/lodash": "4.14.117", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-module-interfaces": { - "version": "1.20.1", - "resolved": "https://registry.npmjs.org/@microsoft/sp-module-interfaces/-/sp-module-interfaces-1.20.1.tgz", - "integrity": "sha512-kV5ipmUyCPL0FgS8uf+OH6Gpu33x8tr7q4eXUQFaG8TaCbrLkCh6F+H1CdcFEPcp7GIC3qdSfI7IhAKG5Cuz4w==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-module-interfaces/-/sp-module-interfaces-1.17.3.tgz", + "integrity": "sha512-oj+C9RA++Gxy6AN5t5DOLRLsvRvGjRIoccbrN1nCbzm/ZPdJFjFoh6EWlEpYlS1S1YMzR/kyfAHpguQtRHiq2A==", "dependencies": { - "@rushstack/node-core-library": "4.0.2", + "@rushstack/node-core-library": "3.55.2", "z-schema": "4.2.4" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-odata-types": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-odata-types/-/sp-odata-types-1.19.0.tgz", - "integrity": "sha512-4he2OU/QLcerLGd0RYQ1BOeIRESsM9A14I9g83Db4g+Gs6IrZi8lPSo4dydInL0kPM4U7/z+wRJcw9OGpkTieA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-odata-types/-/sp-odata-types-1.17.3.tgz", + "integrity": "sha512-fKRaTasv2LXwcgFyPLWDknq82WtHyD842btjO1pg3V57vLc0/Tw4PWNIDZDOWH79RCBE7248957IogNw+TqKkg==", "dependencies": { "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-office-ui-fabric-core": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-office-ui-fabric-core/-/sp-office-ui-fabric-core-1.19.0.tgz", - "integrity": "sha512-rh54f6JgjZm0qphHk9UIhV1rRSzX3GwDz4joTNw+kSumLCGXVmef5+qrtd6HAFHI/TQCf/FQkgW0a4DFF/qDAA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-office-ui-fabric-core/-/sp-office-ui-fabric-core-1.17.3.tgz", + "integrity": "sha512-1PE/C0fdbwcxWltrI0kG7Sayl1RIZilsfgU2UjmEIwry4Ltss3YLfAIgp9QOfMsinbvJnj/MN6fXSkFjcXW9fg==", "dependencies": { "office-ui-fabric-core": "11.0.1", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-page-context": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-page-context/-/sp-page-context-1.19.0.tgz", - "integrity": "sha512-fUkwWkEOcRgz6jkLoX18qKLGSLdqyDG1tR8bpXKJloQL6hq6n5RUdq41m3atIGWCLO+UsvkGSgixBMfSGiDGSA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-page-context/-/sp-page-context-1.17.3.tgz", + "integrity": "sha512-Qrr+GHWS2LVvMpNeIc+YL62ywqKBb2aEhk92ouea7VIXGjJAZA6O3SM45RJCG5dBKgA3oANPkhYyPRhPOR/VbQ==", "dependencies": { - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-dynamic-data": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-odata-types": "1.19.0", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-dynamic-data": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-odata-types": "1.17.3", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-property-pane": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-property-pane/-/sp-property-pane-1.19.0.tgz", - "integrity": "sha512-tBejgARjdkwrlKVEA4sm0c8AcrAdrc99wwRZF4tZHBdAFd/LB7mw7+ZuW71eIYB97efHUdOo5Z9YkrSwRmKd7Q==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-property-pane/-/sp-property-pane-1.17.3.tgz", + "integrity": "sha512-mARwiFXWrj0GL8vNLlhBgp8zyCmuaNlXYul6QKSajkjYp52W5Im3ff9IVWqGxZT0ZinfVkFBXsxtFrxGKP87iw==", "dependencies": { - "@fluentui/react": "^8.110.12", - "@microsoft/sp-component-base": "1.19.0", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-dynamic-data": "1.19.0", - "@microsoft/sp-image-helper": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-page-context": "1.19.0", + "@fluentui/react": "^8.106.4", + "@microsoft/sp-component-base": "1.17.3", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-dynamic-data": "1.17.3", + "@microsoft/sp-image-helper": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" }, "peerDependencies": { "@types/react": ">=16.9.51 <18.0.0", @@ -10040,36 +10007,36 @@ } }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-top-actions": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-top-actions/-/sp-top-actions-1.19.0.tgz", - "integrity": "sha512-/1G0J/2sNYK/LXqHnD5h4jitMzatbZRjwT2Qzd4JRxGSujFUe+VYRET90LXdA6lBnDrfZ2MlsVfRkEPrnGyZFQ==" + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-top-actions/-/sp-top-actions-1.17.3.tgz", + "integrity": "sha512-4mcKHak7+OWx3Vi+R3eQth9kUL3VXSIIile77XC8aeMXsBFYb2hUZQsOaR1zmRJ6WOHUGRg08BRXm4LBbCMpDg==" }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/sp-webpart-base": { - "version": "1.19.0", - "resolved": "https://registry.npmjs.org/@microsoft/sp-webpart-base/-/sp-webpart-base-1.19.0.tgz", - "integrity": "sha512-UEWWPDahD4tEAiZVeqCVV0DEU/0LhTgshWDLAeiRvcz5G83JrCN10JCwucYmAzwV3Irisy0DX9nt6C5qWzbvcA==", + "version": "1.17.3", + "resolved": "https://registry.npmjs.org/@microsoft/sp-webpart-base/-/sp-webpart-base-1.17.3.tgz", + "integrity": "sha512-lPyKHVedAU1dNlTO+aRVNCy/Bbs0C+UTjP5aWzEpj8mvzyV01zn0ZGT20msPa0TKxb2ctsfDomqMVZIXq7TUhQ==", "dependencies": { - "@fluentui/react": "^8.110.12", - "@microsoft/sp-component-base": "1.19.0", - "@microsoft/sp-core-library": "1.19.0", - "@microsoft/sp-diagnostics": "1.19.0", - "@microsoft/sp-dynamic-data": "1.19.0", - "@microsoft/sp-http": "1.19.0", - "@microsoft/sp-http-base": "1.19.0", - "@microsoft/sp-loader": "1.19.0", - "@microsoft/sp-lodash-subset": "1.19.0", - "@microsoft/sp-module-interfaces": "1.20.1", - "@microsoft/sp-page-context": "1.19.0", - "@microsoft/sp-property-pane": "1.19.0", - "@microsoft/sp-top-actions": "1.19.0", - "@microsoft/teams-js-v2": "npm:@microsoft/teams-js@2.12.0", + "@fluentui/react": "^8.106.4", + "@microsoft/sp-component-base": "1.17.3", + "@microsoft/sp-core-library": "1.17.3", + "@microsoft/sp-diagnostics": "1.17.3", + "@microsoft/sp-dynamic-data": "1.17.3", + "@microsoft/sp-http": "1.17.3", + "@microsoft/sp-http-base": "1.17.3", + "@microsoft/sp-loader": "1.17.3", + "@microsoft/sp-lodash-subset": "1.17.3", + "@microsoft/sp-module-interfaces": "1.17.3", + "@microsoft/sp-page-context": "1.17.3", + "@microsoft/sp-property-pane": "1.17.3", + "@microsoft/sp-top-actions": "1.17.3", + "@microsoft/teams-js-v2": "npm:@microsoft/teams-js@2.9.1", "@types/office-js": "1.0.36", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "engines": { - "node": ">=18.17.1 <19.0.0" + "node": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0" }, "peerDependencies": { "@types/react": ">=16.9.51 <18.0.0", @@ -10105,9 +10072,9 @@ }, "node_modules/@pnp/spfx-property-controls/node_modules/@microsoft/teams-js-v2": { "name": "@microsoft/teams-js", - "version": "2.12.0", - "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.12.0.tgz", - "integrity": "sha512-4gBtIC/Jc4elZ+R9i1LR+4QFwTAPtJ4P1MsCMDafe3HLtFGu/ZQngG9jZkWQ4A/rP4z1wNaDNn39XC+dLfURHQ==", + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@microsoft/teams-js/-/teams-js-2.9.1.tgz", + "integrity": "sha512-+ch8SVKIkZB4anZF05oEbvcyRcEzIVlRlzh5jSxsJ3HjOrJBd1lgfxqz6pkaAEFsAaTBSLkdziN4qtwVp72Gww==", "deprecated": "Package no longer supported. Use at your own risk", "dependencies": { "debug": "^4.3.3" @@ -10224,23 +10191,24 @@ "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" }, "node_modules/@pnp/spfx-property-controls/node_modules/@rushstack/loader-raw-script": { - "version": "1.4.37", - "resolved": "https://registry.npmjs.org/@rushstack/loader-raw-script/-/loader-raw-script-1.4.37.tgz", - "integrity": "sha512-pw+e6pLfeqPqmwZgxN/Yxj73AvajjC4NAgiKLdDTd88dYf57er7lRC9jBYz4ETSb/ANjktGNgrJP/4YeLvGF8g==", + "version": "1.3.281", + "resolved": "https://registry.npmjs.org/@rushstack/loader-raw-script/-/loader-raw-script-1.3.281.tgz", + "integrity": "sha512-XEz1ZNTth0bklxK5dF4q+WiVcHFto2hXT4YB+UUkPcnYbQU/z8O1Rh67BrKcmz/8aLjjv3kwuon+4vlkZgappA==", "dependencies": { "loader-utils": "1.4.2" } }, "node_modules/@pnp/spfx-property-controls/node_modules/@rushstack/node-core-library": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-4.0.2.tgz", - "integrity": "sha512-hyES82QVpkfQMeBMteQUnrhASL/KHPhd7iJ8euduwNJG4mu2GSOKybf0rOEjOm1Wz7CwJEUm9y0yD7jg2C1bfg==", + "version": "3.55.2", + "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.55.2.tgz", + "integrity": "sha512-SaLe/x/Q/uBVdNFK5V1xXvsVps0y7h1sN7aSJllQyFbugyOaxhNRF25bwEDnicARNEjJw0pk0lYnJQ9Kr6ev0A==", "dependencies": { + "colors": "~1.2.1", "fs-extra": "~7.0.1", "import-lazy": "~4.0.0", "jju": "~1.4.0", "resolve": "~1.22.1", - "semver": "~7.5.4", + "semver": "~7.3.0", "z-schema": "~5.0.2" }, "peerDependencies": { @@ -10295,6 +10263,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/@pnp/spfx-property-controls/node_modules/adaptivecards": { + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/adaptivecards/-/adaptivecards-2.11.1.tgz", + "integrity": "sha512-dyF23HK+lRMEreexJgHz4y9U5B0ZuGk66N8nhwXRnICyYjq8hE4A6n8rLoV/CNY2QAZ0iRjOIR2J8U7M1CKl8Q==" + }, "node_modules/@pnp/spfx-property-controls/node_modules/commander": { "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", @@ -10325,22 +10298,28 @@ "node": ">=4.0.0" } }, - "node_modules/@pnp/spfx-property-controls/node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/@pnp/spfx-property-controls/node_modules/monaco-editor": { "version": "0.32.1", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.1.tgz", "integrity": "sha512-LUt2wsUvQmEi2tfTOK+tjAPvt7eQ+K5C4rZPr6SeuyzjAuAHrIvlUloTcOiGjZW3fn3a/jFQCONrEJbNOaCqbA==" }, + "node_modules/@pnp/spfx-property-controls/node_modules/msal": { + "version": "1.4.17", + "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.17.tgz", + "integrity": "sha512-RjHwP2cCIWQ9iUIk1SziUMb9+jj5mC4OqG2w16E5yig8jySi/TwiFvKlwcjNrPsndph0HtgCtbENnk5julf3yQ==", + "deprecated": "This package is no longer supported. Please use @azure/msal-browser instead.", + "dependencies": { + "tslib": "^1.9.3" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@pnp/spfx-property-controls/node_modules/msal/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/@pnp/spfx-property-controls/node_modules/requirejs": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/requirejs/-/requirejs-2.3.6.tgz", @@ -10369,20 +10348,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/@pnp/spfx-property-controls/node_modules/semver": { - "version": "7.5.4", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", - "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/@pnp/spfx-property-controls/node_modules/validator": { "version": "13.12.0", "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz", @@ -10391,11 +10356,6 @@ "node": ">= 0.10" } }, - "node_modules/@pnp/spfx-property-controls/node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" - }, "node_modules/@pnp/spfx-property-controls/node_modules/z-schema": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-4.2.4.tgz", @@ -13870,6 +13830,15 @@ "node": ">=0.10.0" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", @@ -14041,6 +14010,25 @@ "@types/react": "^17" } }, + "node_modules/@types/react-sortable-tree": { + "version": "0.3.23", + "resolved": "https://registry.npmjs.org/@types/react-sortable-tree/-/react-sortable-tree-0.3.23.tgz", + "integrity": "sha512-dPyt47T3LiffOsoO3wNUQYIv0eLKvZLJymOv4aApejgVIGYaLy1ifhm23i8NJqxEO99ZF1tqTjzjnHmH6Egw/A==", + "dependencies": { + "@types/react": "*", + "@types/react-virtualized": "*", + "react-dnd": "^11.1.3" + } + }, + "node_modules/@types/react-virtualized": { + "version": "9.21.30", + "resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.21.30.tgz", + "integrity": "sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==", + "dependencies": { + "@types/prop-types": "*", + "@types/react": "*" + } + }, "node_modules/@types/requirejs": { "version": "2.1.29", "resolved": "https://registry.npmjs.org/@types/requirejs/-/requirejs-2.1.29.tgz", @@ -17608,6 +17596,14 @@ "readable-stream": "^2.3.5" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/cmd-extension": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/cmd-extension/-/cmd-extension-1.0.2.tgz", @@ -19095,13 +19091,13 @@ } }, "node_modules/dnd-core": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz", - "integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==", + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", + "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", "dependencies": { "@react-dnd/asap": "^4.0.0", "@react-dnd/invariant": "^2.0.0", - "redux": "^4.1.1" + "redux": "^4.0.4" } }, "node_modules/doctrine": { @@ -28457,8 +28453,7 @@ "node_modules/performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", - "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", - "dev": true + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==" }, "node_modules/picocolors": { "version": "1.1.0", @@ -29104,6 +29099,14 @@ "node": ">=0.10" } }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "dependencies": { + "performance-now": "^2.1.0" + } + }, "node_modules/ramda": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz", @@ -29239,12 +29242,49 @@ "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-dnd-html5-backend": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz", - "integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==", + "node_modules/react-display-name": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz", + "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==" + }, + "node_modules/react-dnd": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz", + "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==", "dependencies": { - "dnd-core": "14.0.1" + "@react-dnd/shallowequal": "^2.0.0", + "@types/hoist-non-react-statics": "^3.3.1", + "dnd-core": "^11.1.3", + "hoist-non-react-statics": "^3.3.0" + }, + "peerDependencies": { + "react": ">= 16.9.0", + "react-dom": ">= 16.9.0" + } + }, + "node_modules/react-dnd-html5-backend": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz", + "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==", + "dependencies": { + "dnd-core": "^11.1.3" + } + }, + "node_modules/react-dnd-scrollzone-patch-react-17": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/react-dnd-scrollzone-patch-react-17/-/react-dnd-scrollzone-patch-react-17-1.0.2.tgz", + "integrity": "sha512-Wfhyc/Y/Veim29REBYm8nMmtDB5IwSmPPhXIuabBgsEa1MrVsuOwK9+7LmuP+mGbDOEP/S6G8+5XvDqPlRFK2g==", + "dependencies": { + "hoist-non-react-statics": "^3.1.0", + "lodash.throttle": "^4.0.1", + "prop-types": "^15.5.9", + "raf": "^3.2.0", + "react-display-name": "^0.2.0" + }, + "peerDependencies": { + "react": "^17.0.1", + "react-dnd": "^11.1.3", + "react-dom": "^17.0.1" } }, "node_modules/react-dom": { @@ -29265,6 +29305,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-mentions": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/react-mentions/-/react-mentions-4.4.10.tgz", @@ -29307,6 +29352,27 @@ "react-dom": "^16 || ^17 || ^18" } }, + "node_modules/react-sortable-tree-patch-react-17": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-sortable-tree-patch-react-17/-/react-sortable-tree-patch-react-17-2.9.0.tgz", + "integrity": "sha512-Ngtdbf78OfjqCxLj7+N+K4zM9d1mQ/tfnUsOfICFDzNa5JHg6AjixAj69ijvz0ykEiA9lYop+0Fm4KCOqCdlKA==", + "dependencies": { + "lodash.isequal": "^4.5.0", + "prop-types": "^15.6.1", + "react": "^17.0.0", + "react-dnd": "^11.1.3", + "react-dnd-html5-backend": "^11.1.3", + "react-dnd-scrollzone-patch-react-17": "^1.0.2", + "react-dom": "^17.0.0", + "react-lifecycles-compat": "^3.0.4", + "react-virtualized": "^9.21.2" + }, + "peerDependencies": { + "react": "^17.0.0", + "react-dnd": "^11.1.3", + "react-dom": "^17.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -29322,16 +29388,21 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-virtuoso": { - "version": "4.10.4", - "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.10.4.tgz", - "integrity": "sha512-G/gprhTbK+lzMxoo/iStcZxVEGph/cIhc3WANEpt92RuMw+LiCZOmBfKoeoZOHlm/iyftTrDJhGaTCpxyucnkQ==", - "engines": { - "node": ">=10" + "node_modules/react-virtualized": { + "version": "9.22.5", + "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz", + "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==", + "dependencies": { + "@babel/runtime": "^7.7.2", + "clsx": "^1.0.4", + "dom-helpers": "^5.1.3", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.4" }, "peerDependencies": { - "react": ">=16 || >=17 || >= 18", - "react-dom": ">=16 || >=17 || >= 18" + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" } }, "node_modules/read": { @@ -33030,13 +33101,6 @@ "integrity": "sha512-Ia0sQNrMPXXkqVFt6w6M1n1oKo3NfKs+mvaV811Jwir7vAk9a6PVV9VPYf6X3BU97QiLEmuW3uXH9u87zDFfdw==", "dev": true }, - "node_modules/undici-types": { - "version": "6.19.8", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", - "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "optional": true, - "peer": true - }, "node_modules/union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", diff --git a/samples/react-tree-orgchart/package.json b/samples/react-tree-orgchart/package.json index 6a9ad5afc..e86c38c0b 100644 --- a/samples/react-tree-orgchart/package.json +++ b/samples/react-tree-orgchart/package.json @@ -18,11 +18,11 @@ "@microsoft/sp-office-ui-fabric-core": "1.20.0", "@microsoft/sp-property-pane": "1.20.0", "@microsoft/sp-webpart-base": "1.20.0", - "@nosferatu500/react-sortable-tree": "^4.4.0", "@pnp/graph": "^4.5.0", "@pnp/sp": "^4.5.0", "@pnp/spfx-controls-react": "^4.0.0-beta.6059091", - "@pnp/spfx-property-controls": "^3.18", + "@pnp/spfx-property-controls": "^4.0.0-beta.6059131", + "@types/react-sortable-tree": "^0.3.23", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" diff --git a/samples/react-tree-orgchart/src/services/GraphService.ts b/samples/react-tree-orgchart/src/services/GraphService.ts index 94183581a..72616dab5 100644 --- a/samples/react-tree-orgchart/src/services/GraphService.ts +++ b/samples/react-tree-orgchart/src/services/GraphService.ts @@ -1,8 +1,8 @@ import { WebPartContext } from "@microsoft/sp-webpart-base"; import { getGraph } from "../webparts/treeOrgChart/components/pnpjsConfig"; -import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp"; -import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph"; + +import { graphfi, GraphFI } from "@pnp/graph"; import { Caching } from "@pnp/queryable"; @@ -20,47 +20,46 @@ export default class GraphService { private graph: GraphFI; constructor(private context: WebPartContext) { - this.graph=getGraph(this.context); + this.graph = getGraph(this.context); } public async getUser(upn: string): Promise { - const graphCache = graphSPFx(this.context).using(Caching({ store: "session"})); - return await graphCache.get().users.getById(upn).select(...graphUserSelect).get() as IGraphUser;; + const graphCache = graphfi(this.graph).using(Caching({ store: "session" })); + return await graphCache.users.getById(upn).select(...graphUserSelect)() as IGraphUser; } public async getUserManger(upn: string): Promise { - const graphCache = graphSPFx(this.context).using(Caching({ store: "session"})); - - return await graphCache.get().users.getById(upn).manager.select(...graphUserSelect).get() as IGraphUser; + const graphCache = graphfi(this.graph).using(Caching({ store: "session" })); + + return await graphCache.users.getById(upn).manager.select(...graphUserSelect) as IGraphUser; } - public async getUserDirectReports(upn: string, excludefilter?: boolean, filter?: string) { + public async getUserDirectReports(upn: string, excludefilter?: boolean, filter?: string): Promise { /* odata filter "code": "Request_UnsupportedQuery", "message": "The specified filter to the reference property query is currently not supported.", */ - const graphCache = graphSPFx(this.context).using(); - graphCache.get().users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[]; - const directReports = await graphCache.get().users.getById(upn).directReports.select(...graphUserSelect).get() as IGraphUser[]; - if (filter && filter.length > 0) { + const graphCache = graphfi(this.graph).using(Caching({ store: "session" })); + //graphCache.users.getById(upn).directReports.select(...graphUserSelect) as IGraphUser[]; + const directReports = await graphCache.users.getById(upn).directReports.select(...graphUserSelect)(); + + if (filter && filter.length > 0) { if (excludefilter) { - return directReports.filter((user) => - user.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) === -1 - ); + return directReports.filter((person) => + + person.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) === -1 + ) as IGraphUser[]; } else { - return directReports.filter((user) => - user.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) !== -1 - ); - + return directReports.filter((user) => + user.userPrincipalName?.toLowerCase().indexOf(filter.toLowerCase()) !== -1 + )as IGraphUser[]; + } - } - return directReports; - + return directReports as IGraphUser[]; } - } diff --git a/samples/react-tree-orgchart/src/services/SPServices.ts b/samples/react-tree-orgchart/src/services/SPServices.ts index 82e8a47ff..77b849b2c 100644 --- a/samples/react-tree-orgchart/src/services/SPServices.ts +++ b/samples/react-tree-orgchart/src/services/SPServices.ts @@ -1,16 +1,17 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import {WebPartContext} from "@microsoft/sp-webpart-base"; -import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp"; -import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph"; +import { spfi, SPFI, } from "@pnp/sp"; + import { Caching } from "@pnp/queryable"; import { getSP } from "../webparts/treeOrgChart/components/pnpjsConfig"; export default class SPServices { private sp: SPFI; constructor(private context: WebPartContext) { - this.sp = getSP(); + this.sp = getSP(this.context); } - public async getUserProperties(user: string) { + public async getUserProperties(user: string):Promise { const spCache = spfi(this.sp).using(Caching({ store: "session" })); return await spCache.profiles.getPropertiesFor(user); @@ -20,8 +21,9 @@ export default class SPServices { * async GetUserProfileProperty * user:string */ - public async getUserProfileProperty(user: string, property: string) { - let UserProperty: any = await sp.profiles.getUserProfilePropertyFor( + public async getUserProfileProperty(user: string, property: string): Promise { + const spCache = spfi(this.sp).using(Caching({ store: "session" })); + const UserProperty: string = await spCache.profiles.getUserProfilePropertyFor( user, property ); diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts index c4d17d762..ec6ecaf2b 100644 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/TreeOrgChartWebPart.ts @@ -7,10 +7,10 @@ import * as strings from 'TreeOrgChartWebPartStrings'; import TreeOrgChart, { TreeOrgChartType } from './components/TreeOrgChart'; import { ITreeOrgChartProps } from './components/ITreeOrgChartProps'; import { PropertyFieldNumber } from '@pnp/spfx-property-controls/lib/PropertyFieldNumber'; -import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base'; +import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base'; import { IPropertyPaneConfiguration, PropertyPaneDropdown, PropertyPaneTextField, PropertyPaneToggle} from '@microsoft/sp-property-pane'; -import { getSP } from './components/pnpjsConfig'; +import { getSP,getGraph } from './components/pnpjsConfig'; export interface ITreeOrgChartWebPartProps { title: string; @@ -29,7 +29,7 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart { getSP(this.context); - getgetGraph(this.context); + getGraph(this.context); //Migration old Config Settings if (!this.properties.viewType) { const treetype = this.properties.currentUserTeam ? TreeOrgChartType.MyTeam : TreeOrgChartType.CompanyHierarchy; @@ -136,7 +136,5 @@ export default class TreeOrgChartWebPart extends BaseClientSideWebPart JSX.Element; +} +import styles from "./TreeNode.module.scss"; + +const Tree: React.FC = ({ data, renderNode }) => { + return ( +
+ {data.map((node,index) => ( + + ))} +
+ ); +}; + +export default Tree; \ No newline at end of file diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.module.scss b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.module.scss new file mode 100644 index 000000000..709e3d674 --- /dev/null +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.module.scss @@ -0,0 +1,121 @@ + +.tree { + margin-left: 40px; +} + +.treenode { + + position: relative; + margin-left: 20px; + } + + .treechildren { + position: relative; + display: flex; + flex-direction: row ; + align-items: stretch; + align-content: stretch; + margin-left: 10px; +} +.nodes { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + +} + +.collapseButton, +.expandButton { + appearance: none; + border: none; + z-index: 99; + position: absolute; + border-radius: 100%; + box-shadow: 0 0 0 1px #000; + width: 16px; + height: 16px; + padding: 0; + top: 25px; + left: -25px; + transform: translate(-50%, -50%); + cursor: pointer; + background-size: 24px; + height: 20px; + width: 20px; + } + + .collapseButton { + background: #fff + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48L2c+Cjwvc3ZnPg==') + no-repeat center; + } + + .expandButton { + background: #fff + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjgiIGZpbGw9IiNGRkYiLz48ZyBzdHJva2U9IiM5ODk4OTgiIHN0cm9rZS13aWR0aD0iMS45IiA+PHBhdGggZD0iTTQuNSA5aDkiLz48cGF0aCBkPSJNOSA0LjV2OSIvPjwvZz4KPC9zdmc+') + no-repeat center; + } + + .line{ + + width: 10px; + position: relative; + } + .line::after { + content: ''; + position: absolute; + background-color: black; + width: 1px; + left: 50%; + top: -10px; + height: calc( 100% - 27px ); + } + + .middleStyle, + .fistStyle, + .lastStyle + { + height: 100%; + display: inline-block; + position: absolute; + top:-11px; + left:-15px + + } +/* +.middleStyle::after, +.fistStyle::after { + content: ''; + position: absolute; + background-color: black; + width: 1px; + left: 50%; + top: 0; + height: 65px; + } +*/ + /* +.lastStyle::after { + content: ''; + position: absolute; + background-color: black; + width: 1px; + left: 50%; + top: 0; + height: 35px; + } + +*/ + + .lastStyle::before , + .middleStyle::before, + .fistStyle::before { + content: ''; + position: absolute; + background-color: black; + width: 25px; + left: -10px; + top: 35px; + height: 1px; + } \ No newline at end of file diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.tsx b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.tsx new file mode 100644 index 000000000..2198fd3db --- /dev/null +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/Tree/TreeNode.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; + +interface TreeNodeProps { + node: any; + renderNode: (node: any) => JSX.Element; + first: boolean; + last: boolean; +} + +import styles from "./TreeNode.module.scss"; + +const TreeNode: React.FC = ({ node, renderNode,first,last }) => { + const [isExpanded, setIsExpanded] = React.useState(true); + return ( +
+ {renderNode(node)} + {node.children && node.children.length > 0 && ( setIsExpanded(!isExpanded)}/>)} + {(!last || !first )&& ()} + + {isExpanded && node.children && node.children.length > 0 && ( +
+
+
+ {node.children.map((child: any,index:number) => ( + + ))} +
+
+ )} +
+ ); +}; + +export default TreeNode; \ No newline at end of file diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.module.scss b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.module.scss index 96996cb71..49ac90120 100644 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.module.scss +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.module.scss @@ -6,10 +6,12 @@ margin: 0px auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); } - .treeContainer{ - height: 450px; + + .treeContainer{ + height: auto; overflow: auto; } + .row { @include ms-Grid-row; @include ms-fontColor-white; @@ -75,3 +77,21 @@ } } } + +.treeContents { + position: relative; + height: 50px; + border: solid #bbb 1px; + box-shadow: 0 2px 2px -2px; + padding: 0 5px 0 10px; + border-radius: 2px; + min-width: 230px; + flex: 1 0 auto; + display: flex; + align-items: center; + margin-bottom: 20px; + background-color: white; + margin-bottom: 10px; + padding: 0 10px 0 5px; + width: fit-content; +} \ No newline at end of file diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx index e992ee0a2..f07ac7fda 100755 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/TreeOrgChart.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ // SPFx React-tree-Organization-Chart // Author: João Mendes // Fev 2019 @@ -6,8 +7,6 @@ import * as React from "react"; import styles from "./TreeOrgChart.module.scss"; import { ITreeOrgChartProps } from "./ITreeOrgChartProps"; import { ITreeOrgChartState } from "./ITreeOrgChartState"; -import "react-sortable-tree/style.css"; - @@ -21,8 +20,10 @@ import { SPComponentLoader } from '@microsoft/sp-loader'; import * as strings from 'TreeOrgChartWebPartStrings'; import GraphServices, { IGraphUser } from "../../../services/GraphService"; import GraphService from "../../../services/GraphService"; -import { IconButton, IPersonaSharedProps, Persona, PersonaSize, Spinner, SpinnerSize } from "@fluentui/react"; -import SortableTree from "@nosferatu500/react-sortable-tree"; +import { IconButton, IPersonaSharedProps, Persona, PersonaSize, Spinner, SpinnerSize } from "@fluentui/react"; +import Tree from "./Tree/Tree"; + + @@ -51,15 +52,18 @@ export default class TreeOrgChart extends React.Component< isLoading: true }; } - // - private handleTreeOnChange(treeData:ITreeOrgChartState) { - this.setState({ treeData }); + + /* + private handleTreeOnChange(treeData:ITreeOrgChartState):void { + this.setState({...treeData }); } + */ + public async componentDidUpdate( prevProps: ITreeOrgChartProps, prevState: ITreeOrgChartState - ) { + ): Promise { if ( this.props.viewType !== prevProps.viewType || this.props.maxLevels !== prevProps.maxLevels || @@ -72,25 +76,24 @@ export default class TreeOrgChart extends React.Component< } } - public async componentDidMount() { - const sharedLibrary = await this._loadSPComponentById( + public async componentDidMount(): Promise { + const sharedLibrary = await this._loadSPComponentById( LIVE_PERSONA_COMPONENT_ID ); - const livePersonaCard: any = sharedLibrary.LivePersonaCard; + const livePersonaCard: unknown = sharedLibrary.LivePersonaCard; this.setState({ livePersonaCard: livePersonaCard }); - - - await this.loadOrgchart(); + await this.loadOrgchart(); + return Promise.resolve(); } - private async _loadSPComponentById(componentId: string): Promise { + private async _loadSPComponentById(componentId: string): Promise { try { - const component: any = await SPComponentLoader.loadComponentById( + const component: TComponent = await SPComponentLoader.loadComponentById( componentId ); return component; } catch (error) { - Promise.reject(error); + return Promise.reject(error); } } @@ -114,57 +117,65 @@ export default class TreeOrgChart extends React.Component< /* // Load Organization Chart */ - public async loadOrgchart() { + public loadOrgchart(): void{ - this.setState({ treeData: [], isLoading: true }); - const currentUser = this.props.context.pageContext.user.loginName; - let currentUserProperties = null; - this.treeData = []; - // Test if show only my Team or All Organization Chart - switch (this.props.viewType) { - case TreeOrgChartType.CompanyHierarchy: - const spcurrentlogin = `i:0#.f|membership|${currentUser}`; - currentUserProperties = await this.SPService.getUserProperties( - spcurrentlogin - ); - const treeManagers = await this.buildOrganizationChart( - currentUserProperties - ); - if (treeManagers) this.treeData.push(treeManagers); - break; - case TreeOrgChartType.MyTeam: - const myteam = await this.buildMyTeamOrganizationChart( - currentUser - ); - if (myteam) - this.treeData = [{ ...myteam }]; - break; - case TreeOrgChartType.ShowOtherTeam: - if (this.props.teamLeader && this.props.teamLeader.length > 0) { - - const otherteam = await this.buildTeamLeaderOrganizationChart( - this.props.teamLeader + this.setState({ treeData: [], isLoading: true }, async () => { + const currentUser = this.props.context.pageContext.user.loginName; + let currentUserProperties = undefined; + this.treeData = []; + // Test if show only my Team or All Organization Chart + switch (this.props.viewType) { + case TreeOrgChartType.CompanyHierarchy: { + + const spcurrentlogin = `i:0#.f|membership|${currentUser}`; + currentUserProperties = await this.SPService.getUserProperties( + spcurrentlogin ); - if (otherteam) - this.treeData = [{ ...otherteam }]; + const treeManagers = await this.buildOrganizationChart( + currentUserProperties + ); + if (treeManagers) this.treeData.push(treeManagers); + break; } - break; - } + case TreeOrgChartType.MyTeam: { + const myteam = await this.buildMyTeamOrganizationChart( + currentUser + ); + if (myteam) + this.treeData = [{ ...myteam }]; + break; + } + case TreeOrgChartType.ShowOtherTeam: + if (this.props.teamLeader && this.props.teamLeader.length > 0) { + + const otherteam = await this.buildTeamLeaderOrganizationChart( + this.props.teamLeader + ); + if (otherteam) + this.treeData = [{ ...otherteam }]; + } + break; + } + + this.setState({ treeData: this.treeData, isLoading: false }); - this.setState({ treeData: this.treeData, isLoading: false }); + }); + } /* Build Organization Chart from currentUser @parm : currentUserProperties */ - public async buildOrganizationChart(currentUserProperties: any) { + public async buildOrganizationChart(currentUserProperties: any):Promise { // Get Managers - let treeManagers: ITreeData | null = null; + let treeManagers: ITreeData | undefined = undefined; if ( currentUserProperties.ExtendedManagers && currentUserProperties.ExtendedManagers.length > 0 ) { + //get directManager currentUserProperties.ExtendedManagers.length -1 + //get orgmanager 0 const upn: string | undefined = this.claimUserToUPN(currentUserProperties.ExtendedManagers[0]); if (upn) { treeManagers = await this.getUsers( @@ -201,8 +212,8 @@ export default class TreeOrgChart extends React.Component< public buildDefaultPersonaCard(user: IGraphUser): JSX.Element { - let spUser: IPersonaSharedProps = {}; - let imageInitials: string[] = user.displayName ? user.displayName.split(" ") : []; + const spUser: IPersonaSharedProps = {}; + const imageInitials: string[] = user.displayName ? user.displayName.split(" ") : []; //https://graph.microsoft.com/v1.0/users/${upn}/photo/$value // Persona Card Properties spUser.imageUrl = user.userPrincipalName ? `/_layouts/15/userphoto.aspx?size=L&username=${user.userPrincipalName}` : undefined; @@ -223,7 +234,7 @@ export default class TreeOrgChart extends React.Component< } - private async getUsers(upn: string): Promise { + private async getUsers(upn: string): Promise { const managerUser = await this.GraphService.getUser(upn); const person = this.buildPersonaCard(managerUser); if (managerUser.userPrincipalName) { @@ -237,15 +248,14 @@ export default class TreeOrgChart extends React.Component< } } - private async getDirectReportsUsers(upn?: string, level: number = 1, expanded: boolean = false): Promise { - if (!upn) { return null; } + private async getDirectReportsUsers(upn?: string, level: number = 1, expanded: boolean = false): Promise { + if (!upn) { return undefined; } - const directReportsUser = await this.GraphService.getUserDirectReports(upn,this.props.excludefilter,this.props.filter); //this is already level 1 if (directReportsUser && directReportsUser.length > 0) { return await Promise.all(directReportsUser.map(async (dr) => { - const children = ((level +1) <= this.props.maxLevels) ? await this.getDirectReportsUsers(dr.userPrincipalName, level + 1) : null; + const children = ((level +1) <= this.props.maxLevels) ? await this.getDirectReportsUsers(dr.userPrincipalName, level + 1) : undefined; return ({ title: this.buildPersonaCard(dr), expanded: expanded, @@ -254,13 +264,13 @@ export default class TreeOrgChart extends React.Component< })); } - return null; + return undefined; } //buildTeamLeaderOrganizationChart - private async buildTeamLeaderOrganizationChart(upn: string): Promise { + private async buildTeamLeaderOrganizationChart(upn: string): Promise { const tmpupn: string | undefined = this.claimUserToUPN(upn); @@ -271,7 +281,7 @@ export default class TreeOrgChart extends React.Component< Build My Team Organization Chart @parm: currentUserProperties */ - private async buildMyTeamOrganizationChart(upn: string): Promise { + private async buildMyTeamOrganizationChart(upn: string): Promise { const mymanager = await this.GraphService.getUserManger(upn); if (mymanager && mymanager.userPrincipalName) { @@ -289,11 +299,7 @@ export default class TreeOrgChart extends React.Component< selectedTeamleader = this.props.teamLeader; } } - const peoplePickerContext: IPeoplePickerContext = { - absoluteUrl: this.props.context.pageContext.web.absoluteUrl, - msGraphClientFactory: this.props.context.msGraphClientFactory, - spHttpClient: this.props.context.spHttpClient - }; + return (
{showEditOther && (
)} - {this.state.isLoading ? ( + {this.state.isLoading && ( - ) : null} + />)}
- { - return !this.props.detailBehavoir ? - ({ - buttons: [ - { - window.open( - `https://eur.delve.office.com/?p=${rowInfo.node.title.props.tertiaryText}&v=work` - ); - }} - /> - ] - }) : undefined; - } - } - /> + +
); } + private renderNode(node: any):JSX.Element{ + console.log(node); + return (
+
+
+ {node.title} +
+ {this.props.detailBehavoir &&( { + window.open( + `https://eur.delve.office.com/?p=${node.title.props.tertiaryText}&v=work` + ); + }} + />)} +
+
); + } } diff --git a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/pnpjsConfig.ts b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/pnpjsConfig.ts index 8a221576d..cf7b7da93 100644 --- a/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/pnpjsConfig.ts +++ b/samples/react-tree-orgchart/src/webparts/treeOrgChart/components/pnpjsConfig.ts @@ -6,6 +6,7 @@ import { WebPartContext } from "@microsoft/sp-webpart-base"; import { ISPFXContext, spfi, SPFI, SPFx as spSPFx } from "@pnp/sp"; import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph"; import "@pnp/sp/profiles"; +import "@pnp/graph/users"; var _sp: SPFI;