@fluentui/react-button 0.20.4 → 0.20.5

package/CHANGELOG.json

@@ -2,7 +2,30 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Fri, 08 Jul 2022 12:21:37 GMT",
+      "date": "Wed, 27 Jul 2022 12:25:50 GMT",
+      "tag": "@fluentui/react-button_v0.20.5",
+      "version": "0.20.5",
+      "comments": {
+        "none": [
+          {
+            "comment": "update snaps",
+            "author": "mgodbolt@microsoft.com",
+            "commit": "44b414628d8160cf6fd7803a3f769ef2553008d2",
+            "package": "@fluentui/react-button"
+          }
+        ],
+        "patch": [
+          {
+            "comment": "Bump @uifabric/styling to v7.21.1",
+            "author": "mgodbolt@microsoft.com",
+            "commit": "44b414628d8160cf6fd7803a3f769ef2553008d2",
+            "package": "@fluentui/react-button"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 08 Jul 2022 12:23:25 GMT",
       "tag": "@fluentui/react-button_v0.20.4",
       "version": "0.20.4",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-button
 
-This log was last generated on Fri, 08 Jul 2022 12:21:37 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Jul 2022 12:25:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.20.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.5)
+
+Wed, 27 Jul 2022 12:25:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.4..@fluentui/react-button_v0.20.5)
+
+### Patches
+
+- Bump @uifabric/styling to v7.21.1 ([PR #24022](https://github.com/microsoft/fluentui/pull/24022) by mgodbolt@microsoft.com)
+
 ## [0.20.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.20.4)
 
-Fri, 08 Jul 2022 12:21:37 GMT 
+Fri, 08 Jul 2022 12:23:25 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v0.20.3..@fluentui/react-button_v0.20.4)
 
 ### Patches

package/dist/demo-app.js

@@ -944,7 +944,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.2');\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.15.0');\n\n\n//# sourceURL=webpack:///../react-hooks/src/version.ts?");
 
 /***/ }),
 
@@ -25219,7 +25219,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.3');\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.4');\n\n\n//# sourceURL=webpack:///../react-theme-provider/src/version.ts?");
 
 /***/ }),
 
@@ -25411,7 +25411,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar ts
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), @media screen and (forced-colors: active)';\nexports.HighContrastSelectorWhite = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: black-on-white), @media screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexports.HighContrastSelectorBlack = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: white-on-black), @media screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), @media screen and (forced-colors: active)';\nexports.ScreenWidthMinSmall = 320;\nexports.ScreenWidthMinMedium = 480;\nexports.ScreenWidthMinLarge = 640;\nexports.ScreenWidthMinXLarge = 1024;\nexports.ScreenWidthMinXXLarge = 1366;\nexports.ScreenWidthMinXXXLarge = 1920;\nexports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;\nexports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;\nexports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;\nexports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;\nexports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;\nexports.ScreenWidthMinUhfMobile = 768;\nfunction getScreenSelector(min, max) {\n    var minSelector = typeof min === 'number' ? \" and (min-width: \" + min + \"px)\" : '';\n    var maxSelector = typeof max === 'number' ? \" and (max-width: \" + max + \"px)\" : '';\n    return \"@media only screen\" + minSelector + maxSelector;\n}\nexports.getScreenSelector = getScreenSelector;\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nfunction getHighContrastNoAdjustStyle() {\n    return {\n        forcedColorAdjust: 'none',\n        MsHighContrastAdjust: 'none',\n    };\n}\nexports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nfunction getEdgeChromiumNoHighContrastAdjustSelector() {\n    var _a;\n    return _a = {},\n        // eslint-disable-next-line deprecation/deprecation\n        _a[exports.EdgeChromiumHighContrastSelector] = {\n            forcedColorAdjust: 'none',\n            MsHighContrastAdjust: 'none',\n        },\n        _a;\n}\nexports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;\n\n\n//# sourceURL=webpack:///../styling/src/styles/CommonStyles.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexports.HighContrastSelectorWhite = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';\nexports.HighContrastSelectorBlack = \n// eslint-disable-next-line @fluentui/max-len\n'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';\n/**\n * @deprecated Use `HighContrastSelector`\n */\nexports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';\nexports.ScreenWidthMinSmall = 320;\nexports.ScreenWidthMinMedium = 480;\nexports.ScreenWidthMinLarge = 640;\nexports.ScreenWidthMinXLarge = 1024;\nexports.ScreenWidthMinXXLarge = 1366;\nexports.ScreenWidthMinXXXLarge = 1920;\nexports.ScreenWidthMaxSmall = exports.ScreenWidthMinMedium - 1;\nexports.ScreenWidthMaxMedium = exports.ScreenWidthMinLarge - 1;\nexports.ScreenWidthMaxLarge = exports.ScreenWidthMinXLarge - 1;\nexports.ScreenWidthMaxXLarge = exports.ScreenWidthMinXXLarge - 1;\nexports.ScreenWidthMaxXXLarge = exports.ScreenWidthMinXXXLarge - 1;\nexports.ScreenWidthMinUhfMobile = 768;\nfunction getScreenSelector(min, max) {\n    var minSelector = typeof min === 'number' ? \" and (min-width: \" + min + \"px)\" : '';\n    var maxSelector = typeof max === 'number' ? \" and (max-width: \" + max + \"px)\" : '';\n    return \"@media only screen\" + minSelector + maxSelector;\n}\nexports.getScreenSelector = getScreenSelector;\n/**\n * The style which turns off high contrast adjustment in browsers.\n */\nfunction getHighContrastNoAdjustStyle() {\n    return {\n        forcedColorAdjust: 'none',\n        MsHighContrastAdjust: 'none',\n    };\n}\nexports.getHighContrastNoAdjustStyle = getHighContrastNoAdjustStyle;\n/**\n * The style which turns off high contrast adjustment in (only) Edge Chromium browser.\n * @deprecated Use `getHighContrastNoAdjustStyle`\n */\n// eslint-disable-next-line deprecation/deprecation\nfunction getEdgeChromiumNoHighContrastAdjustSelector() {\n    var _a;\n    return _a = {},\n        // eslint-disable-next-line deprecation/deprecation\n        _a[exports.EdgeChromiumHighContrastSelector] = {\n            forcedColorAdjust: 'none',\n            MsHighContrastAdjust: 'none',\n        },\n        _a;\n}\nexports.getEdgeChromiumNoHighContrastAdjustSelector = getEdgeChromiumNoHighContrastAdjustSelector;\n\n\n//# sourceURL=webpack:///../styling/src/styles/CommonStyles.ts?");
 
 /***/ }),
 
@@ -25651,7 +25651,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.2');\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.21.0');\n\n\n//# sourceURL=webpack:///../styling/src/version.ts?");
 
 /***/ }),
 
@@ -27727,7 +27727,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.3');\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.4');\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.b62d8e661c9c65ff8e37.bundle.js"></script><script src="vendors~main.b62d8e661c9c65ff8e37.bundle.js"></script><script src="main.b62d8e661c9c65ff8e37.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.b0307caa89b2f44e62f4.bundle.js"></script><script src="vendors~main.b0307caa89b2f44e62f4.bundle.js"></script><script src="main.b0307caa89b2f44e62f4.bundle.js"></script></body></html>

package/dist-storybook/{main.b62d8e661c9c65ff8e37.bundle.js → main.b0307caa89b2f44e62f4.bundle.js}

@@ -3825,7 +3825,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.188.0');
+set_version_1.setVersion('office-ui-fabric-react', '7.190.2');
 
 
 /***/ }),
@@ -18443,17 +18443,17 @@ exports.createFontStyles = createFontStyles;
 "use strict";
 
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), @media screen and (forced-colors: active)';
+exports.HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
 exports.HighContrastSelectorWhite = 
 // eslint-disable-next-line @fluentui/max-len
-'@media screen and (-ms-high-contrast: black-on-white), @media screen and (forced-colors: active) and (prefers-color-scheme: light)';
+'@media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light)';
 exports.HighContrastSelectorBlack = 
 // eslint-disable-next-line @fluentui/max-len
-'@media screen and (-ms-high-contrast: white-on-black), @media screen and (forced-colors: active) and (prefers-color-scheme: dark)';
+'@media screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)';
 /**
  * @deprecated Use `HighContrastSelector`
  */
-exports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), @media screen and (forced-colors: active)';
+exports.EdgeChromiumHighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
 exports.ScreenWidthMinSmall = 320;
 exports.ScreenWidthMinMedium = 480;
 exports.ScreenWidthMinLarge = 640;
@@ -33586,7 +33586,7 @@ var DetailsListInner = function (props) {
                     rowWidth: sumColumnWidths(adjustedColumns),
                     useFastIcons: useFastIcons,
                 }, onRenderDetailsHeader)),
-            React.createElement("div", { onKeyDown: onContentKeyDown, role: "presentation", className: classNames.contentWrapper }, !disableSelectionZone ? (React.createElement(index_1.SelectionZone, tslib_1.__assign({ ref: selectionZoneRef, selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, isSelectedOnFocus: isSelectedOnFocus, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu, enterModalOnTouch: enterModalSelectionOnTouch }, (selectionZoneProps || {})), list)) : (list)),
+            React.createElement("div", { onKeyDown: onContentKeyDown, role: "presentation", className: classNames.contentWrapper }, !disableSelectionZone ? (React.createElement(index_1.SelectionZone, tslib_1.__assign({ ref: selectionZoneRef, selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, isSelectedOnFocus: isSelectedOnFocus, selectionClearedOnEscapePress: isSelectedOnFocus, toggleWithoutModifierPressed: !isSelectedOnFocus, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu, enterModalOnTouch: enterModalSelectionOnTouch }, (selectionZoneProps || {})), list)) : (list)),
             onRenderDetailsFooter(tslib_1.__assign({}, detailsFooterProps)))));
 };
 var DetailsListBase = /** @class */ (function (_super) {
@@ -51692,7 +51692,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.2');
+set_version_1.setVersion('@uifabric/styling', '7.21.0');
 
 
 /***/ }),
@@ -52026,7 +52026,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.2');
+set_version_1.setVersion('@uifabric/react-hooks', '7.15.0');
 
 
 /***/ }),
@@ -52695,20 +52695,6 @@ var FocusTrapZone = /** @class */ (function (_super) {
             if (FocusTrapZone._focusStack.length && _this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
                 var focusedElement = _this._getDocument().activeElement;
                 if (!Utilities_1.elementContains(_this._root.current, focusedElement)) {
-                    _this.focus();
-                    _this._hasFocus = true; // set focus here since we stop event propagation
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                }
-            }
-        };
-        _this._forceClickInTrap = function (ev) {
-            if (_this.props.disabled) {
-                return;
-            }
-            if (FocusTrapZone._focusStack.length && _this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
-                var clickedElement = ev.target;
-                if (clickedElement && !Utilities_1.elementContains(_this._root.current, clickedElement)) {
                     var doc_1 = _this._getDocument();
                     if (doc_1 && doc_1.activeElement === doc_1.body) {
                         setTimeout(function () {
@@ -52727,6 +52713,20 @@ var FocusTrapZone = /** @class */ (function (_super) {
                 }
             }
         };
+        _this._forceClickInTrap = function (ev) {
+            if (_this.props.disabled) {
+                return;
+            }
+            if (FocusTrapZone._focusStack.length && _this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
+                var clickedElement = ev.target;
+                if (clickedElement && !Utilities_1.elementContains(_this._root.current, clickedElement)) {
+                    _this.focus();
+                    _this._hasFocus = true; // set focus here since we stop event propagation
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+            }
+        };
         Utilities_1.initializeComponentRef(_this);
         return _this;
     }
@@ -52989,7 +52989,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.4');
+set_version_1.setVersion('@fluentui/react-focus', '7.18.5');
 
 
 /***/ }),
@@ -55500,7 +55500,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.3');
+set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.4');
 
 
 /***/ }),
@@ -63601,7 +63601,7 @@ var CalendarMonth = /** @class */ (function (_super) {
                                 : undefined, role: "button", type: "button" },
                             React.createElement(Icon_1.Icon, { iconName: Utilities_1.getRTL() ? leftNavigationIcon : rightNavigationIcon }))))),
             React.createElement(FocusZone_1.FocusZone, null,
-                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid), role: "grid", "aria-readonly": "true" }, rowIndexes.map(function (rowNum) {
+                React.createElement("div", { className: Utilities_1.css('ms-DatePicker-optionGrid', styles.optionGrid), role: "grid" }, rowIndexes.map(function (rowNum) {
                     var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);
                     return (React.createElement("div", { key: 'monthRow_' + rowNum, role: "row" }, monthsForRow.map(function (month, index) {
                         var _a;
@@ -69085,7 +69085,8 @@ var SelectionZone = /** @class */ (function (_super) {
                     else if ((target === itemRoot || _this._shouldAutoSelect(target)) &&
                         !_this._isShiftPressed &&
                         !_this._isCtrlPressed &&
-                        !_this._isMetaPressed) {
+                        !_this._isMetaPressed &&
+                        !_this.props.toggleWithoutModifierPressed) {
                         _this._onInvokeMouseDown(ev, _this._getItemIndex(itemRoot));
                         break;
                     }
@@ -69197,7 +69198,8 @@ var SelectionZone = /** @class */ (function (_super) {
             _this._updateModifiers(ev);
             var target = ev.target;
             var isSelectionDisabled = _this._isSelectionDisabled(target);
-            var selection = _this.props.selection;
+            var _a = _this.props, selection = _a.selection, selectionClearedOnEscapePress = _a.selectionClearedOnEscapePress;
+            // eslint-disable-next-line deprecation/deprecation
             var isSelectAllKey = ev.which === Utilities_1.KeyCodes.a && (_this._isCtrlPressed || _this._isMetaPressed);
             var isClearSelectionKey = ev.which === Utilities_1.KeyCodes.escape;
             // Ignore key downs from input elements.
@@ -69215,8 +69217,9 @@ var SelectionZone = /** @class */ (function (_super) {
                 ev.preventDefault();
                 return;
             }
-            // If escape is pressed, clear selection (if any are selected.)
-            if (isClearSelectionKey && selection.getSelectedCount() > 0) {
+            // If escape is pressed and the component is configured to clear on escape press,
+            // clear selection (if any are selected.)
+            if (selectionClearedOnEscapePress && isClearSelectionKey && selection.getSelectedCount() > 0) {
                 if (!isSelectionDisabled) {
                     selection.setAllSelected(false);
                 }
@@ -69373,14 +69376,14 @@ var SelectionZone = /** @class */ (function (_super) {
         }
     };
     SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {
-        var selection = this.props.selection;
+        var _a = this.props, selection = _a.selection, toggleWithoutModifierPressed = _a.toggleWithoutModifierPressed;
         var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
         var selectionMode = this._getSelectionMode();
         if (selectionMode === interfaces_1.SelectionMode.multiple) {
             if (this._isShiftPressed && !this._isTabPressed) {
                 selection.selectToIndex(index, !isToggleModifierPressed);
             }
-            else if (isToggleModifierPressed) {
+            else if (isToggleModifierPressed || toggleWithoutModifierPressed) {
                 selection.toggleIndexSelected(index);
             }
             else {
@@ -69475,7 +69478,12 @@ var SelectionZone = /** @class */ (function (_super) {
     SelectionZone.prototype._hasAttribute = function (element, attributeName) {
         var isToggle = false;
         while (!isToggle && element !== this._root.current) {
-            isToggle = element.getAttribute(attributeName) === 'true';
+            var value = element.getAttribute(attributeName);
+            if (value === 'false') {
+                isToggle = false;
+                break;
+            }
+            isToggle = value === 'true';
             element = Utilities_1.getParent(element);
         }
         return isToggle;
@@ -69528,7 +69536,9 @@ var SelectionZone = /** @class */ (function (_super) {
     };
     SelectionZone.defaultProps = {
         isSelectedOnFocus: true,
+        toggleWithoutModifierPressed: false,
         selectionMode: interfaces_1.SelectionMode.multiple,
+        selectionClearedOnEscapePress: true,
     };
     return SelectionZone;
 }(React.Component));
@@ -79319,7 +79329,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.7.2');
+set_version_1.setVersion('@uifabric/icons', '7.7.3');
 
 
 /***/ }),
@@ -83284,7 +83294,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.3');
+set_version_1.setVersion('@uifabric/foundation', '7.10.4');
 
 
 /***/ }),
@@ -87026,7 +87036,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.3');
+set_version_1.setVersion('@fluentui/react-button', '0.20.4');
 
 
 /***/ }),
@@ -127503,4 +127513,4 @@ exports.ToggleButtons = function () { return (React.createElement(office_ui_fabr
 
 /***/ })
 ],[[929,1,2]]]);
-//# sourceMappingURL=main.b62d8e661c9c65ff8e37.bundle.js.map
+//# sourceMappingURL=main.b0307caa89b2f44e62f4.bundle.js.map