fix: Menu/MenuItem/Stack types weren't accepting extra HTML props (#3955)

Author: bradenmacdonald

src/Menu/MenuItem.tsx

@@ -1,32 +1,38 @@
 import React, {
-  ReactElement, ReactNode, ElementType, createElement, ComponentType,
+  type ReactElement,
+  type ReactNode,
+  type ElementType,
+  createElement,
+  type ComponentType,
+  type ComponentPropsWithoutRef,
 } from 'react';
 import classNames from 'classnames';
 import Icon from '../Icon';
 
-interface MenuItemProps {
+interface MenuItemProps<As extends ElementType> {
   /** Specifies that this `MenuItem` is selected inside the `SelectMenu` */
   defaultSelected?: boolean;
   /** Specifies class name to append to the base element */
   className?: string;
   /** Specifies the content of the `MenuItem` */
   children: ReactNode;
   /** Specifies the base element */
-  as?: ElementType;
+  as?: As;
   /** Specifies the jsx before the content of the `MenuItem` */
   iconBefore?: ReactElement | ElementType;
   /** Specifies the jsx after the content of the `MenuItem` */
   iconAfter?: ReactElement | ElementType;
 }
-function MenuItem({
-  as = 'button',
+
+function MenuItem<As extends ElementType = 'button'>({
+  as = 'button' as As,
   children,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   defaultSelected = false,
   iconAfter,
   iconBefore,
   ...props
-}: MenuItemProps) {
+}: MenuItemProps<As> & ComponentPropsWithoutRef<As>) {
   const className = classNames(props.className, 'pgn__menu-item');
 
   return createElement(

src/Menu/index.tsx

@@ -1,8 +1,13 @@
-import React, { ElementType, ReactNode, createElement } from 'react';
+import React, {
+  createElement,
+  type ElementType,
+  type ReactNode,
+  type ComponentPropsWithoutRef,
+} from 'react';
 import classNames from 'classnames';
 import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 
-interface MenuProps {
+interface MenuProps<As extends ElementType> {
   /** Specifies class name to append to the base element */
   className?: string;
   /**
@@ -11,16 +16,17 @@ interface MenuProps {
    */
   arrowKeyNavigationSelector?: string;
   /** Specifies the base element */
-  as?: ElementType;
+  as?: As;
   /** Specifies the content of the menu */
   children?: ReactNode;
 }
-function Menu({
-  as = 'div',
+
+function Menu<As extends ElementType = 'div'>({
+  as = 'div' as As,
   arrowKeyNavigationSelector = 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
   children,
   ...props
-}: MenuProps) {
+}: MenuProps<As> & ComponentPropsWithoutRef<As>) {
   const parentRef = useArrowKeyNavigation({ selectors: arrowKeyNavigationSelector });
   const className = classNames(props.className, 'pgn__menu');
 

src/Stack/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ForwardedRef } from 'react';
+import React, { forwardRef, ForwardedRef, HTMLProps } from 'react';
 import classNames from 'classnames';
 
 interface StackProps {
@@ -26,7 +26,7 @@ const Stack = forwardRef(({
   children,
   className,
   ...rest
-}: StackProps, ref: ForwardedRef<HTMLDivElement>) => (
+}: StackProps & HTMLProps<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(