feat(UIShell): pass-through props on <HeaderContainer /> (#16805)

.all-contributorsrc

@@ -1524,8 +1524,8 @@
       "contributions": [
         "code"
       ]
-     },
-    {  
+    },
+    {
       "login": "ychavoya",
       "name": "Yael Chavoya",
       "avatar_url": "https://avatars.githubusercontent.com/u/7907338?v=4",
@@ -1559,6 +1559,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "lluisrojass",
+      "name": "Luis",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15043356?v=4",
+      "profile": "https://github.com/lluisrojass",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -291,11 +291,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/aninaantony"><img src="https://avatars.githubusercontent.com/u/164350784?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anina Antony</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aninaantony" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ahmedsemih"><img src="https://avatars.githubusercontent.com/u/102798814?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed Semih Erkan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ahmedsemih" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ychavoya"><img src="https://avatars.githubusercontent.com/u/7907338?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yael Chavoya</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=ychavoya" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Kilian-Collender"><img src="https://avatars.githubusercontent.com/u/37899503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Collender</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kilian-Collender" title="Code">💻</a></td>
+    <td align="center"><img src="https://avatars.githubusercontent.com/u/37899503?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kilian Collender</b></sub><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Kilian-Collender" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/nandininarayanofficial"><img src="https://avatars.githubusercontent.com/u/165769075?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nandininarayanofficial</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=nandininarayanofficial" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/digiacomo-a"><img src="https://avatars.githubusercontent.com/u/117646602?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrea DG</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=digiacomo-a" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/lluisrojass"><img src="https://avatars.githubusercontent.com/u/15043356?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luis</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=lluisrojass" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/src/components/UIShell/HeaderContainer.tsx

@@ -10,20 +10,21 @@ import React, { useState, useCallback } from 'react';
 import { keys, match } from '../../internal/keyboard';
 import { useWindowEvent } from '../../internal/useEvent';
 
-interface HeaderContainerRenderProps {
+export interface HeaderContainerRenderProps {
   isSideNavExpanded: boolean;
   onClickSideNavExpand: () => void;
 }
 
-export interface HeaderContainerProps {
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
   isSideNavExpanded?: boolean;
-  render: React.ComponentType<HeaderContainerRenderProps>;
-}
+  render: React.ComponentType<P>;
+} & { [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K] };
 
-export default function HeaderContainer({
+export default function HeaderContainer<P extends HeaderContainerRenderProps>({
   render: Children,
   isSideNavExpanded = false,
-}: HeaderContainerProps) {
+  ...rest
+}: HeaderContainerProps<P>) {
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] =
     useState(isSideNavExpanded);
@@ -42,6 +43,7 @@ export default function HeaderContainer({
 
   return (
     <Children
+      {...(rest as any)}
       isSideNavExpanded={isSideNavExpandedState}
       onClickSideNavExpand={handleHeaderMenuButtonClick}
     />
@@ -55,10 +57,10 @@ HeaderContainer.propTypes = {
   isSideNavExpanded: PropTypes.bool,
 
   /**
-   * A function or component that is passed an object parameter with two
-   * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-   * component can then use those properties to within the components it
-   * returns, such as with the HeaderMenuButton and SideNav components.
+   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+   * The function or component can then use those properties to within the components it
+   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+   * into this component for convenience.
    */
   render: PropTypes.elementType.isRequired,
 };

packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js

@@ -53,4 +53,23 @@ describe('HeaderContainer', () => {
       {}
     );
   });
+
+  it('should pass through rest props', () => {
+    const rest = {
+      foo: 'foo',
+      bar: /bar/,
+    };
+    const Test = jest.fn(() => <div />);
+
+    render(<HeaderContainer render={Test} {...rest} />);
+
+    expect(Test).toHaveBeenCalledWith(
+      {
+        isSideNavExpanded: false,
+        onClickSideNavExpand: expect.any(Function),
+        ...rest,
+      },
+      {}
+    );
+  });
 });