Add custom KeyUp support to Group Header (#15478)

#### Pull request checklist

- [NA ] Addresses an existing issue: Fixes #0000
- [✔ ] Include a change request file using `$ yarn change`

#### Description of changes

Give the user the ability to override what happens with KeyUp. Currently it is only used with Right/Left to expand and collapse the group.

#### Focus areas to test

Ensure that Right/Left to expand and collapse still works.

change/office-ui-fabric-react-2020-10-12-13-11-10-7.0.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "Add custom KeyUp support for Group Header",
+  "packageName": "office-ui-fabric-react",
+  "email": "bcoard@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-12T20:11:10.321Z"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -4968,6 +4968,7 @@ export interface IGroupDividerProps {
     isSelected?: boolean;
     loadingText?: string;
     onGroupHeaderClick?: (group: IGroup) => void;
+    onGroupHeaderKeyUp?: (ev: React.KeyboardEvent<HTMLElement>, group: IGroup) => void;
     onRenderTitle?: IRenderFunction<IGroupHeaderProps>;
     onToggleCollapse?: (group: IGroup) => void;
     onToggleSelectGroup?: (group: IGroup) => void;

packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.base.tsx

@@ -185,12 +185,20 @@ export class GroupHeaderBase extends React.Component<IGroupHeaderProps, IGroupHe
   };
 
   private _onKeyUp = (ev: React.KeyboardEvent<HTMLElement>): void => {
-    const shouldOpen = this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, this.props.theme);
-    const shouldClose = !this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, this.props.theme);
-    if (shouldClose || shouldOpen) {
-      this._toggleCollapse();
-      ev.stopPropagation();
-      ev.preventDefault();
+    const { group, onGroupHeaderKeyUp } = this.props;
+
+    if (onGroupHeaderKeyUp) {
+      onGroupHeaderKeyUp(ev, group!);
+    }
+
+    if (!ev.defaultPrevented) {
+      const shouldOpen = this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, this.props.theme);
+      const shouldClose = !this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, this.props.theme);
+      if (shouldClose || shouldOpen) {
+        this._toggleCollapse();
+        ev.stopPropagation();
+        ev.preventDefault();
+      }
     }
   };
 

packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.types.ts

@@ -314,6 +314,9 @@ export interface IGroupDividerProps {
   /** Callback for when the group header is clicked. */
   onGroupHeaderClick?: (group: IGroup) => void;
 
+  /** Callback for when the "keyup" event is fired on the group header . */
+  onGroupHeaderKeyUp?: (ev: React.KeyboardEvent<HTMLElement>, group: IGroup) => void;
+
   /** Callback for when the group is expanded or collapsed. */
   onToggleCollapse?: (group: IGroup) => void;