@fluentui/react-button 0.20.0 → 0.20.3

package/dist-storybook/{main.58c37029a4231428e662.bundle.js → main.87dadd1789d336577e59.bundle.js}

@@ -207,8 +207,7 @@ tslib_1.__exportStar(__webpack_require__(694), exports);
 /* 27 */,
 /* 28 */,
 /* 29 */,
-/* 30 */,
-/* 31 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -217,6 +216,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var Styling_1 = __webpack_require__(4);
 exports.inputHeight = '18px';
 exports.borderWidth = '1px';
+exports.borderRadius = '3px';
 exports.borderWidthError = '1px';
 exports.borderSolid = 'solid';
 exports.borderNone = 'none';
@@ -227,7 +227,9 @@ exports.fontFamily =
 'Segoe UI, "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",sans-serif';
 exports.fontWeightRegular = '400';
 exports.fontWeightBold = '700';
+exports.choiceGroupDimensions = '18px';
 exports.inputControlHeight = '24px';
+exports.inputControlPadding = '12px';
 exports.inputControlHeightInner = '20px';
 exports.textAlignCenter = 'center';
 exports.transparent = 'transparent';
@@ -236,6 +238,7 @@ exports.MediumScreenSelector = Styling_1.getScreenSelector(Styling_1.ScreenWidth
 
 
 /***/ }),
+/* 31 */,
 /* 32 */,
 /* 33 */,
 /* 34 */,
@@ -636,7 +639,7 @@ exports.DEFAULT_ROW_HEIGHTS = {
 var values = tslib_1.__assign(tslib_1.__assign({}, exports.DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });
 exports.getDetailsRowStyles = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _o = props.cellStyleProps, cellStyleProps = _o === void 0 ? exports.DEFAULT_CELL_STYLE_PROPS : _o, enableUpdateAnimations = props.enableUpdateAnimations;
+    var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _o = props.cellStyleProps, cellStyleProps = _o === void 0 ? exports.DEFAULT_CELL_STYLE_PROPS : _o, enableUpdateAnimations = props.enableUpdateAnimations, disabled = props.disabled;
     var palette = theme.palette, fonts = theme.fonts;
     var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;
     var focusBorder = theme.semanticColors.focusBorder;
@@ -664,9 +667,20 @@ exports.getDetailsRowStyles = function (props) {
         focusBackground: neutralLight,
         focusHoverBackground: neutralQuaternaryAlt,
     };
+    var rowHighContrastFocus = {
+        top: 2,
+        right: 2,
+        bottom: 2,
+        left: 2,
+    };
     // Selected row styles
     var selectedStyles = [
-        Styling_1.getFocusStyle(theme, { inset: -1, borderColor: focusBorder, outlineColor: white }),
+        Styling_1.getFocusStyle(theme, {
+            inset: -1,
+            borderColor: focusBorder,
+            outlineColor: white,
+            highContrastStyle: rowHighContrastFocus,
+        }),
         classNames.isSelected,
         {
             color: colors.selectedMetaText,
@@ -809,6 +823,7 @@ exports.getDetailsRowStyles = function (props) {
                 _h),
         },
         compact && cellCompactStyles,
+        disabled && { opacity: 0.5 },
     ];
     return {
         root: [
@@ -964,12 +979,14 @@ var BaseColors;
 (function (BaseColors) {
     BaseColors.BLUE_F0F6FF = '#F0F6FF';
     BaseColors.BLUE_CCE1FF = '#cce1ff';
+    BaseColors.BLUE_C7E0F4 = '#C7E0F4';
     BaseColors.BLUE_DEECF9 = '#deecf9';
     BaseColors.BLUE_0000CD = '#0000cd';
     BaseColors.BLUE_00245B = '#00245B';
     BaseColors.BLUE_00E8E8 = '#00e8e8';
     BaseColors.BLUE_00FFFF = '#00ffff';
     BaseColors.BLUE_004578 = '#004578';
+    BaseColors.BLUE_004C87 = '#004C87';
     BaseColors.BLUE_005A9E = '#005A9E';
     BaseColors.BLUE_0078D4 = '#0078D4';
     BaseColors.BLUE_016AFE = '#016afe';
@@ -1037,6 +1054,7 @@ var BaseColors;
     BaseColors.GRAY_3B3A39 = '#3B3A39';
     BaseColors.GRAY_414141 = '#414141';
     BaseColors.GRAY_484644 = '#484644';
+    BaseColors.GRAY_585858 = '#585858';
     BaseColors.GRAY_595959 = '#595959';
     BaseColors.GRAY_605E5C = '#605E5C';
     BaseColors.GRAY_747474 = '#747474';
@@ -1318,6 +1336,14 @@ exports.DarkSemanticColors = {
             primaryButtonBackground: BaseColors.BLUE_043862,
         },
     },
+    slider: {
+        activeBackground: BaseColors.GRAY_A19F9D,
+        activeBackgroundHovered: BaseColors.BLUE_2899F5,
+        inactiveBackgroundHovered: BaseColors.BLUE_004C87,
+        activeDisabledBackground: BaseColors.GRAY_797775,
+        inactiveDisabledBackground: BaseColors.GRAY_292827,
+        activeBackgroundPressed: BaseColors.BLUE_3AA0F3,
+    },
 };
 exports.HighContrastDarkSemanticColors = {
     background: BaseColors.BLACK,
@@ -1532,6 +1558,14 @@ exports.HighContrastDarkSemanticColors = {
             primaryButtonBackground: BaseColors.BLUE_043862,
         },
     },
+    slider: {
+        activeBackground: BaseColors.GRAY_605E5C,
+        activeBackgroundHovered: BaseColors.BLUE_00FFFF,
+        inactiveBackgroundHovered: BaseColors.GRAY_585858,
+        activeDisabledBackground: BaseColors.GREEN_0AFF00,
+        inactiveDisabledBackground: BaseColors.GREEN_0AFF00,
+        activeBackgroundPressed: BaseColors.BLUE_00FFFF,
+    },
 };
 exports.LightSemanticColors = {
     background: BaseColors.WHITE,
@@ -1548,7 +1582,7 @@ exports.LightSemanticColors = {
         hyperlinkHovered: BaseColors.BLUE_004578,
         success: BaseColors.GREEN_428000,
         error: BaseColors.RED_A4262C,
-        placeholder: BaseColors.GRAY_8A8886,
+        placeholder: BaseColors.GRAY_605E5C,
     },
     statusBar: {
         link: BaseColors.BLUE_106EBE,
@@ -1746,6 +1780,14 @@ exports.LightSemanticColors = {
             primaryButtonBackground: BaseColors.BLUE_DEECF9,
         },
     },
+    slider: {
+        activeBackground: BaseColors.GRAY_605E5C,
+        activeBackgroundHovered: BaseColors.BLUE_0078D4,
+        inactiveBackgroundHovered: BaseColors.BLUE_C7E0F4,
+        activeDisabledBackground: BaseColors.GRAY_A19F9D,
+        inactiveDisabledBackground: BaseColors.GRAY_EDEBE9,
+        activeBackgroundPressed: BaseColors.BLUE_106EBE,
+    },
 };
 exports.HighContrastLightSemanticColors = {
     background: BaseColors.WHITE,
@@ -1960,6 +2002,14 @@ exports.HighContrastLightSemanticColors = {
             primaryButtonBackground: BaseColors.BLUE_DEECF9,
         },
     },
+    slider: {
+        activeBackground: BaseColors.GRAY_605E5C,
+        activeBackgroundHovered: BaseColors.PURPLE_800080,
+        inactiveBackgroundHovered: BaseColors.BLUE_C7E0F4,
+        activeDisabledBackground: BaseColors.RED_800000,
+        inactiveDisabledBackground: BaseColors.RED_800000,
+        activeBackgroundPressed: BaseColors.PURPLE_800080,
+    },
 };
 
 
@@ -2278,7 +2328,8 @@ function initializeResponsiveMode(element) {
 }
 exports.initializeResponsiveMode = initializeResponsiveMode;
 function getInitialResponsiveMode() {
-    return _defaultMode || _lastMode || ResponsiveMode.large;
+    var _a;
+    return _a = (_defaultMode !== null && _defaultMode !== void 0 ? _defaultMode : _lastMode), (_a !== null && _a !== void 0 ? _a : ResponsiveMode.large);
 }
 exports.getInitialResponsiveMode = getInitialResponsiveMode;
 function withResponsiveMode(ComposedComponent) {
@@ -2632,6 +2683,7 @@ var ContextualMenu_1 = __webpack_require__(248);
 var BaseButton_classNames_1 = __webpack_require__(194);
 var SplitButton_classNames_1 = __webpack_require__(719);
 var KeytipData_1 = __webpack_require__(79);
+var Utilities_2 = __webpack_require__(3);
 var TouchIdleDelay = 500; /* ms */
 var COMPONENT_NAME = 'BaseButton';
 /**
@@ -2718,16 +2770,8 @@ var BaseButton = /** @class */ (function (_super) {
             return React.createElement(Icon_1.FontIcon, tslib_1.__assign({ iconName: "ChevronDown" }, menuIconProps, { className: _this._classNames.menuIcon }));
         };
         _this._onRenderMenu = function (menuProps) {
-            var persistMenu = _this.props.persistMenu;
-            var menuHidden = _this.state.menuHidden;
-            var MenuType = _this.props.menuAs || ContextualMenu_1.ContextualMenu;
-            // the accessible menu label (accessible name) has a relationship to the button.
-            // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,
-            // AND the button has text, we'll set the menu aria-labelledBy to the text element id.
-            if (!menuProps.ariaLabel && !menuProps.labelElementId && _this._hasText()) {
-                menuProps = tslib_1.__assign(tslib_1.__assign({}, menuProps), { labelElementId: _this._labelId });
-            }
-            return (React.createElement(MenuType, tslib_1.__assign({ id: _this._labelId + '-menu', directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, menuProps, { shouldFocusOnContainer: _this._menuShouldFocusOnContainer, shouldFocusOnMount: _this._menuShouldFocusOnMount, hidden: persistMenu ? menuHidden : undefined, className: Utilities_1.css('ms-BaseButton-menuhost', menuProps.className), target: _this._isSplitButton ? _this._splitButtonContainer.current : _this._buttonElement.current, onDismiss: _this._onDismissMenu })));
+            var MenuType = _this.props.menuAs ? Utilities_2.composeComponentAs(_this.props.menuAs, ContextualMenu_1.ContextualMenu) : ContextualMenu_1.ContextualMenu;
+            return React.createElement(MenuType, tslib_1.__assign({}, menuProps));
         };
         _this._onDismissMenu = function (ev) {
             var menuProps = _this.props.menuProps;
@@ -3088,14 +3132,14 @@ var BaseButton = /** @class */ (function (_super) {
                 menuProps &&
                     !menuProps.doNotLayer &&
                     _this._shouldRenderMenu() &&
-                    onRenderMenu(menuProps, _this._onRenderMenu)))); };
+                    onRenderMenu(_this._getMenuProps(menuProps), _this._onRenderMenu)))); };
         var Content = keytipProps ? (
         // If we're making a split button, we won't put the keytip here
         React.createElement(KeytipData_1.KeytipData, { keytipProps: !this._isSplitButton ? keytipProps : undefined, ariaDescribedBy: buttonProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return Button(keytipAttributes); })) : (Button());
         if (menuProps && menuProps.doNotLayer) {
             return (React.createElement("span", { style: { display: 'inline-block' } },
                 Content,
-                this._shouldRenderMenu() && onRenderMenu(menuProps, this._onRenderMenu)));
+                this._shouldRenderMenu() && onRenderMenu(this._getMenuProps(menuProps), this._onRenderMenu)));
         }
         return (React.createElement(React.Fragment, null,
             Content,
@@ -3128,6 +3172,17 @@ var BaseButton = /** @class */ (function (_super) {
         // Purely a code maintainability/reuse issue, but logged as Issue #4979.
         return this.props.text !== null && (this.props.text !== undefined || typeof this.props.children === 'string');
     };
+    BaseButton.prototype._getMenuProps = function (menuProps) {
+        var persistMenu = this.props.persistMenu;
+        var menuHidden = this.state.menuHidden;
+        // the accessible menu label (accessible name) has a relationship to the button.
+        // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,
+        // AND the button has text, we'll set the menu aria-labelledBy to the text element id.
+        if (!menuProps.ariaLabel && !menuProps.labelElementId && this._hasText()) {
+            menuProps = tslib_1.__assign(tslib_1.__assign({}, menuProps), { labelElementId: this._labelId });
+        }
+        return tslib_1.__assign(tslib_1.__assign({ id: this._labelId + '-menu', directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, menuProps), { shouldFocusOnContainer: this._menuShouldFocusOnContainer, shouldFocusOnMount: this._menuShouldFocusOnMount, hidden: persistMenu ? menuHidden : undefined, className: Utilities_1.css('ms-BaseButton-menuhost', menuProps.className), target: this._isSplitButton ? this._splitButtonContainer.current : this._buttonElement.current, onDismiss: this._onDismissMenu });
+    };
     BaseButton.prototype._onRenderSplitButtonContent = function (tag, buttonProps) {
         var _this = this;
         var _a = this.props, _b = _a.styles, styles = _b === void 0 ? {} : _b, disabled = _a.disabled, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, getSplitButtonClassNames = _a.getSplitButtonClassNames, primaryDisabled = _a.primaryDisabled, menuProps = _a.menuProps, toggle = _a.toggle, role = _a.role, primaryActionButtonProps = _a.primaryActionButtonProps;
@@ -3290,7 +3345,7 @@ exports.getStyles = Utilities_1.memoizeFunction(function (theme) {
                 borderRadius: effects.roundedCorner2,
                 selectors: {
                     // IE11 workaround for preventing shift of child elements of a button when active.
-                    ':active > *': {
+                    ':active > span': {
                         position: 'relative',
                         left: 0,
                         top: 0,
@@ -3761,7 +3816,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('office-ui-fabric-react', '7.174.1');
+set_version_1.setVersion('office-ui-fabric-react', '7.185.5');
 
 
 /***/ }),
@@ -7463,16 +7518,8 @@ var Styling_1 = __webpack_require__(4);
 var Utilities_1 = __webpack_require__(3);
 exports.CONTEXTUAL_MENU_ITEM_HEIGHT = 36;
 var MediumScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMaxMedium);
-var getItemHighContrastStyles = Utilities_1.memoizeFunction(function () {
-    var _a;
-    return {
-        selectors: (_a = {},
-            _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, Styling_1.getHighContrastNoAdjustStyle()),
-            _a),
-    };
-});
 exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
     var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;
     var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;
@@ -7514,32 +7561,58 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             cursor: 'default',
             pointerEvents: 'none',
             selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText', opacity: 1 }, Styling_1.getHighContrastNoAdjustStyle()),
+                _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ 
+                    // ensure disabled text looks different than enabled
+                    color: 'GrayText', opacity: 1 }, Styling_1.getHighContrastNoAdjustStyle()),
                 _a),
         },
-        rootHovered: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor, color: ContextualMenuItemTextHoverColor, selectors: {
+        rootHovered: {
+            backgroundColor: ContextualMenuItemBackgroundHoverColor,
+            color: ContextualMenuItemTextHoverColor,
+            selectors: {
                 '.ms-ContextualMenu-icon': {
                     color: palette.themeDarkAlt,
                 },
                 '.ms-ContextualMenu-submenuIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootFocused: tslib_1.__assign({ backgroundColor: palette.white }, getItemHighContrastStyles()),
-        rootChecked: tslib_1.__assign({ selectors: {
+            },
+        },
+        rootFocused: {
+            backgroundColor: palette.white,
+        },
+        rootChecked: {
+            selectors: {
                 '.ms-ContextualMenu-checkmarkIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootPressed: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, selectors: {
+            },
+        },
+        rootPressed: {
+            backgroundColor: ContextualMenuItemBackgroundSelectedColor,
+            selectors: {
                 '.ms-ContextualMenu-icon': {
                     color: palette.themeDark,
                 },
                 '.ms-ContextualMenu-submenuIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootExpanded: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, color: semanticColors.bodyTextChecked }, getItemHighContrastStyles()),
+            },
+        },
+        rootExpanded: {
+            backgroundColor: ContextualMenuItemBackgroundSelectedColor,
+            color: semanticColors.bodyTextChecked,
+            selectors: (_b = {
+                    '.ms-ContextualMenu-submenuIcon': (_c = {},
+                        _c[Styling_1.HighContrastSelector] = {
+                            // icons inside of anchor tags are not properly inheriting color in high contrast
+                            color: 'inherit',
+                        },
+                        _c)
+                },
+                _b[Styling_1.HighContrastSelector] = tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()),
+                _b),
+        },
         linkContent: {
             whiteSpace: 'nowrap',
             height: 'inherit',
@@ -7582,45 +7655,21 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             margin: '0 4px',
             verticalAlign: 'middle',
             flexShrink: '0',
-            selectors: (_b = {},
-                _b[MediumScreenSelector] = {
+            selectors: (_d = {},
+                _d[MediumScreenSelector] = {
                     fontSize: Styling_1.IconFontSizes.large,
                     width: Styling_1.IconFontSizes.large,
                 },
-                _b),
+                _d),
         },
         iconColor: {
             color: semanticColors.menuIcon,
-            selectors: (_c = {},
-                _c[Styling_1.HighContrastSelector] = {
-                    color: 'inherit',
-                },
-                _c['$root:hover &'] = {
-                    selectors: (_d = {},
-                        _d[Styling_1.HighContrastSelector] = {
-                            color: 'HighlightText',
-                        },
-                        _d),
-                },
-                _c['$root:focus &'] = {
-                    selectors: (_e = {},
-                        _e[Styling_1.HighContrastSelector] = {
-                            color: 'HighlightText',
-                        },
-                        _e),
-                },
-                _c),
         },
         iconDisabled: {
             color: semanticColors.disabledBodyText,
         },
         checkmarkIcon: {
             color: semanticColors.bodySubtext,
-            selectors: (_f = {},
-                _f[Styling_1.HighContrastSelector] = {
-                    color: 'HighlightText',
-                },
-                _f),
         },
         subMenuIcon: {
             height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
@@ -7631,7 +7680,7 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             verticalAlign: 'middle',
             flexShrink: '0',
             fontSize: Styling_1.IconFontSizes.small,
-            selectors: (_g = {
+            selectors: (_e = {
                     ':hover': {
                         color: palette.neutralPrimary,
                     },
@@ -7639,13 +7688,10 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
                         color: palette.neutralPrimary,
                     }
                 },
-                _g[MediumScreenSelector] = {
+                _e[MediumScreenSelector] = {
                     fontSize: Styling_1.IconFontSizes.medium,
                 },
-                _g[Styling_1.HighContrastSelector] = {
-                    color: 'HighlightText',
-                },
-                _g),
+                _e),
         },
         splitButtonFlexContainer: [
             Styling_1.getFocusStyle(theme),
@@ -8905,11 +8951,12 @@ var DetailsRowCheckBase = function (props) {
         checked: selected,
         theme: theme,
     };
+    var divProps = Utilities_1.getNativeElementProps('div', buttonProps, ['aria-label', 'aria-labelledby', 'aria-describedby']);
     return canSelect ? (React.createElement("div", tslib_1.__assign({}, buttonProps, { role: "checkbox", 
         // eslint-disable-next-line deprecation/deprecation
         className: Utilities_1.css(classNames.root, classNames.check), "aria-checked": selected, "data-selection-toggle": true, "data-automationid": "DetailsRowCheck", tabIndex: -1 }), onRenderCheckbox(detailsCheckboxProps))) : (
     // eslint-disable-next-line deprecation/deprecation
-    React.createElement("div", tslib_1.__assign({}, buttonProps, { className: Utilities_1.css(classNames.root, classNames.check) })));
+    React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css(classNames.root, classNames.check) })));
 };
 var FastCheck = React.memo(function (props) {
     return React.createElement(Check_1.Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });
@@ -14754,9 +14801,12 @@ var fabric_icons_15_1 = __webpack_require__(2348);
 var fabric_icons_16_1 = __webpack_require__(2349);
 var fabric_icons_17_1 = __webpack_require__(2350);
 var iconAliases_1 = __webpack_require__(2351);
-var DEFAULT_BASE_URL = 'https://spoprod-a.akamaihd.net/files/fabric/assets/icons/';
+var utilities_1 = __webpack_require__(11);
+var DEFAULT_BASE_URL = 'https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/';
+var win = utilities_1.getWindow();
 function initializeIcons(baseUrl, options) {
-    if (baseUrl === void 0) { baseUrl = DEFAULT_BASE_URL; }
+    if (baseUrl === void 0) { baseUrl = (_c = (_b = (_a = win) === null || _a === void 0 ? void 0 : _a.FabricConfig) === null || _b === void 0 ? void 0 : _b.fontBaseUrl, (_c !== null && _c !== void 0 ? _c : DEFAULT_BASE_URL)); }
+    var _a, _b, _c;
     [
         fabric_icons_1.initializeIcons,
         fabric_icons_0_1.initializeIcons,
@@ -17049,6 +17099,7 @@ exports.getNativeProps = getNativeProps;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SELECTION_CHANGE = 'change';
+exports.SELECTION_ITEMS_CHANGE = 'items-change';
 /**
  * {@docCategory Selection}
  */
@@ -18464,11 +18515,15 @@ var _onThemeChangeCallbacks = [];
 exports.ThemeSettingName = 'theme';
 function initializeThemeInCustomizations() {
     var _a;
-    var _b, _c;
-    if (!utilities_1.Customizations.getSettings([exports.ThemeSettingName]).theme) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var win = utilities_1.getWindow();
-        if ((_c = (_b = win) === null || _b === void 0 ? void 0 : _b.FabricConfig) === null || _c === void 0 ? void 0 : _c.theme) {
+    var _b, _c, _d, _e;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var win = utilities_1.getWindow();
+    if ((_c = (_b = win) === null || _b === void 0 ? void 0 : _b.FabricConfig) === null || _c === void 0 ? void 0 : _c.legacyTheme) {
+        // does everything the `else` clause does and more, such as invoke legacy theming
+        loadTheme(win.FabricConfig.legacyTheme);
+    }
+    else if (!utilities_1.Customizations.getSettings([exports.ThemeSettingName]).theme) {
+        if ((_e = (_d = win) === null || _d === void 0 ? void 0 : _d.FabricConfig) === null || _e === void 0 ? void 0 : _e.theme) {
             _theme = createTheme_1.createTheme(win.FabricConfig.theme);
         }
         // Set the default theme.
@@ -18923,33 +18978,37 @@ var LayerBase = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._rootRef = React.createRef();
         _this._createLayerElement = function () {
+            var _a, _b;
             var hostId = _this.props.hostId;
             var doc = Utilities_1.getDocument(_this._rootRef.current);
             var host = _this._getHost();
-            if (!doc || !host) {
+            if (!host) {
                 return;
             }
             // If one was already existing, remove.
             _this._removeLayerElement();
-            var layerElement = doc.createElement('div');
-            var classNames = _this._getClassNames();
-            layerElement.className = classNames.root;
-            Utilities_1.setPortalAttribute(layerElement);
-            Utilities_1.setVirtualParent(layerElement, _this._rootRef.current);
-            _this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
-            _this.setState({
-                hostId: hostId,
-                layerElement: layerElement,
-            }, function () {
-                // eslint-disable-next-line deprecation/deprecation
-                var _a = _this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
-                if (onLayerMounted) {
-                    onLayerMounted();
-                }
-                if (onLayerDidMount) {
-                    onLayerDidMount();
-                }
-            });
+            // eslint-disable-next-line deprecation/deprecation
+            var layerElement = (_b = (_a = host.ownerDocument, (_a !== null && _a !== void 0 ? _a : doc))) === null || _b === void 0 ? void 0 : _b.createElement('div');
+            if (layerElement) {
+                var classNames = _this._getClassNames();
+                layerElement.className = classNames.root;
+                Utilities_1.setPortalAttribute(layerElement);
+                Utilities_1.setVirtualParent(layerElement, _this._rootRef.current);
+                _this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
+                _this.setState({
+                    hostId: hostId,
+                    layerElement: layerElement,
+                }, function () {
+                    // eslint-disable-next-line deprecation/deprecation
+                    var _a = _this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
+                    if (onLayerMounted) {
+                        onLayerMounted();
+                    }
+                    if (onLayerDidMount) {
+                        onLayerDidMount();
+                    }
+                });
+            }
         };
         _this.state = {};
         if (true) {
@@ -19011,17 +19070,19 @@ var LayerBase = /** @class */ (function (_super) {
         return classNames;
     };
     LayerBase.prototype._getHost = function () {
+        var _a, _b, _c, _d, _e, _f;
         var hostId = this.props.hostId;
         var doc = Utilities_1.getDocument(this._rootRef.current);
-        if (!doc) {
-            return undefined;
-        }
         if (hostId) {
-            return doc.getElementById(hostId);
+            var layerHost = Layer_notification_1.getLayerHost(hostId);
+            if (layerHost) {
+                return _a = layerHost.rootRef.current, (_a !== null && _a !== void 0 ? _a : null);
+            }
+            return _c = (_b = doc) === null || _b === void 0 ? void 0 : _b.getElementById(hostId), (_c !== null && _c !== void 0 ? _c : null);
         }
         else {
             var defaultHostSelector = Layer_notification_1.getDefaultTarget();
-            return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;
+            return _f = (defaultHostSelector ? (_d = doc) === null || _d === void 0 ? void 0 : _d.querySelector(defaultHostSelector) : (_e = doc) === null || _e === void 0 ? void 0 : _e.body), (_f !== null && _f !== void 0 ? _f : null);
         }
     };
     LayerBase.defaultProps = {
@@ -19189,6 +19250,7 @@ exports.FabricBase = FabricBase;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var _layersByHostId = {};
+var _layerHostsById = {};
 var _defaultHostSelector;
 /**
  * Register a layer for a given host id
@@ -19200,6 +19262,13 @@ function registerLayer(hostId, callback) {
         _layersByHostId[hostId] = [];
     }
     _layersByHostId[hostId].push(callback);
+    var layerHosts = _layerHostsById[hostId];
+    if (layerHosts) {
+        for (var _i = 0, layerHosts_1 = layerHosts; _i < layerHosts_1.length; _i++) {
+            var layerHost = layerHosts_1[_i];
+            layerHost.notifyLayersChanged();
+        }
+    }
 }
 exports.registerLayer = registerLayer;
 /**
@@ -19208,17 +19277,77 @@ exports.registerLayer = registerLayer;
  * @param layer Layer instance
  */
 function unregisterLayer(hostId, callback) {
-    if (_layersByHostId[hostId]) {
-        var idx = _layersByHostId[hostId].indexOf(callback);
+    var layers = _layersByHostId[hostId];
+    if (layers) {
+        var idx = layers.indexOf(callback);
         if (idx >= 0) {
-            _layersByHostId[hostId].splice(idx, 1);
-            if (_layersByHostId[hostId].length === 0) {
+            layers.splice(idx, 1);
+            if (layers.length === 0) {
                 delete _layersByHostId[hostId];
             }
         }
     }
+    var layerHosts = _layerHostsById[hostId];
+    if (layerHosts) {
+        for (var _i = 0, layerHosts_2 = layerHosts; _i < layerHosts_2.length; _i++) {
+            var layerHost = layerHosts_2[_i];
+            layerHost.notifyLayersChanged();
+        }
+    }
 }
 exports.unregisterLayer = unregisterLayer;
+/**
+ * Gets the number of layers currently registered with a host id.
+ * @param hostId Id of the layer host.
+ * @returns The number of layers currently registered with the host.
+ */
+function getLayerCount(hostId) {
+    var layers = _layerHostsById[hostId];
+    return layers ? layers.length : 0;
+}
+exports.getLayerCount = getLayerCount;
+/**
+ * Gets the Layer Host instance associated with a hostId, if applicable.
+ * @param hostId
+ * @returns A component ref for the associated layer host.
+ */
+function getLayerHost(hostId) {
+    var layerHosts = _layerHostsById[hostId];
+    return (layerHosts && layerHosts[0]) || undefined;
+}
+exports.getLayerHost = getLayerHost;
+/**
+ * Registers a Layer Host with an associated hostId.
+ * @param hostId Id of the layer host
+ * @param layerHost layer host instance
+ */
+function registerLayerHost(hostId, layerHost) {
+    var layerHosts = _layerHostsById[hostId] || (_layerHostsById[hostId] = []);
+    // Insert this at the start of an array to avoid race conditions between mount and unmount.
+    // If a LayerHost is re-mounted, and mount of the new instance may occur before the unmount of the old one.
+    // Putting the new instance at the start of this array ensures that calls to `getLayerHost` will immediately
+    // get the new one even if the old one is around briefly.
+    layerHosts.unshift(layerHost);
+}
+exports.registerLayerHost = registerLayerHost;
+/**
+ * Unregisters a Layer Host from the associated hostId.
+ * @param hostId Id of the layer host
+ * @param layerHost layer host instance
+ */
+function unregisterLayerHost(hostId, layerHost) {
+    var layerHosts = _layerHostsById[hostId];
+    if (layerHosts) {
+        var idx = layerHosts.indexOf(layerHost);
+        if (idx >= 0) {
+            layerHosts.splice(idx, 1);
+        }
+        if (layerHosts.length === 0) {
+            delete _layerHostsById[hostId];
+        }
+    }
+}
+exports.unregisterLayerHost = unregisterLayerHost;
 /**
  * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
  * care about the specific host.
@@ -19295,8 +19424,26 @@ var Styling_1 = __webpack_require__(4);
 var ContextualMenu_classNames_1 = __webpack_require__(249);
 var getClassNames = Utilities_1.classNamesFunction();
 var getContextualMenuItemClassNames = Utilities_1.classNamesFunction();
-function getSubmenuItems(item) {
-    return item.subMenuProps ? item.subMenuProps.items : item.items;
+function getSubmenuItems(item, options) {
+    var _a;
+    var target = (_a = options) === null || _a === void 0 ? void 0 : _a.target;
+    // eslint-disable-next-line deprecation/deprecation
+    var items = item.subMenuProps ? item.subMenuProps.items : item.items;
+    if (items) {
+        var overrideItems = [];
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var subItem = items_1[_i];
+            if (subItem.preferMenuTargetAsEventTarget) {
+                // For sub-items which need an overridden target, intercept `onClick`
+                var onClick = subItem.onClick, contextItem = tslib_1.__rest(subItem, ["onClick"]);
+                overrideItems.push(tslib_1.__assign(tslib_1.__assign({}, contextItem), { onClick: getOnClickWithOverrideTarget(onClick, target) }));
+            }
+            else {
+                overrideItems.push(subItem);
+            }
+        }
+        return overrideItems;
+    }
 }
 exports.getSubmenuItems = getSubmenuItems;
 /**
@@ -19599,7 +19746,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
             _this._onItemClickBase(item, ev, ev.currentTarget);
         };
         _this._onItemClickBase = function (item, ev, target) {
-            var items = getSubmenuItems(item);
+            var menuTarget = _this.props.target;
+            var items = getSubmenuItems(item, { target: menuTarget });
             // Cancel a async menu item hover timeout action from being taken and instead
             // just trigger the click event instead.
             _this._cancelSubMenuTimer();
@@ -19630,9 +19778,13 @@ var ContextualMenuBase = /** @class */ (function (_super) {
             ev.stopPropagation();
         };
         _this._executeItemClick = function (item, ev) {
+            var menuTarget = _this.props.target;
             if (item.disabled || item.isDisabled) {
                 return;
             }
+            if (item.preferMenuTargetAsEventTarget) {
+                overrideTarget(ev, menuTarget);
+            }
             var dismiss = false;
             if (item.onClick) {
                 dismiss = !!item.onClick(ev, item);
@@ -19829,8 +19981,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
         // The menu should only return if items were provided, if no items were provided then it should not appear.
         if (items && items.length > 0) {
             var totalItemCount = 0;
-            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-                var item = items_1[_i];
+            for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+                var item = items_2[_i];
                 if (item.itemType !== ContextualMenu_types_1.ContextualMenuItemType.Divider && item.itemType !== ContextualMenu_types_1.ContextualMenuItemType.Header) {
                     var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;
                     totalItemCount += itemCount;
@@ -20074,9 +20226,10 @@ var ContextualMenuBase = /** @class */ (function (_super) {
         var _a = this.state, submenuTarget = _a.submenuTarget, expandedMenuItemKey = _a.expandedMenuItemKey;
         var item = this._findItemByKey(expandedMenuItemKey);
         var submenuProps = null;
+        var menuTarget = this.props.target;
         if (item) {
             submenuProps = {
-                items: getSubmenuItems(item),
+                items: getSubmenuItems(item, { target: menuTarget }),
                 target: submenuTarget,
                 onDismiss: this._onSubMenuDismiss,
                 isSubMenu: true,
@@ -20091,6 +20244,10 @@ var ContextualMenuBase = /** @class */ (function (_super) {
             if (item.subMenuProps) {
                 Utilities_1.assign(submenuProps, item.subMenuProps);
             }
+            if (item.preferMenuTargetAsEventTarget) {
+                var onItemClick = item.onItemClick;
+                submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);
+            }
         }
         return submenuProps;
     };
@@ -20104,8 +20261,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
      * @param items - The items to look for the key
      */
     ContextualMenuBase.prototype._findItemByKeyFromItems = function (key, items) {
-        for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
-            var item = items_2[_i];
+        for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
+            var item = items_3[_i];
             if (item.itemType === ContextualMenu_types_1.ContextualMenuItemType.Section && item.sectionProps) {
                 var match = this._findItemByKeyFromItems(key, item.sectionProps.items);
                 if (match) {
@@ -20166,6 +20323,25 @@ var ContextualMenuBase = /** @class */ (function (_super) {
     return ContextualMenuBase;
 }(React.Component));
 exports.ContextualMenuBase = ContextualMenuBase;
+function getOnClickWithOverrideTarget(onClick, target) {
+    return onClick
+        ? function (ev, item) {
+            overrideTarget(ev, target);
+            return onClick(ev, item);
+        }
+        : onClick;
+}
+function overrideTarget(ev, target) {
+    if (ev && target) {
+        ev.persist();
+        if (target instanceof Event) {
+            ev.target = target.target;
+        }
+        else if (target instanceof Element) {
+            ev.target = target;
+        }
+    }
+}
 
 
 /***/ }),
@@ -22023,7 +22199,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var theme_1 = __webpack_require__(80);
 var AzureColors_1 = __webpack_require__(86);
 var AzureType_1 = __webpack_require__(115);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var AzureStyleSettings_1 = __webpack_require__(193);
 var darkExtendedSemanticColors = {
     bodyBackground: AzureColors_1.DarkSemanticColors.background,
@@ -22132,6 +22308,12 @@ var darkExtendedSemanticColors = {
     iconButtonFill: AzureColors_1.DarkSemanticColors.primaryButton.rest.background,
     iconButtonFillHovered: AzureColors_1.DarkSemanticColors.primaryButton.hover.background,
     labelText: AzureColors_1.DarkSemanticColors.text.label,
+    sliderActiveBackground: AzureColors_1.DarkSemanticColors.slider.activeBackground,
+    sliderInActiveHover: AzureColors_1.DarkSemanticColors.slider.inactiveBackgroundHovered,
+    sliderActiveHover: AzureColors_1.DarkSemanticColors.slider.activeBackgroundHovered,
+    sliderActivePressed: AzureColors_1.DarkSemanticColors.slider.activeBackgroundPressed,
+    sliderDisabledActiveBackground: AzureColors_1.DarkSemanticColors.slider.activeDisabledBackground,
+    sliderDisabledInActiveBackground: AzureColors_1.DarkSemanticColors.slider.inactiveDisabledBackground,
     statusDefaultBackground: AzureColors_1.DarkSemanticColors.statusBar.background.default,
     statusDefaultBorder: AzureColors_1.DarkSemanticColors.statusBar.border.default,
     statusErrorBackground: AzureColors_1.DarkSemanticColors.statusBar.background.error,
@@ -22864,7 +23046,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var theme_1 = __webpack_require__(80);
 var AzureColors_1 = __webpack_require__(86);
 var AzureType_1 = __webpack_require__(115);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var AzureStyleSettings_1 = __webpack_require__(193);
 var lightExtendedSemanticColors = {
     bodyBackground: AzureColors_1.LightSemanticColors.background,
@@ -22973,6 +23155,12 @@ var lightExtendedSemanticColors = {
     iconButtonFill: AzureColors_1.LightSemanticColors.primaryButton.rest.background,
     iconButtonFillHovered: AzureColors_1.LightSemanticColors.primaryButton.hover.background,
     labelText: AzureColors_1.LightSemanticColors.text.label,
+    sliderActiveBackground: AzureColors_1.LightSemanticColors.slider.activeBackground,
+    sliderInActiveHover: AzureColors_1.LightSemanticColors.slider.inactiveBackgroundHovered,
+    sliderActiveHover: AzureColors_1.LightSemanticColors.slider.activeBackgroundHovered,
+    sliderActivePressed: AzureColors_1.LightSemanticColors.slider.activeBackgroundPressed,
+    sliderDisabledActiveBackground: AzureColors_1.LightSemanticColors.slider.activeDisabledBackground,
+    sliderDisabledInActiveBackground: AzureColors_1.LightSemanticColors.slider.inactiveDisabledBackground,
     statusDefaultBackground: AzureColors_1.LightSemanticColors.statusBar.background.default,
     statusDefaultBorder: AzureColors_1.LightSemanticColors.statusBar.border.default,
     statusErrorBackground: AzureColors_1.LightSemanticColors.statusBar.background.error,
@@ -23040,7 +23228,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var theme_1 = __webpack_require__(80);
 var AzureColors_1 = __webpack_require__(86);
 var AzureType_1 = __webpack_require__(115);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var AzureStyleSettings_1 = __webpack_require__(193);
 var highContrastLightExtendedSemanticColors = {
     bodyBackground: AzureColors_1.HighContrastLightSemanticColors.background,
@@ -23150,6 +23338,12 @@ var highContrastLightExtendedSemanticColors = {
     iconButtonFill: AzureColors_1.HighContrastLightSemanticColors.text.icon,
     iconButtonFillHovered: AzureColors_1.HighContrastLightSemanticColors.primaryButton.hover.text,
     labelText: AzureColors_1.HighContrastLightSemanticColors.text.label,
+    sliderActiveBackground: AzureColors_1.HighContrastLightSemanticColors.slider.activeBackground,
+    sliderInActiveHover: AzureColors_1.HighContrastLightSemanticColors.slider.inactiveBackgroundHovered,
+    sliderActiveHover: AzureColors_1.HighContrastLightSemanticColors.slider.activeBackgroundHovered,
+    sliderActivePressed: AzureColors_1.HighContrastLightSemanticColors.slider.activeBackgroundPressed,
+    sliderDisabledActiveBackground: AzureColors_1.HighContrastLightSemanticColors.slider.activeDisabledBackground,
+    sliderDisabledInActiveBackground: AzureColors_1.HighContrastLightSemanticColors.slider.inactiveDisabledBackground,
     statusDefaultBackground: AzureColors_1.HighContrastLightSemanticColors.statusBar.background.default,
     statusDefaultBorder: AzureColors_1.HighContrastLightSemanticColors.statusBar.border.default,
     statusErrorBackground: AzureColors_1.HighContrastLightSemanticColors.statusBar.background.error,
@@ -23217,7 +23411,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var theme_1 = __webpack_require__(80);
 var AzureColors_1 = __webpack_require__(86);
 var AzureType_1 = __webpack_require__(115);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var AzureStyleSettings_1 = __webpack_require__(193);
 var highContrastDarkExtendedSemanticColors = {
     bodyBackground: AzureColors_1.HighContrastDarkSemanticColors.background,
@@ -23326,6 +23520,12 @@ var highContrastDarkExtendedSemanticColors = {
     iconButtonFill: AzureColors_1.HighContrastDarkSemanticColors.text.icon,
     iconButtonFillHovered: AzureColors_1.HighContrastDarkSemanticColors.primaryButton.hover.text,
     labelText: AzureColors_1.HighContrastDarkSemanticColors.text.label,
+    sliderActiveBackground: AzureColors_1.HighContrastDarkSemanticColors.slider.activeBackground,
+    sliderInActiveHover: AzureColors_1.HighContrastDarkSemanticColors.slider.inactiveBackgroundHovered,
+    sliderActiveHover: AzureColors_1.HighContrastDarkSemanticColors.slider.activeBackgroundHovered,
+    sliderActivePressed: AzureColors_1.HighContrastDarkSemanticColors.slider.activeBackgroundPressed,
+    sliderDisabledActiveBackground: AzureColors_1.HighContrastDarkSemanticColors.slider.activeDisabledBackground,
+    sliderDisabledInActiveBackground: AzureColors_1.HighContrastDarkSemanticColors.slider.inactiveDisabledBackground,
     statusDefaultBackground: AzureColors_1.HighContrastDarkSemanticColors.statusBar.background.default,
     statusDefaultBorder: AzureColors_1.HighContrastDarkSemanticColors.statusBar.border.default,
     statusErrorBackground: AzureColors_1.HighContrastDarkSemanticColors.statusBar.background.error,
@@ -23679,7 +23879,6 @@ var TooltipHostBase = /** @class */ (function (_super) {
             _this._clearDismissTimer();
             _this._clearOpenTimer();
             if (delay !== Tooltip_types_1.TooltipDelay.zero) {
-                _this.setState({ isAriaPlaceholderRendered: true });
                 var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`
                 _this._openTimerId = _this._async.setTimeout(function () {
                     _this._toggleTooltip(true);
@@ -23726,7 +23925,7 @@ var TooltipHostBase = /** @class */ (function (_super) {
         };
         _this._toggleTooltip = function (isTooltipVisible) {
             if (_this.state.isTooltipVisible !== isTooltipVisible) {
-                _this.setState({ isAriaPlaceholderRendered: false, isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });
+                _this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });
             }
         };
         _this._getDelayTime = function (delay) {
@@ -23754,7 +23953,7 @@ var TooltipHostBase = /** @class */ (function (_super) {
             theme: theme,
             className: className,
         });
-        var _c = this.state, isAriaPlaceholderRendered = _c.isAriaPlaceholderRendered, isTooltipVisible = _c.isTooltipVisible;
+        var isTooltipVisible = this.state.isTooltipVisible;
         var tooltipId = id || this._defaultTooltipId;
         var isContentPresent = !!(content ||
             (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));
@@ -23762,12 +23961,12 @@ var TooltipHostBase = /** @class */ (function (_super) {
         var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;
         return (React.createElement("div", tslib_1.__assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._hideTooltip }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "aria-describedby": ariaDescribedBy }),
             children,
-            showTooltip && (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ id: tooltipId, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: Utilities_1.assign({}, calloutProps, {
+            showTooltip && (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ id: tooltipId + "--tooltip", content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: Utilities_1.assign({}, calloutProps, {
                     onDismiss: this._hideTooltip,
                     onMouseEnter: this._onTooltipMouseEnter,
                     onMouseLeave: this._onTooltipMouseLeave,
-                }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), tooltipProps))),
-            isAriaPlaceholderRendered && (React.createElement("div", { id: tooltipId, style: Styling_1.hiddenContentStyle }, content))));
+                }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties, ['id']), tooltipProps))),
+            React.createElement("div", { hidden: true, id: tooltipId, style: Styling_1.hiddenContentStyle }, content)));
     };
     TooltipHostBase.prototype.componentWillUnmount = function () {
         if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {
@@ -24600,6 +24799,7 @@ var Button_1 = __webpack_require__(44);
 var DirectionalHint_1 = __webpack_require__(53);
 var ResizeGroup_1 = __webpack_require__(379);
 var Tooltip_1 = __webpack_require__(256);
+var Utilities_2 = __webpack_require__(3);
 var getClassNames = Utilities_1.classNamesFunction();
 var OVERFLOW_KEY = 'overflow';
 var nullFunction = function () { return null; };
@@ -24657,7 +24857,7 @@ var BreadcrumbBase = /** @class */ (function (_super) {
             return tslib_1.__assign(tslib_1.__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });
         };
         _this._onRenderBreadcrumb = function (data) {
-            var _a = data.props, ariaLabel = _a.ariaLabel, _b = _a.dividerAs, DividerType = _b === void 0 ? Icon_1.Icon : _b, _c = _a.onRenderItem, onRenderItem = _c === void 0 ? _this._onRenderItem : _c, overflowAriaLabel = _a.overflowAriaLabel, overflowIndex = _a.overflowIndex, onRenderOverflowIcon = _a.onRenderOverflowIcon, overflowButtonAs = _a.overflowButtonAs;
+            var _a = data.props, ariaLabel = _a.ariaLabel, _b = _a.dividerAs, DividerType = _b === void 0 ? Icon_1.Icon : _b, onRenderItem = _a.onRenderItem, overflowAriaLabel = _a.overflowAriaLabel, overflowIndex = _a.overflowIndex, onRenderOverflowIcon = _a.onRenderOverflowIcon, overflowButtonAs = _a.overflowButtonAs;
             var renderedOverflowItems = data.renderedOverflowItems, renderedItems = data.renderedItems;
             var contextualItems = renderedOverflowItems.map(function (item) {
                 var isActionable = !!(item.onClick || item.href);
@@ -24675,9 +24875,18 @@ var BreadcrumbBase = /** @class */ (function (_super) {
             // knows not to render on that item
             var lastItemIndex = renderedItems.length - 1;
             var hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;
-            var itemElements = renderedItems.map(function (item, index) { return (React.createElement("li", { className: _this._classNames.listItem, key: item.key || String(index) },
-                onRenderItem(item, _this._onRenderItem),
-                (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: Utilities_1.getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item })))); });
+            var itemElements = renderedItems.map(function (item, index) {
+                var finalOnRenderItem = _this._onRenderItem;
+                if (item.onRender) {
+                    finalOnRenderItem = Utilities_2.composeRenderFunction(item.onRender, finalOnRenderItem);
+                }
+                if (onRenderItem) {
+                    finalOnRenderItem = Utilities_2.composeRenderFunction(onRenderItem, finalOnRenderItem);
+                }
+                return (React.createElement("li", { className: _this._classNames.listItem, key: item.key || String(index) },
+                    finalOnRenderItem(item),
+                    (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: Utilities_1.getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item }))));
+            });
             if (hasOverflowItems) {
                 var iconProps = !onRenderOverflowIcon ? { iconName: 'More' } : {};
                 var onRenderMenuIcon = onRenderOverflowIcon ? onRenderOverflowIcon : nullFunction;
@@ -24697,17 +24906,27 @@ var BreadcrumbBase = /** @class */ (function (_super) {
                     React.createElement("ol", { className: _this._classNames.list }, itemElements))));
         };
         _this._onRenderItem = function (item) {
-            var as = item.as, href = item.href, onClick = item.onClick, isCurrentItem = item.isCurrentItem, text = item.text, additionalProps = tslib_1.__rest(item, ["as", "href", "onClick", "isCurrentItem", "text"]);
+            if (!item) {
+                return null;
+            }
+            var as = item.as, href = item.href, onClick = item.onClick, isCurrentItem = item.isCurrentItem, text = item.text, onRenderContent = item.onRenderContent, additionalProps = tslib_1.__rest(item, ["as", "href", "onClick", "isCurrentItem", "text", "onRenderContent"]);
+            var finalOnRenderContent = defaultOnRenderCrumbContent;
+            if (onRenderContent) {
+                finalOnRenderContent = Utilities_2.composeRenderFunction(onRenderContent, finalOnRenderContent);
+            }
+            if (_this.props.onRenderItemContent) {
+                finalOnRenderContent = Utilities_2.composeRenderFunction(_this.props.onRenderItemContent, finalOnRenderContent);
+            }
             if (onClick || href) {
                 return (React.createElement(Link_1.Link, tslib_1.__assign({}, additionalProps, { as: as, className: _this._classNames.itemLink, href: href, "aria-current": isCurrentItem ? 'page' : undefined, 
                     // eslint-disable-next-line react/jsx-no-bind
                     onClick: _this._onBreadcrumbClicked.bind(_this, item) }),
-                    React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));
+                    React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));
             }
             else {
                 var Tag = as || 'span';
                 return (React.createElement(Tag, tslib_1.__assign({}, additionalProps, { className: _this._classNames.item }),
-                    React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));
+                    React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));
             }
         };
         _this._onBreadcrumbClicked = function (item, ev) {
@@ -24763,6 +24982,9 @@ var BreadcrumbBase = /** @class */ (function (_super) {
     return BreadcrumbBase;
 }(React.Component));
 exports.BreadcrumbBase = BreadcrumbBase;
+function defaultOnRenderCrumbContent(item) {
+    return item ? React.createElement(React.Fragment, null, item.text) : null;
+}
 
 
 /***/ }),
@@ -27810,14 +28032,12 @@ var TextFieldBase = /** @class */ (function (_super) {
         return (React.createElement("textarea", tslib_1.__assign({ id: this._id }, textAreaProps, { ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, "aria-labelledby": ariaLabelledBy, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], "aria-invalid": !!this._errorMessage, "aria-label": this.props.ariaLabel, readOnly: this.props.readOnly, onFocus: this._onFocus, onBlur: this._onBlur })));
     };
     TextFieldBase.prototype._renderInput = function () {
-        var _a;
-        var inputProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, [
-            'defaultValue',
-            'type',
-        ]);
-        var ariaLabelledBy = this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined);
-        var type = this.state.isRevealingPassword ? 'text' : (_a = this.props.type, (_a !== null && _a !== void 0 ? _a : 'text'));
-        return (React.createElement("input", tslib_1.__assign({ type: type, id: this._id, "aria-labelledby": ariaLabelledBy }, inputProps, { ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, "aria-label": this.props.ariaLabel, "aria-describedby": this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], "aria-invalid": !!this._errorMessage, readOnly: this.props.readOnly, onFocus: this._onFocus, onBlur: this._onBlur })));
+        var inputProps = tslib_1.__assign(tslib_1.__assign({ type: this.state.isRevealingPassword ? 'text' : this.props.type || 'text', id: this._id }, Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['defaultValue', 'type'])), { 'aria-labelledby': this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined), ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, 'aria-label': this.props.ariaLabel, 'aria-describedby': this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], 'aria-invalid': !!this._errorMessage, onFocus: this._onFocus, onBlur: this._onBlur });
+        var defaultRender = function (updatedInputProps) {
+            return React.createElement("input", tslib_1.__assign({}, updatedInputProps));
+        };
+        var onRenderInput = this.props.onRenderInput || defaultRender;
+        return onRenderInput(inputProps, defaultRender);
     };
     TextFieldBase.prototype._validate = function (value) {
         var _this = this;
@@ -28143,6 +28363,9 @@ var ComboBox = /** @class */ (function (_super) {
          * {@inheritdoc}
          */
         _this.focus = function (shouldOpenOnFocus, useFocusAsync) {
+            if (_this.props.disabled === true) {
+                return;
+            }
             if (_this._autofill.current) {
                 if (useFocusAsync) {
                     Utilities_1.focusAsync(_this._autofill.current);
@@ -28412,9 +28635,54 @@ var ComboBox = /** @class */ (function (_super) {
         };
         // Render List of items
         _this._onRenderList = function (props) {
-            var onRenderItem = props.onRenderItem, options = props.options, label = props.label, ariaLabel = props.ariaLabel;
+            var _a = props.onRenderItem, onRenderItem = _a === void 0 ? _this._onRenderItem : _a, label = props.label, ariaLabel = props.ariaLabel;
+            var queue = { items: [] };
+            var renderedList = [];
             var id = _this._id;
-            return (React.createElement("div", { id: id + '-list', className: _this._classNames.optionsContainer, "aria-labelledby": label && id + '-label', "aria-label": ariaLabel && !label ? ariaLabel : undefined, role: "listbox" }, options.map(function (item) { return onRenderItem(item, _this._onRenderItem); })));
+            var emptyQueue = function () {
+                var newGroup = queue.id
+                    ? [
+                        React.createElement("div", { role: "group", key: queue.id, "aria-labelledby": queue.id }, queue.items),
+                    ]
+                    : queue.items;
+                renderedList = tslib_1.__spreadArrays(renderedList, newGroup);
+                // Flush items and id
+                queue = { items: [] };
+            };
+            var placeRenderedOptionIntoQueue = function (item, index) {
+                /*
+                  Case Header
+                    empty queue if it's not already empty
+                    ensure unique ID for header and set queue ID
+                    push header into queue
+                  Case Divider
+                    push divider into queue if not first item
+                    empty queue if not already empty
+                  Default
+                    push item into queue
+                */
+                switch (item.itemType) {
+                    case index_2.SelectableOptionMenuItemType.Header:
+                        queue.items.length > 0 && emptyQueue();
+                        id = id + item.key;
+                        queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({ id: id }, item), { index: index }), _this._onRenderItem));
+                        queue.id = id;
+                        break;
+                    case index_2.SelectableOptionMenuItemType.Divider:
+                        index > 0 && queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({}, item), { index: index }), _this._onRenderItem));
+                        queue.items.length > 0 && emptyQueue();
+                        break;
+                    default:
+                        queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({}, item), { index: index }), _this._onRenderItem));
+                }
+            };
+            // Place options into the queue. Queue will be emptied anytime a Header or Divider is encountered
+            props.options.forEach(function (item, index) {
+                placeRenderedOptionIntoQueue(item, index);
+            });
+            // Push remaining items into all renderedList
+            queue.items.length > 0 && emptyQueue();
+            return (React.createElement("div", { id: id + '-list', className: _this._classNames.optionsContainer, "aria-labelledby": label && id + '-label', "aria-label": ariaLabel && !label ? ariaLabel : undefined, role: "listbox" }, renderedList));
         };
         // Render items
         _this._onRenderItem = function (item) {
@@ -28449,11 +28717,14 @@ var ComboBox = /** @class */ (function (_super) {
                     // eslint-disable-next-line react/jsx-no-bind
                     onMouseEnter: _this._onOptionMouseEnter.bind(_this, item.index), 
                     // eslint-disable-next-line react/jsx-no-bind
-                    onMouseMove: _this._onOptionMouseMove.bind(_this, item.index), onMouseLeave: _this._onOptionMouseLeave, role: "option", "aria-selected": isSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, disabled: item.disabled, title: title }, React.createElement("span", { className: optionClassNames.optionTextWrapper, ref: isSelected ? _this._selectedElement : undefined }, onRenderOption(item, _this._onRenderOptionContent)))) : (React.createElement(Checkbox_1.Checkbox, { id: id + '-list' + item.index, ariaLabel: item.ariaLabel, key: item.key, "data-index": item.index, styles: optionStyles, className: 'ms-ComboBox-option', "data-is-focusable": true, onChange: _this._onItemClick(item), label: item.text, role: "option", checked: isChecked, title: title, disabled: item.disabled, 
+                    onMouseMove: _this._onOptionMouseMove.bind(_this, item.index), onMouseLeave: _this._onOptionMouseLeave, role: "option", "aria-selected": isChecked ? 'true' : 'false', ariaLabel: item.ariaLabel, disabled: item.disabled, title: title }, React.createElement("span", { className: optionClassNames.optionTextWrapper, ref: isSelected ? _this._selectedElement : undefined }, onRenderOption(item, _this._onRenderOptionContent)))) : (React.createElement(Checkbox_1.Checkbox, { id: id + '-list' + item.index, ariaLabel: item.ariaLabel, key: item.key, styles: optionStyles, className: 'ms-ComboBox-option', onChange: _this._onItemClick(item), label: item.text, checked: isChecked, title: title, disabled: item.disabled, 
                     // eslint-disable-next-line react/jsx-no-bind
-                    onRenderLabel: onRenderCheckboxLabel, inputProps: {
-                        'aria-selected': isSelected ? 'true' : 'false',
-                    } }));
+                    onRenderLabel: onRenderCheckboxLabel, inputProps: tslib_1.__assign({ 
+                        // aria-selected should only be applied to checked items, not hovered items
+                        'aria-selected': isChecked ? 'true' : 'false', role: 'option' }, {
+                        'data-index': item.index,
+                        'data-is-focusable': true,
+                    }) }));
             };
             return (React.createElement(ComboBoxOptionWrapper, { key: item.key, index: item.index, disabled: item.disabled, isSelected: isSelected, isChecked: isChecked, text: item.text, 
                 // eslint-disable-next-line react/jsx-no-bind
@@ -28912,7 +29183,7 @@ var ComboBox = /** @class */ (function (_super) {
                 onRenderContainer(tslib_1.__assign(tslib_1.__assign({}, this.props), { onRenderList: onRenderList,
                     onRenderItem: onRenderItem,
                     onRenderOption: onRenderOption, options: this.state.currentOptions.map(function (item, index) { return (tslib_1.__assign(tslib_1.__assign({}, item), { index: index })); }), onDismiss: this._onDismiss }), this._onRenderContainer),
-            React.createElement("div", { role: "region", "aria-live": "polite", "aria-atomic": "true", id: errorMessageId, className: hasErrorMessage ? this._classNames.errorMessage : '' }, errorMessage !== undefined ? errorMessage : '')));
+            hasErrorMessage && (React.createElement("div", { role: "alert", id: errorMessageId, className: this._classNames.errorMessage }, errorMessage))));
     };
     ComboBox.prototype._getPendingString = function (currentPendingValue, currentOptions, index) {
         return currentPendingValue !== null && currentPendingValue !== undefined
@@ -29308,7 +29579,7 @@ var ComboBox = /** @class */ (function (_super) {
     };
     ComboBox.prototype._renderHeader = function (item) {
         var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOptionContent : _a;
-        return (React.createElement("div", { key: item.key, className: this._classNames.header }, onRenderOption(item, this._onRenderOptionContent)));
+        return (React.createElement("div", { id: item.id, key: item.key, className: this._classNames.header }, onRenderOption(item, this._onRenderOptionContent)));
     };
     /**
      * If we are coming from a mouseOut:
@@ -30451,6 +30722,17 @@ var DatePickerBase = /** @class */ (function (_super) {
                 });
             }
         };
+        _this._renderReadOnlyInput = function (inputProps) {
+            var formattedDate = _this.state.formattedDate;
+            var _a = _this.props, styles = _a.styles, theme = _a.theme, placeholder = _a.placeholder, tabIndex = _a.tabIndex, underlined = _a.underlined;
+            var classNames = getClassNames(styles, { theme: theme, underlined: underlined });
+            var divProps = Utilities_1.getNativeProps(inputProps, Utilities_1.divProperties);
+            // Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar
+            // don't register. Workaround is rendering a div with role="combobox" (passed in via TextField props).
+            return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css(divProps.className, classNames.readOnlyTextField), tabIndex: tabIndex || 0 }), formattedDate || (
+            // Putting the placeholder in a separate span fixes specificity issues for the text color
+            React.createElement("span", { className: classNames.readOnlyPlaceholder }, placeholder))));
+        };
         Utilities_1.initializeComponentRef(_this);
         _this.state = _this._getDefaultState();
         _this._id = props.id || Utilities_1.getId('DatePicker');
@@ -30496,6 +30778,7 @@ var DatePickerBase = /** @class */ (function (_super) {
             theme: theme,
             className: className,
             disabled: disabled,
+            underlined: underlined,
             label: !!label,
             isDatePickerShown: isDatePickerShown,
         });
@@ -30503,9 +30786,10 @@ var DatePickerBase = /** @class */ (function (_super) {
         var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties, ['value']);
         var iconProps = textFieldProps && textFieldProps.iconProps;
         var textFieldId = textFieldProps && textFieldProps.id && textFieldProps.id !== this._id ? textFieldProps.id : this._id + '-label';
+        var readOnly = !allowTextInput && !disabled;
         return (React.createElement("div", tslib_1.__assign({}, nativeProps, { className: classNames.root }),
             React.createElement("div", { ref: this._datePickerDiv, "aria-haspopup": "true", "aria-owns": isDatePickerShown ? calloutId : undefined, className: classNames.wrapper },
-                React.createElement(TextField_1.TextField, tslib_1.__assign({ role: "combobox", label: label, "aria-expanded": isDatePickerShown, ariaLabel: ariaLabel, "aria-controls": isDatePickerShown ? calloutId : undefined, required: isRequired, disabled: disabled, errorMessage: this._getErrorMessage(), placeholder: placeholder, borderless: borderless, value: formattedDate, componentRef: this._textField, underlined: underlined, tabIndex: tabIndex, readOnly: !allowTextInput }, textFieldProps, { id: textFieldId, className: Utilities_1.css(classNames.textField, textFieldProps && textFieldProps.className), iconProps: tslib_1.__assign(tslib_1.__assign({ iconName: 'Calendar' }, iconProps), { className: Utilities_1.css(classNames.icon, iconProps && iconProps.className), onClick: this._onIconClick }), onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChange: this._onTextFieldChanged }))),
+                React.createElement(TextField_1.TextField, tslib_1.__assign({ role: "combobox", label: label, "aria-expanded": isDatePickerShown, ariaLabel: ariaLabel, "aria-controls": isDatePickerShown ? calloutId : undefined, required: isRequired, disabled: disabled, errorMessage: this._getErrorMessage(), placeholder: placeholder, borderless: borderless, value: formattedDate, componentRef: this._textField, underlined: underlined, tabIndex: tabIndex, readOnly: !allowTextInput }, textFieldProps, { id: textFieldId, className: Utilities_1.css(classNames.textField, textFieldProps && textFieldProps.className), iconProps: tslib_1.__assign(tslib_1.__assign({ iconName: 'Calendar' }, iconProps), { className: Utilities_1.css(classNames.icon, iconProps && iconProps.className), onClick: this._onIconClick }), onKeyDown: this._onTextFieldKeyDown, onFocus: this._onTextFieldFocus, onBlur: this._onTextFieldBlur, onClick: this._onTextFieldClick, onChange: this._onTextFieldChanged, onRenderInput: readOnly ? this._renderReadOnlyInput : undefined }))),
             isDatePickerShown && (React.createElement(Callout_1.Callout, tslib_1.__assign({ id: calloutId, role: "dialog", ariaLabel: pickerAriaLabel, isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: this._datePickerDiv.current, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge }, calloutProps, { className: Utilities_1.css(classNames.callout, calloutProps && calloutProps.className), onDismiss: this._calendarDismissed, onPositioned: this._onCalloutPositioned }),
                 React.createElement(FocusTrapZone_1.FocusTrapZone, { isClickableOutsideFocusTrap: true, disableFirstFocus: this.props.disableAutoFocus, forceFocusInsideTrap: false },
                     React.createElement(CalendarType, tslib_1.__assign({}, calendarProps, { onSelectDate: this._onSelectDate, onDismiss: this._calendarDismissed, isMonthPickerVisible: this.props.isMonthPickerVisible, showMonthPickerAsOverlay: this.props.showMonthPickerAsOverlay, today: this.props.today, value: selectedDate || initialPickerDate, firstDayOfWeek: firstDayOfWeek, strings: strings, highlightCurrentMonth: this.props.highlightCurrentMonth, highlightSelectedMonth: this.props.highlightSelectedMonth, showWeekNumbers: this.props.showWeekNumbers, firstWeekOfYear: this.props.firstWeekOfYear, showGoToToday: this.props.showGoToToday, dateTimeFormatter: this.props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: this._calendar, showCloseButton: showCloseButton, allFocusable: allFocusable })))))));
@@ -31080,13 +31364,7 @@ var DetailsHeaderBase = /** @class */ (function (_super) {
                         content: ariaLabelForSelectAllCheckbox,
                         children: (React.createElement(DetailsRowCheck_1.DetailsRowCheck, { id: this._id + "-check", "aria-label": selectionMode === interfaces_1.SelectionMode.multiple
                                 ? ariaLabelForSelectAllCheckbox
-                                : ariaLabelForSelectionColumn, "aria-describedby": !isCheckboxHidden
-                                ? ariaLabelForSelectAllCheckbox && !this.props.onRenderColumnHeaderTooltip
-                                    ? this._id + "-checkTooltip"
-                                    : undefined
-                                : ariaLabelForSelectionColumn && !this.props.onRenderColumnHeaderTooltip
-                                    ? this._id + "-checkTooltip"
-                                    : undefined, "data-is-focusable": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),
+                                : ariaLabelForSelectionColumn, "data-is-focusable": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),
                     }, this._onRenderColumnHeaderTooltip)),
                     !this.props.onRenderColumnHeaderTooltip ? (ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectAllCheckbox)) : ariaLabelForSelectionColumn && isCheckboxHidden ? (React.createElement("label", { key: "__checkboxLabel", id: this._id + "-checkTooltip", className: classNames.accessibleLabel, "aria-hidden": true }, ariaLabelForSelectionColumn)) : null) : null,
                 ]
@@ -31703,18 +31981,19 @@ var DetailsRowBase = /** @class */ (function (_super) {
         }
     };
     DetailsRowBase.prototype.render = function () {
-        var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, id = _a.id, _c = _a.onRenderCheck, onRenderCheck = _c === void 0 ? this._onRenderCheck : _c, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, onRenderItemColumn = _a.onRenderItemColumn, getCellValueKey = _a.getCellValueKey, selectionMode = _a.selectionMode, _d = _a.rowWidth, rowWidth = _d === void 0 ? 0 : _d, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, getRowAriaDescribedBy = _a.getRowAriaDescribedBy, checkButtonAriaLabel = _a.checkButtonAriaLabel, checkboxCellClassName = _a.checkboxCellClassName, 
+        var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, _c = _a.flatIndexOffset, flatIndexOffset = _c === void 0 ? 2 : _c, id = _a.id, _d = _a.onRenderCheck, onRenderCheck = _d === void 0 ? this._onRenderCheck : _d, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, onRenderItemColumn = _a.onRenderItemColumn, getCellValueKey = _a.getCellValueKey, selectionMode = _a.selectionMode, _e = _a.rowWidth, rowWidth = _e === void 0 ? 0 : _e, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, getRowAriaDescription = _a.getRowAriaDescription, getRowAriaDescribedBy = _a.getRowAriaDescribedBy, checkButtonAriaLabel = _a.checkButtonAriaLabel, checkboxCellClassName = _a.checkboxCellClassName, 
         /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
-        _e = _a.rowFieldsAs, 
+        _f = _a.rowFieldsAs, 
         /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
-        RowFields = _e === void 0 ? DetailsRowFields_1.DetailsRowFields : _e, selection = _a.selection, indentWidth = _a.indentWidth, enableUpdateAnimations = _a.enableUpdateAnimations, compact = _a.compact, theme = _a.theme, styles = _a.styles, cellsByColumn = _a.cellsByColumn, groupNestingDepth = _a.groupNestingDepth, _f = _a.useFastIcons, useFastIcons = _f === void 0 ? true : _f, cellStyleProps = _a.cellStyleProps;
-        var _g = this.state, columnMeasureInfo = _g.columnMeasureInfo, isDropping = _g.isDropping;
-        var _h = this.state.selectionState, _j = _h.isSelected, isSelected = _j === void 0 ? false : _j, _k = _h.isSelectionModal, isSelectionModal = _k === void 0 ? false : _k;
+        RowFields = _f === void 0 ? DetailsRowFields_1.DetailsRowFields : _f, selection = _a.selection, indentWidth = _a.indentWidth, enableUpdateAnimations = _a.enableUpdateAnimations, compact = _a.compact, theme = _a.theme, styles = _a.styles, cellsByColumn = _a.cellsByColumn, groupNestingDepth = _a.groupNestingDepth, _g = _a.useFastIcons, useFastIcons = _g === void 0 ? true : _g, cellStyleProps = _a.cellStyleProps, _h = _a.disabled, disabled = _h === void 0 ? false : _h;
+        var _j = this.state, columnMeasureInfo = _j.columnMeasureInfo, isDropping = _j.isDropping;
+        var _k = this.state.selectionState, _l = _k.isSelected, isSelected = _l === void 0 ? false : _l, _m = _k.isSelectionModal, isSelectionModal = _m === void 0 ? false : _m;
         var isDraggable = dragDropEvents ? !!(dragDropEvents.canDrag && dragDropEvents.canDrag(item)) : undefined;
         var droppingClassName = isDropping ? this._droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : '';
         var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;
+        var ariaRowDescription = getRowAriaDescription ? getRowAriaDescription(item) : undefined;
         var ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;
-        var canSelect = !!selection && selection.canSelectItem(item, itemIndex);
+        var canSelect = !!selection && selection.canSelectItem(item, itemIndex) && !disabled;
         var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple;
         var showCheckbox = selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_types_1.CheckboxVisibility.hidden;
         var ariaSelected = selectionMode === interfaces_1.SelectionMode.none ? undefined : isSelected;
@@ -31729,6 +32008,7 @@ var DetailsRowBase = /** @class */ (function (_super) {
             compact: compact,
             enableUpdateAnimations: enableUpdateAnimations,
             cellStyleProps: cellStyleProps,
+            disabled: disabled,
         }));
         var rowClassNames = {
             isMultiline: this._classNames.isMultiline,
@@ -31749,12 +32029,14 @@ var DetailsRowBase = /** @class */ (function (_super) {
         var rowFields = (React.createElement(RowFields, { rowClassNames: this._rowClassNames, rowHeaderId: id + "-header", cellsByColumn: cellsByColumn, columns: columns, item: item, itemIndex: itemIndex, columnStartIndex: (showCheckbox ? 1 : 0) + (groupNestingDepth ? 1 : 0), onRenderItemColumn: onRenderItemColumn, getCellValueKey: getCellValueKey, enableUpdateAnimations: enableUpdateAnimations, cellStyleProps: cellStyleProps }));
         var defaultRole = 'row';
         var role = this.props.role ? this.props.role : defaultRole;
+        this._ariaRowDescriptionId = Utilities_2.getId('DetailsRow-description');
         return (React.createElement(FocusZone_1.FocusZone, tslib_1.__assign({ "data-is-focusable": true }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), (typeof isDraggable === 'boolean'
             ? {
                 'data-is-draggable': isDraggable,
                 draggable: isDraggable,
             }
-            : {}), { direction: FocusZone_1.FocusZoneDirection.horizontal, elementRef: this._root, componentRef: this._focusZone, role: role, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className: this._classNames.root, "data-selection-index": itemIndex, "data-selection-touch-invoke": true, "data-item-index": itemIndex, "aria-rowindex": groupNestingDepth ? undefined : itemIndex + 1, "aria-level": (groupNestingDepth && groupNestingDepth + 1) || undefined, "data-automationid": "DetailsRow", style: { minWidth: rowWidth }, "aria-selected": ariaSelected, allowFocusRoot: true }),
+            : {}), { direction: FocusZone_1.FocusZoneDirection.horizontal, elementRef: this._root, componentRef: this._focusZone, role: role, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "aria-describedby": ariaRowDescription ? this._ariaRowDescriptionId : ariaDescribedBy, className: this._classNames.root, "data-selection-index": itemIndex, "data-selection-touch-invoke": true, "data-selection-disabled": disabled || undefined, "data-item-index": itemIndex, "aria-rowindex": groupNestingDepth ? undefined : itemIndex + flatIndexOffset, "aria-level": (groupNestingDepth && groupNestingDepth + 1) || undefined, "data-automationid": "DetailsRow", style: { minWidth: rowWidth }, "aria-selected": ariaSelected, allowFocusRoot: true }),
+            ariaRowDescription ? (React.createElement("span", { key: "description", role: "presentation", hidden: true, id: this._ariaRowDescriptionId }, ariaRowDescription)) : null,
             showCheckbox && (React.createElement("div", { role: "gridcell", "aria-colindex": 1, "data-selection-toggle": true, className: this._classNames.checkCell }, onRenderCheck({
                 id: id ? id + "-checkbox" : undefined,
                 selected: isSelected,
@@ -32559,7 +32841,8 @@ function withViewport(ComposedComponent) {
             return _this;
         }
         WithViewportComponent.prototype.componentDidMount = function () {
-            var _a = this.props, skipViewportMeasures = _a.skipViewportMeasures, disableResizeObserver = _a.disableResizeObserver;
+            var _this = this;
+            var _a = this.props, delayFirstMeasure = _a.delayFirstMeasure, disableResizeObserver = _a.disableResizeObserver, skipViewportMeasures = _a.skipViewportMeasures;
             var win = Utilities_1.getWindow(this._root.current);
             this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {
                 leading: false,
@@ -32571,12 +32854,19 @@ function withViewport(ComposedComponent) {
                 else {
                     this._events.on(win, 'resize', this._onAsyncResize);
                 }
-                this._updateViewport();
+                if (delayFirstMeasure) {
+                    this._async.setTimeout(function () {
+                        _this._updateViewport();
+                    }, RESIZE_DELAY);
+                }
+                else {
+                    this._updateViewport();
+                }
             }
         };
         WithViewportComponent.prototype.componentDidUpdate = function (previousProps) {
             var previousSkipViewportMeasures = previousProps.skipViewportMeasures;
-            var _a = this.props, skipViewportMeasures = _a.skipViewportMeasures, disableResizeObserver = _a.disableResizeObserver;
+            var _a = this.props, disableResizeObserver = _a.disableResizeObserver, skipViewportMeasures = _a.skipViewportMeasures;
             var win = Utilities_1.getWindow(this._root.current);
             if (skipViewportMeasures !== previousSkipViewportMeasures) {
                 if (!skipViewportMeasures) {
@@ -32944,7 +33234,7 @@ var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
  */
 var DetailsListInner = function (props) {
     var selection = props.selection;
-    var ariaLabelForListHeader = props.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = props.ariaLabelForSelectAllCheckbox, ariaLabelForSelectionColumn = props.ariaLabelForSelectionColumn, className = props.className, checkboxVisibility = props.checkboxVisibility, compact = props.compact, constrainMode = props.constrainMode, dragDropEvents = props.dragDropEvents, groups = props.groups, groupProps = props.groupProps, indentWidth = props.indentWidth, items = props.items, isPlaceholderData = props.isPlaceholderData, isHeaderVisible = props.isHeaderVisible, layoutMode = props.layoutMode, onItemInvoked = props.onItemInvoked, onItemContextMenu = props.onItemContextMenu, onColumnHeaderClick = props.onColumnHeaderClick, onColumnHeaderContextMenu = props.onColumnHeaderContextMenu, _a = props.selectionMode, selectionMode = _a === void 0 ? selection.mode : _a, selectionPreservedOnEmptyClick = props.selectionPreservedOnEmptyClick, selectionZoneProps = props.selectionZoneProps, ariaLabel = props.ariaLabel, ariaLabelForGrid = props.ariaLabelForGrid, rowElementEventMap = props.rowElementEventMap, _b = props.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = props.getKey, listProps = props.listProps, usePageCache = props.usePageCache, onShouldVirtualize = props.onShouldVirtualize, viewport = props.viewport, minimumPixelsForDrag = props.minimumPixelsForDrag, getGroupHeight = props.getGroupHeight, styles = props.styles, theme = props.theme, _c = props.cellStyleProps, cellStyleProps = _c === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _c, onRenderCheckbox = props.onRenderCheckbox, useFastIcons = props.useFastIcons, dragDropHelper = props.dragDropHelper, adjustedColumns = props.adjustedColumns, isCollapsed = props.isCollapsed, isSizing = props.isSizing, isSomeGroupExpanded = props.isSomeGroupExpanded, version = props.version, rootRef = props.rootRef, listRef = props.listRef, focusZoneRef = props.focusZoneRef, columnReorderOptions = props.columnReorderOptions, groupedListRef = props.groupedListRef, headerRef = props.headerRef, onGroupExpandStateChanged = props.onGroupExpandStateChanged, onColumnIsSizingChanged = props.onColumnIsSizingChanged, onRowDidMount = props.onRowDidMount, onRowWillUnmount = props.onRowWillUnmount, disableSelectionZone = props.disableSelectionZone, onColumnResized = props.onColumnResized, onColumnAutoResized = props.onColumnAutoResized, onToggleCollapse = props.onToggleCollapse, onActiveRowChanged = props.onActiveRowChanged, onBlur = props.onBlur, eventsToRegister = props.rowElementEventMap, onRenderMissingItem = props.onRenderMissingItem, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, getRowAriaLabel = props.getRowAriaLabel, getRowAriaDescribedBy = props.getRowAriaDescribedBy, checkButtonAriaLabel = props.checkButtonAriaLabel, checkboxCellClassName = props.checkboxCellClassName, useReducedRowRenderer = props.useReducedRowRenderer, enableUpdateAnimations = props.enableUpdateAnimations, enterModalSelectionOnTouch = props.enterModalSelectionOnTouch, onRenderDefaultRow = props.onRenderDefaultRow, selectionZoneRef = props.selectionZoneRef;
+    var ariaLabelForListHeader = props.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = props.ariaLabelForSelectAllCheckbox, ariaLabelForSelectionColumn = props.ariaLabelForSelectionColumn, className = props.className, checkboxVisibility = props.checkboxVisibility, compact = props.compact, constrainMode = props.constrainMode, dragDropEvents = props.dragDropEvents, groups = props.groups, groupProps = props.groupProps, indentWidth = props.indentWidth, items = props.items, isPlaceholderData = props.isPlaceholderData, isHeaderVisible = props.isHeaderVisible, layoutMode = props.layoutMode, onItemInvoked = props.onItemInvoked, onItemContextMenu = props.onItemContextMenu, onColumnHeaderClick = props.onColumnHeaderClick, onColumnHeaderContextMenu = props.onColumnHeaderContextMenu, _a = props.selectionMode, selectionMode = _a === void 0 ? selection.mode : _a, selectionPreservedOnEmptyClick = props.selectionPreservedOnEmptyClick, selectionZoneProps = props.selectionZoneProps, ariaLabel = props.ariaLabel, ariaLabelForGrid = props.ariaLabelForGrid, rowElementEventMap = props.rowElementEventMap, _b = props.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = props.getKey, listProps = props.listProps, usePageCache = props.usePageCache, onShouldVirtualize = props.onShouldVirtualize, viewport = props.viewport, minimumPixelsForDrag = props.minimumPixelsForDrag, getGroupHeight = props.getGroupHeight, styles = props.styles, theme = props.theme, _c = props.cellStyleProps, cellStyleProps = _c === void 0 ? DetailsRow_styles_1.DEFAULT_CELL_STYLE_PROPS : _c, onRenderCheckbox = props.onRenderCheckbox, useFastIcons = props.useFastIcons, dragDropHelper = props.dragDropHelper, adjustedColumns = props.adjustedColumns, isCollapsed = props.isCollapsed, isSizing = props.isSizing, isSomeGroupExpanded = props.isSomeGroupExpanded, version = props.version, rootRef = props.rootRef, listRef = props.listRef, focusZoneRef = props.focusZoneRef, columnReorderOptions = props.columnReorderOptions, groupedListRef = props.groupedListRef, headerRef = props.headerRef, onGroupExpandStateChanged = props.onGroupExpandStateChanged, onColumnIsSizingChanged = props.onColumnIsSizingChanged, onRowDidMount = props.onRowDidMount, onRowWillUnmount = props.onRowWillUnmount, disableSelectionZone = props.disableSelectionZone, onColumnResized = props.onColumnResized, onColumnAutoResized = props.onColumnAutoResized, onToggleCollapse = props.onToggleCollapse, onActiveRowChanged = props.onActiveRowChanged, onBlur = props.onBlur, eventsToRegister = props.rowElementEventMap, onRenderMissingItem = props.onRenderMissingItem, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, getRowAriaLabel = props.getRowAriaLabel, getRowAriaDescribedBy = props.getRowAriaDescribedBy, checkButtonAriaLabel = props.checkButtonAriaLabel, checkButtonGroupAriaLabel = props.checkButtonGroupAriaLabel, checkboxCellClassName = props.checkboxCellClassName, useReducedRowRenderer = props.useReducedRowRenderer, enableUpdateAnimations = props.enableUpdateAnimations, enterModalSelectionOnTouch = props.enterModalSelectionOnTouch, onRenderDefaultRow = props.onRenderDefaultRow, selectionZoneRef = props.selectionZoneRef;
     var defaultRole = 'grid';
     var role = props.role ? props.role : defaultRole;
     var rowId = utilities_1.getId('row');
@@ -33077,9 +33367,7 @@ var DetailsListInner = function (props) {
                 var ariaPosInSet = groupHeaderProps.ariaPosInSet, ariaSetSize = groupHeaderProps.ariaSetSize;
                 return onRenderDetailsGroupHeader(tslib_1.__assign(tslib_1.__assign({}, groupHeaderProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth,
                     indentWidth: indentWidth,
-                    selection: selection,
-                    selectionMode: selectionMode,
-                    viewport: viewport,
+                    selection: selection, selectionMode: checkboxVisibility !== DetailsList_types_1.CheckboxVisibility.hidden ? selectionMode : index_1.SelectionMode.none, viewport: viewport,
                     checkboxVisibility: checkboxVisibility,
                     cellStyleProps: cellStyleProps, ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: ariaSetSize ? ariaSetSize + (isHeaderVisible ? 1 : 0) : undefined, ariaRowIndex: ariaPosInSet ? ariaPosInSet + (isHeaderVisible ? 1 : 0) : undefined }), defaultRender);
             }
@@ -33100,8 +33388,11 @@ var DetailsListInner = function (props) {
         cellStyleProps,
     ]);
     var finalGroupProps = React.useMemo(function () {
-        return tslib_1.__assign(tslib_1.__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader });
-    }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, role]);
+        var _a, _b, _c;
+        return tslib_1.__assign(tslib_1.__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader, 
+            // pass through custom group header checkbox label
+            headerProps: tslib_1.__assign(tslib_1.__assign({}, (_a = groupProps) === null || _a === void 0 ? void 0 : _a.headerProps), { selectAllButtonProps: tslib_1.__assign({ 'aria-label': checkButtonGroupAriaLabel }, (_c = (_b = groupProps) === null || _b === void 0 ? void 0 : _b.headerProps) === null || _c === void 0 ? void 0 : _c.selectAllButtonProps) }) });
+    }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, checkButtonGroupAriaLabel, role]);
     var sumColumnWidths = react_hooks_1.useConst(function () {
         return Utilities_1.memoizeFunction(function (columns) {
             var totalWidth = 0;
@@ -33121,6 +33412,7 @@ var DetailsListInner = function (props) {
         var rowProps = {
             item: item,
             itemIndex: index,
+            flatIndexOffset: isHeaderVisible ? 2 : 1,
             compact: compact,
             columns: adjustedColumns,
             groupNestingDepth: nestingDepth,
@@ -33175,6 +33467,7 @@ var DetailsListInner = function (props) {
         collapseAllVisibility,
         getRowAriaLabel,
         getRowAriaDescribedBy,
+        isHeaderVisible,
         checkButtonAriaLabel,
         checkboxCellClassName,
         useReducedRowRenderer,
@@ -33950,8 +34243,8 @@ var DialogBase = /** @class */ (function (_super) {
             dialogDefaultMinWidth: minWidth,
             dialogDefaultMaxWidth: maxWidth,
         });
-        return (React.createElement(Modal_1.Modal, tslib_1.__assign({ elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, onDismissed: mergedModalProps.onDismissed, responsiveMode: responsiveMode }, mergedModalProps, { isDarkOverlay: mergedModalProps.isDarkOverlay, isBlocking: mergedModalProps.isBlocking, isOpen: isOpen !== undefined ? isOpen : !hidden, className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss ? onDismiss : mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
-            React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ subTextId: this._defaultSubTextId, title: dialogContentProps.title, subText: dialogContentProps.subText, showCloseButton: mergedModalProps.isBlocking, topButtonsProps: dialogContentProps.topButtonsProps, type: dialogContentProps.type, onDismiss: onDismiss ? onDismiss : dialogContentProps.onDismiss, className: dialogContentProps.className }, dialogContentProps), this.props.children)));
+        return (React.createElement(Modal_1.Modal, tslib_1.__assign({ elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, responsiveMode: responsiveMode }, mergedModalProps, { isOpen: isOpen !== undefined ? isOpen : !hidden, className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss ? onDismiss : mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
+            React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), this.props.children)));
     };
     DialogBase.defaultProps = {
         hidden: true,
@@ -34260,12 +34553,13 @@ var ModalBase = /** @class */ (function (_super) {
     ModalBase.prototype.render = function () {
         var _a = this.props, className = _a.className, containerClassName = _a.containerClassName, scrollableContentClassName = _a.scrollableContentClassName, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, layerProps = _a.layerProps, overlay = _a.overlay, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, styles = _a.styles, subtitleAriaId = _a.subtitleAriaId, theme = _a.theme, topOffsetFixed = _a.topOffsetFixed, 
         // eslint-disable-next-line deprecation/deprecation
-        onLayerDidMount = _a.onLayerDidMount, isModeless = _a.isModeless, dragOptions = _a.dragOptions, enableAriaHiddenSiblings = _a.enableAriaHiddenSiblings;
+        onLayerDidMount = _a.onLayerDidMount, isModeless = _a.isModeless, isAlert = _a.isAlert, dragOptions = _a.dragOptions, enableAriaHiddenSiblings = _a.enableAriaHiddenSiblings;
         var _b = this.state, isOpen = _b.isOpen, isVisible = _b.isVisible, hasBeenOpened = _b.hasBeenOpened, modalRectangleTop = _b.modalRectangleTop, x = _b.x, y = _b.y, isInKeyboardMoveMode = _b.isInKeyboardMoveMode;
         if (!isOpen) {
             return null;
         }
         var layerClassName = layerProps === undefined ? '' : layerProps.className;
+        var isAlertRole = (isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless));
         var classNames = getClassNames(styles, {
             theme: theme,
             className: className,
@@ -34292,7 +34586,7 @@ var ModalBase = /** @class */ (function (_super) {
         // @temp tuatology - Will adjust this to be a panel at certain breakpoints
         if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
             return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, mergedLayerProps),
-                React.createElement(index_2.Popup, { role: isModeless || !isBlocking ? 'dialog' : 'alertdialog', "aria-modal": !isModeless, ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !ignoreExternalFocusing },
+                React.createElement(index_2.Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', "aria-modal": !isModeless, ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !ignoreExternalFocusing },
                     React.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
                         !isModeless && (React.createElement(Overlay_1.Overlay, tslib_1.__assign({ isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: this._allowTouchBodyScroll }, overlay))),
                         dragOptions ? (React.createElement(index_5.DraggableZone, { handleSelector: dragOptions.dragHandleSelector || "." + classNames.main.split(' ')[0], preventDragSelector: "button", onStart: this._onDragStart, onDragChange: this._onDrag, onStop: this._onDragStop, position: { x: x, y: y } }, modalContent)) : (modalContent)))));
@@ -34602,7 +34896,7 @@ var DialogContentBase = /** @class */ (function (_super) {
                 React.createElement("div", tslib_1.__assign({ id: titleId, role: "heading", "aria-level": 1 }, titleProps, { className: Utilities_1.css(classNames.title, titleProps.className) }), title),
                 React.createElement("div", { className: classNames.topButton },
                     this.props.topButtonsProps.map(function (props, index) { return (React.createElement(Button_1.IconButton, tslib_1.__assign({ key: props.uniqueId || index }, props))); }),
-                    (type === DialogContent_types_1.DialogType.close || (showCloseButton && type !== DialogContent_types_1.DialogType.largeHeader)) && (React.createElement(Button_1.IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss, title: closeButtonAriaLabel })))),
+                    (type === DialogContent_types_1.DialogType.close || (showCloseButton && type !== DialogContent_types_1.DialogType.largeHeader)) && (React.createElement(Button_1.IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss })))),
             React.createElement("div", { className: classNames.inner },
                 React.createElement("div", { className: classNames.innerContent },
                     subTextContent,
@@ -35179,13 +35473,10 @@ var DropdownBase = /** @class */ (function (_super) {
                 // eslint-disable-next-line react/jsx-no-bind
                 onMouseLeave: _this._onMouseItemLeave.bind(_this, item), 
                 // eslint-disable-next-line react/jsx-no-bind
-                onMouseMove: _this._onItemMouseMove.bind(_this, item), role: "option", "aria-selected": isItemSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, title: title, "aria-posinset": _this._sizePosCache.positionInSet(item.index), "aria-setsize": _this._sizePosCache.optionSetSize }, onRenderOption(item, _this._onRenderOption))) : (React.createElement(Checkbox_1.Checkbox, { id: _this._listId + item.index, key: item.key, "data-index": item.index, "data-is-focusable": !item.disabled, disabled: item.disabled, onChange: _this._onItemClick(item), inputProps: {
-                    'aria-selected': isItemSelected,
-                    onMouseEnter: _this._onItemMouseEnter.bind(_this, item),
-                    onMouseLeave: _this._onMouseItemLeave.bind(_this, item),
-                    onMouseMove: _this._onItemMouseMove.bind(_this, item),
-                    role: 'option',
-                }, label: item.text, title: title, 
+                onMouseMove: _this._onItemMouseMove.bind(_this, item), role: "option", "aria-selected": isItemSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, title: title, "aria-posinset": _this._sizePosCache.positionInSet(item.index), "aria-setsize": _this._sizePosCache.optionSetSize }, onRenderOption(item, _this._onRenderOption))) : (React.createElement(Checkbox_1.Checkbox, { id: _this._listId + item.index, key: item.key, disabled: item.disabled, onChange: _this._onItemClick(item), inputProps: tslib_1.__assign({ 'aria-selected': isItemSelected, onMouseEnter: _this._onItemMouseEnter.bind(_this, item), onMouseLeave: _this._onMouseItemLeave.bind(_this, item), onMouseMove: _this._onItemMouseMove.bind(_this, item), role: 'option' }, {
+                    'data-index': item.index,
+                    'data-is-focusable': !item.disabled,
+                }), label: item.text, title: title, 
                 // eslint-disable-next-line react/jsx-no-bind
                 onRenderLabel: _this._onRenderItemLabel.bind(_this, item), className: itemClassName, checked: isItemSelected, styles: multiSelectItemStyles, ariaPositionInSet: _this._sizePosCache.positionInSet(item.index), ariaSetSize: _this._sizePosCache.optionSetSize }));
         };
@@ -37681,7 +37972,7 @@ var Suggestions = /** @class */ (function (_super) {
     Suggestions.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, forceResolveText = _c.forceResolveText, mostRecentlyUsedHeaderText = _c.mostRecentlyUsedHeaderText, searchForMoreText = _c.searchForMoreText, className = _c.className, moreSuggestionsAvailable = _c.moreSuggestionsAvailable, noResultsFoundText = _c.noResultsFoundText, suggestions = _c.suggestions, isLoading = _c.isLoading, isSearching = _c.isSearching, loadingText = _c.loadingText, onRenderNoResultFound = _c.onRenderNoResultFound, searchingText = _c.searchingText, isMostRecentlyUsedVisible = _c.isMostRecentlyUsedVisible, resultsMaximumNumber = _c.resultsMaximumNumber, resultsFooterFull = _c.resultsFooterFull, resultsFooter = _c.resultsFooter, _d = _c.isResultsFooterVisible, isResultsFooterVisible = _d === void 0 ? true : _d, suggestionsHeaderText = _c.suggestionsHeaderText, suggestionsClassName = _c.suggestionsClassName, theme = _c.theme, styles = _c.styles, suggestionsListId = _c.suggestionsListId;
+        var _c = this.props, forceResolveText = _c.forceResolveText, mostRecentlyUsedHeaderText = _c.mostRecentlyUsedHeaderText, searchForMoreIcon = _c.searchForMoreIcon, searchForMoreText = _c.searchForMoreText, className = _c.className, moreSuggestionsAvailable = _c.moreSuggestionsAvailable, noResultsFoundText = _c.noResultsFoundText, suggestions = _c.suggestions, isLoading = _c.isLoading, isSearching = _c.isSearching, loadingText = _c.loadingText, onRenderNoResultFound = _c.onRenderNoResultFound, searchingText = _c.searchingText, isMostRecentlyUsedVisible = _c.isMostRecentlyUsedVisible, resultsMaximumNumber = _c.resultsMaximumNumber, resultsFooterFull = _c.resultsFooterFull, resultsFooter = _c.resultsFooter, _d = _c.isResultsFooterVisible, isResultsFooterVisible = _d === void 0 ? true : _d, suggestionsHeaderText = _c.suggestionsHeaderText, suggestionsClassName = _c.suggestionsClassName, theme = _c.theme, styles = _c.styles, suggestionsListId = _c.suggestionsListId;
         // TODO
         // Clean this up by leaving only the first part after removing support for SASS.
         // Currently we can not remove the SASS styles from Suggestions class because it
@@ -37747,7 +38038,7 @@ var Suggestions = /** @class */ (function (_super) {
                     ? onRenderNoResultFound(undefined, noResults)
                     : noResults()
                 : this._renderSuggestions(),
-            searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._searchForMoreButton, className: this._classNames.searchForMoreButton, iconProps: { iconName: 'Search' }, id: searchForMoreId, onClick: this._getMoreResults, "data-automationid": 'sug-searchForMore' }, searchForMoreText)),
+            searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._searchForMoreButton, className: this._classNames.searchForMoreButton, iconProps: searchForMoreIcon || { iconName: 'Search' }, id: searchForMoreId, onClick: this._getMoreResults, "data-automationid": 'sug-searchForMore' }, searchForMoreText)),
             isSearching ? React.createElement(Spinner_1.Spinner, tslib_1.__assign({}, spinnerClassNameOrStyles, { label: searchingText })) : null,
             footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (React.createElement("div", { className: this._classNames.title }, footerTitle(this.props))) : null));
     };
@@ -38278,7 +38569,7 @@ var GlobalClassNames = {
     input: 'ms-BasePicker-input',
 };
 function getStyles(props) {
-    var _a;
+    var _a, _b, _c;
     var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;
     if (!theme) {
         throw new Error('theme is undefined or null in base BasePicker getStyles function.');
@@ -38286,6 +38577,27 @@ function getStyles(props) {
     var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
     var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
     var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
+    // placeholder style constants
+    var placeholderStyles = [
+        fonts.medium,
+        {
+            color: semanticColors.inputPlaceholderText,
+            opacity: 1,
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelector] = {
+                    color: 'GrayText',
+                },
+                _a),
+        },
+    ];
+    var disabledPlaceholderStyles = {
+        color: semanticColors.disabledText,
+        selectors: (_b = {},
+            _b[Styling_1.HighContrastSelector] = {
+                color: 'GrayText',
+            },
+            _b),
+    };
     // The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
     // @todo: investigate the performance cost of the calculation below and apply if negligible.
     //   Replacing with a static color for now.
@@ -38318,7 +38630,7 @@ function getStyles(props) {
             isFocused && !disabled && Styling_1.getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),
             disabled && {
                 borderColor: disabledOverlayColor,
-                selectors: (_a = {
+                selectors: (_c = {
                         ':after': {
                             content: '""',
                             position: 'absolute',
@@ -38329,7 +38641,7 @@ function getStyles(props) {
                             background: disabledOverlayColor,
                         }
                     },
-                    _a[Styling_1.HighContrastSelector] = {
+                    _c[Styling_1.HighContrastSelector] = {
                         borderColor: 'GrayText',
                         selectors: {
                             ':after': {
@@ -38337,7 +38649,7 @@ function getStyles(props) {
                             },
                         },
                     },
-                    _a),
+                    _c),
             },
         ],
         itemsWrapper: [
@@ -38367,6 +38679,8 @@ function getStyles(props) {
                     },
                 },
             },
+            Styling_1.getPlaceholderStyles(placeholderStyles),
+            disabled && Styling_1.getPlaceholderStyles(disabledPlaceholderStyles),
             inputClassName,
         ],
         screenReaderText: Styling_1.hiddenContentStyle,
@@ -41495,9 +41809,13 @@ var SliderBase = /** @class */ (function (_super) {
                     break;
                 case Utilities_1.KeyCodes.home:
                     value = min;
+                    _this._clearOnKeyDownTimer();
+                    _this._setOnKeyDownTimer(event);
                     break;
                 case Utilities_1.KeyCodes.end:
                     value = max;
+                    _this._clearOnKeyDownTimer();
+                    _this._setOnKeyDownTimer(event);
                     break;
                 default:
                     return;
@@ -42584,7 +42902,7 @@ var TeachingBubbleContentBase = /** @class */ (function (_super) {
         if (headline) {
             var HeaderWrapperAs = typeof headline === 'string' ? 'p' : 'div';
             headerContent = (React.createElement("div", { className: classNames.header },
-                React.createElement(HeaderWrapperAs, { role: "heading", className: classNames.headline, id: ariaLabelledBy }, headline)));
+                React.createElement(HeaderWrapperAs, { role: "heading", "aria-level": 3, className: classNames.headline, id: ariaLabelledBy }, headline)));
         }
         if (children) {
             var BodyContentWrapperAs = typeof children === 'string' ? 'p' : 'div';
@@ -43011,7 +43329,7 @@ var ToggleBase = /** @class */ (function (_super) {
         _this.state = {
             checked: !!(props.checked || props.defaultChecked),
         };
-        _this._id = props.id || Utilities_1.getId('Toggle');
+        _this._id = Utilities_1.getId('Toggle');
         return _this;
     }
     ToggleBase.getDerivedStateFromProps = function (nextProps, prevState) {
@@ -43034,7 +43352,7 @@ var ToggleBase = /** @class */ (function (_super) {
     });
     ToggleBase.prototype.render = function () {
         var _this = this;
-        var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'div' : _b, className = _a.className, theme = _a.theme, disabled = _a.disabled, keytipProps = _a.keytipProps, label = _a.label, ariaLabel = _a.ariaLabel, 
+        var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'div' : _b, className = _a.className, theme = _a.theme, disabled = _a.disabled, keytipProps = _a.keytipProps, id = _a.id, label = _a.label, ariaLabel = _a.ariaLabel, 
         /* eslint-disable deprecation/deprecation */
         onAriaLabel = _a.onAriaLabel, offAriaLabel = _a.offAriaLabel, 
         /* eslint-enable deprecation/deprecation */
@@ -43051,8 +43369,9 @@ var ToggleBase = /** @class */ (function (_super) {
             inlineLabel: inlineLabel,
             onOffMissing: !onText && !offText,
         });
-        var labelId = this._id + "-label";
-        var stateTextId = this._id + "-stateText";
+        var toggleId = id || this._id;
+        var labelId = toggleId + "-label";
+        var stateTextId = toggleId + "-stateText";
         // The following properties take priority for what Narrator should read:
         // 1. ariaLabel
         // 2. onAriaLabel (if checked) or offAriaLabel (if not checked)
@@ -43069,18 +43388,18 @@ var ToggleBase = /** @class */ (function (_super) {
         var ariaRole = this.props.role ? this.props.role : 'switch';
         var renderPill = function (keytipAttributes) {
             if (keytipAttributes === void 0) { keytipAttributes = {}; }
-            return (React.createElement("button", tslib_1.__assign({}, toggleNativeProps, keytipAttributes, { className: classNames.pill, disabled: disabled, id: _this._id, type: "button", role: ariaRole, ref: _this._toggleButton, "aria-disabled": disabled, "aria-checked": checked, "aria-label": ariaLabel ? ariaLabel : badAriaLabel, "data-is-focusable": true, onChange: _this._noop, onClick: _this._onClick, "aria-labelledby": labelledById }),
+            return (React.createElement("button", tslib_1.__assign({}, toggleNativeProps, keytipAttributes, { className: classNames.pill, disabled: disabled, id: toggleId, type: "button", role: ariaRole, ref: _this._toggleButton, "aria-disabled": disabled, "aria-checked": checked, "aria-label": ariaLabel ? ariaLabel : badAriaLabel, "data-is-focusable": true, onChange: _this._noop, onClick: _this._onClick, "aria-labelledby": labelledById }),
                 React.createElement("span", { className: classNames.thumb })));
         };
         var pillContent = keytipProps ? (React.createElement(KeytipData_1.KeytipData, { keytipProps: keytipProps, ariaDescribedBy: toggleNativeProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return renderPill(keytipAttributes); })) : (renderPill());
         return (React.createElement(RootType, { className: classNames.root, hidden: toggleNativeProps.hidden },
-            label && (React.createElement(Label_1.Label, { htmlFor: this._id, className: classNames.label, id: labelId }, label)),
+            label && (React.createElement(Label_1.Label, { htmlFor: toggleId, className: classNames.label, id: labelId }, label)),
             React.createElement("div", { className: classNames.container },
                 pillContent,
                 stateText && (
                 // This second "htmlFor" property is needed to allow the
                 // toggle's stateText to also trigger a state change when clicked.
-                React.createElement(Label_1.Label, { htmlFor: this._id, className: classNames.text, id: stateTextId }, stateText))),
+                React.createElement(Label_1.Label, { htmlFor: toggleId, className: classNames.text, id: stateTextId }, stateText))),
             React.createElement(Utilities_1.FocusRects, null)));
     };
     ToggleBase.prototype.focus = function () {
@@ -49008,7 +49327,7 @@ var Selection = /** @class */ (function () {
         ) {
             options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.
         }
-        var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? Selection_types_1.SelectionMode.multiple : _c;
+        var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? Selection_types_1.SelectionMode.multiple : _c;
         this.mode = selectionMode;
         this._getKey = getKey || defaultGetKey;
         this._changeEventSuppressionCount = 0;
@@ -49016,7 +49335,9 @@ var Selection = /** @class */ (function () {
         this._anchoredIndex = 0;
         this._unselectableCount = 0;
         this._onSelectionChanged = onSelectionChanged;
+        this._onItemsChanged = onItemsChanged;
         this._canSelectItem = canSelectItem;
+        this._keyToIndexMap = {};
         this._isModal = false;
         this.setItems(items || [], true);
         this.count = this.getSelectedCount();
@@ -49068,12 +49389,16 @@ var Selection = /** @class */ (function () {
         this.setChangeEvents(false);
         // Reset the unselectable count.
         this._unselectableCount = 0;
+        var haveItemsChanged = false;
         // Build lookup table for quick selection evaluation.
         for (var i = 0; i < items.length; i++) {
             var item = items[i];
             if (item) {
                 var key = this.getKey(item, i);
                 if (key) {
+                    if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {
+                        haveItemsChanged = true;
+                    }
                     newKeyToIndexMap[key] = i;
                 }
             }
@@ -49110,6 +49435,15 @@ var Selection = /** @class */ (function () {
             // If everything was selected but the number of items has changed, selection has changed.
             hasSelectionChanged = true;
         }
+        if (!haveItemsChanged) {
+            for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {
+                var key = _a[_i];
+                if (!(key in newKeyToIndexMap)) {
+                    haveItemsChanged = true;
+                    break;
+                }
+            }
+        }
         this._exemptedIndices = newExemptedIndicies;
         this._exemptedCount = newExemptedCount;
         this._keyToIndexMap = newKeyToIndexMap;
@@ -49118,6 +49452,14 @@ var Selection = /** @class */ (function () {
         this._selectedItems = null;
         if (hasSelectionChanged) {
             this._updateCount();
+        }
+        if (haveItemsChanged) {
+            EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_ITEMS_CHANGE);
+            if (this._onItemsChanged) {
+                this._onItemsChanged();
+            }
+        }
+        if (hasSelectionChanged) {
             this._change();
         }
         this.setChangeEvents(true);
@@ -49158,6 +49500,10 @@ var Selection = /** @class */ (function () {
         }
         return this._selectedIndices;
     };
+    Selection.prototype.getItemIndex = function (key) {
+        var index = this._keyToIndexMap[key];
+        return (index !== null && index !== void 0 ? index : -1);
+    };
     Selection.prototype.isRangeSelected = function (fromIndex, count) {
         if (count === 0) {
             return false;
@@ -49630,7 +49976,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/utilities', '7.33.5');
+set_version_1.setVersion('@uifabric/utilities', '7.34.0');
 
 
 /***/ }),
@@ -51307,7 +51653,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/styling', '7.19.0');
+set_version_1.setVersion('@uifabric/styling', '7.20.1');
 
 
 /***/ }),
@@ -51589,20 +51935,31 @@ var Utilities_1 = __webpack_require__(3);
 var Layer_notification_1 = __webpack_require__(685);
 var LayerHost = /** @class */ (function (_super) {
     tslib_1.__extends(LayerHost, _super);
-    function LayerHost() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function LayerHost(props) {
+        var _this = _super.call(this, props) || this;
+        var layerHostId = Utilities_1.getId();
+        var _a = _this.props.id, hostId = _a === void 0 ? layerHostId : _a;
+        _this.hostId = hostId;
+        _this.rootRef = React.createRef();
+        Utilities_1.initializeComponentRef(_this);
+        return _this;
     }
+    LayerHost.prototype.notifyLayersChanged = function () {
+        // Nothing, since the default implementation of Layer Host does not need to react to layer changes.
+    };
     LayerHost.prototype.shouldComponentUpdate = function () {
         return false;
     };
     LayerHost.prototype.componentDidMount = function () {
+        Layer_notification_1.registerLayerHost(this.hostId, this);
         Layer_notification_1.notifyHostChanged(this.props.id);
     };
     LayerHost.prototype.componentWillUnmount = function () {
+        Layer_notification_1.unregisterLayerHost(this.hostId, this);
         Layer_notification_1.notifyHostChanged(this.props.id);
     };
     LayerHost.prototype.render = function () {
-        return React.createElement("div", tslib_1.__assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) }));
+        return React.createElement("div", tslib_1.__assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className), ref: this.rootRef }));
     };
     return LayerHost;
 }(React.Component));
@@ -51630,7 +51987,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/react-hooks', '7.14.0');
+set_version_1.setVersion('@uifabric/react-hooks', '7.14.1');
 
 
 /***/ }),
@@ -52505,7 +52862,11 @@ function onRenderSubMenu(subMenuProps) {
     return React.createElement(LocalContextualMenu, tslib_1.__assign({}, subMenuProps));
 }
 // This is to prevent cyclic import with ContextualMenu.base.tsx.
-var LocalContextualMenu = Utilities_1.styled(ContextualMenu_base_1.ContextualMenuBase, ContextualMenu_styles_1.getStyles, function () { return ({ onRenderSubMenu: onRenderSubMenu }); }, { scope: 'ContextualMenu' });
+var LocalContextualMenu = Utilities_1.styled(ContextualMenu_base_1.ContextualMenuBase, ContextualMenu_styles_1.getStyles, function (props) { return ({
+    onRenderSubMenu: props.onRenderSubMenu
+        ? Utilities_1.composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)
+        : onRenderSubMenu,
+}); }, { scope: 'ContextualMenu' });
 /**
  * ContextualMenu description
  */
@@ -52533,7 +52894,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-focus', '7.17.6');
+set_version_1.setVersion('@fluentui/react-focus', '7.18.3');
 
 
 /***/ }),
@@ -52571,6 +52932,35 @@ var LARGE_DISTANCE_FROM_CENTER = 999999999;
 var LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;
 var focusZoneStyles;
 var focusZoneClass = 'ms-FocusZone';
+/**
+ * Raises a click on a target element based on a keyboard event.
+ */
+function raiseClickFromKeyboardEvent(target, ev) {
+    var _a, _b, _c, _d, _e, _f;
+    var event;
+    if (typeof MouseEvent === 'function') {
+        event = new MouseEvent('click', {
+            ctrlKey: (_a = ev) === null || _a === void 0 ? void 0 : _a.ctrlKey,
+            metaKey: (_b = ev) === null || _b === void 0 ? void 0 : _b.metaKey,
+            shiftKey: (_c = ev) === null || _c === void 0 ? void 0 : _c.shiftKey,
+            altKey: (_d = ev) === null || _d === void 0 ? void 0 : _d.altKey,
+            bubbles: (_e = ev) === null || _e === void 0 ? void 0 : _e.bubbles,
+            cancelable: (_f = ev) === null || _f === void 0 ? void 0 : _f.cancelable,
+        });
+    }
+    else {
+        event = document.createEvent('MouseEvents');
+        event.initMouseEvent('click', ev ? ev.bubbles : false, ev ? ev.cancelable : false, window, // not using getWindow() since this can only be run client side
+        0, // detail
+        0, // screen x
+        0, // screen y
+        0, // client x
+        0, // client y
+        ev ? ev.ctrlKey : false, ev ? ev.altKey : false, ev ? ev.shiftKey : false, ev ? ev.metaKey : false, 0, // button
+        null);
+    }
+    target.dispatchEvent(event);
+}
 // Helper function that will return a class for when the root is focused
 function getRootClass() {
     if (!focusZoneStyles) {
@@ -52742,7 +53132,7 @@ var FocusZone = /** @class */ (function (_super) {
                 // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props
                 switch (ev.which) {
                     case utilities_1.KeyCodes.space:
-                        if (_this._tryInvokeClickForFocusable(ev.target)) {
+                        if (_this._tryInvokeClickForFocusable(ev.target, ev)) {
                             break;
                         }
                         return;
@@ -52840,7 +53230,7 @@ var FocusZone = /** @class */ (function (_super) {
                         }
                         return;
                     case utilities_1.KeyCodes.enter:
-                        if (_this._tryInvokeClickForFocusable(ev.target)) {
+                        if (_this._tryInvokeClickForFocusable(ev.target, ev)) {
                             break;
                         }
                         return;
@@ -53143,7 +53533,8 @@ var FocusZone = /** @class */ (function (_super) {
     /**
      * Walk up the dom try to find a focusable element.
      */
-    FocusZone.prototype._tryInvokeClickForFocusable = function (target) {
+    FocusZone.prototype._tryInvokeClickForFocusable = function (targetElement, ev) {
+        var target = targetElement;
         if (target === this._root.current || !this.props.shouldRaiseClicks) {
             return false;
         }
@@ -53157,7 +53548,7 @@ var FocusZone = /** @class */ (function (_super) {
             if (this._isImmediateDescendantOfZone(target) &&
                 target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&
                 target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {
-                utilities_1.raiseClick(target);
+                raiseClickFromKeyboardEvent(target, ev);
                 return true;
             }
             target = utilities_1.getParent(target, ALLOW_VIRTUAL_ELEMENTS);
@@ -53632,6 +54023,7 @@ function getIsChecked(item) {
 }
 exports.getIsChecked = getIsChecked;
 function hasSubmenu(item) {
+    // eslint-disable-next-line deprecation/deprecation
     return !!(item.subMenuProps || item.items);
 }
 exports.hasSubmenu = hasSubmenu;
@@ -55013,7 +55405,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-theme-provider', '0.18.7');
+set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.2');
 
 
 /***/ }),
@@ -55982,7 +56374,7 @@ exports.AzureCustomizationsHighContrastDark = {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = __webpack_require__(2);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ActionButtonStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -56129,7 +56521,7 @@ exports.CalloutContentStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureColors_1 = __webpack_require__(86);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.CheckboxStyles = function (props) {
     var _a;
     var disabled = props.disabled, checked = props.checked, theme = props.theme, indeterminate = props.indeterminate;
@@ -56249,7 +56641,7 @@ exports.CheckboxStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureType_1 = __webpack_require__(115);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.CheckStyles = function (props) {
     var theme = props.theme, checked = props.checked;
     var semanticColors = theme.semanticColors;
@@ -56430,7 +56822,7 @@ exports.DetailsRowStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ChoiceGroupOptionStyles = function (props) {
     var checked = props.checked, disabled = props.disabled, theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage;
     var semanticColors = theme.semanticColors;
@@ -56464,6 +56856,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                     // The circle
                     ':before': [
                         {
+                            width: StyleConstants.choiceGroupDimensions,
+                            height: StyleConstants.choiceGroupDimensions,
                             borderColor: semanticColors.bodyText,
                         },
                         checked && {
@@ -56484,6 +56878,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                     ':after': [
                         {
                             borderColor: extendedSemanticColors.checkboxBorderChecked,
+                            top: 4,
+                            left: 4,
                         },
                         checked &&
                             disabled && {
@@ -56505,6 +56901,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                                 ':after': {
                                     borderColor: extendedSemanticColors.checkboxBorderChecked,
                                     backgroundColor: extendedSemanticColors.choiceGroupUncheckedDotHover,
+                                    top: 4,
+                                    left: 4,
                                 },
                             },
                         },
@@ -56665,7 +57063,7 @@ exports.ColorSliderStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureDepths_1 = __webpack_require__(116);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ComboBoxStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -56944,7 +57342,7 @@ exports.CommandBarButtonStyles = function (theme) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = __webpack_require__(2);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.CompoundButtonStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -57064,7 +57462,7 @@ exports.CompoundButtonStyles = function (theme) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureDepths_1 = __webpack_require__(116);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ContextualMenuStyles = function (props) {
     var theme = props.theme;
     var semanticColors = theme.semanticColors;
@@ -57138,7 +57536,7 @@ exports.ContextualMenuStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = __webpack_require__(2);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var AzureColors_1 = __webpack_require__(86);
 exports.DatePickerStyles = function (props) {
     var disabled = props.disabled, theme = props.theme;
@@ -57279,7 +57677,7 @@ exports.DatePickerStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.DefaultButtonStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -57290,6 +57688,10 @@ exports.DefaultButtonStyles = function (theme) {
             padding: '0px 16px',
             border: StyleConstants.borderWidth + " solid " + semanticColors.inputBorder,
             selectors: {
+                // fix for azure portal bug, text-alignment is off.
+                '.ms-Button-label': {
+                    lineHeight: '20px',
+                },
                 // standard button
                 '&.is-expanded': {
                     color: semanticColors.buttonTextHovered,
@@ -57714,7 +58116,7 @@ exports.DocumentCardStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureDepths_1 = __webpack_require__(116);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.DropdownStyles = function (props) {
     var _a, _b, _c, _d;
     var disabled = props.disabled, theme = props.theme, hasError = props.hasError, isOpen = props.isOpen;
@@ -57785,7 +58187,7 @@ exports.DropdownStyles = function (props) {
                 selectors: (_c = {},
                     _c['.ms-Dropdown-title'] = {
                         color: semanticColors.bodyText,
-                        borderColor: semanticColors.inputPlaceholderText,
+                        borderColor: semanticColors.inputBorder,
                         backgroundColor: extendedSemanticColors.controlBackground,
                     },
                     _c['.ms-Dropdown-titleIsPlaceHolder.ms-Dropdown-title'] = {
@@ -57913,7 +58315,7 @@ exports.DropdownStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.IconButtonStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -59029,7 +59431,7 @@ exports.getStyles = function (props) {
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var AzureDepths_1 = __webpack_require__(116);
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ModalStyles = function (props) {
     var theme = props.theme;
     var semanticColors = theme.semanticColors;
@@ -59078,7 +59480,7 @@ exports.OverlayStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var Constants_1 = __webpack_require__(31);
+var Constants_1 = __webpack_require__(30);
 exports.NavStyles = function (props) {
     var theme = props.theme;
     var semanticColors = theme.semanticColors;
@@ -59152,7 +59554,7 @@ exports.PanelStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.PivotStyles = function (props) {
     var theme = props.theme, rootIsTabs = props.rootIsTabs, rootIsLarge = props.rootIsLarge;
     var semanticColors = theme.semanticColors;
@@ -59307,7 +59709,7 @@ exports.PivotStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ExpandingCardStyles = function (props) {
     var theme = props.theme;
     var semanticColors = theme.semanticColors;
@@ -59347,7 +59749,7 @@ exports.PlainCardStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.PrimaryButtonStyles = function (theme) {
     var semanticColors = theme.semanticColors;
     var extendedSemanticColors = semanticColors;
@@ -59471,7 +59873,7 @@ exports.RatingStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.SearchBoxStyles = function (props) {
     var theme = props.theme, hasFocus = props.hasFocus;
     var semanticColors = theme.semanticColors;
@@ -59532,63 +59934,71 @@ exports.SearchBoxStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 var SLIDER_BOX_DIMENSION = 8;
 var SLIDER_DIAMETER = 16;
-var SLIDER_OFFSET = 2;
-var SLIDER_BORDER_RADIUS = 0;
+var SLIDER_BORDER_RADIUS = 10;
 exports.SliderStyles = function (props) {
     var disabled = props.disabled, theme = props.theme, vertical = props.vertical;
     var semanticColors = theme.semanticColors;
+    var extendedSemanticColors = semanticColors;
     return {
+        root: {
+            selectors: {
+                ':not(.ms-Slider-disabled) .ms-Slider-container:hover .ms-Slider-inactive': {
+                    backgroundColor: extendedSemanticColors.sliderInActiveHover,
+                },
+                ':not(.ms-Slider-disabled) .ms-Slider-container:hover .ms-Slider-active': {
+                    backgroundColor: extendedSemanticColors.sliderActiveHover,
+                },
+                ':not(.ms-Slider-disabled) .ms-Slider-container:hover .ms-Slider-thumb': {
+                    borderColor: extendedSemanticColors.sliderActiveHover,
+                },
+                ':not(.ms-Slider-disabled) .ms-Slider-container:active .ms-Slider-inactive': {
+                    backgroundColor: extendedSemanticColors.sliderInActiveHover,
+                },
+                ':not(.ms-Slider-disabled) .ms-Slider-container:active .ms-Slider-active': {
+                    backgroundColor: extendedSemanticColors.sliderActivePressed,
+                },
+                ':not(.ms-Slider-disabled) .ms-Slider-container:active .ms-Slider-thumb': {
+                    borderColor: extendedSemanticColors.sliderActivePressed,
+                },
+            },
+        },
+        // left side of bar
         activeSection: [
             !disabled && {
-                backgroundColor: semanticColors.controlAccent,
+                backgroundColor: extendedSemanticColors.sliderActiveBackground,
             },
             disabled && {
-                background: semanticColors.disabledBodyText,
+                background: extendedSemanticColors.sliderDisabledActiveBackground,
             },
         ],
+        // right side of bar
         inactiveSection: [
             !disabled && {
-                background: semanticColors.controlOutlineDisabled,
+                background: extendedSemanticColors.controlOutlineDisabled,
             },
             disabled && {
-                background: semanticColors.disabledBodyText,
+                background: extendedSemanticColors.sliderDisabledInActiveBackground,
             },
         ],
         slideBox: [
             !disabled && {
                 selectors: {
-                    '.ms-Slider-thumb': [
-                        {
-                            borderColor: semanticColors.controlAccent,
-                            height: SLIDER_DIAMETER,
-                            width: SLIDER_DIAMETER,
-                        },
-                        vertical && {
-                            marginLeft: SLIDER_OFFSET,
-                        },
-                        !vertical && {
-                            marginTop: SLIDER_OFFSET,
-                        },
-                    ],
+                    '.ms-Slider-thumb': {
+                        borderColor: extendedSemanticColors.sliderActiveBackground,
+                        width: SLIDER_DIAMETER,
+                    },
                 },
             },
             disabled && {
                 selectors: {
                     '.ms-Slider-thumb': [
                         {
-                            borderColor: semanticColors.disabledBodyText,
-                            height: SLIDER_DIAMETER,
+                            borderColor: extendedSemanticColors.sliderDisabledActiveBackground,
                             width: SLIDER_DIAMETER,
                         },
-                        vertical && {
-                            marginLeft: SLIDER_OFFSET,
-                        },
-                        !vertical && {
-                            marginTop: SLIDER_OFFSET,
-                        },
                     ],
                 },
             },
@@ -59597,11 +60007,9 @@ exports.SliderStyles = function (props) {
             !vertical && {
                 selectors: {
                     '.ms-Slider-active': {
-                        height: SLIDER_BOX_DIMENSION,
                         borderRadius: SLIDER_BORDER_RADIUS,
                     },
                     '.ms-Slider-inactive': {
-                        height: SLIDER_BOX_DIMENSION,
                         borderRadius: SLIDER_BORDER_RADIUS,
                     },
                 },
@@ -59628,18 +60036,19 @@ exports.SliderStyles = function (props) {
                 selectors: {
                     '&.ms-Slider-value': {
                         color: semanticColors.bodyText,
+                        borderRadius: StyleConstants.borderRadius,
                     },
                 },
             },
             disabled && {
-                borderColor: semanticColors.inputBorder,
+                borderColor: extendedSemanticColors.controlOutlineDisabled,
                 borderStyle: StyleConstants.borderSolid,
                 borderWidth: StyleConstants.borderWidth,
-                color: semanticColors.disabledText,
                 textAlign: StyleConstants.textAlignCenter,
                 selectors: {
                     '&.ms-Slider-value': {
-                        color: semanticColors.disabledBodyText,
+                        color: extendedSemanticColors.sliderDisabledActiveBackground,
+                        borderRadius: StyleConstants.borderRadius,
                     },
                 },
             },
@@ -59751,7 +60160,7 @@ exports.SuggestionsStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var Constants_1 = __webpack_require__(31);
+var Constants_1 = __webpack_require__(30);
 exports.TagItemStyles = function (props) {
     var theme = props.theme, selected = props.selected;
     if (!theme) {
@@ -59803,7 +60212,7 @@ exports.TagItemStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.TagPickerStyles = function (props) {
     var theme = props.theme;
     if (!theme) {
@@ -59965,7 +60374,7 @@ exports.TeachingBubbleStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.TextFieldStyles = function (props) {
     var focused = props.focused, disabled = props.disabled, hasErrorMessage = props.hasErrorMessage, multiline = props.multiline, theme = props.theme;
     var semanticColors = theme.semanticColors;
@@ -59976,7 +60385,7 @@ exports.TextFieldStyles = function (props) {
                 height: StyleConstants.inputControlHeight,
             },
             !hasErrorMessage && {
-                borderColor: semanticColors.inputPlaceholderText,
+                borderColor: semanticColors.inputBorder,
                 selectors: {
                     '::after': {
                         borderColor: extendedSemanticColors.controlFocus,
@@ -60057,7 +60466,7 @@ exports.TextFieldStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyleConstants = __webpack_require__(31);
+var StyleConstants = __webpack_require__(30);
 exports.ToggleStyles = function (props) {
     var theme = props.theme, disabled = props.disabled, checked = props.checked;
     var semanticColors = theme.semanticColors;
@@ -60183,10 +60592,19 @@ exports.ToggleStyles = function (props) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
+var StyleConstants = __webpack_require__(30);
 exports.TooltipStyles = function (props) {
+    var theme = props.theme;
+    var semanticColors = theme.semanticColors;
+    var extendedSemanticColors = semanticColors;
     return {
         root: {
             maxWidth: '480px',
+            padding: 0,
+        },
+        content: {
+            backgroundColor: extendedSemanticColors.controlBackground,
+            padding: StyleConstants.inputControlPadding,
         },
     };
 };
@@ -62547,7 +62965,7 @@ var CalendarDay = /** @class */ (function (_super) {
                                         _a[styles.daySelection] = dateRangeType === DateValues_1.DateRangeType.Day,
                                         _a[styles.weekSelection] = dateRangeType === DateValues_1.DateRangeType.Week || dateRangeType === DateValues_1.DateRangeType.WorkWeek,
                                         _a[styles.monthSelection] = dateRangeType === DateValues_1.DateRangeType.Month,
-                                        _a)), ref: function (element) { return _this._setDayCellRef(element, day, isNavigatedDate); }, onMouseOver: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
+                                        _a)), ref: function (element) { return _this._setDayCellRef(element, day, isNavigatedDate); }, onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onMouseOver: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseOver(day.originalDate, weekIndex, dayIndex, dateRangeType)
                                         : undefined, onMouseLeave: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseLeave(day.originalDate, weekIndex, dayIndex, dateRangeType)
@@ -62555,11 +62973,11 @@ var CalendarDay = /** @class */ (function (_super) {
                                         ? _this._onDayMouseDown(day.originalDate, weekIndex, dayIndex, dateRangeType)
                                         : undefined, onMouseUp: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseUp(day.originalDate, weekIndex, dayIndex, dateRangeType)
-                                        : undefined, role: 'presentation' },
+                                        : undefined, role: 'gridcell', "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), "aria-disabled": !day.isInBounds, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined },
                                     React.createElement("button", { key: day.key + 'button', onClick: day.isInBounds ? day.onSelected : undefined, className: Utilities_1.css(styles.day, 'ms-DatePicker-day-button', (_b = {},
                                             _b['ms-DatePicker-day--disabled ' + styles.dayIsDisabled] = !day.isInBounds,
                                             _b['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday,
-                                            _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-readonly": true, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button", role: 'gridcell' },
+                                            _b)), "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "data-is-focusable": false, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, tabIndex: -1, type: "button" },
                                         React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)))));
                             })));
                     }))))));
@@ -62570,14 +62988,12 @@ var CalendarDay = /** @class */ (function (_super) {
             this.navigatedDay.focus();
         }
     };
-    CalendarDay.prototype._setDayRef = function (element, day, isNavigatedDate) {
+    CalendarDay.prototype._setDayCellRef = function (element, day, isNavigatedDate) {
+        this.days[day.key] = element;
         if (isNavigatedDate) {
             this.navigatedDay = element;
         }
     };
-    CalendarDay.prototype._setDayCellRef = function (element, day, isNavigatedDate) {
-        this.days[day.key] = element;
-    };
     CalendarDay.prototype._getWeekCornerStyles = function (weeks, dateRangeType) {
         var _this = this;
         var weekCornersStyled = {};
@@ -68287,8 +68703,10 @@ var GlobalClassNames = {
     withoutLabel: 'ms-DatePicker-event--without-label',
     disabled: 'msDatePickerDisabled ',
 };
+var TEXTFIELD_HEIGHT = 32;
 exports.styles = function (props) {
-    var className = props.className, theme = props.theme, disabled = props.disabled, label = props.label, isDatePickerShown = props.isDatePickerShown;
+    var _a, _b;
+    var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;
     var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
     var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
     var DatePickerIcon = {
@@ -68343,6 +68761,28 @@ exports.styles = function (props) {
                 cursor: 'default',
             },
         ],
+        readOnlyTextField: [
+            {
+                cursor: 'pointer',
+                height: TEXTFIELD_HEIGHT,
+                lineHeight: TEXTFIELD_HEIGHT - 2,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                selectors: (_a = {},
+                    _a['&:focus'] = Styling_1.getInputFocusStyle(semanticColors.inputFocusBorderAlt, effects.roundedCorner2),
+                    _a),
+            },
+            underlined && {
+                lineHeight: TEXTFIELD_HEIGHT + 2,
+            },
+        ],
+        readOnlyPlaceholder: (_b = {
+                color: semanticColors.inputPlaceholderText
+            },
+            _b[Styling_1.HighContrastSelector] = {
+                color: 'GrayText',
+            },
+            _b),
     };
 };
 
@@ -68887,9 +69327,9 @@ var SelectionZone = /** @class */ (function (_super) {
         }
     };
     SelectionZone.prototype._clearAndSelectIndex = function (index) {
-        var selection = this.props.selection;
+        var _a = this.props, selection = _a.selection, _b = _a.selectionClearedOnSurfaceClick, selectionClearedOnSurfaceClick = _b === void 0 ? true : _b;
         var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
-        if (!isAlreadySingleSelected) {
+        if (!isAlreadySingleSelected && selectionClearedOnSurfaceClick) {
             var isModal = selection.isModal && selection.isModal();
             selection.setChangeEvents(false);
             selection.setAllSelected(false);
@@ -69457,7 +69897,7 @@ var GroupHeaderBase = /** @class */ (function (_super) {
         return (React.createElement("div", { className: this._classNames.root, style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, role: "row", "aria-setsize": ariaSetSize, "aria-posinset": ariaPosInSet, "data-is-focusable": true, onKeyUp: this._onKeyUp, "aria-label": group.ariaLabel, "aria-labelledby": group.ariaLabel ? undefined : this._id, "aria-expanded": !this.state.isCollapsed, "aria-selected": canSelectGroup ? currentlySelected : undefined, "aria-level": groupLevel + 1 },
             React.createElement("div", { className: this._classNames.groupHeaderContainer, role: "presentation" },
                 isSelectionCheckVisible ? (React.createElement("div", { role: "gridcell" },
-                    React.createElement("button", tslib_1.__assign({ "data-is-focusable": false, type: "button", className: this._classNames.check, role: "checkbox", "aria-checked": currentlySelected, "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick }, selectAllButtonProps), onRenderCheckbox({ checked: currentlySelected, theme: theme }, onRenderCheckbox)))) : (selectionMode !== Selection_1.SelectionMode.none && React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, count: 1 })),
+                    React.createElement("button", tslib_1.__assign({ "data-is-focusable": false, type: "button", className: this._classNames.check, role: "checkbox", id: this._id + "-check", "aria-checked": currentlySelected, "aria-labelledby": this._id + "-check " + this._id, "data-selection-toggle": true, onClick: this._onToggleSelectGroupClick }, selectAllButtonProps), onRenderCheckbox({ checked: currentlySelected, theme: theme }, onRenderCheckbox)))) : (selectionMode !== Selection_1.SelectionMode.none && React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, count: 1 })),
                 React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),
                 React.createElement("div", { className: this._classNames.dropIcon, role: "presentation" },
                     React.createElement(Icon_1.Icon, { iconName: "Tag" })),
@@ -73641,7 +74081,7 @@ var GlobalClassNames = {
 };
 var REMOVE_BUTTON_SIZE = 24;
 function getStyles(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var className = props.className, theme = props.theme, selected = props.selected, invalid = props.invalid, disabled = props.disabled;
     var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
     var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
@@ -73684,6 +74124,22 @@ function getStyles(props) {
                 _c),
         },
     ];
+    var personaSecondaryTextStyles = [
+        selected &&
+            !invalid &&
+            !disabled && {
+            color: palette.white,
+            selectors: (_d = {
+                    ':hover': {
+                        color: palette.white,
+                    }
+                },
+                _d[Styling_1.HighContrastSelector] = {
+                    color: 'HighlightText',
+                },
+                _d),
+        },
+    ];
     var personaCoinInitialsStyles = [
         invalid && {
             fontSize: fonts.xLarge.fontSize,
@@ -73704,22 +74160,22 @@ function getStyles(props) {
                 maxWidth: 300,
                 verticalAlign: 'middle',
                 minWidth: 0,
-                selectors: (_d = {
+                selectors: (_e = {
                         ':hover': {
                             background: !selected && !disabled ? palette.neutralLight : '',
                         }
                     },
-                    _d[Styling_1.HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }],
-                    _d),
+                    _e[Styling_1.HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }],
+                    _e),
             },
             selected &&
                 !disabled && [
                 classNames.isSelected,
                 {
                     background: palette.themePrimary,
-                    selectors: (_e = {},
-                        _e[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, Styling_1.getHighContrastNoAdjustStyle()),
-                        _e),
+                    selectors: (_f = {},
+                        _f[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, Styling_1.getHighContrastNoAdjustStyle()),
+                        _f),
                 },
             ],
             invalid && [classNames.isInvalid],
@@ -73759,7 +74215,7 @@ function getStyles(props) {
             selected && [
                 {
                     color: palette.white,
-                    selectors: (_f = {
+                    selectors: (_g = {
                             ':hover': {
                                 color: palette.white,
                                 background: palette.themeDark,
@@ -73769,10 +74225,10 @@ function getStyles(props) {
                                 background: palette.themeDarker,
                             }
                         },
-                        _f[Styling_1.HighContrastSelector] = {
+                        _g[Styling_1.HighContrastSelector] = {
                             color: 'HighlightText',
                         },
-                        _f),
+                        _g),
                 },
                 invalid && {
                     selectors: {
@@ -73786,16 +74242,17 @@ function getStyles(props) {
                 },
             ],
             disabled && {
-                selectors: (_g = {},
-                    _g["." + BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon] = {
+                selectors: (_h = {},
+                    _h["." + BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon] = {
                         color: semanticColors.buttonText,
                     },
-                    _g),
+                    _h),
             },
         ],
         subComponentStyles: {
             persona: {
                 primaryText: personaPrimaryTextStyles,
+                secondaryText: personaSecondaryTextStyles,
             },
             personaCoin: {
                 initials: personaCoinInitialsStyles,
@@ -78767,7 +79224,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/icons', '7.5.23');
+set_version_1.setVersion('@uifabric/icons', '7.7.0');
 
 
 /***/ }),
@@ -80203,6 +80660,7 @@ function getStyles(props) {
                     },
                     _c[":hover ." + classNames.icon] = {
                         opacity: 0,
+                        pointerEvents: 'none',
                     },
                     _c),
             },
@@ -80273,6 +80731,7 @@ function getStyles(props) {
             },
             hasFocus && {
                 opacity: 0,
+                pointerEvents: 'none',
             },
             !disableAnimation && {
                 transition: "opacity " + Styling_1.AnimationVariables.durationValue1 + " 0s",
@@ -82730,7 +83189,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/foundation', '7.9.26');
+set_version_1.setVersion('@uifabric/foundation', '7.10.2');
 
 
 /***/ }),
@@ -84563,7 +85022,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/variants', '7.2.35');
+set_version_1.setVersion('@uifabric/variants', '7.2.36');
 
 
 /***/ }),
@@ -86472,7 +86931,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-button', '0.19.8');
+set_version_1.setVersion('@fluentui/react-button', '0.20.2');
 
 
 /***/ }),
@@ -86646,7 +87105,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-icons', '0.4.2');
+set_version_1.setVersion('@fluentui/react-icons', '0.4.3');
 
 
 /***/ }),
@@ -126949,4 +127408,4 @@ exports.ToggleButtons = function () { return (React.createElement(office_ui_fabr
 
 /***/ })
 ],[[929,1,2]]]);
-//# sourceMappingURL=main.58c37029a4231428e662.bundle.js.map
+//# sourceMappingURL=main.87dadd1789d336577e59.bundle.js.map