diff --git a/.changeset/sharp-onions-double.md b/.changeset/sharp-onions-double.md new file mode 100644 index 00000000000..40efbccf53d --- /dev/null +++ b/.changeset/sharp-onions-double.md @@ -0,0 +1,7 @@ +--- +"@primer/react": patch +"@primer/styled-react": patch +--- + +@primer/styled-react: chore(navlist): remove unneeded exports +@primer/react: add missing isSlot checks diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx index 6df851846b8..8648957d4aa 100644 --- a/packages/react/src/NavList/NavList.tsx +++ b/packages/react/src/NavList/NavList.tsx @@ -64,7 +64,12 @@ const Item = React.forwardRef( // Get children without SubNav or TrailingAction const childrenWithoutSubNavOrTrailingAction = React.Children.toArray(children).filter(child => - isValidElement(child) ? child.type !== SubNav && child.type !== TrailingAction : true, + isValidElement(child) + ? child.type !== SubNav && + child.type !== TrailingAction && + !isSlot(child, SubNav) && + !isSlot(child, TrailingAction) + : true, ) if (!isValidElement(subNav) && defaultOpen) diff --git a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx index 492035072d2..5b0261a104f 100644 --- a/packages/styled-react/src/__tests__/primer-react.browser.test.tsx +++ b/packages/styled-react/src/__tests__/primer-react.browser.test.tsx @@ -271,31 +271,6 @@ describe('@primer/react', () => { expect(window.getComputedStyle(itemLiEl!).backgroundColor).toBe('rgb(255, 0, 0)') }) - test('NavList.Group supports `sx` prop', () => { - render( - - - item - - , - ) - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) - - test('NavList.GroupHeading supports `sx` prop', () => { - render( - - - - test - - item - - , - ) - expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') - }) - test('NavList.LeadingVisual supports `sx` prop', () => { render() expect(window.getComputedStyle(screen.getByTestId('component')).backgroundColor).toBe('rgb(255, 0, 0)') diff --git a/packages/styled-react/src/components/NavList.tsx b/packages/styled-react/src/components/NavList.tsx index 8613746d553..d3b15272463 100644 --- a/packages/styled-react/src/components/NavList.tsx +++ b/packages/styled-react/src/components/NavList.tsx @@ -2,56 +2,63 @@ import {NavList as PrimerNavList} from '@primer/react' import type { NavListProps as PrimerNavListProps, NavListItemProps as PrimerNavListItemProps, - NavListGroupProps as PrimerNavListGroupProps, - NavListGroupHeadingProps as PrimerNavListGroupHeadingProps, NavListLeadingVisualProps as PrimerNavListLeadingVisualProps, + SlotMarker, } from '@primer/react' import {forwardRef, type PropsWithChildren} from 'react' import {type SxProp} from '../sx' -import Box from './Box' +import styled from 'styled-components' +import {sx} from '../sx' +import type {ForwardRefComponent} from '../polymorphic' -type RefComponent = React.ForwardRefExoticComponent

> +type NavListProps = PropsWithChildren & SxProp & {as?: React.ElementType} -type NavListProps = PropsWithChildren & SxProp +const StyledNavListImpl = styled(PrimerNavList).withConfig({ + shouldForwardProp: prop => (prop as keyof NavListProps) !== 'sx', +})` + ${sx} +` -const NavListImpl = forwardRef(function NavList(props, ref) { - return +const NavListImpl = forwardRef(function NavList({as, ...props}, ref) { + return }) -type NavListItemProps = PropsWithChildren & SxProp +type NavListItemProps = PropsWithChildren & + SxProp & { + as?: React.ElementType + } -const NavListItem = forwardRef(function NavListItem(props, ref) { - // @ts-expect-error - PrimerNavList.Item is not recognized as a valid component type - return -}) - -type NavListGroupProps = PropsWithChildren & SxProp +const StyledNavListItem: ForwardRefComponent<'a', NavListItemProps> = styled(PrimerNavList.Item).withConfig({ + shouldForwardProp: prop => (prop as keyof NavListItemProps) !== 'sx', +})` + ${sx} +` -const NavListGroup = forwardRef(function NavListGroup(props, ref) { - // @ts-expect-error - PrimerNavList.Group is not recognized as a valid component type - return -}) +const NavListItem = forwardRef(({as, ...props}, ref) => { + return +}) as ForwardRefComponent<'a', NavListItemProps> -type NavListGroupHeadingProps = PropsWithChildren & SxProp +type NavListLeadingVisualProps = PropsWithChildren & + SxProp & { + as?: React.ElementType + } -const NavListGroupHeading = forwardRef(function NavListGroupHeading(props, ref) { - // @ts-expect-error - PrimerNavList.GroupHeading is not recognized as a valid component type - return -}) as RefComponent +const StyledNavListLeadingVisual = styled(PrimerNavList.LeadingVisual).withConfig({ + shouldForwardProp: prop => (prop as keyof NavListLeadingVisualProps) !== 'sx', +})` + ${sx} +` -type NavListLeadingVisualProps = PropsWithChildren & SxProp +const NavListLeadingVisual = forwardRef(({as, ...props}, ref) => { + return +}) as ForwardRefComponent<'span', NavListLeadingVisualProps> -const NavListLeadingVisual = forwardRef( - function NavListLeadingVisual(props, ref) { - // @ts-expect-error - PrimerNavList.LeadingVisual is not recognized as a valid component type - return - }, -) as RefComponent +;(NavListLeadingVisual as typeof NavListLeadingVisual & SlotMarker).__SLOT__ = PrimerNavList.LeadingVisual.__SLOT__ type NavListCompound = React.ForwardRefExoticComponent> & { Item: typeof NavListItem - Group: typeof NavListGroup - GroupHeading: typeof NavListGroupHeading + Group: typeof PrimerNavList.Group + GroupHeading: typeof PrimerNavList.GroupHeading LeadingVisual: typeof NavListLeadingVisual SubNav: typeof PrimerNavList.SubNav Divider: typeof PrimerNavList.Divider @@ -62,8 +69,8 @@ type NavListCompound = React.ForwardRefExoticComponent