@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.1.0-preview.0ae5594 to 2.1.0-preview.17ba514

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

@@ -11,5 +11,5 @@ // THIS FILE IS AUTO GENERATED
     css `
-:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.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}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff))}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
+:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.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}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
 `
 ];
 //# sourceMappingURL=mgt-people-picker-css.js.map

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

@@ -318,3 +318,4 @@ /**
     private filterPeople;
+    private handleSectionScroll;
 }
 //# sourceMappingURL=mgt-people-picker.d.ts.map

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

@@ -315,3 +315,3 @@ /**
         ${anchor}
-        <div slot="flyout" class="flyout-root">
+        <div slot="flyout" class="flyout-root" @wheel=${(e) => this.handleSectionScroll(e)}>
           ${this.renderFlyoutContent()}
@@ -758,33 +758,25 @@ </div>
     handleArrowSelection(event) {
-        if (this._foundPeople.length) {
+        const peopleList = this.renderRoot.querySelector('.people-list');
+        if (peopleList && peopleList.children.length) {
             // update arrow count
             if (event.keyCode === 38) {
                 // up arrow
-                if (this._arrowSelectionCount > 0) {
-                    this._arrowSelectionCount--;
-                }
-                else {
-                    this._arrowSelectionCount = 0;
-                }
+                this._arrowSelectionCount =
+                    (this._arrowSelectionCount - 1 + peopleList.children.length) % peopleList.children.length;
             }
             if (event.keyCode === 40) {
                 // down arrow
-                if (this._arrowSelectionCount + 1 !== this._foundPeople.length &&
-                    this._arrowSelectionCount + 1 < this.showMax) {
-                    this._arrowSelectionCount++;
-                }
-                else {
-                    this._arrowSelectionCount = 0;
-                }
+                this._arrowSelectionCount = (this._arrowSelectionCount + 1) % peopleList.children.length;
             }
-            const peopleList = this.renderRoot.querySelector('.people-list');
             // reset background color
-            if (peopleList) {
-                // tslint:disable-next-line: prefer-for-of
-                for (let i = 0; i < peopleList.children.length; i++) {
-                    peopleList.children[i].classList.remove('focused');
-                }
+            // tslint:disable-next-line: prefer-for-of
+            for (let i = 0; i < peopleList.children.length; i++) {
+                peopleList.children[i].classList.remove('focused');
             }
             // set selected background
-            peopleList.children[this._arrowSelectionCount].classList.add('focused');
+            const focusedItem = peopleList.children[this._arrowSelectionCount];
+            if (focusedItem) {
+                focusedItem.classList.add('focused');
+                focusedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+            }
         }
@@ -816,2 +808,12 @@ }
     }
+    // stop propagating wheel event to flyout so mouse scrolling works
+    handleSectionScroll(e) {
+        const target = this.renderRoot.querySelector('.flyout-root');
+        if (target) {
+            if (!(e.deltaY < 0 && target.scrollTop === 0) &&
+                !(e.deltaY > 0 && target.clientHeight + target.scrollTop >= target.scrollHeight - 1)) {
+                e.stopPropagation();
+            }
+        }
+    }
 };
@@ -818,0 +820,0 @@ __decorate([

dist/es6/components/sub-components/mgt-flyout/mgt-flyout.js

@@ -75,3 +75,4 @@ /**
                 flyout.style.setProperty('--mgt-flyout-set-width', null);
-                flyout.style.height = null;
+                flyout.style.setProperty('--mgt-flyout-set-height', null);
+                flyout.style.maxHeight = null;
                 flyout.style.top = null;
@@ -244,28 +245,49 @@ flyout.style.left = null;
             }
-            if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
-                if (flyoutRect.height >= windowRect.height) {
-                    height = windowRect.height;
-                    top = 0;
+            const anchorRectBottomToWindowBottom = windowRect.height - (anchorRect.top + anchorRect.height);
+            const anchorRectTopToWindowTop = anchorRect.top;
+            if (this.avoidHidingAnchor) {
+                if (anchorRectBottomToWindowBottom <= flyoutRect.height) {
+                    if (anchorRectTopToWindowTop < flyoutRect.height) {
+                        if (anchorRectTopToWindowTop > anchorRectBottomToWindowBottom) {
+                            // more room top than bottom - render above
+                            bottom = windowRect.height - anchorRect.top;
+                            height = anchorRectTopToWindowTop;
+                        }
+                        else {
+                            // more room bottom than top
+                            top = anchorRect.bottom;
+                            height = anchorRectBottomToWindowBottom;
+                        }
+                    }
+                    else {
+                        // render above anchor
+                        bottom = windowRect.height - anchorRect.top;
+                        height = anchorRectTopToWindowTop;
+                    }
                 }
                 else {
-                    top = (windowRect.height - flyoutRect.height) / 2;
+                    top = anchorRect.bottom;
+                    height = anchorRectBottomToWindowBottom;
                 }
             }
-            else if (this.avoidHidingAnchor &&
-                anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height &&
-                anchorRect.top - flyoutRect.height - this._edgePadding > 0) {
-                if (windowRect.height - anchorRect.top + flyoutRect.height < 0) {
-                    bottom = windowRect.height - flyoutRect.height - this._edgePadding;
-                }
-                else {
-                    bottom = Math.max(windowRect.height - anchorRect.top, this._edgePadding);
-                }
-            }
             else {
-                if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
-                    // it will render offscreen bellow, move it up a bit
-                    top = windowRect.height - flyoutRect.height - this._edgePadding;
+                if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
+                    // flyout wants to be higher than the window hight, and we don't need to avoid hiding the anchor
+                    // make the flyout height the height of the window
+                    if (flyoutRect.height >= windowRect.height) {
+                        height = windowRect.height;
+                        top = 0;
+                    }
+                    else {
+                        top = (windowRect.height - flyoutRect.height) / 2;
+                    }
                 }
                 else {
-                    top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+                    if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
+                        // it will render offscreen bellow, move it up a bit
+                        top = windowRect.height - flyoutRect.height - this._edgePadding;
+                    }
+                    else {
+                        top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+                    }
                 }
@@ -290,3 +312,2 @@ }
             }
-            flyout.style.height = height ? `${height}px` : null;
             if (width) {
@@ -298,2 +319,10 @@ // if we had to set the width, recalculate since the height could have changed
             }
+            if (height) {
+                flyout.style.maxHeight = `${height}px`;
+                flyout.style.setProperty('--mgt-flyout-set-height', `${height}px`);
+            }
+            else {
+                flyout.style.maxHeight = null;
+                flyout.style.setProperty('--mgt-flyout-set-height', `unset`);
+            }
         }
@@ -300,0 +329,0 @@ }

package.json

 {
   "name": "@microsoft/mgt-components",
-  "version": "2.1.0-preview.0ae5594",
+  "version": "2.1.0-preview.17ba514",
   "description": "The Microsoft Graph Toolkit Components",
@@ -40,3 +40,3 @@ "keywords": [
   "dependencies": {
-    "@microsoft/mgt-element": "2.1.0-preview.0ae5594",
+    "@microsoft/mgt-element": "2.1.0-preview.17ba514",
     "@microsoft/microsoft-graph-client": "^2.2.1",
@@ -43,0 +43,0 @@ "@microsoft/microsoft-graph-types": "^1.27.0",

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

@@ -12,3 +12,3 @@ // THIS FILE IS AUTO GENERATED
   css`
-:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.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}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff))}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
+:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.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}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
 `];

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

@@ -488,3 +488,3 @@ /**
         ${anchor}
-        <div slot="flyout" class="flyout-root">
+        <div slot="flyout" class="flyout-root" @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)}>
           ${this.renderFlyoutContent()}
@@ -984,34 +984,27 @@ </div>
   private handleArrowSelection(event: KeyboardEvent): void {
-    if (this._foundPeople.length) {
+    const peopleList = this.renderRoot.querySelector('.people-list');
+    if (peopleList && peopleList.children.length) {
       // update arrow count
       if (event.keyCode === 38) {
         // up arrow
-        if (this._arrowSelectionCount > 0) {
-          this._arrowSelectionCount--;
-        } else {
-          this._arrowSelectionCount = 0;
-        }
+        this._arrowSelectionCount =
+          (this._arrowSelectionCount - 1 + peopleList.children.length) % peopleList.children.length;
       }
       if (event.keyCode === 40) {
         // down arrow
-        if (
-          this._arrowSelectionCount + 1 !== this._foundPeople.length &&
-          this._arrowSelectionCount + 1 < this.showMax
-        ) {
-          this._arrowSelectionCount++;
-        } else {
-          this._arrowSelectionCount = 0;
-        }
+        this._arrowSelectionCount = (this._arrowSelectionCount + 1) % peopleList.children.length;
       }
 
-      const peopleList = this.renderRoot.querySelector('.people-list');
       // reset background color
-      if (peopleList) {
-        // tslint:disable-next-line: prefer-for-of
-        for (let i = 0; i < peopleList.children.length; i++) {
-          peopleList.children[i].classList.remove('focused');
-        }
+      // tslint:disable-next-line: prefer-for-of
+      for (let i = 0; i < peopleList.children.length; i++) {
+        peopleList.children[i].classList.remove('focused');
       }
+
       // set selected background
-      peopleList.children[this._arrowSelectionCount].classList.add('focused');
+      const focusedItem = peopleList.children[this._arrowSelectionCount];
+      if (focusedItem) {
+        focusedItem.classList.add('focused');
+        focusedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+      }
     }
@@ -1045,2 +1038,15 @@ }
   }
+
+  // stop propagating wheel event to flyout so mouse scrolling works
+  private handleSectionScroll(e: WheelEvent) {
+    const target = this.renderRoot.querySelector('.flyout-root') as HTMLElement;
+    if (target) {
+      if (
+        !(e.deltaY < 0 && target.scrollTop === 0) &&
+        !(e.deltaY > 0 && target.clientHeight + target.scrollTop >= target.scrollHeight - 1)
+      ) {
+        e.stopPropagation();
+      }
+    }
+  }
 }

src/components/sub-components/mgt-flyout/mgt-flyout.ts

@@ -84,3 +84,4 @@ /**
         flyout.style.setProperty('--mgt-flyout-set-width', null);
-        flyout.style.height = null;
+        flyout.style.setProperty('--mgt-flyout-set-height', null);
+        flyout.style.maxHeight = null;
         flyout.style.top = null;
@@ -303,25 +304,43 @@ flyout.style.left = null;
 
-      if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
-        if (flyoutRect.height >= windowRect.height) {
-          height = windowRect.height;
-          top = 0;
+      const anchorRectBottomToWindowBottom = windowRect.height - (anchorRect.top + anchorRect.height);
+      const anchorRectTopToWindowTop = anchorRect.top;
+
+      if (this.avoidHidingAnchor) {
+        if (anchorRectBottomToWindowBottom <= flyoutRect.height) {
+          if (anchorRectTopToWindowTop < flyoutRect.height) {
+            if (anchorRectTopToWindowTop > anchorRectBottomToWindowBottom) {
+              // more room top than bottom - render above
+              bottom = windowRect.height - anchorRect.top;
+              height = anchorRectTopToWindowTop;
+            } else {
+              // more room bottom than top
+              top = anchorRect.bottom;
+              height = anchorRectBottomToWindowBottom;
+            }
+          } else {
+            // render above anchor
+            bottom = windowRect.height - anchorRect.top;
+            height = anchorRectTopToWindowTop;
+          }
         } else {
-          top = (windowRect.height - flyoutRect.height) / 2;
+          top = anchorRect.bottom;
+          height = anchorRectBottomToWindowBottom;
         }
-      } else if (
-        this.avoidHidingAnchor &&
-        anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height &&
-        anchorRect.top - flyoutRect.height - this._edgePadding > 0
-      ) {
-        if (windowRect.height - anchorRect.top + flyoutRect.height < 0) {
-          bottom = windowRect.height - flyoutRect.height - this._edgePadding;
-        } else {
-          bottom = Math.max(windowRect.height - anchorRect.top, this._edgePadding);
-        }
       } else {
-        if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
-          // it will render offscreen bellow, move it up a bit
-          top = windowRect.height - flyoutRect.height - this._edgePadding;
+        if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
+          // flyout wants to be higher than the window hight, and we don't need to avoid hiding the anchor
+          // make the flyout height the height of the window
+          if (flyoutRect.height >= windowRect.height) {
+            height = windowRect.height;
+            top = 0;
+          } else {
+            top = (windowRect.height - flyoutRect.height) / 2;
+          }
         } else {
-          top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+          if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
+            // it will render offscreen bellow, move it up a bit
+            top = windowRect.height - flyoutRect.height - this._edgePadding;
+          } else {
+            top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+          }
         }
@@ -347,4 +366,2 @@ }
 
-      flyout.style.height = height ? `${height}px` : null;
-
       if (width) {
@@ -356,2 +373,10 @@ // if we had to set the width, recalculate since the height could have changed
       }
+
+      if (height) {
+        flyout.style.maxHeight = `${height}px`;
+        flyout.style.setProperty('--mgt-flyout-set-height', `${height}px`);
+      } else {
+        flyout.style.maxHeight = null;
+        flyout.style.setProperty('--mgt-flyout-set-height', `unset`);
+      }
     }
@@ -358,0 +383,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

2991661

increased by0.2%

Lines of code

33262

increased by0.19%

Dependency changes

• + Added@microsoft/mgt-element@2.1.0-preview.17ba514(transitive)

• - Removed@microsoft/mgt-element@2.1.0-preview.0ae5594(transitive)

• Updated@microsoft/mgt-element@2.1.0-preview.17ba514