@fluentui/react-button 0.20.2 → 0.20.3

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Wed, 30 Mar 2022 12:23:45 GMT",
+      "date": "Thu, 19 May 2022 12:26:46 GMT",
+      "tag": "@fluentui/react-button_v0.20.3",
+      "version": "0.20.3",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Update React compatibility to support React <18.0.0",
+            "author": "tmichon@microsoft.com",
+            "commit": "cfafa8b0de5d3d83307a2c091b9cf4a4d1909f2a",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Mar 2022 12:25:54 GMT",
       "tag": "@fluentui/react-button_v0.20.2",
       "version": "0.20.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Wed, 30 Mar 2022 12:23:45 GMT and should not be manually modified.
+This log was last generated on Thu, 19 May 2022 12:26:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.20.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.3)
+
+Thu, 19 May 2022 12:26:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.2..@fluentui/react-button_v0.20.3)
+
+### Patches
+
+- Update React compatibility to support React <18.0.0 ([PR #22921](https://github.com/microsoft/fluentui/pull/22921) by tmichon@microsoft.com)
+
 ## [0.20.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.2)
 
-Wed, 30 Mar 2022 12:23:45 GMT 
+Wed, 30 Mar 2022 12:25:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.1..@fluentui/react-button_v0.20.2)
 
 ### Patches

package/dist/demo-app.js

@@ -932,7 +932,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/react-hooks', '7.14.0');\n\n\n//# sourceURL=webpack:///../react-hooks/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/react-hooks', '7.14.1');\n\n\n//# sourceURL=webpack:///../react-hooks/src/version.ts?");
 
 /***/ }),
 
@@ -24799,7 +24799,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-icons', '0.4.2');\n\n\n//# sourceURL=webpack:///../react-icons/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-icons', '0.4.3');\n\n\n//# sourceURL=webpack:///../react-icons/src/version.ts?");
 
 /***/ }),
 
@@ -25207,7 +25207,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar th
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-theme-provider', '0.19.1');\n\n\n//# sourceURL=webpack:///../react-theme-provider/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-theme-provider', '0.19.2');\n\n\n//# sourceURL=webpack:///../react-theme-provider/src/version.ts?");
 
 /***/ }),
 
@@ -25639,7 +25639,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar bu
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/styling', '7.20.0');\n\n\n//# sourceURL=webpack:///../styling/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/styling', '7.20.1');\n\n\n//# sourceURL=webpack:///../styling/src/version.ts?");
 
 /***/ }),
 
@@ -27151,7 +27151,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar Re
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/utilities', '7.33.5');\n\n\n//# sourceURL=webpack:///../utilities/src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@uifabric/utilities', '7.34.0');\n\n\n//# sourceURL=webpack:///../utilities/src/version.ts?");
 
 /***/ }),
 
@@ -27715,7 +27715,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-button', '0.20.1');\n\n\n//# sourceURL=webpack:///./src/version.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nvar set_version_1 = __webpack_require__(/*! @uifabric/set-version */ \"../set-version/src/index.ts\");\nset_version_1.setVersion('@fluentui/react-button', '0.20.2');\n\n\n//# sourceURL=webpack:///./src/version.ts?");
 
 /***/ }),
 

package/dist-storybook/iframe.html

@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.6d4ff50b2d1a618817d2.bundle.js"></script><script src="vendors~main.6d4ff50b2d1a618817d2.bundle.js"></script><script src="main.6d4ff50b2d1a618817d2.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.87dadd1789d336577e59.bundle.js"></script><script src="vendors~main.87dadd1789d336577e59.bundle.js"></script><script src="main.87dadd1789d336577e59.bundle.js"></script></body></html>

package/dist-storybook/{main.6d4ff50b2d1a618817d2.bundle.js → main.87dadd1789d336577e59.bundle.js}

@@ -3345,7 +3345,7 @@ exports.getStyles = Utilities_1.memoizeFunction(function (theme) {
                 borderRadius: effects.roundedCorner2,
                 selectors: {
                     // IE11 workaround for preventing shift of child elements of a button when active.
-                    ':active > *': {
+                    ':active > span': {
                         position: 'relative',
                         left: 0,
                         top: 0,
@@ -3816,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.184.0');
+set_version_1.setVersion('office-ui-fabric-react', '7.185.5');
 
 
 /***/ }),
@@ -7518,16 +7518,8 @@ var Styling_1 = __webpack_require__(4);
 var Utilities_1 = __webpack_require__(3);
 exports.CONTEXTUAL_MENU_ITEM_HEIGHT = 36;
 var MediumScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMaxMedium);
-var getItemHighContrastStyles = Utilities_1.memoizeFunction(function () {
-    var _a;
-    return {
-        selectors: (_a = {},
-            _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, Styling_1.getHighContrastNoAdjustStyle()),
-            _a),
-    };
-});
 exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e;
     var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
     var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;
     var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;
@@ -7569,32 +7561,58 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             cursor: 'default',
             pointerEvents: 'none',
             selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText', opacity: 1 }, Styling_1.getHighContrastNoAdjustStyle()),
+                _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ 
+                    // ensure disabled text looks different than enabled
+                    color: 'GrayText', opacity: 1 }, Styling_1.getHighContrastNoAdjustStyle()),
                 _a),
         },
-        rootHovered: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor, color: ContextualMenuItemTextHoverColor, selectors: {
+        rootHovered: {
+            backgroundColor: ContextualMenuItemBackgroundHoverColor,
+            color: ContextualMenuItemTextHoverColor,
+            selectors: {
                 '.ms-ContextualMenu-icon': {
                     color: palette.themeDarkAlt,
                 },
                 '.ms-ContextualMenu-submenuIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootFocused: tslib_1.__assign({ backgroundColor: palette.white }, getItemHighContrastStyles()),
-        rootChecked: tslib_1.__assign({ selectors: {
+            },
+        },
+        rootFocused: {
+            backgroundColor: palette.white,
+        },
+        rootChecked: {
+            selectors: {
                 '.ms-ContextualMenu-checkmarkIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootPressed: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, selectors: {
+            },
+        },
+        rootPressed: {
+            backgroundColor: ContextualMenuItemBackgroundSelectedColor,
+            selectors: {
                 '.ms-ContextualMenu-icon': {
                     color: palette.themeDark,
                 },
                 '.ms-ContextualMenu-submenuIcon': {
                     color: palette.neutralPrimary,
                 },
-            } }, getItemHighContrastStyles()),
-        rootExpanded: tslib_1.__assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, color: semanticColors.bodyTextChecked }, getItemHighContrastStyles()),
+            },
+        },
+        rootExpanded: {
+            backgroundColor: ContextualMenuItemBackgroundSelectedColor,
+            color: semanticColors.bodyTextChecked,
+            selectors: (_b = {
+                    '.ms-ContextualMenu-submenuIcon': (_c = {},
+                        _c[Styling_1.HighContrastSelector] = {
+                            // icons inside of anchor tags are not properly inheriting color in high contrast
+                            color: 'inherit',
+                        },
+                        _c)
+                },
+                _b[Styling_1.HighContrastSelector] = tslib_1.__assign({}, Styling_1.getHighContrastNoAdjustStyle()),
+                _b),
+        },
         linkContent: {
             whiteSpace: 'nowrap',
             height: 'inherit',
@@ -7637,45 +7655,21 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             margin: '0 4px',
             verticalAlign: 'middle',
             flexShrink: '0',
-            selectors: (_b = {},
-                _b[MediumScreenSelector] = {
+            selectors: (_d = {},
+                _d[MediumScreenSelector] = {
                     fontSize: Styling_1.IconFontSizes.large,
                     width: Styling_1.IconFontSizes.large,
                 },
-                _b),
+                _d),
         },
         iconColor: {
             color: semanticColors.menuIcon,
-            selectors: (_c = {},
-                _c[Styling_1.HighContrastSelector] = {
-                    color: 'inherit',
-                },
-                _c['$root:hover &'] = {
-                    selectors: (_d = {},
-                        _d[Styling_1.HighContrastSelector] = {
-                            color: 'HighlightText',
-                        },
-                        _d),
-                },
-                _c['$root:focus &'] = {
-                    selectors: (_e = {},
-                        _e[Styling_1.HighContrastSelector] = {
-                            color: 'HighlightText',
-                        },
-                        _e),
-                },
-                _c),
         },
         iconDisabled: {
             color: semanticColors.disabledBodyText,
         },
         checkmarkIcon: {
             color: semanticColors.bodySubtext,
-            selectors: (_f = {},
-                _f[Styling_1.HighContrastSelector] = {
-                    color: 'HighlightText',
-                },
-                _f),
         },
         subMenuIcon: {
             height: exports.CONTEXTUAL_MENU_ITEM_HEIGHT,
@@ -7686,7 +7680,7 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
             verticalAlign: 'middle',
             flexShrink: '0',
             fontSize: Styling_1.IconFontSizes.small,
-            selectors: (_g = {
+            selectors: (_e = {
                     ':hover': {
                         color: palette.neutralPrimary,
                     },
@@ -7694,13 +7688,10 @@ exports.getMenuItemStyles = Utilities_1.memoizeFunction(function (theme) {
                         color: palette.neutralPrimary,
                     }
                 },
-                _g[MediumScreenSelector] = {
+                _e[MediumScreenSelector] = {
                     fontSize: Styling_1.IconFontSizes.medium,
                 },
-                _g[Styling_1.HighContrastSelector] = {
-                    color: 'HighlightText',
-                },
-                _g),
+                _e),
         },
         splitButtonFlexContainer: [
             Styling_1.getFocusStyle(theme),
@@ -14810,9 +14801,12 @@ var fabric_icons_15_1 = __webpack_require__(2348);
 var fabric_icons_16_1 = __webpack_require__(2349);
 var fabric_icons_17_1 = __webpack_require__(2350);
 var iconAliases_1 = __webpack_require__(2351);
+var utilities_1 = __webpack_require__(11);
 var DEFAULT_BASE_URL = 'https://spoppe-b.azureedge.net/files/fabric-cdn-prod_20210407.001/assets/icons/';
+var win = utilities_1.getWindow();
 function initializeIcons(baseUrl, options) {
-    if (baseUrl === void 0) { baseUrl = DEFAULT_BASE_URL; }
+    if (baseUrl === void 0) { baseUrl = (_c = (_b = (_a = win) === null || _a === void 0 ? void 0 : _a.FabricConfig) === null || _b === void 0 ? void 0 : _b.fontBaseUrl, (_c !== null && _c !== void 0 ? _c : DEFAULT_BASE_URL)); }
+    var _a, _b, _c;
     [
         fabric_icons_1.initializeIcons,
         fabric_icons_0_1.initializeIcons,
@@ -23885,7 +23879,6 @@ var TooltipHostBase = /** @class */ (function (_super) {
             _this._clearDismissTimer();
             _this._clearOpenTimer();
             if (delay !== Tooltip_types_1.TooltipDelay.zero) {
-                _this.setState({ isAriaPlaceholderRendered: true });
                 var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`
                 _this._openTimerId = _this._async.setTimeout(function () {
                     _this._toggleTooltip(true);
@@ -23932,7 +23925,7 @@ var TooltipHostBase = /** @class */ (function (_super) {
         };
         _this._toggleTooltip = function (isTooltipVisible) {
             if (_this.state.isTooltipVisible !== isTooltipVisible) {
-                _this.setState({ isAriaPlaceholderRendered: false, isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });
+                _this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });
             }
         };
         _this._getDelayTime = function (delay) {
@@ -23960,7 +23953,7 @@ var TooltipHostBase = /** @class */ (function (_super) {
             theme: theme,
             className: className,
         });
-        var _c = this.state, isAriaPlaceholderRendered = _c.isAriaPlaceholderRendered, isTooltipVisible = _c.isTooltipVisible;
+        var isTooltipVisible = this.state.isTooltipVisible;
         var tooltipId = id || this._defaultTooltipId;
         var isContentPresent = !!(content ||
             (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));
@@ -23968,12 +23961,12 @@ var TooltipHostBase = /** @class */ (function (_super) {
         var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;
         return (React.createElement("div", tslib_1.__assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._hideTooltip }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "aria-describedby": ariaDescribedBy }),
             children,
-            showTooltip && (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ id: tooltipId, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: Utilities_1.assign({}, calloutProps, {
+            showTooltip && (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({ id: tooltipId + "--tooltip", content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: Utilities_1.assign({}, calloutProps, {
                     onDismiss: this._hideTooltip,
                     onMouseEnter: this._onTooltipMouseEnter,
                     onMouseLeave: this._onTooltipMouseLeave,
-                }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), tooltipProps))),
-            isAriaPlaceholderRendered && (React.createElement("div", { id: tooltipId, style: Styling_1.hiddenContentStyle }, content))));
+                }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties, ['id']), tooltipProps))),
+            React.createElement("div", { hidden: true, id: tooltipId, style: Styling_1.hiddenContentStyle }, content)));
     };
     TooltipHostBase.prototype.componentWillUnmount = function () {
         if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {
@@ -49983,7 +49976,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/utilities', '7.33.5');
+set_version_1.setVersion('@uifabric/utilities', '7.34.0');
 
 
 /***/ }),
@@ -51660,7 +51653,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/styling', '7.20.0');
+set_version_1.setVersion('@uifabric/styling', '7.20.1');
 
 
 /***/ }),
@@ -51994,7 +51987,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/react-hooks', '7.14.0');
+set_version_1.setVersion('@uifabric/react-hooks', '7.14.1');
 
 
 /***/ }),
@@ -52901,7 +52894,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-focus', '7.18.2');
+set_version_1.setVersion('@fluentui/react-focus', '7.18.3');
 
 
 /***/ }),
@@ -55412,7 +55405,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.1');
+set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.2');
 
 
 /***/ }),
@@ -62972,7 +62965,7 @@ var CalendarDay = /** @class */ (function (_super) {
                                         _a[styles.daySelection] = dateRangeType === DateValues_1.DateRangeType.Day,
                                         _a[styles.weekSelection] = dateRangeType === DateValues_1.DateRangeType.Week || dateRangeType === DateValues_1.DateRangeType.WorkWeek,
                                         _a[styles.monthSelection] = dateRangeType === DateValues_1.DateRangeType.Month,
-                                        _a)), ref: function (element) { return _this._setDayCellRef(element, day, isNavigatedDate); }, onMouseOver: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
+                                        _a)), ref: function (element) { return _this._setDayCellRef(element, day, isNavigatedDate); }, onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), onMouseOver: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseOver(day.originalDate, weekIndex, dayIndex, dateRangeType)
                                         : undefined, onMouseLeave: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseLeave(day.originalDate, weekIndex, dayIndex, dateRangeType)
@@ -62980,11 +62973,11 @@ var CalendarDay = /** @class */ (function (_super) {
                                         ? _this._onDayMouseDown(day.originalDate, weekIndex, dayIndex, dateRangeType)
                                         : undefined, onMouseUp: dateRangeType !== DateValues_1.DateRangeType.Day && day.isInBounds
                                         ? _this._onDayMouseUp(day.originalDate, weekIndex, dayIndex, dateRangeType)
-                                        : undefined, role: 'presentation' },
+                                        : undefined, role: 'gridcell', "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), "aria-disabled": !day.isInBounds, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined },
                                     React.createElement("button", { key: day.key + 'button', onClick: day.isInBounds ? day.onSelected : undefined, className: Utilities_1.css(styles.day, 'ms-DatePicker-day-button', (_b = {},
                                             _b['ms-DatePicker-day--disabled ' + styles.dayIsDisabled] = !day.isInBounds,
                                             _b['ms-DatePicker-day--today ' + styles.dayIsToday] = day.isToday,
-                                            _b)), onKeyDown: _this._onDayKeyDown(day.originalDate, weekIndex, dayIndex), "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "aria-readonly": true, "aria-current": day.isToday ? 'date' : undefined, "aria-selected": day.isInBounds ? day.isSelected : undefined, "data-is-focusable": allFocusable || (day.isInBounds ? true : undefined), ref: function (element) { return _this._setDayRef(element, day, isNavigatedDate); }, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, type: "button", role: 'gridcell' },
+                                            _b)), "aria-label": dateTimeFormatter.formatMonthDayYear(day.originalDate, strings), id: isNavigatedDate ? activeDescendantId : undefined, "data-is-focusable": false, disabled: !allFocusable && !day.isInBounds, "aria-disabled": !day.isInBounds, tabIndex: -1, type: "button" },
                                         React.createElement("span", { "aria-hidden": "true" }, dateTimeFormatter.formatDay(day.originalDate)))));
                             })));
                     }))))));
@@ -62995,14 +62988,12 @@ var CalendarDay = /** @class */ (function (_super) {
             this.navigatedDay.focus();
         }
     };
-    CalendarDay.prototype._setDayRef = function (element, day, isNavigatedDate) {
+    CalendarDay.prototype._setDayCellRef = function (element, day, isNavigatedDate) {
+        this.days[day.key] = element;
         if (isNavigatedDate) {
             this.navigatedDay = element;
         }
     };
-    CalendarDay.prototype._setDayCellRef = function (element, day, isNavigatedDate) {
-        this.days[day.key] = element;
-    };
     CalendarDay.prototype._getWeekCornerStyles = function (weeks, dateRangeType) {
         var _this = this;
         var weekCornersStyled = {};
@@ -74090,7 +74081,7 @@ var GlobalClassNames = {
 };
 var REMOVE_BUTTON_SIZE = 24;
 function getStyles(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var className = props.className, theme = props.theme, selected = props.selected, invalid = props.invalid, disabled = props.disabled;
     var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
     var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
@@ -74133,6 +74124,22 @@ function getStyles(props) {
                 _c),
         },
     ];
+    var personaSecondaryTextStyles = [
+        selected &&
+            !invalid &&
+            !disabled && {
+            color: palette.white,
+            selectors: (_d = {
+                    ':hover': {
+                        color: palette.white,
+                    }
+                },
+                _d[Styling_1.HighContrastSelector] = {
+                    color: 'HighlightText',
+                },
+                _d),
+        },
+    ];
     var personaCoinInitialsStyles = [
         invalid && {
             fontSize: fonts.xLarge.fontSize,
@@ -74153,22 +74160,22 @@ function getStyles(props) {
                 maxWidth: 300,
                 verticalAlign: 'middle',
                 minWidth: 0,
-                selectors: (_d = {
+                selectors: (_e = {
                         ':hover': {
                             background: !selected && !disabled ? palette.neutralLight : '',
                         }
                     },
-                    _d[Styling_1.HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }],
-                    _d),
+                    _e[Styling_1.HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }],
+                    _e),
             },
             selected &&
                 !disabled && [
                 classNames.isSelected,
                 {
                     background: palette.themePrimary,
-                    selectors: (_e = {},
-                        _e[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, Styling_1.getHighContrastNoAdjustStyle()),
-                        _e),
+                    selectors: (_f = {},
+                        _f[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'HighLight', background: 'Highlight' }, Styling_1.getHighContrastNoAdjustStyle()),
+                        _f),
                 },
             ],
             invalid && [classNames.isInvalid],
@@ -74208,7 +74215,7 @@ function getStyles(props) {
             selected && [
                 {
                     color: palette.white,
-                    selectors: (_f = {
+                    selectors: (_g = {
                             ':hover': {
                                 color: palette.white,
                                 background: palette.themeDark,
@@ -74218,10 +74225,10 @@ function getStyles(props) {
                                 background: palette.themeDarker,
                             }
                         },
-                        _f[Styling_1.HighContrastSelector] = {
+                        _g[Styling_1.HighContrastSelector] = {
                             color: 'HighlightText',
                         },
-                        _f),
+                        _g),
                 },
                 invalid && {
                     selectors: {
@@ -74235,16 +74242,17 @@ function getStyles(props) {
                 },
             ],
             disabled && {
-                selectors: (_g = {},
-                    _g["." + BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon] = {
+                selectors: (_h = {},
+                    _h["." + BaseButton_classNames_1.ButtonGlobalClassNames.msButtonIcon] = {
                         color: semanticColors.buttonText,
                     },
-                    _g),
+                    _h),
             },
         ],
         subComponentStyles: {
             persona: {
                 primaryText: personaPrimaryTextStyles,
+                secondaryText: personaSecondaryTextStyles,
             },
             personaCoin: {
                 initials: personaCoinInitialsStyles,
@@ -79216,7 +79224,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/icons', '7.6.2');
+set_version_1.setVersion('@uifabric/icons', '7.7.0');
 
 
 /***/ }),
@@ -83181,7 +83189,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/foundation', '7.10.1');
+set_version_1.setVersion('@uifabric/foundation', '7.10.2');
 
 
 /***/ }),
@@ -85014,7 +85022,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@uifabric/variants', '7.2.35');
+set_version_1.setVersion('@uifabric/variants', '7.2.36');
 
 
 /***/ }),
@@ -86923,7 +86931,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-button', '0.20.1');
+set_version_1.setVersion('@fluentui/react-button', '0.20.2');
 
 
 /***/ }),
@@ -87097,7 +87105,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 var set_version_1 = __webpack_require__(57);
-set_version_1.setVersion('@fluentui/react-icons', '0.4.2');
+set_version_1.setVersion('@fluentui/react-icons', '0.4.3');
 
 
 /***/ }),
@@ -127400,4 +127408,4 @@ exports.ToggleButtons = function () { return (React.createElement(office_ui_fabr
 
 /***/ })
 ],[[929,1,2]]]);
-//# sourceMappingURL=main.6d4ff50b2d1a618817d2.bundle.js.map
+//# sourceMappingURL=main.87dadd1789d336577e59.bundle.js.map