People-picker any email support (#1069)

* WIP: add any email

* WIP: fire a warning if an any mail submit btn is pressed but allow-any-mail=false

* Conditional allowAnyEmail is handled within the block

* Change the email validation from validatorjs

Initial usage of validatorjs required adding types and in some builds it threw an error that isMail function is not exported. Using a custom email validator function should fix this and remove the need to use validatorjs.

* Remove the anyEmail string logged in console.warn

* Additional review changes

* Add the story for people-picker allow-any-email attr

* Update stories/components/peoplePicker.stories.js

* Remove setting the id value in handleAnyEmail

* Use .displayName property when id is missing

Co-authored-by: Nikola Metulev <[email protected]>

Author: musale

package.json

@@ -16,6 +16,7 @@
     "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope @microsoft/*",
     "build:mgt": "cd ./packages/mgt && npm run build",
     "build:mgt-element": "cd ./packages/mgt-element && npm run build",
+    "build:mgt-components": "cd ./packages/mgt-components && npm run build",
     "build:mgt-react": "lerna run build --scope @microsoft/mgt-react",
     "bundle": "cd ./packages/mgt && npm run bundle",
     "bootstrap": "lerna bootstrap --useWorkspaces",

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

@@ -16,7 +16,7 @@ import { IDynamicPerson, ViewType } from '../../graph/types';
 import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import '../sub-components/mgt-spinner/mgt-spinner';
-import { debounce } from '../../utils/Utils';
+import { debounce, isValidEmail } from '../../utils/Utils';
 import { MgtPerson, PersonViewType } from '../mgt-person/mgt-person';
 import { PersonCardInteraction } from '../PersonCardInteraction';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
@@ -299,6 +299,18 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public disabled: boolean;
 
+  /**
+   * Determines if a user can enter an email without selecting a person
+   *
+   * @type {boolean}
+   * @memberof MgtPeoplePicker
+   */
+  @property({
+    attribute: 'allow-any-email',
+    type: Boolean
+  })
+  public allowAnyEmail: boolean;
+
   /**
    * Determines whether component allows multiple or single selection of people
    *
@@ -361,6 +373,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.showMax = 6;
 
     this.disabled = false;
+    this.allowAnyEmail = false;
   }
 
   /**
@@ -520,15 +533,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (!this.selectedPeople || !this.selectedPeople.length) {
       return null;
     }
-
     return html`
       ${selectedPeople.slice(0, selectedPeople.length).map(
         person =>
           html`
             <div class="selected-list__person-wrapper">
               ${
-                this.renderTemplate('selected-person', { person }, `selected-${person.id}`) ||
-                this.renderSelectedPerson(person)
+                this.renderTemplate(
+                  'selected-person',
+                  { person },
+                  `selected-${person.id ? person.id : person.displayName}`
+                ) || this.renderSelectedPerson(person)
               }
 
               <div class="selected-list__person-wrapper__overflow">
@@ -849,6 +864,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   protected removePerson(person: IDynamicPerson, e: MouseEvent): void {
     e.stopPropagation();
     const filteredPersonArr = this.selectedPeople.filter(p => {
+      if (!person.id && p.displayName) {
+        return p.displayName !== person.displayName;
+      }
       return p.id !== person.id;
     });
     this.selectedPeople = filteredPersonArr;
@@ -865,7 +883,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (person) {
       this.clearInput();
       const duplicatePeople = this.selectedPeople.filter(p => {
-        if (!person.id) {
+        if (!person.id && p.displayName) {
           return p.displayName === person.displayName;
         }
         return p.id === person.id;
@@ -964,10 +982,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       // keyCodes capture: down arrow (40), right arrow (39), up arrow (38) and left arrow (37)
       return;
     }
-    if (event.keyCode === 9 && !this.flyout.isOpen) {
+
+    if (event.code === 'Tab' && !this.flyout.isOpen) {
       // keyCodes capture: tab (9)
-      this.gainedFocus();
+      if (this.allowAnyEmail) {
+        this.gainedFocus();
+      }
     }
+
     if (event.shiftKey) {
       this.gainedFocus();
     }
@@ -984,9 +1006,35 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       this.hideFlyout();
       // fire selected people changed event
       this.fireCustomEvent('selectionChanged', this.selectedPeople);
+    } else if (event.code === 'Comma' || event.code === 'Semicolon') {
+      if (this.allowAnyEmail) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return;
     } else {
       this.userInput = input.value;
-      this.handleUserSearch();
+      const validEmail = isValidEmail(this.userInput);
+      if (!validEmail) {
+        this.handleUserSearch();
+      }
+    }
+  }
+
+  private handleAnyEmail() {
+    this._showLoading = false;
+    this._arrowSelectionCount = 0;
+    if (isValidEmail(this.userInput)) {
+      const anyMailUser = {
+        mail: this.userInput,
+        displayName: this.userInput
+      };
+      this.addPerson(anyMailUser);
+    }
+    this.hideFlyout();
+    if (this.input) {
+      this.input.focus();
+      this._isFocused = true;
     }
   }
 
@@ -1044,17 +1092,33 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         event.preventDefault();
       }
     }
-    if (event.keyCode === 9 || event.keyCode === 13) {
+
+    const input = event.target as HTMLInputElement;
+    if (event.code === 'Tab' || event.code === 'Enter') {
       if (!event.shiftKey && this._foundPeople) {
         // keyCodes capture: tab (9) and enter (13)
+        event.preventDefault();
+        event.stopPropagation();
         if (this._foundPeople.length) {
           this.fireCustomEvent('blur');
-          event.preventDefault();
         }
-        this.addPerson(this._foundPeople[this._arrowSelectionCount]);
+
+        const foundPerson = this._foundPeople[this._arrowSelectionCount];
+        if (foundPerson) {
+          this.addPerson(foundPerson);
+        } else if (this.allowAnyEmail) {
+          this.handleAnyEmail();
+        }
       }
       this.hideFlyout();
       (event.target as HTMLInputElement).value = '';
+    } else if (event.code === 'Comma' || event.code === 'Semicolon') {
+      if (this.allowAnyEmail) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.userInput = input.value;
+        this.handleAnyEmail();
+      }
     }
   }
 

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

@@ -309,7 +309,7 @@ export class MgtPeople extends MgtTemplatedComponent {
       <ul class="people-list">
         ${repeat(
           maxPeople,
-          p => p.id,
+          p => (p.id ? p.id : p.displayName),
           p => html`
             <li class="people-person">
               ${this.renderPerson(p)}

packages/mgt-components/src/utils/Utils.ts

@@ -234,3 +234,14 @@ export function extractEmailAddress(emailString: string): string {
     return emailString.match(/([a-zA-Z0-9+._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9_-]+)/gi).toString();
   } else return emailString;
 }
+
+/**
+ * checks if the email string is a valid email
+ *
+ * @param {string} emailString
+ * @returns {boolean}
+ */
+export function isValidEmail(emailString: string): boolean {
+  const emailRx: RegExp = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
+  return emailRx.test(emailString);
+}

packages/mgt-react/src/generated/react.ts

@@ -103,6 +103,7 @@ export type PeoplePickerProps = {
 	selectionMode?: string;
 	showMax?: number;
 	disabled?: boolean;
+	allowAnyEmail?: boolean;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	selectionChanged?: (e: Event) => void;

samples/react-app/src/App.tsx

@@ -59,23 +59,26 @@ const MyEvent = (props: MgtTemplateProps) => {
 const MyTemplate = (props: MgtTemplateProps) => {
   const me = props.dataContext as MicrosoftGraph.User;
 
-  return <div>hello {me.displayName}</div>
-}
+  return <div>hello {me.displayName}</div>;
+};
 
 const MyMessage = (props: MgtTemplateProps) => {
   const message = props.dataContext as MicrosoftGraph.Message;
 
-  return <div>
-    <b>Subject:</b>{message.subject}
+  return (
     <div>
-    <b>From:</b>
-    <Person
-      personQuery={message.from?.emailAddress?.address || ""}
-      fallbackDetails={{mail: message.from?.emailAddress?.address, displayName: message.from?.emailAddress?.name}}
-      view={PersonViewType.oneline}>
-      </Person>
+      <b>Subject:</b>
+      {message.subject}
+      <div>
+        <b>From:</b>
+        <Person
+          personQuery={message.from?.emailAddress?.address || ''}
+          fallbackDetails={{ mail: message.from?.emailAddress?.address, displayName: message.from?.emailAddress?.name }}
+          view={PersonViewType.oneline}
+        ></Person>
+      </div>
     </div>
-  </div>;
+  );
 };
 
 export default App;

stories/components/peoplePicker.stories.js

@@ -168,3 +168,12 @@ export const darkTheme = () => html`
     }
   </style>
 `;
+
+export const pickerAllowAnyEmail = () => html`
+  <mgt-people-picker allow-any-email></mgt-people-picker>
+  <!-- Type any email address and press comma(,), semicolon(;), tab or enter to add it -->
+  <script type="module">
+    const peoplePicker = document.querySelector('mgt-people-picker');
+    peoplePicker.selectedPeople = [{mail: "[email protected]", displayName: "[email protected]"}]
+  </script>
+`;