@moderneinc/design-system-components 6.0.1-next.66db2f → 6.0.1-next.71460e

package/dist/index.js

@@ -1856,20 +1856,25 @@ const Shortcut = styles.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 (jsxRuntime.jsx(StyledMenuItem, { ...rest, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.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 (jsxRuntime.jsx(StyledMenuItem, { ...rootProps, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';
 
@@ -2886,16 +2891,6 @@ const ModDatePicker = ({ type = 'single', open, label, value, rangeValue, onChan
 };
 ModDatePicker.displayName = 'ModDatePicker';
 
-/**
- * ModDatePickerListItem
- */
-const ModDatePickerListItem = styles.styled('div')({});
-
-/**
- * ModDatePickerMenu
- */
-const ModDatePickerMenu = styles.styled('div')({});
-
 const StyledDivider = styles.styled(Divider)(() => ({
     borderColor: designSystemTokens.semanticColors.border.secondary,
     marginTop: designSystemTokens.spacing.spacing_1,
@@ -5240,11 +5235,6 @@ const ModRadio = ({ size = 'medium', label, helperText, disabled, ...props }) =>
 };
 ModRadio.displayName = 'ModRadio';
 
-/**
- * ModRadioButtonWithText
- */
-const ModRadioButtonWithText = styles.styled('div')({});
-
 // Box-breathing rhythm: appear (inhale) → hold → expand+fade (exhale) → rest.
 // Max scale is capped so the ring fits within a parent row's line-height.
 const ripple = material.keyframes `
@@ -6192,11 +6182,6 @@ const ModToggleButtonGroup = ({ size = 'medium', variant = 'default', children,
 };
 ModToggleButtonGroup.displayName = 'ModToggleButtonGroup';
 
-/**
- * ModToggleButtonWithText
- */
-const ModToggleButtonWithText = styles.styled('div')({});
-
 const StyledToolbar = styles.styled(xDataGrid.Toolbar)(({ theme }) => ({
     backgroundColor: designSystemTokens.semanticColors.surfaces.white,
     minHeight: 'auto',
@@ -6254,16 +6239,6 @@ const ModToolbar = ({ children, ...props }) => {
 };
 ModToolbar.displayName = 'ModToolbar';
 
-/**
- * ModTopNav
- */
-const ModTopNav = styles.styled('div')({});
-
-/**
- * ModTourModal
- */
-const ModTourModal = styles.styled('div')({});
-
 /**
  * Custom label component that reads extra slot data from the item model.
  * Used as `slots.label` on the TreeItem.
@@ -6521,8 +6496,6 @@ exports.ModDataGridFiltersButton = ModDataGridFiltersButton;
 exports.ModDataGridHeaderLabel = ModDataGridHeaderLabel;
 exports.ModDataGridSelect = ModDataGridSelect;
 exports.ModDatePicker = ModDatePicker;
-exports.ModDatePickerListItem = ModDatePickerListItem;
-exports.ModDatePickerMenu = ModDatePickerMenu;
 exports.ModDivider = ModDivider;
 exports.ModDot = ModDot;
 exports.ModDownloadToast = ModDownloadToast;
@@ -6564,7 +6537,6 @@ exports.ModProgressCell = ModProgressCell;
 exports.ModProgressbar = ModProgressbar;
 exports.ModQuickFilter = ModQuickFilter;
 exports.ModRadio = ModRadio;
-exports.ModRadioButtonWithText = ModRadioButtonWithText;
 exports.ModRipplingDot = ModRipplingDot;
 exports.ModSearchChip = ModSearchChip;
 exports.ModSelect = ModSelect;
@@ -6584,11 +6556,8 @@ exports.ModToastButton = ModToastButton;
 exports.ModToggle = ModToggle;
 exports.ModToggleButton = ModToggleButton;
 exports.ModToggleButtonGroup = ModToggleButtonGroup;
-exports.ModToggleButtonWithText = ModToggleButtonWithText;
 exports.ModToolbar = ModToolbar;
 exports.ModTooltip = ModTooltip;
-exports.ModTopNav = ModTopNav;
-exports.ModTourModal = ModTourModal;
 exports.ModTreeItem = ModTreeItem;
 exports.ModTreeView = ModTreeView;
 exports.ModTypologyButton = StyledToggleButton;