Merge branch 'main' into bug-2318

.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "3.0.1"
+  ".": "3.1.0"
 }

.storybook/addons/codeEditorAddon/codeAddon.js

@@ -70,8 +70,9 @@ export const withCodeEditor = makeDecorator({
   skipIfNoParametersOrOptions: false,
   wrapper: (getStory, context, { options }) => {
     const forOptions = options ? options.disableThemeToggle : false;
-    const forContext =
-      context && (context.name === 'Custom CSS Properties' || context.title.toLowerCase().includes('templating'));
+    const title =
+      ['Custom CSS Properties', 'Theme'].includes(context.name) || context.title.toLowerCase().includes('templating');
+    const forContext = context && title;
     const disableThemeToggle = forOptions || forContext;
     let story = getStory(context);
 

.storybook/preview.js

@@ -47,7 +47,12 @@ addParameters({
     inlineStories: false,
     page: noArgsDocsPage
   },
-  version: versionInfo
+  version: versionInfo,
+  options: {
+    storySort: {
+      order: ['stories']
+    }
+  }
 });
 
 const req = require.context('../stories', true, /\.(js|mdx)$/);

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.1.0](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.1...v3.1.0) (2023-07-28)
+
+
+### Features
+
+* add canary url to allowed endpoints for graph ([#2635](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2635)) ([ec621cd](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/ec621cd37a8eb7f91356944fb29ad85699ee89fa))
+
+
+### Bug Fixes
+
+* **a11y:** add distinct name definitions for copy code buttons in storybook overview ([#2622](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2622)) ([4e52f41](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/4e52f41398b1a5771ada9fe54a67dba4e4b84397))
+* add a title text if displaying images only. ([#2625](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2625)) ([28703c9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/28703c96dd5366b8543fab2a160994db34a9c13b))
+* check the file type being uploaded before performing upload ([#2584](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2584)) ([7fb265c](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/7fb265c744cbbf53d49fe6d5c3d45bc8493eb2fd))
+* remove agenda tooltip ([#2621](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2621)) ([27e1fc9](https://github.com/microsoftgraph/microsoft-graph-toolkit/commit/27e1fc9c61e1957dd8addacb3b667de9546fb358))
+
 ## [3.0.1](https://github.com/microsoftgraph/microsoft-graph-toolkit/compare/v3.0.0...v3.0.1) (2023-07-18)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "root",
   "private": true,
-  "version": "3.0.1",
+  "version": "3.1.0",
   "workspaces": {
     "packages": [
       "packages/*",

packages/mgt-components/README.md

@@ -13,16 +13,23 @@ You can explore components and samples with the [playground](https://mgt.dev) po
 
 The Toolkit currently includes the following components:
 
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
 * [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
 * [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
 * [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
 
 The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
 

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

@@ -8,25 +8,17 @@
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import {
-  Providers,
-  ProviderState,
-  MgtTemplatedComponent,
-  prepScopes,
-  mgtHtml,
-  customElement,
-  CollectionResponse
-} from '@microsoft/mgt-element';
+import { Providers, ProviderState, MgtTemplatedComponent, mgtHtml, customElement } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import '../mgt-person/mgt-person';
 import { styles } from './mgt-agenda-css';
 import { getEventsPageIterator, getEventsQueryPageIterator } from './mgt-agenda.graph';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPeople } from '../mgt-people/mgt-people';
 import { registerFluentComponents } from '../../utils/FluentComponents';
-import { fluentCard, fluentTooltip } from '@fluentui/web-components';
+import { fluentCard } from '@fluentui/web-components';
 import { classMap } from 'lit/directives/class-map.js';
-registerFluentComponents(fluentCard, fluentTooltip);
+registerFluentComponents(fluentCard);
 
 /**
  * Web Component which represents events in a user or group calendar.
@@ -407,38 +399,16 @@ export class MgtAgenda extends MgtTemplatedComponent {
    * @memberof MgtAgenda
    */
   protected renderTitle(event: MicrosoftGraph.Event): TemplateResult {
-    let eventDescription = event?.bodyPreview ? event.bodyPreview.slice(0, 100) : '';
-    const hasDescription = eventDescription !== '';
-
-    const eventSubjectClasses = {
-      'event-subject': true,
-      narrow: this._isNarrow
-    };
-
-    eventDescription = eventDescription.split(' ').slice(0, -1).join(' ') + '...';
-
-    const hasDescriptionDiv = html`
-      <div
-        aria-describedby="tooltip-${event.id}"
-        class="${classMap(eventSubjectClasses)}"
-        id=${event.id}>
-          ${event.subject}
-      </div>
-      <fluent-tooltip
-        id="tooltip-${event.id}"
-        position="right"
-        anchor="${event.id}">
-          ${eventDescription}
-      </fluent-tooltip>
-    `;
-
-    const noDescriptionDiv = html`
+    return html`
       <div
         aria-label=${event.subject}
-        class="${classMap(eventSubjectClasses)}">
-          ${event.subject}
+        class="${classMap({
+          'event-subject': true,
+          narrow: this._isNarrow
+        })}"
+      >
+        ${event.subject}
       </div>`;
-    return hasDescription ? hasDescriptionDiv : noDescriptionDiv;
   }
 
   /**

packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts

@@ -66,6 +66,13 @@ interface FutureDataTransferItem extends DataTransferItem {
   getAsEntry: typeof DataTransferItem.prototype.webkitGetAsEntry;
 }
 
+const isFutureDataTransferItem = (item: DataTransferItem): item is FutureDataTransferItem =>
+  'getAsEntry' in item && typeof item.getAsEntry === 'function';
+
+const isDataTransferItem = (item: DataTransferItem | File): item is DataTransferItem =>
+  ('getAsFile' in item && typeof item.getAsFile === 'function') ||
+  ('webkitGetAsEntry' in item && typeof item.webkitGetAsEntry === 'function');
+
 /**
  * Upload conflict behavior status
  */
@@ -1160,13 +1167,10 @@ export class MgtFileUpload extends MgtBaseComponent {
     let entry: FileSystemEntry;
     const collectFilesItems: File[] = [];
 
-    for (const uploadFileItem of filesItems as DataTransferItemList) {
-      if (uploadFileItem.kind === 'file') {
-        // Defensive code to validate if function exists in Browser
-        // Collect all Folders into Array
-        const futureUpload = uploadFileItem as FutureDataTransferItem;
-        if (futureUpload.getAsEntry) {
-          entry = futureUpload.getAsEntry();
+    for (const uploadFileItem of filesItems) {
+      if (isDataTransferItem(uploadFileItem)) {
+        if (isFutureDataTransferItem(uploadFileItem)) {
+          entry = uploadFileItem.getAsEntry();
           if (isFileSystemDirectoryEntry(entry)) {
             folders.push(entry);
           } else {
@@ -1187,22 +1191,19 @@ export class MgtFileUpload extends MgtBaseComponent {
               collectFilesItems.push(file);
             }
           }
-        } else if ('function' == typeof uploadFileItem.getAsFile) {
+        } else {
           const file = uploadFileItem.getAsFile();
           if (file) {
             this.writeFilePath(file, '');
             collectFilesItems.push(file);
           }
         }
-        continue;
       } else {
-        const fileItem = uploadFileItem.getAsFile();
-        if (fileItem) {
-          this.writeFilePath(fileItem, '');
-          collectFilesItems.push(fileItem);
-        }
+        this.writeFilePath(uploadFileItem, '');
+        collectFilesItems.push(uploadFileItem);
       }
     }
+
     // Collect Files from folder
     if (folders.length > 0) {
       const folderFiles = await this.getFolderFiles(folders);

packages/mgt-components/src/components/mgt-person/mgt-person.scss

@@ -45,6 +45,7 @@ $person-line4-text-line-height: var(--person-line4-text-line-height, 16px);
   .flyout {
     [slot='anchor'] {
       display: flex;
+      cursor: pointer;
 
       &.vertical {
         flex-direction: column;

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

@@ -705,8 +705,15 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   protected renderImage(personDetailsInternal: IDynamicPerson, imageSrc: string) {
     const altText = `${this.strings.photoFor} ${personDetailsInternal.displayName}`;
-    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo';
-    const imageTemplate = html`<img alt=${altText} src=${imageSrc} @error=${() => (this._isInvalidImageSrc = true)} />`;
+    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === avatarType.photo;
+    const imageOnly = this.avatarType === avatarType.photo && this.view === ViewType.image;
+    const titleText =
+      (personDetailsInternal?.displayName || getEmailFromGraphEntity(personDetailsInternal)) ?? undefined;
+    const imageTemplate = html`<img
+      title="${ifDefined(imageOnly ? titleText : undefined)}"
+      alt=${altText}
+      src=${imageSrc}
+      @error=${() => (this._isInvalidImageSrc = true)} />`;
 
     const initials = personDetailsInternal ? this.getInitials(personDetailsInternal) : '';
     const hasInitials = initials?.length;
@@ -719,6 +726,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     // this reduces the redundant announcement of the user's name.
     const textTemplate = html`
       <span 
+        title="${ifDefined(this.view === ViewType.image ? titleText : undefined)}"
         role="${ifDefined(this.view === ViewType.image ? undefined : 'presentation')}"
         class="${textClasses}"
       >

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

@@ -224,9 +224,9 @@ export const getPeople = async (
 };
 
 /**
- * returns a promise that resolves after specified time
+ * Attempts to extract the email from the IDynamicPerson properties.
  *
- * @param time in milliseconds
+ * @param {IDynamicperson} entity
  */
 export const getEmailFromGraphEntity = (entity: IDynamicPerson): string => {
   const person = entity as Person;

packages/mgt-element/src/IGraph.ts

@@ -75,26 +75,23 @@ export type GraphEndpoint =
   | 'https://graph.microsoft.us'
   | 'https://dod-graph.microsoft.us'
   | 'https://graph.microsoft.de'
-  | 'https://microsoftgraph.chinacloudapi.cn';
-
-/**
- * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
- */
-export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>();
+  | 'https://microsoftgraph.chinacloudapi.cn'
+  | 'https://canary.graph.microsoft.com';
 
 /**
  * MICROSOFT_GRAPH_DEFAULT_ENDPOINT is the default Graph endpoint that is silently set on
  * the providers as the baseURL.
  */
 export const MICROSOFT_GRAPH_DEFAULT_ENDPOINT: GraphEndpoint = 'https://graph.microsoft.com';
 
-(() => {
-  const endpoints: GraphEndpoint[] = [
-    MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
-    'https://graph.microsoft.us',
-    'https://dod-graph.microsoft.us',
-    'https://graph.microsoft.de',
-    'https://microsoftgraph.chinacloudapi.cn'
-  ];
-  endpoints.forEach(endpoint => MICROSOFT_GRAPH_ENDPOINTS.add(endpoint));
-})();
+/**
+ * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
+ */
+export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>([
+  MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
+  'https://graph.microsoft.us',
+  'https://dod-graph.microsoft.us',
+  'https://graph.microsoft.de',
+  'https://microsoftgraph.chinacloudapi.cn',
+  'https://canary.graph.microsoft.com'
+]);

packages/mgt/README.md

@@ -15,27 +15,34 @@ The Microsoft Graph Toolkit includes a collection of web components for the most
 
 The components are also available as [React components](https://learn.microsoft.com/graph/toolkit/get-started/mgt-react).
 
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
 * [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
 * [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
 * [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
 
 ## Providers
 [Providers](https://learn.microsoft.com/graph/toolkit/providers) enable authentication and provide the implementation for acquiring access tokens on various platforms and expose a Microsoft Graph Client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
 
-* [Msal Provider](https://learn.microsoft.com/graph/toolkit/providers/msal)
-* [Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
-* [SharePoint Provider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
-* [Teams Provider](https://learn.microsoft.com/graph/toolkit/providers/teams)
-* [Teams Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2)
-* [Proxy Provider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
-* [Simple Provider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [Msal2Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
+* [SharePointProvider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
+* [TeamsFxProvider](https://learn.microsoft.com/graph/toolkit/providers/teamsfx)
+* [ProxyProvider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
+* [SimpleProvider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [ElectronProvider](https://learn.microsoft.com/graph/toolkit/providers/electron)
+
 
 ## Getting Started
 
@@ -46,15 +53,15 @@ You can use the components by referencing the loader directly (via unpkg), or in
 ### Use via mgt-loader:
 
 ```html
-<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
+<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
 ```
 
-> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
+> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 3.0.0 < 4.0.0`, omitting the `@3` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
 
 You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
 
 ```html
-<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
+<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
 
 <mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
 

readme.md

@@ -62,6 +62,7 @@ The Toolkit currently includes the following components:
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
 * [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
 * [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
 * [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
 * [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)