@microsoft/mgt-components - npm Package Compare versions

Comparing version 4.2.2 to 4.2.3-preview.62b1ed4

dist/es6/components/mgt-file-list/mgt-file-list-css.js

@@ -11,5 +11,5 @@ // THIS FILE IS AUTO GENERATED
     css `
-:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{font-size:var(--default-font-size)}:host .title{font-size:14px;font-weight:600;padding:20px 0 12px;line-height:19px}:host .file-list-wrapper{background-color:var(--file-list-background-color,var(--neutral-layer-floating));border:var(--file-list-border,none);position:relative;display:flex;flex-direction:column;border-radius:8px}:host .file-list-wrapper .title{font-size:14px;font-weight:600;margin:0 20px -15px}:host .file-list-wrapper .file-list{display:flex;padding:var(--file-list-padding,0);margin:var(--file-list-margin,0);flex-direction:column;list-style:none}:host .file-list-wrapper .file-list .file-item{cursor:pointer;border-radius:var(--file-border-radius)}:host .file-list-wrapper .file-list .file-item:focus,:host .file-list-wrapper .file-list .file-item:focus-within{--file-background-color:var(--file-background-color-focus, var(--neutral-layer-2))}:host .file-list-wrapper .file-list .file-item.selected{--file-background-color:var(--file-background-color-active, var(--neutral-layer-3))}:host .file-list-wrapper .file-list .file-item .mgt-file-item{--file-padding:10px 20px 10px 20px;--file-padding-inline-start:24px;--file-border-radius:2px;--file-background-color:var(--file-item-background-color, var(--neutral-layer-1))}:host .file-list-wrapper .progress-ring{margin:4px auto;width:var(--progress-ring-size,24px);height:var(--progress-ring-size,24px)}:host .file-list-wrapper .show-more{text-align:center;font-size:var(--show-more-button-font-size, 12px);padding:var(--show-more-button-padding,0);border-radius:0 0 var(--show-more-button-border-bottom-right-radius,var(--file-list-border-radius,8px)) var(--show-more-button-border-bottom-left-radius,var(--file-list-border-radius,8px));background-color:var(--show-more-button-background-color,var(--neutral-stroke-divider-rest))}:host .file-list-wrapper .show-more:hover{background-color:var(--show-more-button-background-color-hover,var(--neutral-fill-input-alt-active))}:host .file-list-wrapper .show-more-text{font-size:var(--show-more-button-font-size, 12px)}
+:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{font-size:var(--default-font-size)}:host .title{font-size:14px;font-weight:600;padding:20px 0 12px;line-height:19px}:host .file-list-wrapper{background-color:var(--file-list-background-color,var(--neutral-layer-floating));border:var(--file-list-border,none);position:relative;display:flex;flex-direction:column;border-radius:8px}:host .file-list-wrapper .title{font-size:14px;font-weight:600;margin:0 20px -15px}:host .file-list-wrapper .file-list{display:flex;padding:var(--file-list-padding,0);margin:var(--file-list-margin,0);flex-direction:column;list-style:none}:host .file-list-wrapper .file-list .file-item{cursor:pointer;border-radius:var(--file-border-radius)}:host .file-list-wrapper .file-list .file-item:focus,:host .file-list-wrapper .file-list .file-item:focus-within{--file-background-color:var(--file-background-color-focus, var(--neutral-layer-2))}:host .file-list-wrapper .file-list .file-item.selected{--file-background-color:var(--file-background-color-active, var(--neutral-layer-3))}:host .file-list-wrapper .file-list .file-item .mgt-file-item{--file-padding:10px 20px 10px 20px;--file-padding-inline-start:24px;--file-border-radius:2px;--file-background-color:var(--file-item-background-color, var(--neutral-layer-1))}:host .file-list-wrapper .progress-ring{margin:4px auto;width:var(--progress-ring-size,24px);height:var(--progress-ring-size,24px)}:host .file-list-wrapper .show-more{text-align:center;font-size:var(--show-more-button-font-size, 12px);padding:var(--show-more-button-padding,0);border-radius:0 0 var(--show-more-button-border-bottom-right-radius,var(--file-list-border-radius,8px)) var(--show-more-button-border-bottom-left-radius,var(--file-list-border-radius,8px));background-color:var(--show-more-button-background-color,var(--neutral-stroke-divider-rest))}:host .file-list-wrapper .show-more:hover{background-color:var(--show-more-button-background-color-hover,var(--neutral-fill-input-alt-active))}:host .file-list-wrapper .show-more-text{font-size:var(--show-more-button-font-size, 12px)}:host .file-list-wrapper .shared_insight_file{display:flex;align-items:center;padding:11px 20px}:host .file-list-wrapper .shared_insight_file:hover{background-color:var(--file-item-background-color,var(--neutral-layer-1));cursor:pointer}:host .file-list-wrapper .shared_insight_file:last-child{margin-bottom:unset}:host .file-list-wrapper .shared_insight_file .shared_insight_file__icon{width:28px;min-width:28px;height:28px;margin-inline-end:12px;display:flex;align-items:center;justify-content:center}:host .file-list-wrapper .shared_insight_file .shared_insight_file__icon img{height:28px;width:28px}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details{min-width:0;margin-inline-end:40px}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details .shared_insight_file__name{font-size:var(--file-line1-font-size, var(--size-font-size, 12px));color:var(--file-line1-color,var(--neutral-foreground-rest))}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details .shared_insight_file__last-modified{font-size:var(--file-line3-font-size, var(--size-font-size, 12px));color:var(--file-line3-color,var(--secondary-text-color))}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 `
 ];
 //# sourceMappingURL=mgt-file-list-css.js.map

dist/es6/components/mgt-file-list/mgt-file-list.d.ts

@@ -8,3 +8,3 @@ /**
 import { MgtTemplatedTaskComponent } from '@microsoft/mgt-element';
-import { DriveItem } from '@microsoft/microsoft-graph-types';
+import { DriveItem, SharedInsight } from '@microsoft/microsoft-graph-types';
 import { TemplateResult } from 'lit';
@@ -49,2 +49,3 @@ import './mgt-file-upload/mgt-file-upload';
     protected get strings(): Record<string, string>;
+    private _personCardFiles;
     /**
@@ -215,3 +216,3 @@ * allows developer to provide query for a file list
     private _isLoadingMore;
-    constructor();
+    constructor(files?: DriveItem[]);
     /**
@@ -284,4 +285,13 @@ * Reset state
      */
-    protected renderFile(file: DriveItem): TemplateResult;
+    protected renderFile(file: DriveItem | SharedInsight): TemplateResult;
     /**
+     * Render a file item of Shared Insight Type
+     *
+     * @protected
+     * @param {IFile} file
+     * @returns {TemplateResult}
+     * @memberof MgtFileList
+     */
+    protected renderSharedInsightFile(file: SharedInsight): TemplateResult;
+    /**
      * Render the button when clicked will show more files.
@@ -335,3 +345,3 @@ *
     protected renderNextPage(): Promise<void>;
-    private handleFileClick;
+    private readonly handleFileClick;
     /**
@@ -338,0 +348,0 @@ * Get file extension string from file name

dist/es6/components/mgt-file-list/mgt-file-list.js

@@ -25,3 +25,3 @@ /**
 };
-import { Providers, ProviderState, mgtHtml, MgtTemplatedTaskComponent } from '@microsoft/mgt-element';
+import { Providers, ProviderState, mgtHtml, MgtTemplatedTaskComponent, registerComponent } from '@microsoft/mgt-element';
 import { html } from 'lit';
@@ -40,3 +40,4 @@ import { property, state } from 'lit/decorators.js';
 import { registerFluentComponents } from '../../utils/FluentComponents';
-import { registerComponent } from '@microsoft/mgt-element';
+import { getRelativeDisplayDate } from '../../utils/Utils';
+import { getFileTypeIconUri } from '../../styles/fluent-icons';
 export const registerMgtFileListComponent = () => {
@@ -48,2 +49,5 @@ registerFluentComponents(fluentProgressRing);
 };
+const isSharedInsight = (sharedInsightFile) => {
+    return 'lastShared' in sharedInsightFile;
+};
 /**
@@ -125,3 +129,3 @@ * The File List component displays a list of multiple folders and files by
     }
-    constructor() {
+    constructor(files) {
         super();
@@ -214,2 +218,5 @@ this._isCompact = false;
             }
+            if (this._personCardFiles) {
+                this.files = this._personCardFiles;
+            }
             return this._isCompact ? this.renderCompactView() : this.renderFullView();
@@ -260,2 +267,13 @@ };
         };
+        this.handleFileClick = (file, e) => {
+            var _a;
+            if (e && isSharedInsight(file) && ((_a = file.resourceReference) === null || _a === void 0 ? void 0 : _a.webUrl) && !this.disableOpenOnClick) {
+                e.preventDefault();
+                window.open(file.resourceReference.webUrl, '_blank', 'noreferrer');
+            }
+            else if (!isSharedInsight(file) && (file === null || file === void 0 ? void 0 : file.webUrl) && !this.disableOpenOnClick) {
+                window.open(file.webUrl, '_blank', 'noreferrer');
+            }
+        };
+        this._personCardFiles = files;
     }
@@ -270,2 +288,3 @@ /**
         this.files = null;
+        this._personCardFiles = null;
     }
@@ -395,2 +414,6 @@ /**
         const view = this.itemView;
+        // if file is type SharedInsight, render Shared Insight File
+        if (isSharedInsight(file)) {
+            return this.renderSharedInsightFile(file);
+        }
         return (this.renderTemplate('file', { file }, file.id) ||
@@ -402,2 +425,30 @@ mgtHtml `
     /**
+     * Render a file item of Shared Insight Type
+     *
+     * @protected
+     * @param {IFile} file
+     * @returns {TemplateResult}
+     * @memberof MgtFileList
+     */
+    renderSharedInsightFile(file) {
+        const lastModifiedTemplate = file.lastShared
+            ? html `
+          <div class="shared_insight_file__last-modified">
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+          </div>
+        `
+            : null;
+        return html `
+      <div class="shared_insight_file" @click=${(e) => this.handleFileClick(file, e)} tabindex="0">
+        <div class="shared_insight_file__icon">
+          <img alt="${file.resourceVisualization.title}" src=${getFileTypeIconUri(file.resourceVisualization.type, 48, 'svg')} />
+        </div>
+        <div class="shared_insight_file__details">
+          <div class="shared_insight_file__name">${file.resourceVisualization.title}</div>
+          ${lastModifiedTemplate}
+        </div>
+      </div>
+    `;
+    }
+    /**
      * Render the button when clicked will show more files.
@@ -643,7 +694,2 @@ *
     }
-    handleFileClick(file) {
-        if ((file === null || file === void 0 ? void 0 : file.webUrl) && !this.disableOpenOnClick) {
-            window.open(file.webUrl, '_blank', 'noreferrer');
-        }
-    }
     /**
@@ -704,2 +750,6 @@ * Get file extension string from file name
 __decorate([
+    state(),
+    __metadata("design:type", Array)
+], MgtFileList.prototype, "_personCardFiles", void 0);
+__decorate([
     property({
@@ -706,0 +756,0 @@ attribute: 'file-list-query'

dist/es6/components/mgt-login/mgt-login.js

@@ -161,6 +161,6 @@ /**
             if (provider === null || provider === void 0 ? void 0 : provider.logout) {
-                const activeAccount = provider.getActiveAccount();
                 yield provider.logout();
                 this.userDetails = null;
                 if (provider.isMultiAccountSupportedAndEnabled) {
+                    const activeAccount = provider.getActiveAccount();
                     localStorage.removeItem((activeAccount === null || activeAccount === void 0 ? void 0 : activeAccount.id) + this._userDetailsKey);
@@ -261,3 +261,3 @@ }
         this.onClick = () => {
-            if (this.userDetails && this._isFlyoutOpen) {
+            if (this.userDetails && this.flyout.isOpen) {
                 this.hideFlyout();
@@ -264,0 +264,0 @@ }

dist/es6/components/mgt-organization/mgt-organization-css.js

@@ -11,5 +11,5 @@ // THIS FILE IS AUTO GENERATED
     css `
-:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host .loading,:host .no-data{margin:0 20px;display:flex;justify-content:center}:host .no-data{font-style:normal;font-weight:600;font-size:14px;color:var(--font-color,#323130);line-height:19px}:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{position:relative;user-select:none}:host .root.compact{padding:0}:host .root.compact .coworker .coworker__person-image{height:40px;width:40px;border-radius:40px;--person-avatar-size:40px;margin-right:12px}:host .root.compact .coworker .coworker__name{font-size:14px}:host .root.compact .coworker .coworker__title{font-size:12px}:host .root .subtitle{color:var(--organization-sub-title-color,var(--neutral-foreground-hint));font-size:14px;margin:0 20px 8px}:host .root .divider{display:flex;background:var(--organization-coworker-border-color,var(--neutral-stroke-rest));height:1px;margin:26px 20px 18px}:host .root .org-member{height:74px;box-sizing:border-box;border-radius:2px;padding:12px;display:flex;align-items:center;margin-inline:20px}:host .root .org-member.org-member--target{background-color:var(--organization-active-org-member-target-background-color,var(--neutral-fill-active));border:1px solid var(--organization-active-org-member-border-color,var(--accent-foreground-rest))}:host .root .org-member:not(.org-member--target){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest))}:host .root .org-member:not(.org-member--target):hover{cursor:pointer;background-color:var(--organization-hover-color,var(--neutral-fill-hover))}:host .root .org-member .org-member__person{flex-grow:1}:host .root .org-member .org-member__person .org-member__person-image{--person-avatar-size:var(--organization-member-person-avatar-size, 40px)}:host .root .org-member .org-member__details{flex-grow:1}:host .root .org-member .org-member__details .org-member__name{font-size:16px;color:var(--organization-title-color,var(--neutral-foreground-rest));font-weight:600}:host .root .org-member .org-member__details .org-member__department,:host .root .org-member .org-member__details .org-member__title{font-weight:14px;color:var(--organization-sub-title-color,var(--neutral-foreground-hint))}:host .root .org-member__separator:not(:last-child){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));box-sizing:border-box;width:0;margin:0 50%;height:14px}:host .root .coworker{display:flex;align-items:center;padding:10px 20px}:host .root .coworker:hover{cursor:pointer;background-color:var(--organization-coworker-hover-color,var(--neutral-fill-hover))}:host .root .coworker .coworker__person{height:46px;border-radius:46px;margin-right:8px}:host .root .coworker .coworker__person .coworker__person-image{--person-avatar-size:var(--organization-coworker-person-avatar-size, 40px)}:host .root .direct-report__compact{padding:12px 20px}:host .root .direct-report__compact .direct-report{margin-right:4px}:host .root .direct-report-list{border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));margin-inline:20px}:host .root .direct-report-list .org-member--direct-report{border:none;cursor:pointer;margin-inline:0}:host .root .direct-report-list .org-member--direct-report .direct-report__person-image{--person-avatar-size:var(--organization-direct-report-person-avatar-size, 38px)}[dir=rtl] .org-member .org-member__more{transform:scaleX(-1);filter:fliph;filter:"FlipH"}@media (forced-colors:active) and (prefers-color-scheme:dark){:host svg,:host svg>path{fill:rgb(255,255,255)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}@media (forced-colors:active) and (prefers-color-scheme:light){:host svg,:host svg>path{fill:rgb(0,0,0)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}
+:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host .loading,:host .no-data{margin:0 20px;display:flex;justify-content:center}:host .no-data{font-style:normal;font-weight:600;font-size:14px;color:var(--font-color,#323130);line-height:19px}:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{position:relative;user-select:none}:host .root.compact{padding:0}:host .root.compact .coworker .coworker__person-image{height:40px;width:40px;border-radius:40px;--person-avatar-size:40px;margin-right:12px}:host .root.compact .coworker .coworker__name{font-size:14px}:host .root.compact .coworker .coworker__title{font-size:12px}:host .root .subtitle{color:var(--organization-sub-title-color,var(--neutral-foreground-hint));font-size:14px;margin:0 20px 8px}:host .root .divider{display:flex;background:var(--organization-coworker-border-color,var(--neutral-stroke-rest));height:1px;margin:26px 20px 18px}:host .root .org-member{height:74px;box-sizing:border-box;border-radius:2px;padding:12px;display:flex;align-items:center;margin-inline:20px}:host .root .org-member.org-member--target{background-color:var(--organization-active-org-member-target-background-color,var(--neutral-fill-active));border:1px solid var(--organization-active-org-member-border-color,var(--accent-foreground-rest))}:host .root .org-member:not(.org-member--target){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest))}:host .root .org-member:not(.org-member--target):hover{cursor:pointer;background-color:var(--organization-hover-color,var(--neutral-fill-hover))}:host .root .org-member .org-member__person{flex-grow:1}:host .root .org-member .org-member__person .org-member__person-image{--person-avatar-size:var(--organization-member-person-avatar-size, 40px)}:host .root .org-member .org-member__details{flex-grow:1}:host .root .org-member .org-member__details .org-member__name{font-size:16px;color:var(--organization-title-color,var(--neutral-foreground-rest));font-weight:600}:host .root .org-member .org-member__details .org-member__department,:host .root .org-member .org-member__details .org-member__title{font-weight:14px;color:var(--organization-sub-title-color,var(--neutral-foreground-hint))}:host .root .org-member__separator:not(:last-child){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));box-sizing:border-box;width:0;margin:0 50%;height:14px}:host .root .coworker{display:flex;align-items:center;padding:10px 20px}:host .root .coworker:hover{cursor:pointer;background-color:var(--organization-coworker-hover-color,var(--neutral-fill-hover))}:host .root .coworker .coworker__person{height:46px;border-radius:46px;margin-right:8px}:host .root .coworker .coworker__person .coworker__person-image{--person-avatar-size:var(--organization-coworker-person-avatar-size, 40px)}:host .root .direct-report__compact{padding:12px 20px}:host .root .direct-report__compact .direct-report{margin-right:4px;cursor:pointer}:host .root .direct-report-list{border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));margin-inline:20px}:host .root .direct-report-list .org-member--direct-report{border:none;cursor:pointer;margin-inline:0}:host .root .direct-report-list .org-member--direct-report .direct-report__person-image{--person-avatar-size:var(--organization-direct-report-person-avatar-size, 38px)}[dir=rtl] .org-member .org-member__more{transform:scaleX(-1);filter:fliph;filter:"FlipH"}@media (forced-colors:active) and (prefers-color-scheme:dark){:host svg,:host svg>path{fill:rgb(255,255,255)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}@media (forced-colors:active) and (prefers-color-scheme:light){:host svg,:host svg>path{fill:rgb(0,0,0)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}
 `
 ];
 //# sourceMappingURL=mgt-organization-css.js.map

dist/es6/components/mgt-people/mgt-people.d.ts

@@ -131,2 +131,4 @@ /**
     protected renderContent: () => TemplateResult;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private checkPeopleListAndFireEvent;
     /**
@@ -133,0 +135,0 @@ * Render the loading state.

dist/es6/components/mgt-people/mgt-people.js

@@ -31,3 +31,3 @@ /**
 import { findGroupMembers, getUsersForPeopleQueries, getUsersForUserIds } from '../../graph/graph.user';
-import { Providers, ProviderState, MgtTemplatedTaskComponent, mgtHtml } from '@microsoft/mgt-element';
+import { Providers, ProviderState, MgtTemplatedTaskComponent, registerComponent, mgtHtml } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
@@ -37,3 +37,2 @@ import { personCardConverter } from './../PersonCardInteraction';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { registerComponent } from '@microsoft/mgt-element';
 /**
@@ -141,10 +140,24 @@ * web component to display a group of people or contacts by using their photos or initials.
             const peopleElements = peopleContainer === null || peopleContainer === void 0 ? void 0 : peopleContainer.children;
+            const keyName = event.key;
             // Default all tabindex values in li nodes to -1
             for (const element of peopleElements) {
                 const el = element;
-                el.setAttribute('tabindex', '-1');
+                el.removeAttribute('tabindex');
+                person = el === null || el === void 0 ? void 0 : el.querySelector('mgt-person');
+                person = person === null || person === void 0 ? void 0 : person.shadowRoot.querySelector('.person-root');
+                person === null || person === void 0 ? void 0 : person.removeAttribute('tabindex');
                 el.blur();
             }
-            const childElementCount = peopleContainer.childElementCount;
-            const keyName = event.key;
+            if (event.target === peopleContainer && (keyName === 'Tab' || keyName === 'Escape')) {
+                this._arrowKeyLocation = -1;
+                peopleContainer === null || peopleContainer === void 0 ? void 0 : peopleContainer.blur();
+            }
+            let childElementCount = peopleContainer === null || peopleContainer === void 0 ? void 0 : peopleContainer.childElementCount;
+            let overflow = peopleContainer === null || peopleContainer === void 0 ? void 0 : peopleContainer.querySelector('.overflow');
+            if (overflow) {
+                // account for overflow
+                overflow = overflow;
+                overflow.removeAttribute('tabindex');
+                childElementCount--;
+            }
             if (keyName === 'ArrowRight') {
@@ -156,6 +169,2 @@ this._arrowKeyLocation = (this._arrowKeyLocation + 1 + childElementCount) % childElementCount;
             }
-            else if (keyName === 'Tab' || keyName === 'Escape') {
-                this._arrowKeyLocation = -1;
-                peopleContainer.blur();
-            }
             else if (['Enter', 'space', ' '].includes(keyName)) {
@@ -172,4 +181,6 @@ if (this.personCardInteraction !== 'none') {
                 person = peopleElements[this._arrowKeyLocation];
-                person.setAttribute('tabindex', '1');
+                person.setAttribute('tabindex', '0');
                 person.focus();
+                person = person.querySelector('.people-person');
+                person === null || person === void 0 ? void 0 : person.shadowRoot.querySelector('.person-root').setAttribute('tabindex', '0');
             }
@@ -200,2 +211,13 @@ };
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.checkPeopleListAndFireEvent();
+    }
+    checkPeopleListAndFireEvent() {
+        var _a;
+        const peopleList = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.people-list');
+        if ((peopleList === null || peopleList === void 0 ? void 0 : peopleList.childElementCount) > 0) {
+            this.fireCustomEvent('people-rendered');
+        }
+    }
     /**
@@ -218,3 +240,3 @@ * Render the list of people.
         ${repeat(maxPeople, p => (p.id ? p.id : p.displayName), p => html `
-            <li tabindex="-1" class="people-person">
+            <li class="people-person">
               ${this.renderPerson(p)}
@@ -242,3 +264,3 @@ </li>
             html `
-        <li tabindex="-1" aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}</span></li>
+        <li aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}</span></li>
       `);
@@ -269,3 +291,2 @@ }
         <mgt-person
-          class="people-person"
           .personDetails=${person}
@@ -272,0 +293,0 @@ .fetchImage=${true}

dist/es6/components/mgt-person-card/mgt-person-card.js

@@ -582,3 +582,2 @@ /**
       <mgt-person
-        tabindex="0"
         class="person-image"
@@ -646,14 +645,17 @@ .personDetails=${this.internalPersonDetails}
         // Video
-        ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
-        const video = html `
-      <fluent-button class="icon"
-        aria-label=${ariaLabel}
-        @click=${this.videoCallUser}>
-        ${getSvg(SvgIcon.Video)}
-      </fluent-button>
-    `;
+        let video;
+        if (userPerson === null || userPerson === void 0 ? void 0 : userPerson.userPrincipalName) {
+            ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
+            video = html `
+        <fluent-button class="icon"
+          aria-label=${ariaLabel}
+          @click=${this.videoCallUser}>
+          ${getSvg(SvgIcon.Video)}
+        </fluent-button>
+      `;
+        }
         // Call
         let call;
-        if (userPerson.userPrincipalName) {
-            ariaLabel = `${this.strings.callButtonLabel} ${person.displayName}`;
+        if (this.hasPhone) {
+            ariaLabel = `${this.strings.callButtonLabel} ${userPerson.displayName}`;
             call = html `
@@ -1025,3 +1027,3 @@ <fluent-button class="icon"
         if (MgtPersonCardConfig.sections.files && (files === null || files === void 0 ? void 0 : files.length)) {
-            this.sections.push(new MgtFileList());
+            this.sections.push(new MgtFileList(files));
         }
@@ -1028,0 +1030,0 @@ if (MgtPersonCardConfig.sections.profile && profile) {

dist/es6/components/mgt-person/mgt-person.d.ts

@@ -301,2 +301,3 @@ /**
     private _mouseEnterTimeout;
+    private _keyBoardFocus;
     constructor();
@@ -303,0 +304,0 @@ protected readonly renderContent: () => TemplateResult;

dist/es6/components/mgt-person/mgt-person.js

@@ -41,2 +41,3 @@ /**
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
+import { debounce } from '../../utils/Utils';
 import '../sub-components/mgt-flyout/mgt-flyout';
@@ -449,7 +450,24 @@ import { registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
         this.handleKeyDown = (e) => {
-            // enter activates person-card
+            const personEl = this.renderRoot.querySelector('.person-root');
+            // enter activates and focuses on person-card
             if (e) {
                 if (e.key === 'Enter') {
                     this.showPersonCard();
+                    const flyout = this.flyout;
+                    if (flyout === null || flyout === void 0 ? void 0 : flyout.isOpen) {
+                        this._keyBoardFocus = debounce(() => {
+                            const personCardEl = flyout.querySelector('.mgt-person-card');
+                            personCardEl.setAttribute('tabindex', '0');
+                            personCardEl.focus();
+                        }, 500);
+                        this._keyBoardFocus();
+                    }
+                    personEl.blur();
                 }
+                if (this.personCardInteraction !== 'none') {
+                    if (e.key === 'Escape' && personEl) {
+                        this.hidePersonCard();
+                        personEl.focus();
+                    }
+                }
             }
@@ -456,0 +474,0 @@ };

dist/es6/components/mgt-planner/mgt-planner.js

@@ -495,3 +495,3 @@ /**
     }
-    removeTask(task) {
+    removeTask(task, e) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -502,2 +502,8 @@ const ts = this.getTaskSource();
             }
+            // check if e is a Keyboard Event
+            if (e instanceof KeyboardEvent) {
+                if (e.key !== 'Enter') {
+                    return;
+                }
+            }
             this._hiddenTasks = [...this._hiddenTasks, task.id];
@@ -804,3 +810,3 @@ yield ts.removeTask(task);
               .options="${{
-                [this.strings.removeTaskSubtitle]: () => this.removeTask(task)
+                [this.strings.removeTaskSubtitle]: (e) => this.removeTask(task, e)
             }}"
@@ -807,0 +813,0 @@ ></mgt-dot-options>`;

dist/es6/graph/graph.user.js

@@ -366,3 +366,3 @@ /**
         .api('users')
-        .search(`"displayName:${encodedQuery}" OR "mail:${encodedQuery}"`)
+        .search(`"displayName:${encodedQuery}" OR "mail:${encodedQuery}" OR "userPrincipalName: ${encodedQuery}"`)
         .header('ConsistencyLevel', 'eventual')
@@ -369,0 +369,0 @@ .count(true);

package.json

 {
   "name": "@microsoft/mgt-components",
-  "version": "4.2.2",
+  "version": "4.2.3-preview.62b1ed4",
   "description": "The Microsoft Graph Toolkit Components",
@@ -30,6 +30,6 @@ "keywords": [
     "build:watch": "npm-run-all -p sass:watch compile:watch",
-    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo && shx rm 'src/**/*-css.ts' || shx true",
+    "clean": "shx rm -rf ./dist && shx rm -rf ./tsconfig.tsbuildinfo && shx rm \"src/**/*-css.ts\" || shx true",
     "compile": "tsc -b",
     "compile:watch": "tsc -w",
-    "lint": "eslint -c ../../.eslintrc.js 'src/**/*.ts'",
+    "lint": "eslint -c ../../.eslintrc.js \"src/**/*.ts\"",
     "postpack": "cpx *.tgz ../../artifacts",
@@ -43,3 +43,3 @@ "sass": "node ./scripts/compileSass.js",
     "@lit/task": "^1.0.0",
-    "@microsoft/mgt-element": "4.2.2",
+    "@microsoft/mgt-element": "4.2.3-preview.62b1ed4",
     "@microsoft/microsoft-graph-client": "3.0.2",
@@ -46,0 +46,0 @@ "@microsoft/microsoft-graph-types": "^2.40.0",

src/components/mgt-file-list/mgt-file-list-css.ts

@@ -12,3 +12,3 @@ // THIS FILE IS AUTO GENERATED
   css`
-:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{font-size:var(--default-font-size)}:host .title{font-size:14px;font-weight:600;padding:20px 0 12px;line-height:19px}:host .file-list-wrapper{background-color:var(--file-list-background-color,var(--neutral-layer-floating));border:var(--file-list-border,none);position:relative;display:flex;flex-direction:column;border-radius:8px}:host .file-list-wrapper .title{font-size:14px;font-weight:600;margin:0 20px -15px}:host .file-list-wrapper .file-list{display:flex;padding:var(--file-list-padding,0);margin:var(--file-list-margin,0);flex-direction:column;list-style:none}:host .file-list-wrapper .file-list .file-item{cursor:pointer;border-radius:var(--file-border-radius)}:host .file-list-wrapper .file-list .file-item:focus,:host .file-list-wrapper .file-list .file-item:focus-within{--file-background-color:var(--file-background-color-focus, var(--neutral-layer-2))}:host .file-list-wrapper .file-list .file-item.selected{--file-background-color:var(--file-background-color-active, var(--neutral-layer-3))}:host .file-list-wrapper .file-list .file-item .mgt-file-item{--file-padding:10px 20px 10px 20px;--file-padding-inline-start:24px;--file-border-radius:2px;--file-background-color:var(--file-item-background-color, var(--neutral-layer-1))}:host .file-list-wrapper .progress-ring{margin:4px auto;width:var(--progress-ring-size,24px);height:var(--progress-ring-size,24px)}:host .file-list-wrapper .show-more{text-align:center;font-size:var(--show-more-button-font-size, 12px);padding:var(--show-more-button-padding,0);border-radius:0 0 var(--show-more-button-border-bottom-right-radius,var(--file-list-border-radius,8px)) var(--show-more-button-border-bottom-left-radius,var(--file-list-border-radius,8px));background-color:var(--show-more-button-background-color,var(--neutral-stroke-divider-rest))}:host .file-list-wrapper .show-more:hover{background-color:var(--show-more-button-background-color-hover,var(--neutral-fill-input-alt-active))}:host .file-list-wrapper .show-more-text{font-size:var(--show-more-button-font-size, 12px)}
+:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{font-size:var(--default-font-size)}:host .title{font-size:14px;font-weight:600;padding:20px 0 12px;line-height:19px}:host .file-list-wrapper{background-color:var(--file-list-background-color,var(--neutral-layer-floating));border:var(--file-list-border,none);position:relative;display:flex;flex-direction:column;border-radius:8px}:host .file-list-wrapper .title{font-size:14px;font-weight:600;margin:0 20px -15px}:host .file-list-wrapper .file-list{display:flex;padding:var(--file-list-padding,0);margin:var(--file-list-margin,0);flex-direction:column;list-style:none}:host .file-list-wrapper .file-list .file-item{cursor:pointer;border-radius:var(--file-border-radius)}:host .file-list-wrapper .file-list .file-item:focus,:host .file-list-wrapper .file-list .file-item:focus-within{--file-background-color:var(--file-background-color-focus, var(--neutral-layer-2))}:host .file-list-wrapper .file-list .file-item.selected{--file-background-color:var(--file-background-color-active, var(--neutral-layer-3))}:host .file-list-wrapper .file-list .file-item .mgt-file-item{--file-padding:10px 20px 10px 20px;--file-padding-inline-start:24px;--file-border-radius:2px;--file-background-color:var(--file-item-background-color, var(--neutral-layer-1))}:host .file-list-wrapper .progress-ring{margin:4px auto;width:var(--progress-ring-size,24px);height:var(--progress-ring-size,24px)}:host .file-list-wrapper .show-more{text-align:center;font-size:var(--show-more-button-font-size, 12px);padding:var(--show-more-button-padding,0);border-radius:0 0 var(--show-more-button-border-bottom-right-radius,var(--file-list-border-radius,8px)) var(--show-more-button-border-bottom-left-radius,var(--file-list-border-radius,8px));background-color:var(--show-more-button-background-color,var(--neutral-stroke-divider-rest))}:host .file-list-wrapper .show-more:hover{background-color:var(--show-more-button-background-color-hover,var(--neutral-fill-input-alt-active))}:host .file-list-wrapper .show-more-text{font-size:var(--show-more-button-font-size, 12px)}:host .file-list-wrapper .shared_insight_file{display:flex;align-items:center;padding:11px 20px}:host .file-list-wrapper .shared_insight_file:hover{background-color:var(--file-item-background-color,var(--neutral-layer-1));cursor:pointer}:host .file-list-wrapper .shared_insight_file:last-child{margin-bottom:unset}:host .file-list-wrapper .shared_insight_file .shared_insight_file__icon{width:28px;min-width:28px;height:28px;margin-inline-end:12px;display:flex;align-items:center;justify-content:center}:host .file-list-wrapper .shared_insight_file .shared_insight_file__icon img{height:28px;width:28px}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details{min-width:0;margin-inline-end:40px}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details .shared_insight_file__name{font-size:var(--file-line1-font-size, var(--size-font-size, 12px));color:var(--file-line1-color,var(--neutral-foreground-rest))}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details .shared_insight_file__last-modified{font-size:var(--file-line3-font-size, var(--size-font-size, 12px));color:var(--file-line3-color,var(--secondary-text-color))}:host .file-list-wrapper .shared_insight_file .shared_insight_file__details>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 `];

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

@@ -13,5 +13,6 @@ /**
   mgtHtml,
-  MgtTemplatedTaskComponent
+  MgtTemplatedTaskComponent,
+  registerComponent
 } from '@microsoft/mgt-element';
-import { DriveItem } from '@microsoft/microsoft-graph-types';
+import { DriveItem, SharedInsight } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
@@ -50,3 +51,4 @@ import { property, state } from 'lit/decorators.js';
 import { CardSection } from '../BasePersonCardSection';
-import { registerComponent } from '@microsoft/mgt-element';
+import { getRelativeDisplayDate } from '../../utils/Utils';
+import { getFileTypeIconUri } from '../../styles/fluent-icons';
 
@@ -61,2 +63,6 @@ export const registerMgtFileListComponent = () => {
 
+const isSharedInsight = (sharedInsightFile: SharedInsight): sharedInsightFile is SharedInsight => {
+  return 'lastShared' in sharedInsightFile;
+};
+
 /**
@@ -102,2 +108,6 @@ * The File List component displays a list of multiple folders and files by
 
+  // files from the person card component
+  @state()
+  private _personCardFiles: DriveItem[];
+
   /**
@@ -376,4 +386,5 @@ * allows developer to provide query for a file list
 
-  constructor() {
+  constructor(files?: DriveItem[]) {
     super();
+    this._personCardFiles = files;
   }
@@ -389,2 +400,3 @@
     this.files = null;
+    this._personCardFiles = null;
   }
@@ -449,2 +461,5 @@
     }
+    if (this._personCardFiles) {
+      this.files = this._personCardFiles;
+    }
     return this._isCompact ? this.renderCompactView() : this.renderFullView();
@@ -550,4 +565,8 @@ };
    */
-  protected renderFile(file: DriveItem): TemplateResult {
+  protected renderFile(file: DriveItem | SharedInsight): TemplateResult {
     const view = this.itemView;
+    // if file is type SharedInsight, render Shared Insight File
+    if (isSharedInsight(file)) {
+      return this.renderSharedInsightFile(file);
+    }
     return (
@@ -562,2 +581,36 @@ this.renderTemplate('file', { file }, file.id) ||
   /**
+   * Render a file item of Shared Insight Type
+   *
+   * @protected
+   * @param {IFile} file
+   * @returns {TemplateResult}
+   * @memberof MgtFileList
+   */
+  protected renderSharedInsightFile(file: SharedInsight): TemplateResult {
+    const lastModifiedTemplate = file.lastShared
+      ? html`
+          <div class="shared_insight_file__last-modified">
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+          </div>
+        `
+      : null;
+
+    return html`
+      <div class="shared_insight_file" @click=${(e: MouseEvent) => this.handleFileClick(file, e)} tabindex="0">
+        <div class="shared_insight_file__icon">
+          <img alt="${file.resourceVisualization.title}" src=${getFileTypeIconUri(
+            file.resourceVisualization.type,
+            48,
+            'svg'
+          )} />
+        </div>
+        <div class="shared_insight_file__details">
+          <div class="shared_insight_file__name">${file.resourceVisualization.title}</div>
+          ${lastModifiedTemplate}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
    * Render the button when clicked will show more files.
@@ -853,7 +906,10 @@ *
 
-  private handleFileClick(file: DriveItem) {
-    if (file?.webUrl && !this.disableOpenOnClick) {
+  private readonly handleFileClick = (file: DriveItem | SharedInsight, e?: MouseEvent) => {
+    if (e && isSharedInsight(file) && file.resourceReference?.webUrl && !this.disableOpenOnClick) {
+      e.preventDefault();
+      window.open(file.resourceReference.webUrl, '_blank', 'noreferrer');
+    } else if (!isSharedInsight(file) && file?.webUrl && !this.disableOpenOnClick) {
       window.open(file.webUrl, '_blank', 'noreferrer');
     }
-  }
+  };
 
@@ -860,0 +916,0 @@ /**

src/components/mgt-login/mgt-login.ts

@@ -245,6 +245,6 @@ /**
     if (provider?.logout) {
-      const activeAccount = provider.getActiveAccount();
       await provider.logout();
       this.userDetails = null;
       if (provider.isMultiAccountSupportedAndEnabled) {
+        const activeAccount = provider.getActiveAccount();
         localStorage.removeItem(activeAccount?.id + this._userDetailsKey);
@@ -730,3 +730,3 @@ }
   private readonly onClick = (): void => {
-    if (this.userDetails && this._isFlyoutOpen) {
+    if (this.userDetails && this.flyout.isOpen) {
       this.hideFlyout();
@@ -733,0 +733,0 @@ } else if (this.userDetails) {

src/components/mgt-organization/mgt-organization-css.ts

@@ -12,3 +12,3 @@ // THIS FILE IS AUTO GENERATED
   css`
-:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host .loading,:host .no-data{margin:0 20px;display:flex;justify-content:center}:host .no-data{font-style:normal;font-weight:600;font-size:14px;color:var(--font-color,#323130);line-height:19px}:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{position:relative;user-select:none}:host .root.compact{padding:0}:host .root.compact .coworker .coworker__person-image{height:40px;width:40px;border-radius:40px;--person-avatar-size:40px;margin-right:12px}:host .root.compact .coworker .coworker__name{font-size:14px}:host .root.compact .coworker .coworker__title{font-size:12px}:host .root .subtitle{color:var(--organization-sub-title-color,var(--neutral-foreground-hint));font-size:14px;margin:0 20px 8px}:host .root .divider{display:flex;background:var(--organization-coworker-border-color,var(--neutral-stroke-rest));height:1px;margin:26px 20px 18px}:host .root .org-member{height:74px;box-sizing:border-box;border-radius:2px;padding:12px;display:flex;align-items:center;margin-inline:20px}:host .root .org-member.org-member--target{background-color:var(--organization-active-org-member-target-background-color,var(--neutral-fill-active));border:1px solid var(--organization-active-org-member-border-color,var(--accent-foreground-rest))}:host .root .org-member:not(.org-member--target){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest))}:host .root .org-member:not(.org-member--target):hover{cursor:pointer;background-color:var(--organization-hover-color,var(--neutral-fill-hover))}:host .root .org-member .org-member__person{flex-grow:1}:host .root .org-member .org-member__person .org-member__person-image{--person-avatar-size:var(--organization-member-person-avatar-size, 40px)}:host .root .org-member .org-member__details{flex-grow:1}:host .root .org-member .org-member__details .org-member__name{font-size:16px;color:var(--organization-title-color,var(--neutral-foreground-rest));font-weight:600}:host .root .org-member .org-member__details .org-member__department,:host .root .org-member .org-member__details .org-member__title{font-weight:14px;color:var(--organization-sub-title-color,var(--neutral-foreground-hint))}:host .root .org-member__separator:not(:last-child){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));box-sizing:border-box;width:0;margin:0 50%;height:14px}:host .root .coworker{display:flex;align-items:center;padding:10px 20px}:host .root .coworker:hover{cursor:pointer;background-color:var(--organization-coworker-hover-color,var(--neutral-fill-hover))}:host .root .coworker .coworker__person{height:46px;border-radius:46px;margin-right:8px}:host .root .coworker .coworker__person .coworker__person-image{--person-avatar-size:var(--organization-coworker-person-avatar-size, 40px)}:host .root .direct-report__compact{padding:12px 20px}:host .root .direct-report__compact .direct-report{margin-right:4px}:host .root .direct-report-list{border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));margin-inline:20px}:host .root .direct-report-list .org-member--direct-report{border:none;cursor:pointer;margin-inline:0}:host .root .direct-report-list .org-member--direct-report .direct-report__person-image{--person-avatar-size:var(--organization-direct-report-person-avatar-size, 38px)}[dir=rtl] .org-member .org-member__more{transform:scaleX(-1);filter:fliph;filter:"FlipH"}@media (forced-colors:active) and (prefers-color-scheme:dark){:host svg,:host svg>path{fill:rgb(255,255,255)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}@media (forced-colors:active) and (prefers-color-scheme:light){:host svg,:host svg>path{fill:rgb(0,0,0)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}
+:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host .loading,:host .no-data{margin:0 20px;display:flex;justify-content:center}:host .no-data{font-style:normal;font-weight:600;font-size:14px;color:var(--font-color,#323130);line-height:19px}:host([hidden]){display:none}:host{display:block;font-family:var(--default-font-family, "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif);font-size:var(--default-font-size, 14px);--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}:focus-visible{outline-color:var(--focus-ring-color,Highlight);outline-color:var(--focus-ring-color,-webkit-focus-ring-color);outline-style:var(--focus-ring-style,auto)}.ms-icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.error{background-color:#fde7e9;padding-block:8px;padding-inline:8px 12px}.ms-icon-chevron-down::before{content:"\\\e70d"}.ms-icon-chevron-up::before{content:"\\\e70e"}.ms-icon-contact::before{content:"\\\e77b"}.ms-icon-add-friend::before{content:"\\\e8fa"}.ms-icon-outlook-logo-inverser::before{content:"\\\eb6d"}:host{position:relative;user-select:none}:host .root.compact{padding:0}:host .root.compact .coworker .coworker__person-image{height:40px;width:40px;border-radius:40px;--person-avatar-size:40px;margin-right:12px}:host .root.compact .coworker .coworker__name{font-size:14px}:host .root.compact .coworker .coworker__title{font-size:12px}:host .root .subtitle{color:var(--organization-sub-title-color,var(--neutral-foreground-hint));font-size:14px;margin:0 20px 8px}:host .root .divider{display:flex;background:var(--organization-coworker-border-color,var(--neutral-stroke-rest));height:1px;margin:26px 20px 18px}:host .root .org-member{height:74px;box-sizing:border-box;border-radius:2px;padding:12px;display:flex;align-items:center;margin-inline:20px}:host .root .org-member.org-member--target{background-color:var(--organization-active-org-member-target-background-color,var(--neutral-fill-active));border:1px solid var(--organization-active-org-member-border-color,var(--accent-foreground-rest))}:host .root .org-member:not(.org-member--target){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest))}:host .root .org-member:not(.org-member--target):hover{cursor:pointer;background-color:var(--organization-hover-color,var(--neutral-fill-hover))}:host .root .org-member .org-member__person{flex-grow:1}:host .root .org-member .org-member__person .org-member__person-image{--person-avatar-size:var(--organization-member-person-avatar-size, 40px)}:host .root .org-member .org-member__details{flex-grow:1}:host .root .org-member .org-member__details .org-member__name{font-size:16px;color:var(--organization-title-color,var(--neutral-foreground-rest));font-weight:600}:host .root .org-member .org-member__details .org-member__department,:host .root .org-member .org-member__details .org-member__title{font-weight:14px;color:var(--organization-sub-title-color,var(--neutral-foreground-hint))}:host .root .org-member__separator:not(:last-child){border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));box-sizing:border-box;width:0;margin:0 50%;height:14px}:host .root .coworker{display:flex;align-items:center;padding:10px 20px}:host .root .coworker:hover{cursor:pointer;background-color:var(--organization-coworker-hover-color,var(--neutral-fill-hover))}:host .root .coworker .coworker__person{height:46px;border-radius:46px;margin-right:8px}:host .root .coworker .coworker__person .coworker__person-image{--person-avatar-size:var(--organization-coworker-person-avatar-size, 40px)}:host .root .direct-report__compact{padding:12px 20px}:host .root .direct-report__compact .direct-report{margin-right:4px;cursor:pointer}:host .root .direct-report-list{border:1px solid var(--organization-coworker-border-color,var(--neutral-stroke-rest));margin-inline:20px}:host .root .direct-report-list .org-member--direct-report{border:none;cursor:pointer;margin-inline:0}:host .root .direct-report-list .org-member--direct-report .direct-report__person-image{--person-avatar-size:var(--organization-direct-report-person-avatar-size, 38px)}[dir=rtl] .org-member .org-member__more{transform:scaleX(-1);filter:fliph;filter:"FlipH"}@media (forced-colors:active) and (prefers-color-scheme:dark){:host svg,:host svg>path{fill:rgb(255,255,255)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}@media (forced-colors:active) and (prefers-color-scheme:light){:host svg,:host svg>path{fill:rgb(0,0,0)!important;fill-rule:nonzero!important;clip-rule:nonzero!important}}
 `];

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

@@ -16,3 +16,9 @@ /**
 import { IDynamicPerson } from '../../graph/types';
-import { Providers, ProviderState, MgtTemplatedTaskComponent, mgtHtml } from '@microsoft/mgt-element';
+import {
+  Providers,
+  ProviderState,
+  MgtTemplatedTaskComponent,
+  registerComponent,
+  mgtHtml
+} from '@microsoft/mgt-element';
 import '../../styles/style-helper';
@@ -23,3 +29,2 @@ import { type PersonCardInteraction, personCardConverter } from './../PersonCardInteraction';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { registerComponent } from '@microsoft/mgt-element';
 
@@ -254,2 +259,15 @@ /**
 
+  protected updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    super.updated(changedProperties);
+    this.checkPeopleListAndFireEvent();
+  }
+
+  private checkPeopleListAndFireEvent(): void {
+    const peopleList = this.shadowRoot?.querySelector('.people-list');
+
+    if (peopleList?.childElementCount > 0) {
+      this.fireCustomEvent('people-rendered');
+    }
+  }
+
   /**
@@ -286,3 +304,3 @@ * Render the loading state.
           p => html`
-            <li tabindex="-1" class="people-person">
+            <li class="people-person">
               ${this.renderPerson(p)}
@@ -313,3 +331,3 @@ </li>
       html`
-        <li tabindex="-1" aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}</span></li>
+        <li aria-label="and ${extra} more attendees" class="overflow"><span>+${extra}</span></li>
       `
@@ -328,11 +346,25 @@ );
     const peopleElements: HTMLCollection = peopleContainer?.children;
+    const keyName = event.key;
     // Default all tabindex values in li nodes to -1
     for (const element of peopleElements) {
       const el: HTMLElement = element as HTMLElement;
-      el.setAttribute('tabindex', '-1');
+      el.removeAttribute('tabindex');
+      person = el?.querySelector('mgt-person');
+      person = person?.shadowRoot.querySelector('.person-root');
+      person?.removeAttribute('tabindex');
       el.blur();
     }
+    if (event.target === peopleContainer && (keyName === 'Tab' || keyName === 'Escape')) {
+      this._arrowKeyLocation = -1;
+      peopleContainer?.blur();
+    }
 
-    const childElementCount = peopleContainer.childElementCount;
-    const keyName = event.key;
+    let childElementCount = peopleContainer?.childElementCount;
+    let overflow = peopleContainer?.querySelector('.overflow');
+    if (overflow) {
+      // account for overflow
+      overflow = overflow as HTMLElement;
+      overflow.removeAttribute('tabindex');
+      childElementCount--;
+    }
     if (keyName === 'ArrowRight') {
@@ -342,5 +374,2 @@ this._arrowKeyLocation = (this._arrowKeyLocation + 1 + childElementCount) % childElementCount;
       this._arrowKeyLocation = (this._arrowKeyLocation - 1 + childElementCount) % childElementCount;
-    } else if (keyName === 'Tab' || keyName === 'Escape') {
-      this._arrowKeyLocation = -1;
-      peopleContainer.blur();
     } else if (['Enter', 'space', ' '].includes(keyName)) {
@@ -358,4 +387,6 @@ if (this.personCardInteraction !== 'none') {
       person = peopleElements[this._arrowKeyLocation] as HTMLElement;
-      person.setAttribute('tabindex', '1');
+      person.setAttribute('tabindex', '0');
       person.focus();
+      person = person.querySelector('.people-person');
+      person?.shadowRoot.querySelector('.person-root').setAttribute('tabindex', '0');
     }
@@ -388,3 +419,2 @@ };
         <mgt-person
-          class="people-person"
           .personDetails=${person}
@@ -391,0 +421,0 @@ .fetchImage=${true}

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

@@ -596,3 +596,2 @@ /**
       <mgt-person
-        tabindex="0"
         class="person-image"
@@ -666,16 +665,18 @@ .personDetails=${this.internalPersonDetails}
     // Video
+    let video: TemplateResult;
+    if (userPerson?.userPrincipalName) {
+      ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
+      video = html`
+        <fluent-button class="icon"
+          aria-label=${ariaLabel}
+          @click=${this.videoCallUser}>
+          ${getSvg(SvgIcon.Video)}
+        </fluent-button>
+      `;
+    }
 
-    ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
-    const video: TemplateResult = html`
-      <fluent-button class="icon"
-        aria-label=${ariaLabel}
-        @click=${this.videoCallUser}>
-        ${getSvg(SvgIcon.Video)}
-      </fluent-button>
-    `;
-
     // Call
     let call: TemplateResult;
-    if (userPerson.userPrincipalName) {
-      ariaLabel = `${this.strings.callButtonLabel} ${person.displayName}`;
+    if (this.hasPhone) {
+      ariaLabel = `${this.strings.callButtonLabel} ${userPerson.displayName}`;
       call = html`
@@ -1246,3 +1247,3 @@ <fluent-button class="icon"
     if (MgtPersonCardConfig.sections.files && files?.length) {
-      this.sections.push(new MgtFileList());
+      this.sections.push(new MgtFileList(files));
     }
@@ -1249,0 +1250,0 @@

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

@@ -33,2 +33,3 @@ /**
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
+import { debounce } from '../../utils/Utils';
 import { IExpandable, IHistoryClearer } from '../mgt-person-card/types';
@@ -510,2 +511,3 @@ import '../sub-components/mgt-flyout/mgt-flyout';
   private _mouseEnterTimeout = -1;
+  private _keyBoardFocus: { (): void; (): void };
 
@@ -1350,7 +1352,24 @@ constructor() {
   private readonly handleKeyDown = (e: KeyboardEvent) => {
-    // enter activates person-card
+    const personEl = this.renderRoot.querySelector<HTMLElement>('.person-root');
+    // enter activates and focuses on person-card
     if (e) {
       if (e.key === 'Enter') {
         this.showPersonCard();
+        const flyout = this.flyout;
+        if (flyout?.isOpen) {
+          this._keyBoardFocus = debounce(() => {
+            const personCardEl = flyout.querySelector<HTMLElement>('.mgt-person-card');
+            personCardEl.setAttribute('tabindex', '0');
+            personCardEl.focus();
+          }, 500);
+          this._keyBoardFocus();
+        }
+        personEl.blur();
       }
+      if (this.personCardInteraction !== 'none') {
+        if (e.key === 'Escape' && personEl) {
+          this.hidePersonCard();
+          personEl.focus();
+        }
+      }
     }
@@ -1357,0 +1376,0 @@ };

src/components/mgt-planner/mgt-planner.ts

@@ -595,3 +595,3 @@ /**
 
-  private async removeTask(task: ITask) {
+  private async removeTask(task: ITask, e: Event) {
     const ts = this.getTaskSource();
@@ -601,3 +601,8 @@ if (!ts) {
     }
-
+    // check if e is a Keyboard Event
+    if (e instanceof KeyboardEvent) {
+      if (e.key !== 'Enter') {
+        return;
+      }
+    }
     this._hiddenTasks = [...this._hiddenTasks, task.id];
@@ -1009,3 +1014,3 @@ await ts.removeTask(task);
               .options="${{
-                [this.strings.removeTaskSubtitle]: () => this.removeTask(task)
+                [this.strings.removeTaskSubtitle]: (e: Event) => this.removeTask(task, e)
               }}"
@@ -1012,0 +1017,0 @@ ></mgt-dot-options>`;

src/graph/graph.user.ts

@@ -423,3 +423,3 @@ /**
     .api('users')
-    .search(`"displayName:${encodedQuery}" OR "mail:${encodedQuery}"`)
+    .search(`"displayName:${encodedQuery}" OR "mail:${encodedQuery}" OR "userPrincipalName: ${encodedQuery}"`)
     .header('ConsistencyLevel', 'eventual')
@@ -426,0 +426,0 @@ .count(true);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4250072

increased by0.7%

Number of package files

776

increased by0.65%

Lines of code

55974

increased by0.56%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@microsoft/mgt-element@4.2.3-preview.62b1ed4(transitive)

• - Removed@microsoft/mgt-element@4.2.2(transitive)

• Updated@microsoft/mgt-element@4.2.3-preview.62b1ed4