@moderneinc/design-system-components 6.0.1-next.96e38b → 6.0.1-next.b078e1

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -1,6 +1,5 @@
-import { type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
+import { type GridSlotProps, type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
 import type React from 'react';
-import { ModSelect } from '../Select/Select';
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
@@ -17,18 +16,19 @@ export declare const ModDataGridFilterPanelRemoveAllIcon: {
     (): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export type ModDataGridSelectProps = GridSlotProps['baseSelect'];
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
  *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-export declare const ModDataGridSelect: typeof ModSelect & GridSlotsComponent["baseSelect"];
+export declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GridColumnsPanelProps, GridDensity as GridDensity$1, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentPropsWithoutRef, ComponentType, FunctionComponent } from 'react';
-import { GridDensity, GridFilterPanel, GridSlotsComponent, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
+import { GridDensity, GridFilterPanel, GridSlotsComponent, GridSlotProps, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
 import { AlertProps } from '@mui/material/Alert';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import { LinkProps } from '@mui/material/Link';
@@ -13,7 +13,6 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { CardProps } from '@mui/material/Card';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
@@ -31,6 +30,7 @@ import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { RadioProps } from '@mui/material/Radio';
 import * as _mui_material from '@mui/material';
 import { BoxProps as BoxProps$1 } from '@mui/material';
+import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { TableProps } from '@mui/material/Table';
 import * as _mui_system from '@mui/system';
@@ -1033,118 +1033,6 @@ declare namespace ModDataGridColumnsButton {
     var displayName: string;
 }
 
-type ModMenuItemOwnProps = {
-    /**
-     * Optional icon to display on the left side
-     * Note: Cannot be directly mapped from Figma (ReactNode)
-     */
-    icon?: ReactNode;
-    /**
-     * Optional keyboard shortcut to display on the right side
-     * @example "⌘+P" or "Ctrl+K"
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    shortcut?: string;
-    /**
-     * Optional secondary text to display next to the primary label
-     * @example "@username" or supporting text
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    secondaryText?: string;
-    /**
-     * 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`. 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`. 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)
-     */
-    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;
-};
-/**
- * ModMenuItem - Menu item component based on MUI MenuItem
- *
- * @example
- * ```tsx
- * // With icon and shortcut
- * <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
- *   View profile
- * </ModMenuItem>
- *
- * // With secondary text (user list pattern from Figma node 4305:41844)
- * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
- * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
- *
- * // Disabled state
- * <ModMenuItem disabled>Disabled item</ModMenuItem>
- *
- * // As an anchor — `href` alone is enough
- * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
- *
- * // External link
- * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
- *   Documentation
- * </ModMenuItem>
- *
- * // 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, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
-declare namespace ModMenuItem {
-    var displayName: string;
-}
-
-type ModSelectProps = SelectProps;
-/**
- * ModSelect - Select component with design system styling
- *
- * A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
- * and ModMenu/ModMenuItem for the dropdown list.
- *
- * @example
- * ```tsx
- * import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
- *
- * <ModSelect value={value} onChange={handleChange}>
- *   <ModSelectOption value="option1">Option 1</ModSelectOption>
- *   <ModSelectOption value="option2">Option 2</ModSelectOption>
- * </ModSelect>
- * ```
- */
-declare const ModSelect: {
-    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
@@ -1161,18 +1049,19 @@ declare const ModDataGridFilterPanelRemoveAllIcon: {
     (): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+type ModDataGridSelectProps = GridSlotProps['baseSelect'];
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
  *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-declare const ModDataGridSelect: typeof ModSelect & GridSlotsComponent["baseSelect"];
+declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
@@ -1913,6 +1802,96 @@ declare const ModMenu: {
     displayName: string;
 };
 
+type ModMenuItemOwnProps = {
+    /**
+     * Optional icon to display on the left side
+     * Note: Cannot be directly mapped from Figma (ReactNode)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional keyboard shortcut to display on the right side
+     * @example "⌘+P" or "Ctrl+K"
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    shortcut?: string;
+    /**
+     * Optional secondary text to display next to the primary label
+     * @example "@username" or supporting text
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    secondaryText?: string;
+    /**
+     * 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`. 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`. 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)
+     */
+    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;
+};
+/**
+ * ModMenuItem - Menu item component based on MUI MenuItem
+ *
+ * @example
+ * ```tsx
+ * // With icon and shortcut
+ * <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ *   View profile
+ * </ModMenuItem>
+ *
+ * // With secondary text (user list pattern from Figma node 4305:41844)
+ * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
+ * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
+ *
+ * // Disabled state
+ * <ModMenuItem disabled>Disabled item</ModMenuItem>
+ *
+ * // As an anchor — `href` alone is enough
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
+ *
+ * // External link
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ *   Documentation
+ * </ModMenuItem>
+ *
+ * // 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, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModMenuItem {
+    var displayName: string;
+}
+
 interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
     api?: GridRenderCellParams['api'];
     children: ReactNode;
@@ -2589,6 +2568,28 @@ declare const ModSearchChip: {
     displayName: string;
 };
 
+type ModSelectProps = SelectProps;
+/**
+ * ModSelect - Select component with design system styling
+ *
+ * A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
+ * and ModMenu/ModMenuItem for the dropdown list.
+ *
+ * @example
+ * ```tsx
+ * import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
+ *
+ * <ModSelect value={value} onChange={handleChange}>
+ *   <ModSelectOption value="option1">Option 1</ModSelectOption>
+ *   <ModSelectOption value="option2">Option 2</ModSelectOption>
+ * </ModSelect>
+ * ```
+ */
+declare const ModSelect: {
+    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModSelectFieldOption {
     value: string | number;
     label: ReactNode;
@@ -3217,4 +3218,4 @@ declare module '@mui/x-data-grid-pro' {
 declare const version: string
 
 export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToolbar, ModTooltip, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDataGridSelectProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography } from '@moderneinc/design-system-tokens';
 import Box from '@mui/material/Box';
-import { styled, alpha } from '@mui/material/styles';
+import { styled, useTheme, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import MuiAvatar from '@mui/material/Avatar';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -9,7 +9,7 @@ import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import { BadgeInfo, WifiOff, TriangleAlert, CircleAlert, CircleCheckBig, X, ChevronRight, Square, SquareCheck, SquareMinus, Search, ChevronDown, Plus, Trash2, ArrowUp, ArrowDown, ChevronsUpDown, Columns3, ListFilter, HelpCircle, CalendarDays, Minus, ChevronLeft, AlertCircle, ChevronUp } from 'lucide-react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { useState, useRef, useCallback, useMemo, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement, forwardRef } from 'react';
+import React, { useState, useRef, useCallback, useMemo, forwardRef, useEffect, createContext, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -24,9 +24,11 @@ import Divider from '@mui/material/Divider';
 import InputAdornment, { inputAdornmentClasses } from '@mui/material/InputAdornment';
 import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
 import TextField from '@mui/material/TextField';
+import FormControl from '@mui/material/FormControl';
 import { formLabelClasses } from '@mui/material/FormLabel';
-import InputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
+import MuiInputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
 import MuiSelect, { selectClasses } from '@mui/material/Select';
+import { mergeSlotProps, useForkRef } from '@mui/material/utils';
 import MenuItem, { menuItemClasses } from '@mui/material/MenuItem';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
@@ -41,7 +43,6 @@ import { startOfDay, endOfDay, subDays, startOfMonth, subMonths, endOfMonth, sta
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import FormControl from '@mui/material/FormControl';
 import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
 import ListItemButton, { listItemButtonClasses } from '@mui/material/ListItemButton';
 import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon';
@@ -1932,26 +1933,23 @@ const StyledSelect = styled(MuiSelect)({
  * </ModSelect>
  * ```
  */
-const ModSelect = (props) => {
-    const paperSlotProps = props.MenuProps?.slotProps?.paper;
-    const incomingPaperSx = typeof paperSlotProps === 'function' ? undefined : paperSlotProps?.sx;
-    return (jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
-            ...props.MenuProps,
-            slotProps: {
-                ...props.MenuProps?.slotProps,
-                paper: {
-                    sx: {
-                        backgroundColor: semanticColors.surfaces.white,
-                        borderRadius: `${borderRadius.s}px`,
-                        border: `1px solid ${semanticColors.border.primary}`,
-                        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
-                        marginTop: 1,
-                        ...incomingPaperSx,
-                    },
+const ModSelect = (props) => (jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
+        ...props.MenuProps,
+        slotProps: {
+            ...props.MenuProps?.slotProps,
+            // Caller wins, caller `sx` last — and unlike a spread, handles `sx` arrays and the
+            // callback form of `slotProps.paper`.
+            paper: mergeSlotProps(props.MenuProps?.slotProps?.paper, {
+                sx: {
+                    backgroundColor: semanticColors.surfaces.white,
+                    borderRadius: `${borderRadius.s}px`,
+                    border: `1px solid ${semanticColors.border.primary}`,
+                    boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
+                    marginTop: 1,
                 },
-            },
-        } }));
-};
+            }),
+        },
+    } }));
 ModSelect.displayName = 'ModSelect';
 
 /**
@@ -2075,6 +2073,10 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     [`& .${gridClasses.filterForm} .${inputLabelClasses.root}.${inputLabelClasses.focused}`]: {
         color: semanticColors.typography.input.label,
     },
+    // Reclaim the 16px MUI's standard Input reserves for a floating label; these sit statically.
+    [`& .${gridClasses.filterForm} label + .${inputBaseClasses.root}`]: {
+        marginTop: 0,
+    },
     // Remove fieldset/legend
     '& fieldset': {
         display: 'none',
@@ -2137,17 +2139,36 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
 });
 StyledGridFilterPanel.displayName = 'StyledGridFilterPanel';
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
- *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-const ModDataGridSelect = ModSelect;
+const ModDataGridSelect = forwardRef(function ModDataGridSelect({ id, label, labelId, disabled, fullWidth, size, style, slotProps, material, onChange, onClose, onKeyDown, ...rest }, ref) {
+    const theme = useTheme();
+    const hasLabel = label !== undefined;
+    // The grid omits `size` in edit cells, where MUI's adapter falls back to the theme's TextField
+    // default — without this the select renders medium beside small fields.
+    const computedSize = size ?? theme.components?.MuiTextField?.defaultProps?.size;
+    return (jsxs(FormControl
+    // Bridges Ref<HTMLElement> to FormControl's Ref<HTMLDivElement>; neither direct form typechecks.
+    , { 
+        // Bridges Ref<HTMLElement> to FormControl's Ref<HTMLDivElement>; neither direct form typechecks.
+        ref: useForkRef(ref), disabled: disabled, fullWidth: fullWidth, size: computedSize, style: style, children: [hasLabel && (jsx(MuiInputLabel, { id: labelId, htmlFor: id, variant: "standard", shrink: true, children: label })), jsx(ModSelect, { ...rest, id: id, label: label, labelId: hasLabel ? labelId : undefined, size: computedSize, displayEmpty: true, inputProps: slotProps?.htmlInput, 
+                // The grid types this as a ChangeEventHandler; MUI emits a SelectChangeEvent. MUI's own
+                // adapter forwards it unchanged, so the divergence is only in the type.
+                onChange: onChange, MenuProps: {
+                    // Must stay absent when absent: MUI spreads MenuProps over its own `onClose: handleClose`,
+                    // so an explicit `undefined` stops Escape and backdrop click closing the menu.
+                    ...(onClose && { onClose }),
+                    slotProps: { paper: { onKeyDown } },
+                }, ...material })] }));
+});
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
@@ -3565,7 +3586,7 @@ const StyledFormControl = styled(FormControl, {
         width: '100%',
     };
 });
-const StyledInputLabel = styled(InputLabel, {
+const StyledInputLabel = styled(MuiInputLabel, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'infoIcon',
 })(({ theme }) => ({
     position: 'static',