From 88dba42bab2f64b163c6adbf9ff7f71cf6419841 Mon Sep 17 00:00:00 2001 From: Luis Rojas Date: Fri, 14 Jun 2024 13:44:19 -0400 Subject: [PATCH] feat(UIShell): pass-through props on --- .all-contributorsrc | 13 +++++++++-- README.md | 5 ++++- .../components/UIShell/HeaderContainer.tsx | 22 ++++++++++--------- .../UIShell/__tests__/HeaderContainer-test.js | 19 ++++++++++++++++ 4 files changed, 46 insertions(+), 13 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index aff550112430..70a73d1b8d7b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1524,8 +1524,8 @@ "contributions": [ "code" ] - }, - { + }, + { "login": "ychavoya", "name": "Yael Chavoya", "avatar_url": "https://avatars.githubusercontent.com/u/7907338?v=4", @@ -1551,6 +1551,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" diff --git a/README.md b/README.md index 43a17c2d5791..3c4a0798aadf 100644 --- a/README.md +++ b/README.md @@ -291,9 +291,12 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Anina Antony
💻
Ahmed Semih Erkan
💻
Yael Chavoya
💻 -
Andrea DG
💻
Kilian Collender
💻 + +
Andrea DG
💻 +
Luis
💻 + diff --git a/packages/react/src/components/UIShell/HeaderContainer.tsx b/packages/react/src/components/UIShell/HeaderContainer.tsx index 89a0c0d88bef..d6fa89a036e2 100644 --- a/packages/react/src/components/UIShell/HeaderContainer.tsx +++ b/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

= { isSideNavExpanded?: boolean; - render: React.ComponentType; -} + render: React.ComponentType

; +} & { [K in keyof Omit]: P[K] }; -export default function HeaderContainer({ +export default function HeaderContainer

({ render: Children, isSideNavExpanded = false, -}: HeaderContainerProps) { + ...rest +}: HeaderContainerProps

) { //state for expandable sidenav const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded); @@ -42,6 +43,7 @@ export default function HeaderContainer({ return ( @@ -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, }; diff --git a/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js b/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js index 66154c9d0ed1..e421f87b08f5 100644 --- a/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js +++ b/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(() =>

); + + render(); + + expect(Test).toHaveBeenCalledWith( + { + isSideNavExpanded: false, + onClickSideNavExpand: expect.any(Function), + ...rest, + }, + {} + ); + }); });