GroupedList: Adding support for custom keyUp callback to GroupHeader (#…

…15624)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See #15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

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

#### Description of changes

_Cherry-pick of #15478._

_Original PR description:_

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/@fluentui-react-2020-10-20-16-03-24-groupHeaderKeyUp.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "GroupedList: Adding support for custom keyUp callback to GroupHeader.",
+  "packageName": "@fluentui/react",
+  "email": "humbertomakotomorimoto@gmail.com",
+  "dependentChangeType": "patch",
+  "date": "2020-10-20T23:03:24.757Z"
+}

packages/react/etc/react.api.md

@@ -1577,6 +1577,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/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/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;