diff --git a/.changeset/rude-paths-stick.md b/.changeset/rude-paths-stick.md new file mode 100644 index 0000000000..1068d6c81b --- /dev/null +++ b/.changeset/rude-paths-stick.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/plus": patch +--- + +`Navigation`: isActive should work when the Item is wrapped in a Link/NavLink (React rooter) diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx index 7c5e569ced..b8335ad725 100644 --- a/packages/plus/src/components/Navigation/components/Item.tsx +++ b/packages/plus/src/components/Navigation/components/Item.tsx @@ -116,7 +116,8 @@ const StyledMenuItem = styled(Menu.Item, { } ${StyledBadge} { - opacity: ${({ isPinnable, pinnedFeature }) => (isPinnable && pinnedFeature ? 0 : 1)}; + opacity: ${({ isPinnable, pinnedFeature }) => + isPinnable && pinnedFeature ? 0 : 1}; } } ` @@ -265,6 +266,10 @@ const ContainerCategoryIcon = styled(Stack)` type ItemType = 'default' | 'pinned' | 'pinnedGroup' +type LinkProps = { + to: string + children?: { props: ItemProps } +} type ItemProps = { children?: ReactNode /** @@ -437,9 +442,18 @@ export const Item = memo( if (!children) return false return ( - Children.map(children, child => - isValidElement(child) ? child.props?.active : false, - ) as boolean[] + Children.map(children, child => { + if (isValidElement(child)) { + // In case the Item is wrapped in a link + if ('to' in child.props) { + return child.props.children?.props.active + } + + return child.props.active + } + + return null + }) as boolean[] ).includes(true) }, [children])