@openedx/paragon 23.15.0 → 23.15.2

package/bin/paragon-scripts.js

@@ -267,6 +267,10 @@ const COMMANDS = {
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error(chalk.red.bold('An error occurred:', error));
+    if (error instanceof Error) {
+      // eslint-disable-next-line no-console
+      console.error(chalk.red(error.stack));
+    }
     sendTrackInfo('openedx.paragon.cli-command.used', { command, status: 'error', errorMsg: error.message });
     process.exit(1);
   }

package/dist/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
-import React, { ReactElement, ReactNode, ElementType } from 'react';
-interface MenuItemProps {
+import React, { type ReactElement, type ReactNode, type ElementType, type ComponentPropsWithoutRef } from 'react';
+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 */
@@ -7,11 +7,11 @@ interface MenuItemProps {
     /** 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;
 }
-declare function MenuItem({ as, children, defaultSelected, iconAfter, iconBefore, ...props }: MenuItemProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function MenuItem<As extends ElementType = 'button'>({ as, children, defaultSelected, iconAfter, iconBefore, ...props }: MenuItemProps<As> & ComponentPropsWithoutRef<As>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default MenuItem;

package/dist/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","names":["React","createElement","classNames","Icon","MenuItem","as","children","defaultSelected","iconAfter","iconBefore","props","className","Fragment","src"],"sources":["../../src/Menu/MenuItem.tsx"],"sourcesContent":["import React, {\n  ReactElement, ReactNode, ElementType, createElement, ComponentType,\n} from 'react';\nimport classNames from 'classnames';\nimport Icon from '../Icon';\n\ninterface MenuItemProps {\n  /** Specifies that this `MenuItem` is selected inside the `SelectMenu` */\n  defaultSelected?: boolean;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Specifies the content of the `MenuItem` */\n  children: ReactNode;\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Specifies the jsx before the content of the `MenuItem` */\n  iconBefore?: ReactElement | ElementType;\n  /** Specifies the jsx after the content of the `MenuItem` */\n  iconAfter?: ReactElement | ElementType;\n}\nfunction MenuItem({\n  as = 'button',\n  children,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  defaultSelected = false,\n  iconAfter,\n  iconBefore,\n  ...props\n}: MenuItemProps) {\n  const className = classNames(props.className, 'pgn__menu-item');\n\n  return createElement(\n    as,\n    {\n      ...props,\n      className,\n    },\n    (\n      <>\n        {iconBefore && <Icon className=\"btn-icon-before\" src={iconBefore as ComponentType} />}\n        <span className=\"pgn__menu-item-text\">{children}</span>\n        <span className=\"pgn__menu-item-content-spacer\" />\n        {iconAfter && <Icon className=\"btn-icon-after\" src={iconAfter as ComponentType} />}\n      </>\n    ),\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAC4BC,aAAa,QAC9C,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,SAAS;AAgB1B,SAASC,QAAQA,CAAC;EAChBC,EAAE,GAAG,QAAQ;EACbC,QAAQ;EACR;EACAC,eAAe,GAAG,KAAK;EACvBC,SAAS;EACTC,UAAU;EACV,GAAGC;AACU,CAAC,EAAE;EAChB,MAAMC,SAAS,GAAGT,UAAU,CAACQ,KAAK,CAACC,SAAS,EAAE,gBAAgB,CAAC;EAE/D,oBAAOV,aAAa,CAClBI,EAAE,EACF;IACE,GAAGK,KAAK;IACRC;EACF,CAAC,eAECX,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAY,QAAA,QACGH,UAAU,iBAAIT,KAAA,CAAAC,aAAA,CAACE,IAAI;IAACQ,SAAS,EAAC,iBAAiB;IAACE,GAAG,EAAEJ;EAA4B,CAAE,CAAC,eACrFT,KAAA,CAAAC,aAAA;IAAMU,SAAS,EAAC;EAAqB,GAAEL,QAAe,CAAC,eACvDN,KAAA,CAAAC,aAAA;IAAMU,SAAS,EAAC;EAA+B,CAAE,CAAC,EACjDH,SAAS,iBAAIR,KAAA,CAAAC,aAAA,CAACE,IAAI;IAACQ,SAAS,EAAC,gBAAgB;IAACE,GAAG,EAAEL;EAA2B,CAAE,CACjF,CAEN,CAAC;AACH;AAEA,eAAeJ,QAAQ","ignoreList":[]}
+{"version":3,"file":"MenuItem.js","names":["React","createElement","classNames","Icon","MenuItem","as","children","defaultSelected","iconAfter","iconBefore","props","className","Fragment","src"],"sources":["../../src/Menu/MenuItem.tsx"],"sourcesContent":["import React, {\n  type ReactElement,\n  type ReactNode,\n  type ElementType,\n  createElement,\n  type ComponentType,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport classNames from 'classnames';\nimport Icon from '../Icon';\n\ninterface MenuItemProps<As extends ElementType> {\n  /** Specifies that this `MenuItem` is selected inside the `SelectMenu` */\n  defaultSelected?: boolean;\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /** Specifies the content of the `MenuItem` */\n  children: ReactNode;\n  /** Specifies the base element */\n  as?: As;\n  /** Specifies the jsx before the content of the `MenuItem` */\n  iconBefore?: ReactElement | ElementType;\n  /** Specifies the jsx after the content of the `MenuItem` */\n  iconAfter?: ReactElement | ElementType;\n}\n\nfunction MenuItem<As extends ElementType = 'button'>({\n  as = 'button' as As,\n  children,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  defaultSelected = false,\n  iconAfter,\n  iconBefore,\n  ...props\n}: MenuItemProps<As> & ComponentPropsWithoutRef<As>) {\n  const className = classNames(props.className, 'pgn__menu-item');\n\n  return createElement(\n    as,\n    {\n      ...props,\n      className,\n    },\n    (\n      <>\n        {iconBefore && <Icon className=\"btn-icon-before\" src={iconBefore as ComponentType} />}\n        <span className=\"pgn__menu-item-text\">{children}</span>\n        <span className=\"pgn__menu-item-content-spacer\" />\n        {iconAfter && <Icon className=\"btn-icon-after\" src={iconAfter as ComponentType} />}\n      </>\n    ),\n  );\n}\n\nexport default MenuItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAIVC,aAAa,QAGR,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,IAAI,MAAM,SAAS;AAiB1B,SAASC,QAAQA,CAAoC;EACnDC,EAAE,GAAG,QAAc;EACnBC,QAAQ;EACR;EACAC,eAAe,GAAG,KAAK;EACvBC,SAAS;EACTC,UAAU;EACV,GAAGC;AAC6C,CAAC,EAAE;EACnD,MAAMC,SAAS,GAAGT,UAAU,CAACQ,KAAK,CAACC,SAAS,EAAE,gBAAgB,CAAC;EAE/D,oBAAOV,aAAa,CAClBI,EAAE,EACF;IACE,GAAGK,KAAK;IACRC;EACF,CAAC,eAECX,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAY,QAAA,QACGH,UAAU,iBAAIT,KAAA,CAAAC,aAAA,CAACE,IAAI;IAACQ,SAAS,EAAC,iBAAiB;IAACE,GAAG,EAAEJ;EAA4B,CAAE,CAAC,eACrFT,KAAA,CAAAC,aAAA;IAAMU,SAAS,EAAC;EAAqB,GAAEL,QAAe,CAAC,eACvDN,KAAA,CAAAC,aAAA;IAAMU,SAAS,EAAC;EAA+B,CAAE,CAAC,EACjDH,SAAS,iBAAIR,KAAA,CAAAC,aAAA,CAACE,IAAI;IAACQ,SAAS,EAAC,gBAAgB;IAACE,GAAG,EAAEL;EAA2B,CAAE,CACjF,CAEN,CAAC;AACH;AAEA,eAAeJ,QAAQ","ignoreList":[]}

package/dist/Menu/index.d.ts

@@ -1,5 +1,5 @@
-import React, { ElementType, ReactNode } from 'react';
-interface MenuProps {
+import React, { type ElementType, type ReactNode, type ComponentPropsWithoutRef } from 'react';
+interface MenuProps<As extends ElementType> {
     /** Specifies class name to append to the base element */
     className?: string;
     /**
@@ -8,9 +8,9 @@ interface MenuProps {
      */
     arrowKeyNavigationSelector?: string;
     /** Specifies the base element */
-    as?: ElementType;
+    as?: As;
     /** Specifies the content of the menu */
     children?: ReactNode;
 }
-declare function Menu({ as, arrowKeyNavigationSelector, children, ...props }: MenuProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function Menu<As extends ElementType = 'div'>({ as, arrowKeyNavigationSelector, children, ...props }: MenuProps<As> & ComponentPropsWithoutRef<As>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Menu;

package/dist/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","createElement","classNames","useArrowKeyNavigation","Menu","as","arrowKeyNavigationSelector","children","props","parentRef","selectors","className","ref","Fragment"],"sources":["../../src/Menu/index.tsx"],"sourcesContent":["import React, { ElementType, ReactNode, createElement } from 'react';\nimport classNames from 'classnames';\nimport useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';\n\ninterface MenuProps {\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /**\n   * Specifies the CSS selector string that indicates to which elements\n   * the user can navigate using the arrow keys\n   */\n  arrowKeyNavigationSelector?: string;\n  /** Specifies the base element */\n  as?: ElementType;\n  /** Specifies the content of the menu */\n  children?: ReactNode;\n}\nfunction Menu({\n  as = 'div',\n  arrowKeyNavigationSelector = 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',\n  children,\n  ...props\n}: MenuProps) {\n  const parentRef = useArrowKeyNavigation({ selectors: arrowKeyNavigationSelector });\n  const className = classNames(props.className, 'pgn__menu');\n\n  return createElement(\n    as,\n    {\n      ...props,\n      ref: parentRef,\n      className,\n    },\n    (\n      // eslint-disable-next-line react/jsx-no-useless-fragment\n      <>\n        {children}\n      </>\n    ),\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,OAAOA,KAAK,IAA4BC,aAAa,QAAQ,OAAO;AACpE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,qBAAqB,MAAM,oCAAoC;AAetE,SAASC,IAAIA,CAAC;EACZC,EAAE,GAAG,KAAK;EACVC,0BAA0B,GAAG,6DAA6D;EAC1FC,QAAQ;EACR,GAAGC;AACM,CAAC,EAAE;EACZ,MAAMC,SAAS,GAAGN,qBAAqB,CAAC;IAAEO,SAAS,EAAEJ;EAA2B,CAAC,CAAC;EAClF,MAAMK,SAAS,GAAGT,UAAU,CAACM,KAAK,CAACG,SAAS,EAAE,WAAW,CAAC;EAE1D,oBAAOV,aAAa,CAClBI,EAAE,EACF;IACE,GAAGG,KAAK;IACRI,GAAG,EAAEH,SAAS;IACdE;EACF,CAAC;EAAA;EAEC;EACAX,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAa,QAAA,QACGN,QACD,CAEN,CAAC;AACH;AAEA,eAAeH,IAAI","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","createElement","classNames","useArrowKeyNavigation","Menu","as","arrowKeyNavigationSelector","children","props","parentRef","selectors","className","ref","Fragment"],"sources":["../../src/Menu/index.tsx"],"sourcesContent":["import React, {\n  createElement,\n  type ElementType,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from 'react';\nimport classNames from 'classnames';\nimport useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';\n\ninterface MenuProps<As extends ElementType> {\n  /** Specifies class name to append to the base element */\n  className?: string;\n  /**\n   * Specifies the CSS selector string that indicates to which elements\n   * the user can navigate using the arrow keys\n   */\n  arrowKeyNavigationSelector?: string;\n  /** Specifies the base element */\n  as?: As;\n  /** Specifies the content of the menu */\n  children?: ReactNode;\n}\n\nfunction Menu<As extends ElementType = 'div'>({\n  as = 'div' as As,\n  arrowKeyNavigationSelector = 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',\n  children,\n  ...props\n}: MenuProps<As> & ComponentPropsWithoutRef<As>) {\n  const parentRef = useArrowKeyNavigation({ selectors: arrowKeyNavigationSelector });\n  const className = classNames(props.className, 'pgn__menu');\n\n  return createElement(\n    as,\n    {\n      ...props,\n      ref: parentRef,\n      className,\n    },\n    (\n      // eslint-disable-next-line react/jsx-no-useless-fragment\n      <>\n        {children}\n      </>\n    ),\n  );\n}\n\nexport default Menu;\n"],"mappings":"AAAA,OAAOA,KAAK,IACVC,aAAa,QAIR,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,qBAAqB,MAAM,oCAAoC;AAgBtE,SAASC,IAAIA,CAAiC;EAC5CC,EAAE,GAAG,KAAW;EAChBC,0BAA0B,GAAG,6DAA6D;EAC1FC,QAAQ;EACR,GAAGC;AACyC,CAAC,EAAE;EAC/C,MAAMC,SAAS,GAAGN,qBAAqB,CAAC;IAAEO,SAAS,EAAEJ;EAA2B,CAAC,CAAC;EAClF,MAAMK,SAAS,GAAGT,UAAU,CAACM,KAAK,CAACG,SAAS,EAAE,WAAW,CAAC;EAE1D,oBAAOV,aAAa,CAClBI,EAAE,EACF;IACE,GAAGG,KAAK;IACRI,GAAG,EAAEH,SAAS;IACdE;EACF,CAAC;EAAA;EAEC;EACAX,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAa,QAAA,QACGN,QACD,CAEN,CAAC;AACH;AAEA,eAAeH,IAAI","ignoreList":[]}

package/dist/Stack/index.d.ts

@@ -16,5 +16,5 @@ interface StackProps {
     /** Specifies an additional `className` to add to the base element. */
     className?: string;
 }
-declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Stack;

package/dist/Stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","classNames","Stack","direction","gap","reversed","children","className","rest","ref","createElement"],"sources":["../../src/Stack/index.tsx"],"sourcesContent":["import React, { forwardRef, ForwardedRef } from 'react';\nimport classNames from 'classnames';\n\ninterface StackProps {\n  /** Specifies the content of the `Stack`. */\n  children: React.ReactNode;\n  /** Specifies direction of the children blocks (column/row). */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap?: number;\n  /** Specifies the order of the children. */\n  reversed?: boolean;\n  /** Specifies an additional `className` to add to the base element. */\n  className?: string;\n}\n\nconst Stack = forwardRef(({\n  direction = 'vertical',\n  gap = 0,\n  reversed = false,\n  children,\n  className,\n  ...rest\n}: StackProps, ref: ForwardedRef<HTMLDivElement>) => (\n  <div\n    ref={ref}\n    className={classNames(\n      direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',\n      gap ? `pgn__stack-gap--${gap}` : '',\n      reversed ? 'pgn__stack-reversed' : '',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nexport default Stack;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAsB,OAAO;AACvD,OAAOC,UAAU,MAAM,YAAY;AAoBnC,MAAMC,KAAK,gBAAGF,UAAU,CAAC,CAAC;EACxBG,SAAS,GAAG,UAAU;EACtBC,GAAG,GAAG,CAAC;EACPC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,SAAS;EACT,GAAGC;AACO,CAAC,EAAEC,GAAiC,kBAC9CV,KAAA,CAAAW,aAAA;EACED,GAAG,EAAEA,GAAI;EACTF,SAAS,EAAEN,UAAU,CACnBE,SAAS,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAC1DC,GAAG,GAAG,mBAAmBA,GAAG,EAAE,GAAG,EAAE,EACnCC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EACrCE,SACF,CAAE;EAAA,GACEC;AAAI,GAEPF,QACE,CACN,CAAC;AAEF,eAAeJ,KAAK","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","forwardRef","classNames","Stack","direction","gap","reversed","children","className","rest","ref","createElement"],"sources":["../../src/Stack/index.tsx"],"sourcesContent":["import React, { forwardRef, ForwardedRef, HTMLProps } from 'react';\nimport classNames from 'classnames';\n\ninterface StackProps {\n  /** Specifies the content of the `Stack`. */\n  children: React.ReactNode;\n  /** Specifies direction of the children blocks (column/row). */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Specifies inner space between children blocks.\n   *\n   * Valid values are based on `the spacing classes`:\n   * `0, 0.5, ... 6`.\n   */\n  gap?: number;\n  /** Specifies the order of the children. */\n  reversed?: boolean;\n  /** Specifies an additional `className` to add to the base element. */\n  className?: string;\n}\n\nconst Stack = forwardRef(({\n  direction = 'vertical',\n  gap = 0,\n  reversed = false,\n  children,\n  className,\n  ...rest\n}: StackProps & HTMLProps<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement>) => (\n  <div\n    ref={ref}\n    className={classNames(\n      direction === 'horizontal' ? 'pgn__hstack' : 'pgn__vstack',\n      gap ? `pgn__stack-gap--${gap}` : '',\n      reversed ? 'pgn__stack-reversed' : '',\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </div>\n));\n\nexport default Stack;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAiC,OAAO;AAClE,OAAOC,UAAU,MAAM,YAAY;AAoBnC,MAAMC,KAAK,gBAAGF,UAAU,CAAC,CAAC;EACxBG,SAAS,GAAG,UAAU;EACtBC,GAAG,GAAG,CAAC;EACPC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,SAAS;EACT,GAAGC;AACmC,CAAC,EAAEC,GAAiC,kBAC1EV,KAAA,CAAAW,aAAA;EACED,GAAG,EAAEA,GAAI;EACTF,SAAS,EAAEN,UAAU,CACnBE,SAAS,KAAK,YAAY,GAAG,aAAa,GAAG,aAAa,EAC1DC,GAAG,GAAG,mBAAmBA,GAAG,EAAE,GAAG,EAAE,EACnCC,QAAQ,GAAG,qBAAqB,GAAG,EAAE,EACrCE,SACF,CAAE;EAAA,GACEC;AAAI,GAEPF,QACE,CACN,CAAC;AAEF,eAAeJ,KAAK","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.15.0",
+  "version": "23.15.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Menu/MenuItem.tsx

@@ -1,10 +1,15 @@
 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 */
@@ -12,21 +17,22 @@ interface MenuItemProps {
   /** 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(

package/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');
 

package/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(