@fluentui/react-button 0.20.1 → 0.20.2

package/dist-storybook/{main.7da4035404597c1a9885.bundle.js → main.6d4ff50b2d1a618817d2.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";
@@ -228,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';
@@ -237,6 +238,7 @@ exports.MediumScreenSelector = Styling_1.getScreenSelector(Styling_1.ScreenWidth
 
 
 /***/ }),
+/* 31 */,
 /* 32 */,
 /* 33 */,
 /* 34 */,
@@ -637,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;
@@ -821,6 +823,7 @@ exports.getDetailsRowStyles = function (props) {
                 _h),
         },
         compact && cellCompactStyles,
+        disabled && { opacity: 0.5 },
     ];
     return {
         root: [
@@ -2680,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';
 /**
@@ -2766,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;
@@ -3136,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,
@@ -3176,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;
@@ -3809,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.177.2');
+set_version_1.setVersion('office-ui-fabric-react', '7.184.0');
 
 
 /***/ }),
@@ -17098,6 +17105,7 @@ exports.getNativeProps = getNativeProps;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SELECTION_CHANGE = 'change';
+exports.SELECTION_ITEMS_CHANGE = 'items-change';
 /**
  * {@docCategory Selection}
  */
@@ -18976,33 +18984,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) {
@@ -19064,17 +19076,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 = {
@@ -19242,6 +19256,7 @@ exports.FabricBase = FabricBase;
 
 Object.defineProperty(exports, "__esModule", { value: true });
 var _layersByHostId = {};
+var _layerHostsById = {};
 var _defaultHostSelector;
 /**
  * Register a layer for a given host id
@@ -19253,6 +19268,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;
 /**
@@ -19261,17 +19283,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.
@@ -19348,8 +19430,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;
 /**
@@ -19652,7 +19752,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();
@@ -19683,9 +19784,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);
@@ -19882,8 +19987,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;
@@ -20127,9 +20232,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,
@@ -20144,6 +20250,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;
     };
@@ -20157,8 +20267,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) {
@@ -20219,6 +20329,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;
+        }
+    }
+}
 
 
 /***/ }),
@@ -22076,7 +22205,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,
@@ -22923,7 +23052,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,
@@ -23105,7 +23234,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,
@@ -23288,7 +23417,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,
@@ -24677,6 +24806,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; };
@@ -24734,7 +24864,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);
@@ -24752,9 +24882,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;
@@ -24774,17 +24913,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) {
@@ -24840,6 +24989,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;
+}
 
 
 /***/ }),
@@ -28218,6 +28370,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);
@@ -28487,9 +28642,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) {
@@ -28524,11 +28724,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
@@ -29383,7 +29586,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:
@@ -31785,18 +31988,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;
@@ -31811,6 +32015,7 @@ var DetailsRowBase = /** @class */ (function (_super) {
             compact: compact,
             enableUpdateAnimations: enableUpdateAnimations,
             cellStyleProps: cellStyleProps,
+            disabled: disabled,
         }));
         var rowClassNames = {
             isMultiline: this._classNames.isMultiline,
@@ -31831,12 +32036,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,
@@ -33034,7 +33241,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');
@@ -33167,9 +33374,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);
             }
@@ -33190,8 +33395,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;
@@ -33211,6 +33419,7 @@ var DetailsListInner = function (props) {
         var rowProps = {
             item: item,
             itemIndex: index,
+            flatIndexOffset: isHeaderVisible ? 2 : 1,
             compact: compact,
             columns: adjustedColumns,
             groupNestingDepth: nestingDepth,
@@ -33265,6 +33474,7 @@ var DetailsListInner = function (props) {
         collapseAllVisibility,
         getRowAriaLabel,
         getRowAriaDescribedBy,
+        isHeaderVisible,
         checkButtonAriaLabel,
         checkboxCellClassName,
         useReducedRowRenderer,
@@ -34040,8 +34250,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,
@@ -34350,12 +34560,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,
@@ -34382,7 +34593,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)))));
@@ -34692,7 +34903,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,
@@ -35269,13 +35480,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 }));
         };
@@ -41608,9 +41816,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;
@@ -42697,7 +42909,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';
@@ -49122,7 +49334,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;
@@ -49130,7 +49342,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();
@@ -49182,12 +49396,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;
                 }
             }
@@ -49224,6 +49442,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;
@@ -49232,6 +49459,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);
@@ -49272,6 +49507,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;
@@ -51421,7 +51660,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.1');
+set_version_1.setVersion('@uifabric/styling', '7.20.0');
 
 
 /***/ }),
@@ -51703,20 +51942,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));
@@ -52619,7 +52869,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
  */
@@ -52647,7 +52901,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.18.0');
+set_version_1.setVersion('@fluentui/react-focus', '7.18.2');
 
 
 /***/ }),
@@ -52685,6 +52939,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) {
@@ -52856,7 +53139,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;
@@ -52954,7 +53237,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;
@@ -53257,7 +53540,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;
         }
@@ -53271,7 +53555,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);
@@ -53746,6 +54030,7 @@ function getIsChecked(item) {
 }
 exports.getIsChecked = getIsChecked;
 function hasSubmenu(item) {
+    // eslint-disable-next-line deprecation/deprecation
     return !!(item.subMenuProps || item.items);
 }
 exports.hasSubmenu = hasSubmenu;
@@ -55127,7 +55412,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.19.0');
+set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.1');
 
 
 /***/ }),
@@ -56096,7 +56381,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;
@@ -56243,7 +56528,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;
@@ -56363,7 +56648,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;
@@ -56544,7 +56829,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;
@@ -56578,6 +56863,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                     // The circle
                     ':before': [
                         {
+                            width: StyleConstants.choiceGroupDimensions,
+                            height: StyleConstants.choiceGroupDimensions,
                             borderColor: semanticColors.bodyText,
                         },
                         checked && {
@@ -56598,6 +56885,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                     ':after': [
                         {
                             borderColor: extendedSemanticColors.checkboxBorderChecked,
+                            top: 4,
+                            left: 4,
                         },
                         checked &&
                             disabled && {
@@ -56619,6 +56908,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
                                 ':after': {
                                     borderColor: extendedSemanticColors.checkboxBorderChecked,
                                     backgroundColor: extendedSemanticColors.choiceGroupUncheckedDotHover,
+                                    top: 4,
+                                    left: 4,
                                 },
                             },
                         },
@@ -56779,7 +57070,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;
@@ -57058,7 +57349,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;
@@ -57178,7 +57469,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;
@@ -57252,7 +57543,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;
@@ -57393,7 +57684,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;
@@ -57832,7 +58123,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;
@@ -58031,7 +58322,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;
@@ -59147,7 +59438,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;
@@ -59196,7 +59487,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;
@@ -59270,7 +59561,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;
@@ -59425,7 +59716,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;
@@ -59465,7 +59756,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;
@@ -59589,7 +59880,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;
@@ -59650,7 +59941,7 @@ 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_BORDER_RADIUS = 10;
@@ -59876,7 +60167,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) {
@@ -59928,7 +60219,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) {
@@ -60090,7 +60381,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;
@@ -60182,7 +60473,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;
@@ -60308,10 +60599,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,
         },
     };
 };
@@ -69036,9 +69336,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);
@@ -69606,7 +69906,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" })),
@@ -78916,7 +79216,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.6.1');
+set_version_1.setVersion('@uifabric/icons', '7.6.2');
 
 
 /***/ }),
@@ -80352,6 +80652,7 @@ function getStyles(props) {
                     },
                     _c[":hover ." + classNames.icon] = {
                         opacity: 0,
+                        pointerEvents: 'none',
                     },
                     _c),
             },
@@ -80422,6 +80723,7 @@ function getStyles(props) {
             },
             hasFocus && {
                 opacity: 0,
+                pointerEvents: 'none',
             },
             !disableAnimation && {
                 transition: "opacity " + Styling_1.AnimationVariables.durationValue1 + " 0s",
@@ -82879,7 +83181,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.10.0');
+set_version_1.setVersion('@uifabric/foundation', '7.10.1');
 
 
 /***/ }),
@@ -86621,7 +86923,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.20.0');
+set_version_1.setVersion('@fluentui/react-button', '0.20.1');
 
 
 /***/ }),
@@ -127098,4 +127400,4 @@ exports.ToggleButtons = function () { return (React.createElement(office_ui_fabr
 
 /***/ })
 ],[[929,1,2]]]);
-//# sourceMappingURL=main.7da4035404597c1a9885.bundle.js.map
+//# sourceMappingURL=main.6d4ff50b2d1a618817d2.bundle.js.map