@moderneinc/design-system-components 6.0.1-next.ba17df → 6.0.1-next.d0f7d0

package/dist/MenuItem/MenuItem.d.ts

@@ -19,15 +19,26 @@ type ModMenuItemOwnProps = {
      */
     secondaryText?: string;
     /**
-     * URL to navigate to. **Requires `component="a"`** (or a router link component):
-     * MUI's MenuItem roots at `li`, and ButtonBase only swaps in an anchor when the
-     * root is `button`, so `href` alone lands on the `li` and does not navigate.
-     * See #722.
+     * URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
+     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
+     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
+     * `Link`) to override that default.
+     *
+     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
+     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
+     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
+     * items, and what `ModListItem` already produces inside `List`.
      */
     href?: string;
-    /** Anchor target, e.g. `_blank`. Needs `href` and `component="a"`. */
+    /**
+     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
+     * roots at `li` and this renders as an inert attribute, the same trap as #722.
+     */
     target?: string;
-    /** Anchor `rel`, e.g. `noopener noreferrer`. Needs `href` and `component="a"`. */
+    /**
+     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
+     * the item roots at `li` and this renders as an inert attribute.
+     */
     rel?: string;
     /**
      * Menu item content (text label)
@@ -35,6 +46,14 @@ type ModMenuItemOwnProps = {
     children?: ReactNode;
 };
 export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    /**
+     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
+     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
+     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
+     * the exception — ButtonBase promotes a `button` root to an anchor itself.
+     *
+     * @default 'li', or 'a' when `href` is set
+     */
     component?: C;
 };
 /**
@@ -54,19 +73,19 @@ export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuI
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — `component="a"` is required, see #722
- * <ModMenuItem component="a" href="/api-explorer">API explorer</ModMenuItem>
+ * // As an anchor — `href` alone is enough
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
- * <ModMenuItem component="a" href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  *   Documentation
  * </ModMenuItem>
  *
- * // Client-side routing (Next.js)
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
  * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
  * ```
  */
-export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ModMenuItem {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1052,15 +1052,26 @@ type ModMenuItemOwnProps = {
      */
     secondaryText?: string;
     /**
-     * URL to navigate to. **Requires `component="a"`** (or a router link component):
-     * MUI's MenuItem roots at `li`, and ButtonBase only swaps in an anchor when the
-     * root is `button`, so `href` alone lands on the `li` and does not navigate.
-     * See #722.
+     * URL to navigate to. Supplying `href` roots the item at an anchor instead of the `li`
+     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
+     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
+     * `Link`) to override that default.
+     *
+     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
+     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
+     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
+     * items, and what `ModListItem` already produces inside `List`.
      */
     href?: string;
-    /** Anchor target, e.g. `_blank`. Needs `href` and `component="a"`. */
+    /**
+     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
+     * roots at `li` and this renders as an inert attribute, the same trap as #722.
+     */
     target?: string;
-    /** Anchor `rel`, e.g. `noopener noreferrer`. Needs `href` and `component="a"`. */
+    /**
+     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
+     * the item roots at `li` and this renders as an inert attribute.
+     */
     rel?: string;
     /**
      * Menu item content (text label)
@@ -1068,6 +1079,14 @@ type ModMenuItemOwnProps = {
     children?: ReactNode;
 };
 type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    /**
+     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
+     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
+     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
+     * the exception — ButtonBase promotes a `button` root to an anchor itself.
+     *
+     * @default 'li', or 'a' when `href` is set
+     */
     component?: C;
 };
 /**
@@ -1087,19 +1106,19 @@ type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnP
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — `component="a"` is required, see #722
- * <ModMenuItem component="a" href="/api-explorer">API explorer</ModMenuItem>
+ * // As an anchor — `href` alone is enough
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
- * <ModMenuItem component="a" href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  *   Documentation
  * </ModMenuItem>
  *
- * // Client-side routing (Next.js)
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
  * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
  * ```
  */
-declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
+declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
 declare namespace ModMenuItem {
     var displayName: string;
 }

package/dist/index.esm.js

@@ -1854,20 +1854,25 @@ const Shortcut = styled('span')(({ theme }) => ({
  * // Disabled state
  * <ModMenuItem disabled>Disabled item</ModMenuItem>
  *
- * // As an anchor — `component="a"` is required, see #722
- * <ModMenuItem component="a" href="/api-explorer">API explorer</ModMenuItem>
+ * // As an anchor — `href` alone is enough
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
  *
  * // External link
- * <ModMenuItem component="a" href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
  *   Documentation
  * </ModMenuItem>
  *
- * // Client-side routing (Next.js)
+ * // Client-side routing (Next.js) — an explicit `component` wins over the anchor default
  * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
  * ```
  */
-function ModMenuItem({ icon, shortcut, secondaryText, children, ...rest }) {
-    return (jsx(StyledMenuItem, { ...rest, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
+function ModMenuItem({ icon, shortcut, secondaryText, children, component, href, ...rest }) {
+    // MUI roots MenuItem at `li`, and ButtonBase only swaps in a link component when the
+    // root is `button` (as of @mui/material 9.2) — so an `href` on the default root lands as
+    // an attribute on the `<li>` and never navigates (#722). Root at an anchor instead,
+    // unless the caller named a component (e.g. a router link) themselves.
+    const rootProps = { ...rest, href, component: component ?? (href ? 'a' : undefined) };
+    return (jsx(StyledMenuItem, { ...rootProps, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';