Merge pull request #1998 from pnp/1-21-1

add SPFx 1.21.1 support

Author: AJIXuMuK

.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.20.0",
+    "version": "1.21.1",
     "libraryName": "sp-dev-fx-controls-react",
     "libraryId": "92b1e52c-a5fa-490a-bcf4-76080f39442c",
     "environment": "spo",

package-lock.json

@@ -2,7 +2,9 @@
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
   "version": "3.22.0",
-  "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0",
+  "engines": {
+    "node": ">=22.14.0 < 23.0.0"
+  },
   "scripts": {
     "build": "gulp build",
     "clean": "gulp clean",
@@ -37,23 +39,23 @@
     "@fluentui/theme": "^2.6.6",
     "@iconify/react": "^4.1.1",
     "@juggle/resize-observer": "3.4.0",
-    "@microsoft/decorators": "1.20.0",
+    "@microsoft/decorators": "1.21.1",
     "@microsoft/mgt-react": "3.1.3",
     "@microsoft/mgt-spfx": "3.1.3",
-    "@microsoft/sp-adaptive-card-extension-base": "1.20.0",
-    "@microsoft/sp-application-base": "1.20.0",
-    "@microsoft/sp-component-base": "1.20.0",
-    "@microsoft/sp-core-library": "1.20.0",
-    "@microsoft/sp-dialog": "1.20.0",
-    "@microsoft/sp-extension-base": "1.20.0",
-    "@microsoft/sp-http": "1.20.0",
-    "@microsoft/sp-listview-extensibility": "1.20.0",
-    "@microsoft/sp-loader": "1.20.0",
-    "@microsoft/sp-lodash-subset": "1.20.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
-    "@microsoft/sp-page-context": "1.20.0",
-    "@microsoft/sp-property-pane": "1.20.0",
-    "@microsoft/sp-webpart-base": "1.20.0",
+    "@microsoft/sp-adaptive-card-extension-base": "1.21.1",
+    "@microsoft/sp-application-base": "1.21.1",
+    "@microsoft/sp-component-base": "1.21.1",
+    "@microsoft/sp-core-library": "1.21.1",
+    "@microsoft/sp-dialog": "1.21.1",
+    "@microsoft/sp-extension-base": "1.21.1",
+    "@microsoft/sp-http": "1.21.1",
+    "@microsoft/sp-listview-extensibility": "1.21.1",
+    "@microsoft/sp-loader": "1.21.1",
+    "@microsoft/sp-lodash-subset": "1.21.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.21.1",
+    "@microsoft/sp-page-context": "1.21.1",
+    "@microsoft/sp-property-pane": "1.21.1",
+    "@microsoft/sp-webpart-base": "1.21.1",
     "@monaco-editor/loader": "^1.3.1",
     "@nuvemerudita/react-controls": "1.0.0",
     "@pnp/common": "2.5.0",
@@ -88,12 +90,12 @@
     "swiper": "^8.2.6"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.20.2",
-    "@microsoft/eslint-plugin-spfx": "1.20.2",
+    "@microsoft/eslint-config-spfx": "1.21.1",
+    "@microsoft/eslint-plugin-spfx": "1.21.1",
     "@microsoft/microsoft-graph-types": "^2.1.0",
-    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
-    "@microsoft/sp-build-web": "1.20.2",
-    "@microsoft/sp-module-interfaces": "1.20.2",
+    "@microsoft/rush-stack-compiler-5.3": "0.1.0",
+    "@microsoft/sp-build-web": "1.21.1",
+    "@microsoft/sp-module-interfaces": "1.21.1",
     "@rushstack/eslint-config": "4.0.1",
     "@types/chart.js": "2.7.40",
     "@types/enzyme": "^2.8.12",
@@ -114,7 +116,7 @@
     "chai": "^4.3.4",
     "codecov": "3.8.3",
     "enzyme": "^3.11.0",
-    "eslint": "8.57.0",
+    "eslint": "8.57.1",
     "eslint-plugin-react-hooks": "4.3.0",
     "gulp": "4.0.2",
     "husky": "^8.0.3",
@@ -130,7 +132,7 @@
     "spfx-fast-serve-helpers": "1.20.2",
     "ts-jest": "^29.1.1",
     "tslib": "2.3.1",
-    "typescript": "4.7.4",
+    "typescript": "5.3.3",
     "webpack-bundle-analyzer": "^4.1.0"
   },
   "repository": {

package.json

@@ -994,7 +994,7 @@ export class DynamicFormBase extends React.Component<
       // Fetch additional information about fields from SharePoint
       // (Number fields for min and max values, and fields with validation)
       const additionalInfo = await this._spService.getAdditionalListFormFieldInfo(listId, this.webURL);
-      const numberFields = additionalInfo.filter((f) => f.TypeAsString === "Number" || f.TypeAsString === "Currency");
+      const numberFields = additionalInfo?.filter((f) => f.TypeAsString === "Number" || f.TypeAsString === "Currency");
 
       // Build a dictionary of validation formulas and messages
       const validationFormulas: Record<string, Pick<ISPField, "ValidationFormula" | "ValidationMessage">> = additionalInfo.reduce((prev, cur) => {

src/controls/dynamicForm/DynamicForm.tsx

@@ -183,22 +183,22 @@ describe('<FileTypeIcon />', () => {
   });
 
   it('Image icon size test with unkown size', (done) => {
-    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} size={8} application={ApplicationType.Word} />);
+    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} size={ImageSize.small} application={ApplicationType.Word} />);
     expect(fileTypeIcon.find('div.ms-BrandIcon--icon16')).to.have.length(1);
     expect(fileTypeIcon.find('i')).to.have.length(0);
     done();
   });
 
   it('Image icon size test with unkown size for generic icon', (done) => {
-    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} size={8} />);
+    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} size={ImageSize.small} />);
     expect(fileTypeIcon.find('div img')).to.have.length(1);
     expect(fileTypeIcon.find('div.ms-BrandIcon--icon16')).to.have.length(0);
     expect(fileTypeIcon.find('i')).to.have.length(0);
     done();
   });
 
   it('Image icon test with unkown application', (done) => {
-    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} application={90} />);
+    fileTypeIcon = mount(<FileTypeIcon type={IconType.image} application={90 as unknown as ApplicationType} />);
     expect(fileTypeIcon.find('div img')).to.have.length(1);
     expect(fileTypeIcon.find('div.ms-BrandIcon--icon16')).to.have.length(0);
     expect(fileTypeIcon.find('i')).to.have.length(0);

src/controls/fileTypeIcon/FileTypeIcon.test.tsx

@@ -251,6 +251,10 @@ export function TaxonomyTree(
 
   React.useEffect(() => {
     let termRootName = "";
+    if (!props.anchorTermInfo && !props.termSetInfo) {
+      return;
+    }
+    
     if (props.anchorTermInfo) {
       let anchorTermNames = props.anchorTermInfo.labels.filter(
         (name) => name.languageTag === props.languageTag && name.isDefault
@@ -264,15 +268,15 @@ export function TaxonomyTree(
       }
       termRootName = anchorTermNames[0].name;
     } else {
-      let termSetNames = props.termSetInfo.localizedNames.filter(
+      let termSetNames = props.termSetInfo?.localizedNames.filter(
         (name) => name.languageTag === props.languageTag
-      );
+      ) || [];
       if (termSetNames.length === 0) {
         termSetNames = props.termSetInfo.localizedNames.filter(
           (name) => name.languageTag === props.termStoreInfo.defaultLanguageTag
-        );
+        ) || [];
       }
-      termRootName = termSetNames[0].name;
+      termRootName = termSetNames[0].name || '';
     }
     const rootGroup: IGroup = {
       name: termRootName,
@@ -905,6 +909,10 @@ export function TaxonomyTree(
     return ev.which === getRTLSafeKeyCode(KeyCodes.right);
   };
 
+  if (!props.termSetInfo && !props.termStoreInfo) {
+    return <></>;
+  }
+
   return (
     <div>
       <GroupedList

src/controls/modernTaxonomyPicker/taxonomyTree/TaxonomyTree.tsx

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-5.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,