fix(NavItem): disallow flyout and link props to both be defined on NavItem

Author: ruibrii

packages/react-core/src/components/Nav/NavItem.tsx

@@ -7,15 +7,13 @@ import { useOUIAProps, OUIAProps } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
-export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, 'onClick'>, OUIAProps {
+interface CommonNavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, 'onClick'>, OUIAProps {
   /** Content rendered inside the nav item. */
   children?: React.ReactNode;
   /** Whether to set className on children when React.isValidElement(children) */
   styleChildren?: boolean;
   /** Additional classes added to the nav item */
   className?: string;
-  /** Target navigation link */
-  to?: string;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
   /** Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component */
@@ -28,8 +26,6 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onClick?: NavSelectClickHandler;
   /** Component used to render NavItems if  React.isValidElement(children) is false */
   component?: React.ReactNode;
-  /** Flyout of a nav item. This should be a Menu component. */
-  flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
   /** @beta Opt-in for updated popper that does not use findDOMNode. */
@@ -40,6 +36,22 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaSafe?: boolean;
 }
 
+type ConditionalNavItemProps =
+  | {
+      /** Target navigation link */
+      to?: string;
+      /** Flyout of a nav item. Disallowed if nav link is defined */
+      flyout?: never;
+    }
+  | {
+      /** Target navigation link. Disallowed if flyout is defined */
+      to?: never;
+      /** Flyout of a nav item. This should be a Menu component. */
+      flyout?: React.ReactNode;
+    };
+
+export type NavItemProps = CommonNavItemProps & ConditionalNavItemProps;
+
 export const NavItem: React.FunctionComponent<NavItemProps> = ({
   children,
   styleChildren = true,