update to 1.14.0

samples/react-page-sections-navigation/.gitignore

@@ -8,6 +8,7 @@ node_modules
 
 # Build generated files
 dist
+release
 lib
 solution
 temp

samples/react-page-sections-navigation/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

samples/react-page-sections-navigation/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": false,
     "environment": "spo",
-    "version": "1.7.1",
+    "version": "1.14.0",
     "libraryName": "page-sections-navigation",
     "libraryId": "bf7b299c-3bac-47cc-9f44-43eb180335d8",
     "packageManager": "npm",

samples/react-page-sections-navigation/README.md

@@ -33,6 +33,7 @@ Version|Date|Comments
 -------|----|--------
 1.0|February 27, 2019|Initial release
 1.1|March 22, 2019| Update to SPFx 1.8, additional theme, comments
+1.2|April 25, 2022 | Update to SPFx 1.14.0
 
 ## Minimal Path to Awesome
 

samples/react-page-sections-navigation/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/react-page-sections-navigation/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "page-sections-navigation",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-page-sections-navigation/config/package-solution.json

@@ -3,9 +3,35 @@
   "solution": {
     "name": "page-sections-navigation-client-side-solution",
     "id": "bf7b299c-3bac-47cc-9f44-43eb180335d8",
-    "version": "1.0.0.4",
+    "version": "1.2.0.0",
     "includeClientSideAssets": true,
-    "skipFeatureDeployment": true
+    "skipFeatureDeployment": true,
+    "developer": {
+      "name": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": "Undefined-1.14.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "page-sections-navigation description"
+      },
+      "longDescription": {
+        "default": "page-sections-navigation description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "page-sections-navigation Feature",
+        "description": "The feature that activates elements of the page-sections-navigation solution.",
+        "id": "50df5ee0-812b-4221-8650-e4d769f2f755",
+        "version": "1.2.0.0"
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/page-sections-navigation.sppkg"

samples/react-page-sections-navigation/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-page-sections-navigation/gulpfile.js

@@ -4,4 +4,13 @@ const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
+
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
+
 build.initialize(gulp);

samples/react-page-sections-navigation/package.json

@@ -1,41 +1,39 @@
 {
   "name": "page-sections-navigation",
-  "version": "0.0.1",
+  "version": "1.2.0",
   "private": true,
-  "engines": {
+  "engines": "undefined",
-    "node": ">=0.10.0"
+  "main": "lib/index.js",
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.8.0",
+    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-lodash-subset": "1.8.0",
+    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.8.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-webpart-base": "1.8.0",
+    "@microsoft/sp-property-pane": "1.14.0",
-    "@types/es6-promise": "0.0.33",
+    "@microsoft/sp-webpart-base": "1.14.0",
-    "@types/react": "16.4.2",
+    "office-ui-fabric-react": "7.174.1",
-    "@types/react-dom": "16.0.5",
+    "react": "16.13.1",
-    "@types/webpack-env": "1.13.1",
+    "react-dom": "16.13.1",
-    "react": "16.3.2",
-    "react-dom": "16.3.2",
     "scrollparent": "^2.0.1",
     "smoothscroll-polyfill": "^0.4.3"
   },
   "resolutions": {
-    "@types/react": "16.4.2"
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.8.0",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@microsoft/sp-tslint-rules": "1.8.0",
+    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.8.0",
+    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-webpart-workbench": "1.8.0",
+    "@microsoft/sp-tslint-rules": "1.14.0",
-    "@microsoft/rush-stack-compiler-3.3": "0.1.7",
+    "@types/es6-promise": "0.0.33",
-    "gulp": "~3.9.1",
+    "@types/react": "16.9.51",
-    "@types/chai": "3.4.34",
+    "@types/react-dom": "16.9.8",
-    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.1",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "4.0.2"
   }
 }

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigation/PageSectionsNavigationWebPart.manifest.json

@@ -13,6 +13,7 @@
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
   "supportsFullBleed": true,
+  "supportedHosts": ["SharePointWebPart"],
 
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigation/PageSectionsNavigationWebPart.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, DisplayMode } from '@microsoft/sp-core-library';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 import {
-  BaseClientSideWebPart,
   IPropertyPaneConfiguration,
   PropertyPaneDropdown,
   PropertyPaneChoiceGroup,
   PropertyPaneCheckbox,
   PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
+} from '@microsoft/sp-property-pane';
 //import { SPComponentLoader } from '@microsoft/sp-loader';
 import * as strings from 'PageSectionsNavigationStrings';
 import { PageSectionsNavigation, IPageSectionsNavigationProps } from './components/PageSectionsNavigation';

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigation/components/PageSectionsNavigation.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .psnLayer {
   position: sticky;

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigation/components/PageSectionsNavigation.tsx

@@ -94,12 +94,12 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
 
     const navItems: JSX.Element[] = this.props.anchors.map((anchor) => {
       return <li className={css(styles.navItem, 'psn-navItem')}>
-        <a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onClick.bind(this, anchor)}>{anchor.title}</a>
+        <a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={() => { this._onClick(anchor); }}>{anchor.title}</a>
       </li>;
     });
     if (homeItem) {
       navItems.unshift(<li className={css(styles.navItem, 'psn-navItem')}>
-        <a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onHomeClick.bind(this)}>{homeItem}</a>
+        <a className={css(styles.navItemLink, 'psn-navItemLink')} onClick={this._onHomeClick}>{homeItem}</a>
       </li>);
     }
 
@@ -128,7 +128,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
     );
   }
 
-  private _onHomeClick() {
+  private _onHomeClick = () => {
     // home click
     if (!this._scrollableParent) {
       this._initScrollParent();
@@ -139,7 +139,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
     });
   }
 
-  private _onClick(anchor: IAnchorItem, index: number) {
+  private _onClick = (anchor: IAnchorItem) => {
 
     // click on one of anchor's nav items
     if (anchor.domElement) {
@@ -154,7 +154,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
    * creates layer element to host the navigation outside of normal DOM hierarchy
    * @param position - current position value
    */
-  private _getLayerElement(position?: NavPosition): HTMLElement | undefined {
+  private _getLayerElement = (position?: NavPosition): HTMLElement | undefined => {
     const host = this._getHost(position);
 
     if (host !== this._host) {
@@ -180,7 +180,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
     return this._layerElement;
   }
 
-  private _removeLayerElement(): void {
+  private _removeLayerElement = (): void => {
     if (this._layerElement) {
 
       const parentNode = this._layerElement.parentNode;
@@ -195,7 +195,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
    * gets host DOM element based on position property
    * @param position - current position value
    */
-  private _getHost(position?: NavPosition): Node | undefined {
+  private _getHost = (position?: NavPosition): Node | undefined => {
 
     const navPos = position || this.props.position;
 
@@ -216,7 +216,7 @@ export class PageSectionsNavigation extends React.Component<IPageSectionsNavigat
     return hostNode;
   }
 
-  private _initScrollParent() {
+  private _initScrollParent = () => {
     if (this._sectionHostSpanRef.current) {
       this._scrollableParent = Scrollparent(this._sectionHostSpanRef.current);
     }

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigationAnchor/PageSectionsNavigationAnchorWebPart.manifest.json

@@ -13,6 +13,7 @@
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
   "supportsFullBleed": true,
+  "supportedHosts": ["SharePointWebPart"],
 
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other

samples/react-page-sections-navigation/src/webparts/pageSectionsNavigationAnchor/PageSectionsNavigationAnchorWebPart.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 import {
-  BaseClientSideWebPart,
   IPropertyPaneConfiguration,
   PropertyPaneCheckbox
-} from '@microsoft/sp-webpart-base';
+} from '@microsoft/sp-property-pane';
 
 import * as strings from 'PageSectionsNavigationStrings';
 import {

samples/react-page-sections-navigation/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -11,25 +11,26 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": []
-    "node_modules",
-    "lib"
-  ]
 }

samples/react-page-sections-navigation/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,