@fluentui/react-button 0.20.1 → 0.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -207,8 +207,7 @@ tslib_1.__exportStar(__webpack_require__(694), exports);
207
207
  /* 27 */,
208
208
  /* 28 */,
209
209
  /* 29 */,
210
- /* 30 */,
211
- /* 31 */
210
+ /* 30 */
212
211
  /***/ (function(module, exports, __webpack_require__) {
213
212
 
214
213
  "use strict";
@@ -228,7 +227,9 @@ exports.fontFamily =
228
227
  'Segoe UI, "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",sans-serif';
229
228
  exports.fontWeightRegular = '400';
230
229
  exports.fontWeightBold = '700';
230
+ exports.choiceGroupDimensions = '18px';
231
231
  exports.inputControlHeight = '24px';
232
+ exports.inputControlPadding = '12px';
232
233
  exports.inputControlHeightInner = '20px';
233
234
  exports.textAlignCenter = 'center';
234
235
  exports.transparent = 'transparent';
@@ -237,6 +238,7 @@ exports.MediumScreenSelector = Styling_1.getScreenSelector(Styling_1.ScreenWidth
237
238
 
238
239
 
239
240
  /***/ }),
241
+ /* 31 */,
240
242
  /* 32 */,
241
243
  /* 33 */,
242
244
  /* 34 */,
@@ -637,7 +639,7 @@ exports.DEFAULT_ROW_HEIGHTS = {
637
639
  var values = tslib_1.__assign(tslib_1.__assign({}, exports.DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });
638
640
  exports.getDetailsRowStyles = function (props) {
639
641
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
640
- 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;
642
+ 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;
641
643
  var palette = theme.palette, fonts = theme.fonts;
642
644
  var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;
643
645
  var focusBorder = theme.semanticColors.focusBorder;
@@ -821,6 +823,7 @@ exports.getDetailsRowStyles = function (props) {
821
823
  _h),
822
824
  },
823
825
  compact && cellCompactStyles,
826
+ disabled && { opacity: 0.5 },
824
827
  ];
825
828
  return {
826
829
  root: [
@@ -2680,6 +2683,7 @@ var ContextualMenu_1 = __webpack_require__(248);
2680
2683
  var BaseButton_classNames_1 = __webpack_require__(194);
2681
2684
  var SplitButton_classNames_1 = __webpack_require__(719);
2682
2685
  var KeytipData_1 = __webpack_require__(79);
2686
+ var Utilities_2 = __webpack_require__(3);
2683
2687
  var TouchIdleDelay = 500; /* ms */
2684
2688
  var COMPONENT_NAME = 'BaseButton';
2685
2689
  /**
@@ -2766,16 +2770,8 @@ var BaseButton = /** @class */ (function (_super) {
2766
2770
  return React.createElement(Icon_1.FontIcon, tslib_1.__assign({ iconName: "ChevronDown" }, menuIconProps, { className: _this._classNames.menuIcon }));
2767
2771
  };
2768
2772
  _this._onRenderMenu = function (menuProps) {
2769
- var persistMenu = _this.props.persistMenu;
2770
- var menuHidden = _this.state.menuHidden;
2771
- var MenuType = _this.props.menuAs || ContextualMenu_1.ContextualMenu;
2772
- // the accessible menu label (accessible name) has a relationship to the button.
2773
- // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,
2774
- // AND the button has text, we'll set the menu aria-labelledBy to the text element id.
2775
- if (!menuProps.ariaLabel && !menuProps.labelElementId && _this._hasText()) {
2776
- menuProps = tslib_1.__assign(tslib_1.__assign({}, menuProps), { labelElementId: _this._labelId });
2777
- }
2778
- 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 })));
2773
+ var MenuType = _this.props.menuAs ? Utilities_2.composeComponentAs(_this.props.menuAs, ContextualMenu_1.ContextualMenu) : ContextualMenu_1.ContextualMenu;
2774
+ return React.createElement(MenuType, tslib_1.__assign({}, menuProps));
2779
2775
  };
2780
2776
  _this._onDismissMenu = function (ev) {
2781
2777
  var menuProps = _this.props.menuProps;
@@ -3136,14 +3132,14 @@ var BaseButton = /** @class */ (function (_super) {
3136
3132
  menuProps &&
3137
3133
  !menuProps.doNotLayer &&
3138
3134
  _this._shouldRenderMenu() &&
3139
- onRenderMenu(menuProps, _this._onRenderMenu)))); };
3135
+ onRenderMenu(_this._getMenuProps(menuProps), _this._onRenderMenu)))); };
3140
3136
  var Content = keytipProps ? (
3141
3137
  // If we're making a split button, we won't put the keytip here
3142
3138
  React.createElement(KeytipData_1.KeytipData, { keytipProps: !this._isSplitButton ? keytipProps : undefined, ariaDescribedBy: buttonProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return Button(keytipAttributes); })) : (Button());
3143
3139
  if (menuProps && menuProps.doNotLayer) {
3144
3140
  return (React.createElement("span", { style: { display: 'inline-block' } },
3145
3141
  Content,
3146
- this._shouldRenderMenu() && onRenderMenu(menuProps, this._onRenderMenu)));
3142
+ this._shouldRenderMenu() && onRenderMenu(this._getMenuProps(menuProps), this._onRenderMenu)));
3147
3143
  }
3148
3144
  return (React.createElement(React.Fragment, null,
3149
3145
  Content,
@@ -3176,6 +3172,17 @@ var BaseButton = /** @class */ (function (_super) {
3176
3172
  // Purely a code maintainability/reuse issue, but logged as Issue #4979.
3177
3173
  return this.props.text !== null && (this.props.text !== undefined || typeof this.props.children === 'string');
3178
3174
  };
3175
+ BaseButton.prototype._getMenuProps = function (menuProps) {
3176
+ var persistMenu = this.props.persistMenu;
3177
+ var menuHidden = this.state.menuHidden;
3178
+ // the accessible menu label (accessible name) has a relationship to the button.
3179
+ // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,
3180
+ // AND the button has text, we'll set the menu aria-labelledBy to the text element id.
3181
+ if (!menuProps.ariaLabel && !menuProps.labelElementId && this._hasText()) {
3182
+ menuProps = tslib_1.__assign(tslib_1.__assign({}, menuProps), { labelElementId: this._labelId });
3183
+ }
3184
+ 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 });
3185
+ };
3179
3186
  BaseButton.prototype._onRenderSplitButtonContent = function (tag, buttonProps) {
3180
3187
  var _this = this;
3181
3188
  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 });
3809
3816
  // Do not modify this file; it is generated as part of publish.
3810
3817
  // The checked in version is a placeholder only and will not be updated.
3811
3818
  var set_version_1 = __webpack_require__(57);
3812
- set_version_1.setVersion('office-ui-fabric-react', '7.177.2');
3819
+ set_version_1.setVersion('office-ui-fabric-react', '7.184.0');
3813
3820
 
3814
3821
 
3815
3822
  /***/ }),
@@ -17098,6 +17105,7 @@ exports.getNativeProps = getNativeProps;
17098
17105
 
17099
17106
  Object.defineProperty(exports, "__esModule", { value: true });
17100
17107
  exports.SELECTION_CHANGE = 'change';
17108
+ exports.SELECTION_ITEMS_CHANGE = 'items-change';
17101
17109
  /**
17102
17110
  * {@docCategory Selection}
17103
17111
  */
@@ -18976,33 +18984,37 @@ var LayerBase = /** @class */ (function (_super) {
18976
18984
  var _this = _super.call(this, props) || this;
18977
18985
  _this._rootRef = React.createRef();
18978
18986
  _this._createLayerElement = function () {
18987
+ var _a, _b;
18979
18988
  var hostId = _this.props.hostId;
18980
18989
  var doc = Utilities_1.getDocument(_this._rootRef.current);
18981
18990
  var host = _this._getHost();
18982
- if (!doc || !host) {
18991
+ if (!host) {
18983
18992
  return;
18984
18993
  }
18985
18994
  // If one was already existing, remove.
18986
18995
  _this._removeLayerElement();
18987
- var layerElement = doc.createElement('div');
18988
- var classNames = _this._getClassNames();
18989
- layerElement.className = classNames.root;
18990
- Utilities_1.setPortalAttribute(layerElement);
18991
- Utilities_1.setVirtualParent(layerElement, _this._rootRef.current);
18992
- _this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
18993
- _this.setState({
18994
- hostId: hostId,
18995
- layerElement: layerElement,
18996
- }, function () {
18997
- // eslint-disable-next-line deprecation/deprecation
18998
- var _a = _this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
18999
- if (onLayerMounted) {
19000
- onLayerMounted();
19001
- }
19002
- if (onLayerDidMount) {
19003
- onLayerDidMount();
19004
- }
19005
- });
18996
+ // eslint-disable-next-line deprecation/deprecation
18997
+ var layerElement = (_b = (_a = host.ownerDocument, (_a !== null && _a !== void 0 ? _a : doc))) === null || _b === void 0 ? void 0 : _b.createElement('div');
18998
+ if (layerElement) {
18999
+ var classNames = _this._getClassNames();
19000
+ layerElement.className = classNames.root;
19001
+ Utilities_1.setPortalAttribute(layerElement);
19002
+ Utilities_1.setVirtualParent(layerElement, _this._rootRef.current);
19003
+ _this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
19004
+ _this.setState({
19005
+ hostId: hostId,
19006
+ layerElement: layerElement,
19007
+ }, function () {
19008
+ // eslint-disable-next-line deprecation/deprecation
19009
+ var _a = _this.props, onLayerDidMount = _a.onLayerDidMount, onLayerMounted = _a.onLayerMounted;
19010
+ if (onLayerMounted) {
19011
+ onLayerMounted();
19012
+ }
19013
+ if (onLayerDidMount) {
19014
+ onLayerDidMount();
19015
+ }
19016
+ });
19017
+ }
19006
19018
  };
19007
19019
  _this.state = {};
19008
19020
  if (true) {
@@ -19064,17 +19076,19 @@ var LayerBase = /** @class */ (function (_super) {
19064
19076
  return classNames;
19065
19077
  };
19066
19078
  LayerBase.prototype._getHost = function () {
19079
+ var _a, _b, _c, _d, _e, _f;
19067
19080
  var hostId = this.props.hostId;
19068
19081
  var doc = Utilities_1.getDocument(this._rootRef.current);
19069
- if (!doc) {
19070
- return undefined;
19071
- }
19072
19082
  if (hostId) {
19073
- return doc.getElementById(hostId);
19083
+ var layerHost = Layer_notification_1.getLayerHost(hostId);
19084
+ if (layerHost) {
19085
+ return _a = layerHost.rootRef.current, (_a !== null && _a !== void 0 ? _a : null);
19086
+ }
19087
+ return _c = (_b = doc) === null || _b === void 0 ? void 0 : _b.getElementById(hostId), (_c !== null && _c !== void 0 ? _c : null);
19074
19088
  }
19075
19089
  else {
19076
19090
  var defaultHostSelector = Layer_notification_1.getDefaultTarget();
19077
- return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;
19091
+ 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);
19078
19092
  }
19079
19093
  };
19080
19094
  LayerBase.defaultProps = {
@@ -19242,6 +19256,7 @@ exports.FabricBase = FabricBase;
19242
19256
 
19243
19257
  Object.defineProperty(exports, "__esModule", { value: true });
19244
19258
  var _layersByHostId = {};
19259
+ var _layerHostsById = {};
19245
19260
  var _defaultHostSelector;
19246
19261
  /**
19247
19262
  * Register a layer for a given host id
@@ -19253,6 +19268,13 @@ function registerLayer(hostId, callback) {
19253
19268
  _layersByHostId[hostId] = [];
19254
19269
  }
19255
19270
  _layersByHostId[hostId].push(callback);
19271
+ var layerHosts = _layerHostsById[hostId];
19272
+ if (layerHosts) {
19273
+ for (var _i = 0, layerHosts_1 = layerHosts; _i < layerHosts_1.length; _i++) {
19274
+ var layerHost = layerHosts_1[_i];
19275
+ layerHost.notifyLayersChanged();
19276
+ }
19277
+ }
19256
19278
  }
19257
19279
  exports.registerLayer = registerLayer;
19258
19280
  /**
@@ -19261,17 +19283,77 @@ exports.registerLayer = registerLayer;
19261
19283
  * @param layer Layer instance
19262
19284
  */
19263
19285
  function unregisterLayer(hostId, callback) {
19264
- if (_layersByHostId[hostId]) {
19265
- var idx = _layersByHostId[hostId].indexOf(callback);
19286
+ var layers = _layersByHostId[hostId];
19287
+ if (layers) {
19288
+ var idx = layers.indexOf(callback);
19266
19289
  if (idx >= 0) {
19267
- _layersByHostId[hostId].splice(idx, 1);
19268
- if (_layersByHostId[hostId].length === 0) {
19290
+ layers.splice(idx, 1);
19291
+ if (layers.length === 0) {
19269
19292
  delete _layersByHostId[hostId];
19270
19293
  }
19271
19294
  }
19272
19295
  }
19296
+ var layerHosts = _layerHostsById[hostId];
19297
+ if (layerHosts) {
19298
+ for (var _i = 0, layerHosts_2 = layerHosts; _i < layerHosts_2.length; _i++) {
19299
+ var layerHost = layerHosts_2[_i];
19300
+ layerHost.notifyLayersChanged();
19301
+ }
19302
+ }
19273
19303
  }
19274
19304
  exports.unregisterLayer = unregisterLayer;
19305
+ /**
19306
+ * Gets the number of layers currently registered with a host id.
19307
+ * @param hostId Id of the layer host.
19308
+ * @returns The number of layers currently registered with the host.
19309
+ */
19310
+ function getLayerCount(hostId) {
19311
+ var layers = _layerHostsById[hostId];
19312
+ return layers ? layers.length : 0;
19313
+ }
19314
+ exports.getLayerCount = getLayerCount;
19315
+ /**
19316
+ * Gets the Layer Host instance associated with a hostId, if applicable.
19317
+ * @param hostId
19318
+ * @returns A component ref for the associated layer host.
19319
+ */
19320
+ function getLayerHost(hostId) {
19321
+ var layerHosts = _layerHostsById[hostId];
19322
+ return (layerHosts && layerHosts[0]) || undefined;
19323
+ }
19324
+ exports.getLayerHost = getLayerHost;
19325
+ /**
19326
+ * Registers a Layer Host with an associated hostId.
19327
+ * @param hostId Id of the layer host
19328
+ * @param layerHost layer host instance
19329
+ */
19330
+ function registerLayerHost(hostId, layerHost) {
19331
+ var layerHosts = _layerHostsById[hostId] || (_layerHostsById[hostId] = []);
19332
+ // Insert this at the start of an array to avoid race conditions between mount and unmount.
19333
+ // If a LayerHost is re-mounted, and mount of the new instance may occur before the unmount of the old one.
19334
+ // Putting the new instance at the start of this array ensures that calls to `getLayerHost` will immediately
19335
+ // get the new one even if the old one is around briefly.
19336
+ layerHosts.unshift(layerHost);
19337
+ }
19338
+ exports.registerLayerHost = registerLayerHost;
19339
+ /**
19340
+ * Unregisters a Layer Host from the associated hostId.
19341
+ * @param hostId Id of the layer host
19342
+ * @param layerHost layer host instance
19343
+ */
19344
+ function unregisterLayerHost(hostId, layerHost) {
19345
+ var layerHosts = _layerHostsById[hostId];
19346
+ if (layerHosts) {
19347
+ var idx = layerHosts.indexOf(layerHost);
19348
+ if (idx >= 0) {
19349
+ layerHosts.splice(idx, 1);
19350
+ }
19351
+ if (layerHosts.length === 0) {
19352
+ delete _layerHostsById[hostId];
19353
+ }
19354
+ }
19355
+ }
19356
+ exports.unregisterLayerHost = unregisterLayerHost;
19275
19357
  /**
19276
19358
  * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
19277
19359
  * care about the specific host.
@@ -19348,8 +19430,26 @@ var Styling_1 = __webpack_require__(4);
19348
19430
  var ContextualMenu_classNames_1 = __webpack_require__(249);
19349
19431
  var getClassNames = Utilities_1.classNamesFunction();
19350
19432
  var getContextualMenuItemClassNames = Utilities_1.classNamesFunction();
19351
- function getSubmenuItems(item) {
19352
- return item.subMenuProps ? item.subMenuProps.items : item.items;
19433
+ function getSubmenuItems(item, options) {
19434
+ var _a;
19435
+ var target = (_a = options) === null || _a === void 0 ? void 0 : _a.target;
19436
+ // eslint-disable-next-line deprecation/deprecation
19437
+ var items = item.subMenuProps ? item.subMenuProps.items : item.items;
19438
+ if (items) {
19439
+ var overrideItems = [];
19440
+ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
19441
+ var subItem = items_1[_i];
19442
+ if (subItem.preferMenuTargetAsEventTarget) {
19443
+ // For sub-items which need an overridden target, intercept `onClick`
19444
+ var onClick = subItem.onClick, contextItem = tslib_1.__rest(subItem, ["onClick"]);
19445
+ overrideItems.push(tslib_1.__assign(tslib_1.__assign({}, contextItem), { onClick: getOnClickWithOverrideTarget(onClick, target) }));
19446
+ }
19447
+ else {
19448
+ overrideItems.push(subItem);
19449
+ }
19450
+ }
19451
+ return overrideItems;
19452
+ }
19353
19453
  }
19354
19454
  exports.getSubmenuItems = getSubmenuItems;
19355
19455
  /**
@@ -19652,7 +19752,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
19652
19752
  _this._onItemClickBase(item, ev, ev.currentTarget);
19653
19753
  };
19654
19754
  _this._onItemClickBase = function (item, ev, target) {
19655
- var items = getSubmenuItems(item);
19755
+ var menuTarget = _this.props.target;
19756
+ var items = getSubmenuItems(item, { target: menuTarget });
19656
19757
  // Cancel a async menu item hover timeout action from being taken and instead
19657
19758
  // just trigger the click event instead.
19658
19759
  _this._cancelSubMenuTimer();
@@ -19683,9 +19784,13 @@ var ContextualMenuBase = /** @class */ (function (_super) {
19683
19784
  ev.stopPropagation();
19684
19785
  };
19685
19786
  _this._executeItemClick = function (item, ev) {
19787
+ var menuTarget = _this.props.target;
19686
19788
  if (item.disabled || item.isDisabled) {
19687
19789
  return;
19688
19790
  }
19791
+ if (item.preferMenuTargetAsEventTarget) {
19792
+ overrideTarget(ev, menuTarget);
19793
+ }
19689
19794
  var dismiss = false;
19690
19795
  if (item.onClick) {
19691
19796
  dismiss = !!item.onClick(ev, item);
@@ -19882,8 +19987,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
19882
19987
  // The menu should only return if items were provided, if no items were provided then it should not appear.
19883
19988
  if (items && items.length > 0) {
19884
19989
  var totalItemCount = 0;
19885
- for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
19886
- var item = items_1[_i];
19990
+ for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
19991
+ var item = items_2[_i];
19887
19992
  if (item.itemType !== ContextualMenu_types_1.ContextualMenuItemType.Divider && item.itemType !== ContextualMenu_types_1.ContextualMenuItemType.Header) {
19888
19993
  var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;
19889
19994
  totalItemCount += itemCount;
@@ -20127,9 +20232,10 @@ var ContextualMenuBase = /** @class */ (function (_super) {
20127
20232
  var _a = this.state, submenuTarget = _a.submenuTarget, expandedMenuItemKey = _a.expandedMenuItemKey;
20128
20233
  var item = this._findItemByKey(expandedMenuItemKey);
20129
20234
  var submenuProps = null;
20235
+ var menuTarget = this.props.target;
20130
20236
  if (item) {
20131
20237
  submenuProps = {
20132
- items: getSubmenuItems(item),
20238
+ items: getSubmenuItems(item, { target: menuTarget }),
20133
20239
  target: submenuTarget,
20134
20240
  onDismiss: this._onSubMenuDismiss,
20135
20241
  isSubMenu: true,
@@ -20144,6 +20250,10 @@ var ContextualMenuBase = /** @class */ (function (_super) {
20144
20250
  if (item.subMenuProps) {
20145
20251
  Utilities_1.assign(submenuProps, item.subMenuProps);
20146
20252
  }
20253
+ if (item.preferMenuTargetAsEventTarget) {
20254
+ var onItemClick = item.onItemClick;
20255
+ submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);
20256
+ }
20147
20257
  }
20148
20258
  return submenuProps;
20149
20259
  };
@@ -20157,8 +20267,8 @@ var ContextualMenuBase = /** @class */ (function (_super) {
20157
20267
  * @param items - The items to look for the key
20158
20268
  */
20159
20269
  ContextualMenuBase.prototype._findItemByKeyFromItems = function (key, items) {
20160
- for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
20161
- var item = items_2[_i];
20270
+ for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
20271
+ var item = items_3[_i];
20162
20272
  if (item.itemType === ContextualMenu_types_1.ContextualMenuItemType.Section && item.sectionProps) {
20163
20273
  var match = this._findItemByKeyFromItems(key, item.sectionProps.items);
20164
20274
  if (match) {
@@ -20219,6 +20329,25 @@ var ContextualMenuBase = /** @class */ (function (_super) {
20219
20329
  return ContextualMenuBase;
20220
20330
  }(React.Component));
20221
20331
  exports.ContextualMenuBase = ContextualMenuBase;
20332
+ function getOnClickWithOverrideTarget(onClick, target) {
20333
+ return onClick
20334
+ ? function (ev, item) {
20335
+ overrideTarget(ev, target);
20336
+ return onClick(ev, item);
20337
+ }
20338
+ : onClick;
20339
+ }
20340
+ function overrideTarget(ev, target) {
20341
+ if (ev && target) {
20342
+ ev.persist();
20343
+ if (target instanceof Event) {
20344
+ ev.target = target.target;
20345
+ }
20346
+ else if (target instanceof Element) {
20347
+ ev.target = target;
20348
+ }
20349
+ }
20350
+ }
20222
20351
 
20223
20352
 
20224
20353
  /***/ }),
@@ -22076,7 +22205,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
22076
22205
  var theme_1 = __webpack_require__(80);
22077
22206
  var AzureColors_1 = __webpack_require__(86);
22078
22207
  var AzureType_1 = __webpack_require__(115);
22079
- var StyleConstants = __webpack_require__(31);
22208
+ var StyleConstants = __webpack_require__(30);
22080
22209
  var AzureStyleSettings_1 = __webpack_require__(193);
22081
22210
  var darkExtendedSemanticColors = {
22082
22211
  bodyBackground: AzureColors_1.DarkSemanticColors.background,
@@ -22923,7 +23052,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
22923
23052
  var theme_1 = __webpack_require__(80);
22924
23053
  var AzureColors_1 = __webpack_require__(86);
22925
23054
  var AzureType_1 = __webpack_require__(115);
22926
- var StyleConstants = __webpack_require__(31);
23055
+ var StyleConstants = __webpack_require__(30);
22927
23056
  var AzureStyleSettings_1 = __webpack_require__(193);
22928
23057
  var lightExtendedSemanticColors = {
22929
23058
  bodyBackground: AzureColors_1.LightSemanticColors.background,
@@ -23105,7 +23234,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
23105
23234
  var theme_1 = __webpack_require__(80);
23106
23235
  var AzureColors_1 = __webpack_require__(86);
23107
23236
  var AzureType_1 = __webpack_require__(115);
23108
- var StyleConstants = __webpack_require__(31);
23237
+ var StyleConstants = __webpack_require__(30);
23109
23238
  var AzureStyleSettings_1 = __webpack_require__(193);
23110
23239
  var highContrastLightExtendedSemanticColors = {
23111
23240
  bodyBackground: AzureColors_1.HighContrastLightSemanticColors.background,
@@ -23288,7 +23417,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
23288
23417
  var theme_1 = __webpack_require__(80);
23289
23418
  var AzureColors_1 = __webpack_require__(86);
23290
23419
  var AzureType_1 = __webpack_require__(115);
23291
- var StyleConstants = __webpack_require__(31);
23420
+ var StyleConstants = __webpack_require__(30);
23292
23421
  var AzureStyleSettings_1 = __webpack_require__(193);
23293
23422
  var highContrastDarkExtendedSemanticColors = {
23294
23423
  bodyBackground: AzureColors_1.HighContrastDarkSemanticColors.background,
@@ -24677,6 +24806,7 @@ var Button_1 = __webpack_require__(44);
24677
24806
  var DirectionalHint_1 = __webpack_require__(53);
24678
24807
  var ResizeGroup_1 = __webpack_require__(379);
24679
24808
  var Tooltip_1 = __webpack_require__(256);
24809
+ var Utilities_2 = __webpack_require__(3);
24680
24810
  var getClassNames = Utilities_1.classNamesFunction();
24681
24811
  var OVERFLOW_KEY = 'overflow';
24682
24812
  var nullFunction = function () { return null; };
@@ -24734,7 +24864,7 @@ var BreadcrumbBase = /** @class */ (function (_super) {
24734
24864
  return tslib_1.__assign(tslib_1.__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });
24735
24865
  };
24736
24866
  _this._onRenderBreadcrumb = function (data) {
24737
- 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;
24867
+ 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;
24738
24868
  var renderedOverflowItems = data.renderedOverflowItems, renderedItems = data.renderedItems;
24739
24869
  var contextualItems = renderedOverflowItems.map(function (item) {
24740
24870
  var isActionable = !!(item.onClick || item.href);
@@ -24752,9 +24882,18 @@ var BreadcrumbBase = /** @class */ (function (_super) {
24752
24882
  // knows not to render on that item
24753
24883
  var lastItemIndex = renderedItems.length - 1;
24754
24884
  var hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;
24755
- var itemElements = renderedItems.map(function (item, index) { return (React.createElement("li", { className: _this._classNames.listItem, key: item.key || String(index) },
24756
- onRenderItem(item, _this._onRenderItem),
24757
- (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: Utilities_1.getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item })))); });
24885
+ var itemElements = renderedItems.map(function (item, index) {
24886
+ var finalOnRenderItem = _this._onRenderItem;
24887
+ if (item.onRender) {
24888
+ finalOnRenderItem = Utilities_2.composeRenderFunction(item.onRender, finalOnRenderItem);
24889
+ }
24890
+ if (onRenderItem) {
24891
+ finalOnRenderItem = Utilities_2.composeRenderFunction(onRenderItem, finalOnRenderItem);
24892
+ }
24893
+ return (React.createElement("li", { className: _this._classNames.listItem, key: item.key || String(index) },
24894
+ finalOnRenderItem(item),
24895
+ (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: Utilities_1.getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item }))));
24896
+ });
24758
24897
  if (hasOverflowItems) {
24759
24898
  var iconProps = !onRenderOverflowIcon ? { iconName: 'More' } : {};
24760
24899
  var onRenderMenuIcon = onRenderOverflowIcon ? onRenderOverflowIcon : nullFunction;
@@ -24774,17 +24913,27 @@ var BreadcrumbBase = /** @class */ (function (_super) {
24774
24913
  React.createElement("ol", { className: _this._classNames.list }, itemElements))));
24775
24914
  };
24776
24915
  _this._onRenderItem = function (item) {
24777
- 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"]);
24916
+ if (!item) {
24917
+ return null;
24918
+ }
24919
+ 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"]);
24920
+ var finalOnRenderContent = defaultOnRenderCrumbContent;
24921
+ if (onRenderContent) {
24922
+ finalOnRenderContent = Utilities_2.composeRenderFunction(onRenderContent, finalOnRenderContent);
24923
+ }
24924
+ if (_this.props.onRenderItemContent) {
24925
+ finalOnRenderContent = Utilities_2.composeRenderFunction(_this.props.onRenderItemContent, finalOnRenderContent);
24926
+ }
24778
24927
  if (onClick || href) {
24779
24928
  return (React.createElement(Link_1.Link, tslib_1.__assign({}, additionalProps, { as: as, className: _this._classNames.itemLink, href: href, "aria-current": isCurrentItem ? 'page' : undefined,
24780
24929
  // eslint-disable-next-line react/jsx-no-bind
24781
24930
  onClick: _this._onBreadcrumbClicked.bind(_this, item) }),
24782
- React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));
24931
+ React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));
24783
24932
  }
24784
24933
  else {
24785
24934
  var Tag = as || 'span';
24786
24935
  return (React.createElement(Tag, tslib_1.__assign({}, additionalProps, { className: _this._classNames.item }),
24787
- React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));
24936
+ React.createElement(Tooltip_1.TooltipHost, tslib_1.__assign({ content: text, overflowMode: Tooltip_1.TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), finalOnRenderContent(item))));
24788
24937
  }
24789
24938
  };
24790
24939
  _this._onBreadcrumbClicked = function (item, ev) {
@@ -24840,6 +24989,9 @@ var BreadcrumbBase = /** @class */ (function (_super) {
24840
24989
  return BreadcrumbBase;
24841
24990
  }(React.Component));
24842
24991
  exports.BreadcrumbBase = BreadcrumbBase;
24992
+ function defaultOnRenderCrumbContent(item) {
24993
+ return item ? React.createElement(React.Fragment, null, item.text) : null;
24994
+ }
24843
24995
 
24844
24996
 
24845
24997
  /***/ }),
@@ -28218,6 +28370,9 @@ var ComboBox = /** @class */ (function (_super) {
28218
28370
  * {@inheritdoc}
28219
28371
  */
28220
28372
  _this.focus = function (shouldOpenOnFocus, useFocusAsync) {
28373
+ if (_this.props.disabled === true) {
28374
+ return;
28375
+ }
28221
28376
  if (_this._autofill.current) {
28222
28377
  if (useFocusAsync) {
28223
28378
  Utilities_1.focusAsync(_this._autofill.current);
@@ -28487,9 +28642,54 @@ var ComboBox = /** @class */ (function (_super) {
28487
28642
  };
28488
28643
  // Render List of items
28489
28644
  _this._onRenderList = function (props) {
28490
- var onRenderItem = props.onRenderItem, options = props.options, label = props.label, ariaLabel = props.ariaLabel;
28645
+ var _a = props.onRenderItem, onRenderItem = _a === void 0 ? _this._onRenderItem : _a, label = props.label, ariaLabel = props.ariaLabel;
28646
+ var queue = { items: [] };
28647
+ var renderedList = [];
28491
28648
  var id = _this._id;
28492
- 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); })));
28649
+ var emptyQueue = function () {
28650
+ var newGroup = queue.id
28651
+ ? [
28652
+ React.createElement("div", { role: "group", key: queue.id, "aria-labelledby": queue.id }, queue.items),
28653
+ ]
28654
+ : queue.items;
28655
+ renderedList = tslib_1.__spreadArrays(renderedList, newGroup);
28656
+ // Flush items and id
28657
+ queue = { items: [] };
28658
+ };
28659
+ var placeRenderedOptionIntoQueue = function (item, index) {
28660
+ /*
28661
+ Case Header
28662
+ empty queue if it's not already empty
28663
+ ensure unique ID for header and set queue ID
28664
+ push header into queue
28665
+ Case Divider
28666
+ push divider into queue if not first item
28667
+ empty queue if not already empty
28668
+ Default
28669
+ push item into queue
28670
+ */
28671
+ switch (item.itemType) {
28672
+ case index_2.SelectableOptionMenuItemType.Header:
28673
+ queue.items.length > 0 && emptyQueue();
28674
+ id = id + item.key;
28675
+ queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({ id: id }, item), { index: index }), _this._onRenderItem));
28676
+ queue.id = id;
28677
+ break;
28678
+ case index_2.SelectableOptionMenuItemType.Divider:
28679
+ index > 0 && queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({}, item), { index: index }), _this._onRenderItem));
28680
+ queue.items.length > 0 && emptyQueue();
28681
+ break;
28682
+ default:
28683
+ queue.items.push(onRenderItem(tslib_1.__assign(tslib_1.__assign({}, item), { index: index }), _this._onRenderItem));
28684
+ }
28685
+ };
28686
+ // Place options into the queue. Queue will be emptied anytime a Header or Divider is encountered
28687
+ props.options.forEach(function (item, index) {
28688
+ placeRenderedOptionIntoQueue(item, index);
28689
+ });
28690
+ // Push remaining items into all renderedList
28691
+ queue.items.length > 0 && emptyQueue();
28692
+ 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));
28493
28693
  };
28494
28694
  // Render items
28495
28695
  _this._onRenderItem = function (item) {
@@ -28524,11 +28724,14 @@ var ComboBox = /** @class */ (function (_super) {
28524
28724
  // eslint-disable-next-line react/jsx-no-bind
28525
28725
  onMouseEnter: _this._onOptionMouseEnter.bind(_this, item.index),
28526
28726
  // eslint-disable-next-line react/jsx-no-bind
28527
- 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,
28727
+ 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,
28528
28728
  // eslint-disable-next-line react/jsx-no-bind
28529
- onRenderLabel: onRenderCheckboxLabel, inputProps: {
28530
- 'aria-selected': isSelected ? 'true' : 'false',
28531
- } }));
28729
+ onRenderLabel: onRenderCheckboxLabel, inputProps: tslib_1.__assign({
28730
+ // aria-selected should only be applied to checked items, not hovered items
28731
+ 'aria-selected': isChecked ? 'true' : 'false', role: 'option' }, {
28732
+ 'data-index': item.index,
28733
+ 'data-is-focusable': true,
28734
+ }) }));
28532
28735
  };
28533
28736
  return (React.createElement(ComboBoxOptionWrapper, { key: item.key, index: item.index, disabled: item.disabled, isSelected: isSelected, isChecked: isChecked, text: item.text,
28534
28737
  // eslint-disable-next-line react/jsx-no-bind
@@ -29383,7 +29586,7 @@ var ComboBox = /** @class */ (function (_super) {
29383
29586
  };
29384
29587
  ComboBox.prototype._renderHeader = function (item) {
29385
29588
  var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOptionContent : _a;
29386
- return (React.createElement("div", { key: item.key, className: this._classNames.header }, onRenderOption(item, this._onRenderOptionContent)));
29589
+ return (React.createElement("div", { id: item.id, key: item.key, className: this._classNames.header }, onRenderOption(item, this._onRenderOptionContent)));
29387
29590
  };
29388
29591
  /**
29389
29592
  * If we are coming from a mouseOut:
@@ -31785,18 +31988,19 @@ var DetailsRowBase = /** @class */ (function (_super) {
31785
31988
  }
31786
31989
  };
31787
31990
  DetailsRowBase.prototype.render = function () {
31788
- 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,
31991
+ 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,
31789
31992
  /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
31790
- _e = _a.rowFieldsAs,
31993
+ _f = _a.rowFieldsAs,
31791
31994
  /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
31792
- 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;
31793
- var _g = this.state, columnMeasureInfo = _g.columnMeasureInfo, isDropping = _g.isDropping;
31794
- var _h = this.state.selectionState, _j = _h.isSelected, isSelected = _j === void 0 ? false : _j, _k = _h.isSelectionModal, isSelectionModal = _k === void 0 ? false : _k;
31995
+ 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;
31996
+ var _j = this.state, columnMeasureInfo = _j.columnMeasureInfo, isDropping = _j.isDropping;
31997
+ var _k = this.state.selectionState, _l = _k.isSelected, isSelected = _l === void 0 ? false : _l, _m = _k.isSelectionModal, isSelectionModal = _m === void 0 ? false : _m;
31795
31998
  var isDraggable = dragDropEvents ? !!(dragDropEvents.canDrag && dragDropEvents.canDrag(item)) : undefined;
31796
31999
  var droppingClassName = isDropping ? this._droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : '';
31797
32000
  var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;
32001
+ var ariaRowDescription = getRowAriaDescription ? getRowAriaDescription(item) : undefined;
31798
32002
  var ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;
31799
- var canSelect = !!selection && selection.canSelectItem(item, itemIndex);
32003
+ var canSelect = !!selection && selection.canSelectItem(item, itemIndex) && !disabled;
31800
32004
  var isContentUnselectable = selectionMode === interfaces_1.SelectionMode.multiple;
31801
32005
  var showCheckbox = selectionMode !== interfaces_1.SelectionMode.none && checkboxVisibility !== DetailsList_types_1.CheckboxVisibility.hidden;
31802
32006
  var ariaSelected = selectionMode === interfaces_1.SelectionMode.none ? undefined : isSelected;
@@ -31811,6 +32015,7 @@ var DetailsRowBase = /** @class */ (function (_super) {
31811
32015
  compact: compact,
31812
32016
  enableUpdateAnimations: enableUpdateAnimations,
31813
32017
  cellStyleProps: cellStyleProps,
32018
+ disabled: disabled,
31814
32019
  }));
31815
32020
  var rowClassNames = {
31816
32021
  isMultiline: this._classNames.isMultiline,
@@ -31831,12 +32036,14 @@ var DetailsRowBase = /** @class */ (function (_super) {
31831
32036
  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 }));
31832
32037
  var defaultRole = 'row';
31833
32038
  var role = this.props.role ? this.props.role : defaultRole;
32039
+ this._ariaRowDescriptionId = Utilities_2.getId('DetailsRow-description');
31834
32040
  return (React.createElement(FocusZone_1.FocusZone, tslib_1.__assign({ "data-is-focusable": true }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), (typeof isDraggable === 'boolean'
31835
32041
  ? {
31836
32042
  'data-is-draggable': isDraggable,
31837
32043
  draggable: isDraggable,
31838
32044
  }
31839
- : {}), { 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 }),
32045
+ : {}), { 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 }),
32046
+ ariaRowDescription ? (React.createElement("span", { key: "description", role: "presentation", hidden: true, id: this._ariaRowDescriptionId }, ariaRowDescription)) : null,
31840
32047
  showCheckbox && (React.createElement("div", { role: "gridcell", "aria-colindex": 1, "data-selection-toggle": true, className: this._classNames.checkCell }, onRenderCheck({
31841
32048
  id: id ? id + "-checkbox" : undefined,
31842
32049
  selected: isSelected,
@@ -33034,7 +33241,7 @@ var DEFAULT_RENDERED_WINDOWS_BEHIND = 2;
33034
33241
  */
33035
33242
  var DetailsListInner = function (props) {
33036
33243
  var selection = props.selection;
33037
- 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;
33244
+ 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;
33038
33245
  var defaultRole = 'grid';
33039
33246
  var role = props.role ? props.role : defaultRole;
33040
33247
  var rowId = utilities_1.getId('row');
@@ -33167,9 +33374,7 @@ var DetailsListInner = function (props) {
33167
33374
  var ariaPosInSet = groupHeaderProps.ariaPosInSet, ariaSetSize = groupHeaderProps.ariaSetSize;
33168
33375
  return onRenderDetailsGroupHeader(tslib_1.__assign(tslib_1.__assign({}, groupHeaderProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth,
33169
33376
  indentWidth: indentWidth,
33170
- selection: selection,
33171
- selectionMode: selectionMode,
33172
- viewport: viewport,
33377
+ selection: selection, selectionMode: checkboxVisibility !== DetailsList_types_1.CheckboxVisibility.hidden ? selectionMode : index_1.SelectionMode.none, viewport: viewport,
33173
33378
  checkboxVisibility: checkboxVisibility,
33174
33379
  cellStyleProps: cellStyleProps, ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: ariaSetSize ? ariaSetSize + (isHeaderVisible ? 1 : 0) : undefined, ariaRowIndex: ariaPosInSet ? ariaPosInSet + (isHeaderVisible ? 1 : 0) : undefined }), defaultRender);
33175
33380
  }
@@ -33190,8 +33395,11 @@ var DetailsListInner = function (props) {
33190
33395
  cellStyleProps,
33191
33396
  ]);
33192
33397
  var finalGroupProps = React.useMemo(function () {
33193
- return tslib_1.__assign(tslib_1.__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader });
33194
- }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, role]);
33398
+ var _a, _b, _c;
33399
+ return tslib_1.__assign(tslib_1.__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader,
33400
+ // pass through custom group header checkbox label
33401
+ 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) }) });
33402
+ }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, checkButtonGroupAriaLabel, role]);
33195
33403
  var sumColumnWidths = react_hooks_1.useConst(function () {
33196
33404
  return Utilities_1.memoizeFunction(function (columns) {
33197
33405
  var totalWidth = 0;
@@ -33211,6 +33419,7 @@ var DetailsListInner = function (props) {
33211
33419
  var rowProps = {
33212
33420
  item: item,
33213
33421
  itemIndex: index,
33422
+ flatIndexOffset: isHeaderVisible ? 2 : 1,
33214
33423
  compact: compact,
33215
33424
  columns: adjustedColumns,
33216
33425
  groupNestingDepth: nestingDepth,
@@ -33265,6 +33474,7 @@ var DetailsListInner = function (props) {
33265
33474
  collapseAllVisibility,
33266
33475
  getRowAriaLabel,
33267
33476
  getRowAriaDescribedBy,
33477
+ isHeaderVisible,
33268
33478
  checkButtonAriaLabel,
33269
33479
  checkboxCellClassName,
33270
33480
  useReducedRowRenderer,
@@ -34040,8 +34250,8 @@ var DialogBase = /** @class */ (function (_super) {
34040
34250
  dialogDefaultMinWidth: minWidth,
34041
34251
  dialogDefaultMaxWidth: maxWidth,
34042
34252
  });
34043
- 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() }),
34044
- 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)));
34253
+ 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() }),
34254
+ React.createElement(DialogContent_1.DialogContent, tslib_1.__assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), this.props.children)));
34045
34255
  };
34046
34256
  DialogBase.defaultProps = {
34047
34257
  hidden: true,
@@ -34350,12 +34560,13 @@ var ModalBase = /** @class */ (function (_super) {
34350
34560
  ModalBase.prototype.render = function () {
34351
34561
  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,
34352
34562
  // eslint-disable-next-line deprecation/deprecation
34353
- onLayerDidMount = _a.onLayerDidMount, isModeless = _a.isModeless, dragOptions = _a.dragOptions, enableAriaHiddenSiblings = _a.enableAriaHiddenSiblings;
34563
+ onLayerDidMount = _a.onLayerDidMount, isModeless = _a.isModeless, isAlert = _a.isAlert, dragOptions = _a.dragOptions, enableAriaHiddenSiblings = _a.enableAriaHiddenSiblings;
34354
34564
  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;
34355
34565
  if (!isOpen) {
34356
34566
  return null;
34357
34567
  }
34358
34568
  var layerClassName = layerProps === undefined ? '' : layerProps.className;
34569
+ var isAlertRole = (isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless));
34359
34570
  var classNames = getClassNames(styles, {
34360
34571
  theme: theme,
34361
34572
  className: className,
@@ -34382,7 +34593,7 @@ var ModalBase = /** @class */ (function (_super) {
34382
34593
  // @temp tuatology - Will adjust this to be a panel at certain breakpoints
34383
34594
  if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
34384
34595
  return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, mergedLayerProps),
34385
- React.createElement(index_2.Popup, { role: isModeless || !isBlocking ? 'dialog' : 'alertdialog', "aria-modal": !isModeless, ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !ignoreExternalFocusing },
34596
+ React.createElement(index_2.Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', "aria-modal": !isModeless, ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !ignoreExternalFocusing },
34386
34597
  React.createElement("div", { className: classNames.root, role: !isModeless ? 'document' : undefined },
34387
34598
  !isModeless && (React.createElement(Overlay_1.Overlay, tslib_1.__assign({ isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: this._allowTouchBodyScroll }, overlay))),
34388
34599
  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) {
34692
34903
  React.createElement("div", tslib_1.__assign({ id: titleId, role: "heading", "aria-level": 1 }, titleProps, { className: Utilities_1.css(classNames.title, titleProps.className) }), title),
34693
34904
  React.createElement("div", { className: classNames.topButton },
34694
34905
  this.props.topButtonsProps.map(function (props, index) { return (React.createElement(Button_1.IconButton, tslib_1.__assign({ key: props.uniqueId || index }, props))); }),
34695
- (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 })))),
34906
+ (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 })))),
34696
34907
  React.createElement("div", { className: classNames.inner },
34697
34908
  React.createElement("div", { className: classNames.innerContent },
34698
34909
  subTextContent,
@@ -35269,13 +35480,10 @@ var DropdownBase = /** @class */ (function (_super) {
35269
35480
  // eslint-disable-next-line react/jsx-no-bind
35270
35481
  onMouseLeave: _this._onMouseItemLeave.bind(_this, item),
35271
35482
  // eslint-disable-next-line react/jsx-no-bind
35272
- 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: {
35273
- 'aria-selected': isItemSelected,
35274
- onMouseEnter: _this._onItemMouseEnter.bind(_this, item),
35275
- onMouseLeave: _this._onMouseItemLeave.bind(_this, item),
35276
- onMouseMove: _this._onItemMouseMove.bind(_this, item),
35277
- role: 'option',
35278
- }, label: item.text, title: title,
35483
+ 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' }, {
35484
+ 'data-index': item.index,
35485
+ 'data-is-focusable': !item.disabled,
35486
+ }), label: item.text, title: title,
35279
35487
  // eslint-disable-next-line react/jsx-no-bind
35280
35488
  onRenderLabel: _this._onRenderItemLabel.bind(_this, item), className: itemClassName, checked: isItemSelected, styles: multiSelectItemStyles, ariaPositionInSet: _this._sizePosCache.positionInSet(item.index), ariaSetSize: _this._sizePosCache.optionSetSize }));
35281
35489
  };
@@ -41608,9 +41816,13 @@ var SliderBase = /** @class */ (function (_super) {
41608
41816
  break;
41609
41817
  case Utilities_1.KeyCodes.home:
41610
41818
  value = min;
41819
+ _this._clearOnKeyDownTimer();
41820
+ _this._setOnKeyDownTimer(event);
41611
41821
  break;
41612
41822
  case Utilities_1.KeyCodes.end:
41613
41823
  value = max;
41824
+ _this._clearOnKeyDownTimer();
41825
+ _this._setOnKeyDownTimer(event);
41614
41826
  break;
41615
41827
  default:
41616
41828
  return;
@@ -42697,7 +42909,7 @@ var TeachingBubbleContentBase = /** @class */ (function (_super) {
42697
42909
  if (headline) {
42698
42910
  var HeaderWrapperAs = typeof headline === 'string' ? 'p' : 'div';
42699
42911
  headerContent = (React.createElement("div", { className: classNames.header },
42700
- React.createElement(HeaderWrapperAs, { role: "heading", className: classNames.headline, id: ariaLabelledBy }, headline)));
42912
+ React.createElement(HeaderWrapperAs, { role: "heading", "aria-level": 3, className: classNames.headline, id: ariaLabelledBy }, headline)));
42701
42913
  }
42702
42914
  if (children) {
42703
42915
  var BodyContentWrapperAs = typeof children === 'string' ? 'p' : 'div';
@@ -49122,7 +49334,7 @@ var Selection = /** @class */ (function () {
49122
49334
  ) {
49123
49335
  options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.
49124
49336
  }
49125
- 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;
49337
+ 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;
49126
49338
  this.mode = selectionMode;
49127
49339
  this._getKey = getKey || defaultGetKey;
49128
49340
  this._changeEventSuppressionCount = 0;
@@ -49130,7 +49342,9 @@ var Selection = /** @class */ (function () {
49130
49342
  this._anchoredIndex = 0;
49131
49343
  this._unselectableCount = 0;
49132
49344
  this._onSelectionChanged = onSelectionChanged;
49345
+ this._onItemsChanged = onItemsChanged;
49133
49346
  this._canSelectItem = canSelectItem;
49347
+ this._keyToIndexMap = {};
49134
49348
  this._isModal = false;
49135
49349
  this.setItems(items || [], true);
49136
49350
  this.count = this.getSelectedCount();
@@ -49182,12 +49396,16 @@ var Selection = /** @class */ (function () {
49182
49396
  this.setChangeEvents(false);
49183
49397
  // Reset the unselectable count.
49184
49398
  this._unselectableCount = 0;
49399
+ var haveItemsChanged = false;
49185
49400
  // Build lookup table for quick selection evaluation.
49186
49401
  for (var i = 0; i < items.length; i++) {
49187
49402
  var item = items[i];
49188
49403
  if (item) {
49189
49404
  var key = this.getKey(item, i);
49190
49405
  if (key) {
49406
+ if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {
49407
+ haveItemsChanged = true;
49408
+ }
49191
49409
  newKeyToIndexMap[key] = i;
49192
49410
  }
49193
49411
  }
@@ -49224,6 +49442,15 @@ var Selection = /** @class */ (function () {
49224
49442
  // If everything was selected but the number of items has changed, selection has changed.
49225
49443
  hasSelectionChanged = true;
49226
49444
  }
49445
+ if (!haveItemsChanged) {
49446
+ for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {
49447
+ var key = _a[_i];
49448
+ if (!(key in newKeyToIndexMap)) {
49449
+ haveItemsChanged = true;
49450
+ break;
49451
+ }
49452
+ }
49453
+ }
49227
49454
  this._exemptedIndices = newExemptedIndicies;
49228
49455
  this._exemptedCount = newExemptedCount;
49229
49456
  this._keyToIndexMap = newKeyToIndexMap;
@@ -49232,6 +49459,14 @@ var Selection = /** @class */ (function () {
49232
49459
  this._selectedItems = null;
49233
49460
  if (hasSelectionChanged) {
49234
49461
  this._updateCount();
49462
+ }
49463
+ if (haveItemsChanged) {
49464
+ EventGroup_1.EventGroup.raise(this, Selection_types_1.SELECTION_ITEMS_CHANGE);
49465
+ if (this._onItemsChanged) {
49466
+ this._onItemsChanged();
49467
+ }
49468
+ }
49469
+ if (hasSelectionChanged) {
49235
49470
  this._change();
49236
49471
  }
49237
49472
  this.setChangeEvents(true);
@@ -49272,6 +49507,10 @@ var Selection = /** @class */ (function () {
49272
49507
  }
49273
49508
  return this._selectedIndices;
49274
49509
  };
49510
+ Selection.prototype.getItemIndex = function (key) {
49511
+ var index = this._keyToIndexMap[key];
49512
+ return (index !== null && index !== void 0 ? index : -1);
49513
+ };
49275
49514
  Selection.prototype.isRangeSelected = function (fromIndex, count) {
49276
49515
  if (count === 0) {
49277
49516
  return false;
@@ -51421,7 +51660,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
51421
51660
  // Do not modify this file; it is generated as part of publish.
51422
51661
  // The checked in version is a placeholder only and will not be updated.
51423
51662
  var set_version_1 = __webpack_require__(57);
51424
- set_version_1.setVersion('@uifabric/styling', '7.19.1');
51663
+ set_version_1.setVersion('@uifabric/styling', '7.20.0');
51425
51664
 
51426
51665
 
51427
51666
  /***/ }),
@@ -51703,20 +51942,31 @@ var Utilities_1 = __webpack_require__(3);
51703
51942
  var Layer_notification_1 = __webpack_require__(685);
51704
51943
  var LayerHost = /** @class */ (function (_super) {
51705
51944
  tslib_1.__extends(LayerHost, _super);
51706
- function LayerHost() {
51707
- return _super !== null && _super.apply(this, arguments) || this;
51945
+ function LayerHost(props) {
51946
+ var _this = _super.call(this, props) || this;
51947
+ var layerHostId = Utilities_1.getId();
51948
+ var _a = _this.props.id, hostId = _a === void 0 ? layerHostId : _a;
51949
+ _this.hostId = hostId;
51950
+ _this.rootRef = React.createRef();
51951
+ Utilities_1.initializeComponentRef(_this);
51952
+ return _this;
51708
51953
  }
51954
+ LayerHost.prototype.notifyLayersChanged = function () {
51955
+ // Nothing, since the default implementation of Layer Host does not need to react to layer changes.
51956
+ };
51709
51957
  LayerHost.prototype.shouldComponentUpdate = function () {
51710
51958
  return false;
51711
51959
  };
51712
51960
  LayerHost.prototype.componentDidMount = function () {
51961
+ Layer_notification_1.registerLayerHost(this.hostId, this);
51713
51962
  Layer_notification_1.notifyHostChanged(this.props.id);
51714
51963
  };
51715
51964
  LayerHost.prototype.componentWillUnmount = function () {
51965
+ Layer_notification_1.unregisterLayerHost(this.hostId, this);
51716
51966
  Layer_notification_1.notifyHostChanged(this.props.id);
51717
51967
  };
51718
51968
  LayerHost.prototype.render = function () {
51719
- return React.createElement("div", tslib_1.__assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className) }));
51969
+ return React.createElement("div", tslib_1.__assign({}, this.props, { className: Utilities_1.css('ms-LayerHost', this.props.className), ref: this.rootRef }));
51720
51970
  };
51721
51971
  return LayerHost;
51722
51972
  }(React.Component));
@@ -52619,7 +52869,11 @@ function onRenderSubMenu(subMenuProps) {
52619
52869
  return React.createElement(LocalContextualMenu, tslib_1.__assign({}, subMenuProps));
52620
52870
  }
52621
52871
  // This is to prevent cyclic import with ContextualMenu.base.tsx.
52622
- var LocalContextualMenu = Utilities_1.styled(ContextualMenu_base_1.ContextualMenuBase, ContextualMenu_styles_1.getStyles, function () { return ({ onRenderSubMenu: onRenderSubMenu }); }, { scope: 'ContextualMenu' });
52872
+ var LocalContextualMenu = Utilities_1.styled(ContextualMenu_base_1.ContextualMenuBase, ContextualMenu_styles_1.getStyles, function (props) { return ({
52873
+ onRenderSubMenu: props.onRenderSubMenu
52874
+ ? Utilities_1.composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)
52875
+ : onRenderSubMenu,
52876
+ }); }, { scope: 'ContextualMenu' });
52623
52877
  /**
52624
52878
  * ContextualMenu description
52625
52879
  */
@@ -52647,7 +52901,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
52647
52901
  // Do not modify this file; it is generated as part of publish.
52648
52902
  // The checked in version is a placeholder only and will not be updated.
52649
52903
  var set_version_1 = __webpack_require__(57);
52650
- set_version_1.setVersion('@fluentui/react-focus', '7.18.0');
52904
+ set_version_1.setVersion('@fluentui/react-focus', '7.18.2');
52651
52905
 
52652
52906
 
52653
52907
  /***/ }),
@@ -52685,6 +52939,35 @@ var LARGE_DISTANCE_FROM_CENTER = 999999999;
52685
52939
  var LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;
52686
52940
  var focusZoneStyles;
52687
52941
  var focusZoneClass = 'ms-FocusZone';
52942
+ /**
52943
+ * Raises a click on a target element based on a keyboard event.
52944
+ */
52945
+ function raiseClickFromKeyboardEvent(target, ev) {
52946
+ var _a, _b, _c, _d, _e, _f;
52947
+ var event;
52948
+ if (typeof MouseEvent === 'function') {
52949
+ event = new MouseEvent('click', {
52950
+ ctrlKey: (_a = ev) === null || _a === void 0 ? void 0 : _a.ctrlKey,
52951
+ metaKey: (_b = ev) === null || _b === void 0 ? void 0 : _b.metaKey,
52952
+ shiftKey: (_c = ev) === null || _c === void 0 ? void 0 : _c.shiftKey,
52953
+ altKey: (_d = ev) === null || _d === void 0 ? void 0 : _d.altKey,
52954
+ bubbles: (_e = ev) === null || _e === void 0 ? void 0 : _e.bubbles,
52955
+ cancelable: (_f = ev) === null || _f === void 0 ? void 0 : _f.cancelable,
52956
+ });
52957
+ }
52958
+ else {
52959
+ event = document.createEvent('MouseEvents');
52960
+ event.initMouseEvent('click', ev ? ev.bubbles : false, ev ? ev.cancelable : false, window, // not using getWindow() since this can only be run client side
52961
+ 0, // detail
52962
+ 0, // screen x
52963
+ 0, // screen y
52964
+ 0, // client x
52965
+ 0, // client y
52966
+ ev ? ev.ctrlKey : false, ev ? ev.altKey : false, ev ? ev.shiftKey : false, ev ? ev.metaKey : false, 0, // button
52967
+ null);
52968
+ }
52969
+ target.dispatchEvent(event);
52970
+ }
52688
52971
  // Helper function that will return a class for when the root is focused
52689
52972
  function getRootClass() {
52690
52973
  if (!focusZoneStyles) {
@@ -52856,7 +53139,7 @@ var FocusZone = /** @class */ (function (_super) {
52856
53139
  // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props
52857
53140
  switch (ev.which) {
52858
53141
  case utilities_1.KeyCodes.space:
52859
- if (_this._tryInvokeClickForFocusable(ev.target)) {
53142
+ if (_this._tryInvokeClickForFocusable(ev.target, ev)) {
52860
53143
  break;
52861
53144
  }
52862
53145
  return;
@@ -52954,7 +53237,7 @@ var FocusZone = /** @class */ (function (_super) {
52954
53237
  }
52955
53238
  return;
52956
53239
  case utilities_1.KeyCodes.enter:
52957
- if (_this._tryInvokeClickForFocusable(ev.target)) {
53240
+ if (_this._tryInvokeClickForFocusable(ev.target, ev)) {
52958
53241
  break;
52959
53242
  }
52960
53243
  return;
@@ -53257,7 +53540,8 @@ var FocusZone = /** @class */ (function (_super) {
53257
53540
  /**
53258
53541
  * Walk up the dom try to find a focusable element.
53259
53542
  */
53260
- FocusZone.prototype._tryInvokeClickForFocusable = function (target) {
53543
+ FocusZone.prototype._tryInvokeClickForFocusable = function (targetElement, ev) {
53544
+ var target = targetElement;
53261
53545
  if (target === this._root.current || !this.props.shouldRaiseClicks) {
53262
53546
  return false;
53263
53547
  }
@@ -53271,7 +53555,7 @@ var FocusZone = /** @class */ (function (_super) {
53271
53555
  if (this._isImmediateDescendantOfZone(target) &&
53272
53556
  target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&
53273
53557
  target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {
53274
- utilities_1.raiseClick(target);
53558
+ raiseClickFromKeyboardEvent(target, ev);
53275
53559
  return true;
53276
53560
  }
53277
53561
  target = utilities_1.getParent(target, ALLOW_VIRTUAL_ELEMENTS);
@@ -53746,6 +54030,7 @@ function getIsChecked(item) {
53746
54030
  }
53747
54031
  exports.getIsChecked = getIsChecked;
53748
54032
  function hasSubmenu(item) {
54033
+ // eslint-disable-next-line deprecation/deprecation
53749
54034
  return !!(item.subMenuProps || item.items);
53750
54035
  }
53751
54036
  exports.hasSubmenu = hasSubmenu;
@@ -55127,7 +55412,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
55127
55412
  // Do not modify this file; it is generated as part of publish.
55128
55413
  // The checked in version is a placeholder only and will not be updated.
55129
55414
  var set_version_1 = __webpack_require__(57);
55130
- set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.0');
55415
+ set_version_1.setVersion('@fluentui/react-theme-provider', '0.19.1');
55131
55416
 
55132
55417
 
55133
55418
  /***/ }),
@@ -56096,7 +56381,7 @@ exports.AzureCustomizationsHighContrastDark = {
56096
56381
 
56097
56382
  Object.defineProperty(exports, "__esModule", { value: true });
56098
56383
  var tslib_1 = __webpack_require__(2);
56099
- var StyleConstants = __webpack_require__(31);
56384
+ var StyleConstants = __webpack_require__(30);
56100
56385
  exports.ActionButtonStyles = function (theme) {
56101
56386
  var semanticColors = theme.semanticColors;
56102
56387
  var extendedSemanticColors = semanticColors;
@@ -56243,7 +56528,7 @@ exports.CalloutContentStyles = function (props) {
56243
56528
 
56244
56529
  Object.defineProperty(exports, "__esModule", { value: true });
56245
56530
  var AzureColors_1 = __webpack_require__(86);
56246
- var StyleConstants = __webpack_require__(31);
56531
+ var StyleConstants = __webpack_require__(30);
56247
56532
  exports.CheckboxStyles = function (props) {
56248
56533
  var _a;
56249
56534
  var disabled = props.disabled, checked = props.checked, theme = props.theme, indeterminate = props.indeterminate;
@@ -56363,7 +56648,7 @@ exports.CheckboxStyles = function (props) {
56363
56648
 
56364
56649
  Object.defineProperty(exports, "__esModule", { value: true });
56365
56650
  var AzureType_1 = __webpack_require__(115);
56366
- var StyleConstants = __webpack_require__(31);
56651
+ var StyleConstants = __webpack_require__(30);
56367
56652
  exports.CheckStyles = function (props) {
56368
56653
  var theme = props.theme, checked = props.checked;
56369
56654
  var semanticColors = theme.semanticColors;
@@ -56544,7 +56829,7 @@ exports.DetailsRowStyles = function (props) {
56544
56829
  "use strict";
56545
56830
 
56546
56831
  Object.defineProperty(exports, "__esModule", { value: true });
56547
- var StyleConstants = __webpack_require__(31);
56832
+ var StyleConstants = __webpack_require__(30);
56548
56833
  exports.ChoiceGroupOptionStyles = function (props) {
56549
56834
  var checked = props.checked, disabled = props.disabled, theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage;
56550
56835
  var semanticColors = theme.semanticColors;
@@ -56578,6 +56863,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
56578
56863
  // The circle
56579
56864
  ':before': [
56580
56865
  {
56866
+ width: StyleConstants.choiceGroupDimensions,
56867
+ height: StyleConstants.choiceGroupDimensions,
56581
56868
  borderColor: semanticColors.bodyText,
56582
56869
  },
56583
56870
  checked && {
@@ -56598,6 +56885,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
56598
56885
  ':after': [
56599
56886
  {
56600
56887
  borderColor: extendedSemanticColors.checkboxBorderChecked,
56888
+ top: 4,
56889
+ left: 4,
56601
56890
  },
56602
56891
  checked &&
56603
56892
  disabled && {
@@ -56619,6 +56908,8 @@ exports.ChoiceGroupOptionStyles = function (props) {
56619
56908
  ':after': {
56620
56909
  borderColor: extendedSemanticColors.checkboxBorderChecked,
56621
56910
  backgroundColor: extendedSemanticColors.choiceGroupUncheckedDotHover,
56911
+ top: 4,
56912
+ left: 4,
56622
56913
  },
56623
56914
  },
56624
56915
  },
@@ -56779,7 +57070,7 @@ exports.ColorSliderStyles = function (props) {
56779
57070
 
56780
57071
  Object.defineProperty(exports, "__esModule", { value: true });
56781
57072
  var AzureDepths_1 = __webpack_require__(116);
56782
- var StyleConstants = __webpack_require__(31);
57073
+ var StyleConstants = __webpack_require__(30);
56783
57074
  exports.ComboBoxStyles = function (theme) {
56784
57075
  var semanticColors = theme.semanticColors;
56785
57076
  var extendedSemanticColors = semanticColors;
@@ -57058,7 +57349,7 @@ exports.CommandBarButtonStyles = function (theme) {
57058
57349
 
57059
57350
  Object.defineProperty(exports, "__esModule", { value: true });
57060
57351
  var tslib_1 = __webpack_require__(2);
57061
- var StyleConstants = __webpack_require__(31);
57352
+ var StyleConstants = __webpack_require__(30);
57062
57353
  exports.CompoundButtonStyles = function (theme) {
57063
57354
  var semanticColors = theme.semanticColors;
57064
57355
  var extendedSemanticColors = semanticColors;
@@ -57178,7 +57469,7 @@ exports.CompoundButtonStyles = function (theme) {
57178
57469
 
57179
57470
  Object.defineProperty(exports, "__esModule", { value: true });
57180
57471
  var AzureDepths_1 = __webpack_require__(116);
57181
- var StyleConstants = __webpack_require__(31);
57472
+ var StyleConstants = __webpack_require__(30);
57182
57473
  exports.ContextualMenuStyles = function (props) {
57183
57474
  var theme = props.theme;
57184
57475
  var semanticColors = theme.semanticColors;
@@ -57252,7 +57543,7 @@ exports.ContextualMenuStyles = function (props) {
57252
57543
 
57253
57544
  Object.defineProperty(exports, "__esModule", { value: true });
57254
57545
  var tslib_1 = __webpack_require__(2);
57255
- var StyleConstants = __webpack_require__(31);
57546
+ var StyleConstants = __webpack_require__(30);
57256
57547
  var AzureColors_1 = __webpack_require__(86);
57257
57548
  exports.DatePickerStyles = function (props) {
57258
57549
  var disabled = props.disabled, theme = props.theme;
@@ -57393,7 +57684,7 @@ exports.DatePickerStyles = function (props) {
57393
57684
  "use strict";
57394
57685
 
57395
57686
  Object.defineProperty(exports, "__esModule", { value: true });
57396
- var StyleConstants = __webpack_require__(31);
57687
+ var StyleConstants = __webpack_require__(30);
57397
57688
  exports.DefaultButtonStyles = function (theme) {
57398
57689
  var semanticColors = theme.semanticColors;
57399
57690
  var extendedSemanticColors = semanticColors;
@@ -57832,7 +58123,7 @@ exports.DocumentCardStyles = function (props) {
57832
58123
 
57833
58124
  Object.defineProperty(exports, "__esModule", { value: true });
57834
58125
  var AzureDepths_1 = __webpack_require__(116);
57835
- var StyleConstants = __webpack_require__(31);
58126
+ var StyleConstants = __webpack_require__(30);
57836
58127
  exports.DropdownStyles = function (props) {
57837
58128
  var _a, _b, _c, _d;
57838
58129
  var disabled = props.disabled, theme = props.theme, hasError = props.hasError, isOpen = props.isOpen;
@@ -58031,7 +58322,7 @@ exports.DropdownStyles = function (props) {
58031
58322
  "use strict";
58032
58323
 
58033
58324
  Object.defineProperty(exports, "__esModule", { value: true });
58034
- var StyleConstants = __webpack_require__(31);
58325
+ var StyleConstants = __webpack_require__(30);
58035
58326
  exports.IconButtonStyles = function (theme) {
58036
58327
  var semanticColors = theme.semanticColors;
58037
58328
  var extendedSemanticColors = semanticColors;
@@ -59147,7 +59438,7 @@ exports.getStyles = function (props) {
59147
59438
 
59148
59439
  Object.defineProperty(exports, "__esModule", { value: true });
59149
59440
  var AzureDepths_1 = __webpack_require__(116);
59150
- var StyleConstants = __webpack_require__(31);
59441
+ var StyleConstants = __webpack_require__(30);
59151
59442
  exports.ModalStyles = function (props) {
59152
59443
  var theme = props.theme;
59153
59444
  var semanticColors = theme.semanticColors;
@@ -59196,7 +59487,7 @@ exports.OverlayStyles = function (props) {
59196
59487
  "use strict";
59197
59488
 
59198
59489
  Object.defineProperty(exports, "__esModule", { value: true });
59199
- var Constants_1 = __webpack_require__(31);
59490
+ var Constants_1 = __webpack_require__(30);
59200
59491
  exports.NavStyles = function (props) {
59201
59492
  var theme = props.theme;
59202
59493
  var semanticColors = theme.semanticColors;
@@ -59270,7 +59561,7 @@ exports.PanelStyles = function (props) {
59270
59561
  "use strict";
59271
59562
 
59272
59563
  Object.defineProperty(exports, "__esModule", { value: true });
59273
- var StyleConstants = __webpack_require__(31);
59564
+ var StyleConstants = __webpack_require__(30);
59274
59565
  exports.PivotStyles = function (props) {
59275
59566
  var theme = props.theme, rootIsTabs = props.rootIsTabs, rootIsLarge = props.rootIsLarge;
59276
59567
  var semanticColors = theme.semanticColors;
@@ -59425,7 +59716,7 @@ exports.PivotStyles = function (props) {
59425
59716
  "use strict";
59426
59717
 
59427
59718
  Object.defineProperty(exports, "__esModule", { value: true });
59428
- var StyleConstants = __webpack_require__(31);
59719
+ var StyleConstants = __webpack_require__(30);
59429
59720
  exports.ExpandingCardStyles = function (props) {
59430
59721
  var theme = props.theme;
59431
59722
  var semanticColors = theme.semanticColors;
@@ -59465,7 +59756,7 @@ exports.PlainCardStyles = function (props) {
59465
59756
  "use strict";
59466
59757
 
59467
59758
  Object.defineProperty(exports, "__esModule", { value: true });
59468
- var StyleConstants = __webpack_require__(31);
59759
+ var StyleConstants = __webpack_require__(30);
59469
59760
  exports.PrimaryButtonStyles = function (theme) {
59470
59761
  var semanticColors = theme.semanticColors;
59471
59762
  var extendedSemanticColors = semanticColors;
@@ -59589,7 +59880,7 @@ exports.RatingStyles = function (props) {
59589
59880
  "use strict";
59590
59881
 
59591
59882
  Object.defineProperty(exports, "__esModule", { value: true });
59592
- var StyleConstants = __webpack_require__(31);
59883
+ var StyleConstants = __webpack_require__(30);
59593
59884
  exports.SearchBoxStyles = function (props) {
59594
59885
  var theme = props.theme, hasFocus = props.hasFocus;
59595
59886
  var semanticColors = theme.semanticColors;
@@ -59650,7 +59941,7 @@ exports.SearchBoxStyles = function (props) {
59650
59941
  "use strict";
59651
59942
 
59652
59943
  Object.defineProperty(exports, "__esModule", { value: true });
59653
- var StyleConstants = __webpack_require__(31);
59944
+ var StyleConstants = __webpack_require__(30);
59654
59945
  var SLIDER_BOX_DIMENSION = 8;
59655
59946
  var SLIDER_DIAMETER = 16;
59656
59947
  var SLIDER_BORDER_RADIUS = 10;
@@ -59876,7 +60167,7 @@ exports.SuggestionsStyles = function (props) {
59876
60167
  "use strict";
59877
60168
 
59878
60169
  Object.defineProperty(exports, "__esModule", { value: true });
59879
- var Constants_1 = __webpack_require__(31);
60170
+ var Constants_1 = __webpack_require__(30);
59880
60171
  exports.TagItemStyles = function (props) {
59881
60172
  var theme = props.theme, selected = props.selected;
59882
60173
  if (!theme) {
@@ -59928,7 +60219,7 @@ exports.TagItemStyles = function (props) {
59928
60219
  "use strict";
59929
60220
 
59930
60221
  Object.defineProperty(exports, "__esModule", { value: true });
59931
- var StyleConstants = __webpack_require__(31);
60222
+ var StyleConstants = __webpack_require__(30);
59932
60223
  exports.TagPickerStyles = function (props) {
59933
60224
  var theme = props.theme;
59934
60225
  if (!theme) {
@@ -60090,7 +60381,7 @@ exports.TeachingBubbleStyles = function (props) {
60090
60381
  "use strict";
60091
60382
 
60092
60383
  Object.defineProperty(exports, "__esModule", { value: true });
60093
- var StyleConstants = __webpack_require__(31);
60384
+ var StyleConstants = __webpack_require__(30);
60094
60385
  exports.TextFieldStyles = function (props) {
60095
60386
  var focused = props.focused, disabled = props.disabled, hasErrorMessage = props.hasErrorMessage, multiline = props.multiline, theme = props.theme;
60096
60387
  var semanticColors = theme.semanticColors;
@@ -60182,7 +60473,7 @@ exports.TextFieldStyles = function (props) {
60182
60473
  "use strict";
60183
60474
 
60184
60475
  Object.defineProperty(exports, "__esModule", { value: true });
60185
- var StyleConstants = __webpack_require__(31);
60476
+ var StyleConstants = __webpack_require__(30);
60186
60477
  exports.ToggleStyles = function (props) {
60187
60478
  var theme = props.theme, disabled = props.disabled, checked = props.checked;
60188
60479
  var semanticColors = theme.semanticColors;
@@ -60308,10 +60599,19 @@ exports.ToggleStyles = function (props) {
60308
60599
  "use strict";
60309
60600
 
60310
60601
  Object.defineProperty(exports, "__esModule", { value: true });
60602
+ var StyleConstants = __webpack_require__(30);
60311
60603
  exports.TooltipStyles = function (props) {
60604
+ var theme = props.theme;
60605
+ var semanticColors = theme.semanticColors;
60606
+ var extendedSemanticColors = semanticColors;
60312
60607
  return {
60313
60608
  root: {
60314
60609
  maxWidth: '480px',
60610
+ padding: 0,
60611
+ },
60612
+ content: {
60613
+ backgroundColor: extendedSemanticColors.controlBackground,
60614
+ padding: StyleConstants.inputControlPadding,
60315
60615
  },
60316
60616
  };
60317
60617
  };
@@ -69036,9 +69336,9 @@ var SelectionZone = /** @class */ (function (_super) {
69036
69336
  }
69037
69337
  };
69038
69338
  SelectionZone.prototype._clearAndSelectIndex = function (index) {
69039
- var selection = this.props.selection;
69339
+ var _a = this.props, selection = _a.selection, _b = _a.selectionClearedOnSurfaceClick, selectionClearedOnSurfaceClick = _b === void 0 ? true : _b;
69040
69340
  var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
69041
- if (!isAlreadySingleSelected) {
69341
+ if (!isAlreadySingleSelected && selectionClearedOnSurfaceClick) {
69042
69342
  var isModal = selection.isModal && selection.isModal();
69043
69343
  selection.setChangeEvents(false);
69044
69344
  selection.setAllSelected(false);
@@ -69606,7 +69906,7 @@ var GroupHeaderBase = /** @class */ (function (_super) {
69606
69906
  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 },
69607
69907
  React.createElement("div", { className: this._classNames.groupHeaderContainer, role: "presentation" },
69608
69908
  isSelectionCheckVisible ? (React.createElement("div", { role: "gridcell" },
69609
- 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 })),
69909
+ 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 })),
69610
69910
  React.createElement(GroupSpacer_1.GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),
69611
69911
  React.createElement("div", { className: this._classNames.dropIcon, role: "presentation" },
69612
69912
  React.createElement(Icon_1.Icon, { iconName: "Tag" })),
@@ -78916,7 +79216,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
78916
79216
  // Do not modify this file; it is generated as part of publish.
78917
79217
  // The checked in version is a placeholder only and will not be updated.
78918
79218
  var set_version_1 = __webpack_require__(57);
78919
- set_version_1.setVersion('@uifabric/icons', '7.6.1');
79219
+ set_version_1.setVersion('@uifabric/icons', '7.6.2');
78920
79220
 
78921
79221
 
78922
79222
  /***/ }),
@@ -80352,6 +80652,7 @@ function getStyles(props) {
80352
80652
  },
80353
80653
  _c[":hover ." + classNames.icon] = {
80354
80654
  opacity: 0,
80655
+ pointerEvents: 'none',
80355
80656
  },
80356
80657
  _c),
80357
80658
  },
@@ -80422,6 +80723,7 @@ function getStyles(props) {
80422
80723
  },
80423
80724
  hasFocus && {
80424
80725
  opacity: 0,
80726
+ pointerEvents: 'none',
80425
80727
  },
80426
80728
  !disableAnimation && {
80427
80729
  transition: "opacity " + Styling_1.AnimationVariables.durationValue1 + " 0s",
@@ -82879,7 +83181,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
82879
83181
  // Do not modify this file; it is generated as part of publish.
82880
83182
  // The checked in version is a placeholder only and will not be updated.
82881
83183
  var set_version_1 = __webpack_require__(57);
82882
- set_version_1.setVersion('@uifabric/foundation', '7.10.0');
83184
+ set_version_1.setVersion('@uifabric/foundation', '7.10.1');
82883
83185
 
82884
83186
 
82885
83187
  /***/ }),
@@ -86621,7 +86923,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
86621
86923
  // Do not modify this file; it is generated as part of publish.
86622
86924
  // The checked in version is a placeholder only and will not be updated.
86623
86925
  var set_version_1 = __webpack_require__(57);
86624
- set_version_1.setVersion('@fluentui/react-button', '0.20.0');
86926
+ set_version_1.setVersion('@fluentui/react-button', '0.20.1');
86625
86927
 
86626
86928
 
86627
86929
  /***/ }),
@@ -127098,4 +127400,4 @@ exports.ToggleButtons = function () { return (React.createElement(office_ui_fabr
127098
127400
 
127099
127401
  /***/ })
127100
127402
  ],[[929,1,2]]]);
127101
- //# sourceMappingURL=main.7da4035404597c1a9885.bundle.js.map
127403
+ //# sourceMappingURL=main.6d4ff50b2d1a618817d2.bundle.js.map