Merge pull request #2064 from microsoftgraph/merge/main-to-next

chore: merge main to next

Author: gavinbarron

.devcontainer/devcontainer.json

@@ -0,0 +1,17 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "streetsidesoftware.code-spell-checker",
+        "nicolasparada.innerhtml",
+        "runem.lit-plugin",
+        "esbenp.prettier-vscode",
+        "rebornix.project-snippets",
+        "ms-vscode.vscode-typescript-tslint-plugin",
+        "mutantdino.resourcemonitor"
+      ]
+    }
+  },
+  "forwardPorts": [3000, 6006]
+}

.github/workflows/push-release.yml

@@ -75,6 +75,14 @@ jobs:
       - name: Attach mgt-spfx solution to GitHub release
         run: node scripts/uploadSpfxSolution.js ${{secrets.GITHUB_TOKEN}} ${{needs.version.outputs.package-version}}
 
+      - name: Notify TeamsFx Repo
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          token: ${{ secrets.TEAMSFX_REPO_ACCESS_TOKEN }}
+          repository: OfficeDev/TeamsFx
+          event-type: graph-toolkit-released
+          client-payload: '{"version": "${{ needs.version.outputs.package-version }}"}'
+
   storybook:
     runs-on: ubuntu-latest
 

package.json

@@ -160,8 +160,6 @@
   },
   "resolutions": {
     "@microsoft/microsoft-graph-client": "3.0.2",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
     "responselike": "2.0.0"
   }
 }

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -226,9 +226,16 @@ mgt-people-picker .root {
           top: 0px;
           border-radius: 12px;
           line-height: 24px;
+
           &:hover {
             color: $commblue_primary;
           }
+          &:focus,
+          &:focus-visible {
+            outline-offset: -4px;
+            outline-width: 1px;
+            outline-style: solid;
+          }
         }
       }
     }

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -103,6 +103,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return styles;
   }
 
+  /**
+   * The strings to be used for localizing the component.
+   *
+   * @readonly
+   * @protected
+   * @memberof MgtPeoplePicker
+   */
   protected get strings() {
     return strings;
   }
@@ -241,7 +248,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   }
 
   /**
-   * User type to search for.
+   * The type of user to search for. Default is any.
    *
    * @readonly
    * @type {UserType}
@@ -275,7 +282,15 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     attribute: 'transitive-search',
     type: Boolean
   })
-  public transitiveSearch: boolean;
+  public get transitiveSearch(): boolean {
+    return this._transitiveSearch;
+  }
+  public set transitiveSearch(value: boolean) {
+    if (this.transitiveSearch !== value) {
+      this._transitiveSearch = value;
+      this.requestStateUpdate(true);
+    }
+  }
 
   /**
    * containing object of IDynamicPerson.
@@ -285,7 +300,15 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     attribute: 'people',
     type: Object
   })
-  public people: IDynamicPerson[];
+  public get people(): IDynamicPerson[] {
+    return this._people;
+  }
+  public set people(value: IDynamicPerson[]) {
+    if (!arraysAreEqual(this._people, value)) {
+      this._people = value;
+      this.requestStateUpdate(true);
+    }
+  }
 
   /**
    * determining how many people to show in list.
@@ -295,7 +318,15 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     attribute: 'show-max',
     type: Number
   })
-  public showMax: number;
+  public get showMax(): number {
+    return this._showMax;
+  }
+  public set showMax(value: number) {
+    if (value !== this._showMax) {
+      this._showMax = value;
+      this.requestStateUpdate(true);
+    }
+  }
 
   /**
    * Sets whether the person image should be fetched
@@ -311,17 +342,25 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   public disableImages: boolean;
 
   /**
-   *  array of user picked people.
+   * array of user picked people.
    * @type {IDynamicPerson[]}
    */
   @property({
     attribute: 'selected-people',
     type: Array
   })
-  public selectedPeople: IDynamicPerson[];
+  public get selectedPeople(): IDynamicPerson[] {
+    return this._selectedPeople;
+  }
+  public set selectedPeople(value: IDynamicPerson[]) {
+    if (!value) value = [];
+    if (!arraysAreEqual(this._selectedPeople, value)) {
+      this._selectedPeople = value;
+    }
+  }
 
   /**
-   * array of people to be selected upon intialization
+   * array of people to be selected upon initialization
    *
    * @type {string[]}
    * @memberof MgtPeoplePicker
@@ -333,10 +372,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     },
     type: String
   })
-  public defaultSelectedUserIds: string[];
+  public get defaultSelectedUserIds(): string[] {
+    return this._defaultSelectedUserIds;
+  }
+  public set defaultSelectedUserIds(value) {
+    if (!arraysAreEqual(this._defaultSelectedUserIds, value)) {
+      this._defaultSelectedUserIds = value;
+      this.requestStateUpdate(true);
+    }
+  }
 
   /**
-   * array of groups to be selected upon intialization
+   * array of groups to be selected upon initialization
    *
    * @type {string[]}
    * @memberof MgtPeoplePicker
@@ -348,7 +395,15 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     },
     type: String
   })
-  public defaultSelectedGroupIds: string[];
+  public get defaultSelectedGroupIds(): string[] {
+    return this._defaultSelectedGroupIds;
+  }
+  public set defaultSelectedGroupIds(value) {
+    if (!arraysAreEqual(this._defaultSelectedGroupIds, value)) {
+      this._defaultSelectedGroupIds = value;
+      this.requestStateUpdate(true);
+    }
+  }
 
   /**
    * Placeholder text.
@@ -398,7 +453,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public selectionMode: string;
 
-  private _userIds: string[];
   /**
    * Array of the only users to be searched.
    *
@@ -495,8 +549,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   protected userInput: string;
 
   // if search is still loading don't load "people not found" state
-  @property({ attribute: false }) private _showLoading: boolean;
+  @state() private _showLoading: boolean;
 
+  private _userIds: string[];
   private _groupId: string;
   private _groupIds: string[];
   private _type: PersonType = PersonType.person;
@@ -505,6 +560,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private _userFilters: string;
   private _groupFilters: string;
   private _peopleFilters: string;
+  private _defaultSelectedGroupIds: string[];
+  private _defaultSelectedUserIds: string[];
+  private _selectedPeople: IDynamicPerson[] = [];
+  private _showMax: number;
+  private _people: IDynamicPerson[];
+  private _transitiveSearch: boolean;
+
   private defaultPeople: IDynamicPerson[];
 
   // tracking of user arrow key input for selection
@@ -688,7 +750,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   protected renderInput(): TemplateResult {
-    const hasSelectedPeople = !!this.selectedPeople.length;
+    const hasSelectedPeople = this.selectedPeople?.length > 0;
 
     const placeholder = !this.disabled
       ? this.placeholder
@@ -729,6 +791,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
            @focus="${this.gainedFocus}"
            @keydown="${this.onUserKeyDown}"
            @keyup="${this.onUserKeyUp}"
+           @input="${this.onUserInput}"
            @blur=${this.lostFocus}
            ?disabled=${this.disabled}
          />
@@ -1071,7 +1134,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       }
 
       if (
-        (this.defaultSelectedUserIds || this.defaultSelectedGroupIds) &&
+        (this.defaultSelectedUserIds?.length > 0 || this.defaultSelectedGroupIds?.length > 0) &&
         !this.selectedPeople.length &&
         !this.defaultSelectedUsers
       ) {
@@ -1168,7 +1231,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                   }
                 }
               } catch (e) {
-                // nop
+                // no-op
               }
             }
           }
@@ -1184,7 +1247,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                   this.groupType,
                   this.userFilters
                 );
-              } catch (_) {}
+              } catch (_) {
+                // no-op
+              }
             } else {
               let groups = [];
               try {
@@ -1269,7 +1334,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.fireCustomEvent('selectionChanged', this.selectedPeople);
     if (this.selectedPeople.length <= 0) this.showSearchIcon();
 
-    this.input.focus();
+    this.input?.focus();
   }
 
   /**
@@ -1365,7 +1430,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     const isPaste = (event.ctrlKey || event.metaKey) && event.key === 'v';
     const isCmdOrCtrlKey = ['ControlLeft', 'ControlRight'].includes(event.code) || event.ctrlKey || event.metaKey;
     const isArrowKey = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(event.code);
-    const input = event.target as HTMLInputElement;
 
     if ((!isPaste && isCmdOrCtrlKey) || isArrowKey) {
       if (isCmdOrCtrlKey || ['ArrowLeft', 'ArrowRight'].includes(event.code)) {
@@ -1426,17 +1490,22 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       }
       return;
     }
+  }
 
+  private onUserInput(event: InputEvent) {
+    const input = event.target as HTMLInputElement;
     this.userInput = input.value;
-    const validEmail = isValidEmail(this.userInput);
-    if (validEmail && this.allowAnyEmail) {
-      if (this._setAnyEmail) {
-        this.handleAnyEmail();
+    if (this.userInput) {
+      const validEmail = isValidEmail(this.userInput);
+      if (validEmail && this.allowAnyEmail) {
+        if (this._setAnyEmail) {
+          this.handleAnyEmail();
+        }
+      } else {
+        this.handleUserSearch();
       }
-    } else {
-      this.handleUserSearch();
+      this._setAnyEmail = false;
     }
-    this._setAnyEmail = false;
   }
 
   private handleAnyEmail() {

packages/mgt/src/bundle/mgt-loader.js

@@ -8,6 +8,19 @@
 (function () {
   'use strict';
 
+  var loaderScript = document.querySelector('script[src*="mgt-loader.js"]');
+  if (
+    loaderScript &&
+    loaderScript.src.indexOf('unpkg.com/@microsoft/mgt') > 0 &&
+    loaderScript.src.indexOf('/mgt@') === -1
+  ) {
+    console.warn(
+      'You have loaded the mgt-loader script from unpkg without using a semver range or tag.\n',
+      'This could break your application when new major versions are released\n',
+      'Please update your application to use a mgt-loader with a semver range tag e.g. https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js'
+    );
+  }
+
   var rootPath = getScriptPath();
 
   // decide es5 or es6

samples/angular-app/.gitignore

@@ -41,6 +41,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+package-lock.json
 
 # System Files
 .DS_Store