@mui/x-date-pickers 8.0.0-alpha.4 → 8.0.0-alpha.5

package/CHANGELOG.md

@@ -5,6 +5,108 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-alpha.5
+
+_Dec 19, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Korean (ko-KR) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@good-jinu, @k-rajat19.
+Following are all team members who have contributed to this release:
+@alexfauquette, @cherniavskii, @flaviendelangle, @KenanYusuf, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`.
+
+  - For `.root` element, use `slotProps.root`.
+  - For `.main` element (the one with `role="grid"`), use `slotProps.main`.
+
+- `detailPanelExpandedRowIds` and `onDetailPanelExpandedRowIdsChange` props use a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array:
+
+  ```diff
+  -detailPanelExpandedRowIds?: GridRowId[];
+  +detailPanelExpandedRowIds?: Set<GridRowId>;
+
+  -onDetailPanelExpandedRowIdsChange?: (ids: GridRowId[], details: GridCallbackDetails) => void;
+  +onDetailPanelExpandedRowIdsChange?: (ids: Set<GridRowId>, details: GridCallbackDetails) => void;
+  ```
+
+- `apiRef.current.getExpandedDetailPanels` and `apiRef.current.setExpandedDetailPanels` methods receive and return a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowIdsSelector` returns a [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) instead of an array.
+- `gridDetailPanelExpandedRowsHeightCacheSelector` was removed.
+
+#### `@mui/x-data-grid@8.0.0-alpha.5`
+
+- [DataGrid] Consider `columnGroupHeaderHeight` prop in `getTotalHeaderHeight` method (#15915) @k-rajat19
+- [DataGrid] Fix autosizing with virtualized columns (#15116) @k-rajat19
+- [DataGrid] Move `<Badge />` to leaf import (#15879) @romgrk
+- [DataGrid] Move `<ListItemText />` and `<ListItemIcon />` to leaf import (#15869) @romgrk
+- [DataGrid] Remove the Joy UI demo (#15913) @romgrk
+- [DataGrid] Update quick filter input variant (#15909) @KenanYusuf
+- [DataGrid] Use `slotProps` to forward props to `.main` and `.root` elements (#15870) @MBilalShafi
+- [l10n] Improve Korean(ko-KR) locale (#15878) @good-jinu
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.5`, plus:
+
+- [DataGridPro] Use `Set` for `detailPanelExpandedRowIds` (#15835) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.5`.
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- The `<PickersMonth />` component has been moved inside the Month Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#month-calendar).
+
+- The `<PickersYear />` component has been moved inside the Year Calendar component — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#year-calendar).
+
+#### `@mui/x-date-pickers@8.0.0-alpha.5`
+
+- [pickers] Add verification to disable skipped hours in spring forward DST (#15849) @flaviendelangle
+- [pickers] Remove `PickersMonth` and `PickersYear` from the theme and remove the `div` wrapping each button (#15806) @flaviendelangle
+- [pickers] Use the new `ownerState` object on the `<PickersTextField />` component (#15863) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.5`
+
+- [charts] Fix `<ScatterChart />` value type if `null` (#15917) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.5`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.5`
+
+No changes since `@mui/x-tree-view-pro@v8.0.0-alpha.4`.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.5`.
+
+### Core
+
+- [code-infra] Remove `@mui/material-nextjs` dependency (#15925) @LukasTy
+
 ## 8.0.0-alpha.4
 
 _Dec 13, 2024_
@@ -39,6 +141,7 @@ Following are all team members who have contributed to this release:
   -const output = useGridSelector(apiRef, selector, equals)
   +const output = useGridSelector(apiRef, selector, arguments, equals)
   ```
+
 - The default variant for text fields and selects in the filter panel has been changed to `outlined`.
 - The "row spanning" feature is now stable.
   ```diff

package/MonthCalendar/MonthCalendar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { MonthCalendarProps } from './MonthCalendar.types';
-export declare function useMonthCalendarDefaultizedProps(props: MonthCalendarProps, name: string): DefaultizedProps<MonthCalendarProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast'>;
+export declare function useMonthCalendarDefaultizedProps(props: MonthCalendarProps, name: string): DefaultizedProps<MonthCalendarProps, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast' | 'monthsPerRow'>;
 type MonthCalendarComponent = ((props: MonthCalendarProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/MonthCalendar/MonthCalendar.js

@@ -2,14 +2,15 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useRtl } from '@mui/system/RtlProvider';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { PickersMonth } from "./PickersMonth.js";
+import { MonthCalendarButton } from "./MonthCalendarButton.js";
 import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
 import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
 import { applyDefaultDate, getMonthsInYear } from "../internals/utils/date-utils.js";
@@ -36,6 +37,7 @@ export function useMonthCalendarDefaultizedProps(props, name) {
     disableFuture: false,
     disablePast: false
   }, themeProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -43,15 +45,32 @@ export function useMonthCalendarDefaultizedProps(props, name) {
 const MonthCalendarRoot = styled('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'monthsPerRow'
 })({
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch',
-  padding: '0 4px',
+  justifyContent: 'space-evenly',
+  rowGap: 16,
+  padding: '8px 0',
   width: DIALOG_WIDTH,
   // avoid padding increasing width over defined
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  variants: [{
+    props: {
+      monthsPerRow: 3
+    },
+    style: {
+      columnGap: 24
+    }
+  }, {
+    props: {
+      monthsPerRow: 4
+    },
+    style: {
+      columnGap: 0
+    }
+  }]
 });
 /**
  * Demos:
@@ -65,6 +84,7 @@ const MonthCalendarRoot = styled('div', {
 export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
+      autoFocus,
       className,
       classes: classesProp,
       value: valueProp,
@@ -78,11 +98,10 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       onChange,
       shouldDisableMonth,
       readOnly,
-      autoFocus = false,
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3,
+      monthsPerRow,
       timezone: timezoneProp,
       gridLabelId,
       slots,
@@ -209,7 +228,8 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     className: clsx(classes.root, className),
     ownerState: ownerState,
     role: "radiogroup",
-    "aria-labelledby": gridLabelId
+    "aria-labelledby": gridLabelId,
+    monthsPerRow: monthsPerRow
   }, other, {
     children: getMonthsInYear(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
@@ -217,7 +237,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
       const monthLabel = utils.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
-      return /*#__PURE__*/_jsx(PickersMonth, {
+      return /*#__PURE__*/_jsx(MonthCalendarButton, {
         selected: isSelected,
         value: monthNumber,
         onClick: handleMonthSelection,
@@ -229,9 +249,9 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
-        monthsPerRow: monthsPerRow,
         slots: slots,
         slotProps: slotProps,
+        classes: classesProp,
         children: monthText
       }, monthText);
     })

package/MonthCalendar/MonthCalendar.types.d.ts

@@ -6,7 +6,7 @@ import { MonthCalendarClasses } from './monthCalendarClasses';
 import { BaseDateValidationProps, MonthValidationProps } from '../internals/models/validation';
 import { PickerOwnerState, PickerValidDate, TimezoneProps } from '../models';
 import { FormProps } from '../internals/models/formProps';
-export interface PickerMonthOwnerState extends PickerOwnerState {
+export interface MonthButtonOwnerState extends PickerOwnerState {
     isMonthSelected: boolean;
     isMonthDisabled: boolean;
 }
@@ -20,7 +20,7 @@ export interface MonthCalendarSlots {
 export interface MonthCalendarSlotProps {
     monthButton?: SlotComponentPropsFromProps<React.HTMLAttributes<HTMLButtonElement> & {
         sx: SxProps;
-    }, {}, PickerMonthOwnerState>;
+    }, {}, MonthButtonOwnerState>;
 }
 export interface ExportedMonthCalendarProps {
     /**

package/MonthCalendar/MonthCalendarButton.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { MonthCalendarSlotProps, MonthCalendarSlots } from './MonthCalendar.types';
+import { MonthCalendarClasses } from './monthCalendarClasses';
+export interface MonthCalendarButtonProps {
+    value: number;
+    tabIndex: number;
+    selected: boolean;
+    disabled: boolean;
+    autoFocus: boolean;
+    classes: Partial<MonthCalendarClasses> | undefined;
+    slots: MonthCalendarSlots | undefined;
+    slotProps: MonthCalendarSlotProps | undefined;
+    'aria-current': React.AriaAttributes['aria-current'];
+    'aria-label': React.AriaAttributes['aria-label'];
+    children: React.ReactNode;
+    onClick: (event: React.MouseEvent, month: number) => void;
+    onKeyDown: (event: React.KeyboardEvent, month: number) => void;
+    onFocus: (event: React.FocusEvent, month: number) => void;
+    onBlur: (event: React.FocusEvent, month: number) => void;
+}
+/**
+ * @ignore - do not document.
+ */
+export declare const MonthCalendarButton: React.NamedExoticComponent<MonthCalendarButtonProps>;

package/MonthCalendar/{PickersMonth.js → MonthCalendarButton.js}

@@ -1,47 +1,27 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
 import * as React from 'react';
-import clsx from 'clsx';
-import { styled, alpha, useThemeProps } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { getPickersMonthUtilityClass, pickersMonthClasses } from "./pickersMonthClasses.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { getMonthCalendarUtilityClass, monthCalendarClasses } from "./monthCalendarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root'],
-    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
+    button: ['button', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
-  return composeClasses(slots, getPickersMonthUtilityClass, classes);
+  return composeClasses(slots, getMonthCalendarUtilityClass, classes);
 };
-const PickersMonthRoot = styled('div', {
-  name: 'MuiPickersMonth',
-  slot: 'Root',
-  overridesResolver: (_, styles) => [styles.root]
-})({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexBasis: '33.3%',
-  variants: [{
-    props: {
-      monthsPerRow: 4
-    },
-    style: {
-      flexBasis: '25%'
-    }
-  }]
-});
-const MonthCalendarButton = styled('button', {
-  name: 'MuiPickersMonth',
-  slot: 'MonthButton',
-  overridesResolver: (_, styles) => [styles.monthButton, {
-    [`&.${pickersMonthClasses.disabled}`]: styles.disabled
+const DefaultMonthButton = styled('button', {
+  name: 'MuiMonthCalendar',
+  slot: 'Button',
+  overridesResolver: (_, styles) => [styles.button, {
+    [`&.${monthCalendarClasses.disabled}`]: styles.disabled
   }, {
-    [`&.${pickersMonthClasses.selected}`]: styles.selected
+    [`&.${monthCalendarClasses.selected}`]: styles.selected
   }]
 })(({
   theme
@@ -51,7 +31,6 @@ const MonthCalendarButton = styled('button', {
   border: 0,
   outline: 0
 }, theme.typography.subtitle1, {
-  margin: '8px 0',
   height: 36,
   width: 72,
   borderRadius: 18,
@@ -66,10 +45,10 @@ const MonthCalendarButton = styled('button', {
     cursor: 'auto',
     pointerEvents: 'none'
   },
-  [`&.${pickersMonthClasses.disabled}`]: {
+  [`&.${monthCalendarClasses.disabled}`]: {
     color: (theme.vars || theme).palette.text.secondary
   },
-  [`&.${pickersMonthClasses.selected}`]: {
+  [`&.${monthCalendarClasses.selected}`]: {
     color: (theme.vars || theme).palette.primary.contrastText,
     backgroundColor: (theme.vars || theme).palette.primary.main,
     '&:focus, &:hover': {
@@ -81,29 +60,17 @@ const MonthCalendarButton = styled('button', {
 /**
  * @ignore - do not document.
  */
-export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProps) {
-  const props = useThemeProps({
-    props: inProps,
-    name: 'MuiPickersMonth'
-  });
+export const MonthCalendarButton = /*#__PURE__*/React.memo(function MonthCalendarButton(props) {
   const {
       autoFocus,
-      className,
       classes: classesProp,
-      children,
-      disabled = false,
-      selected = false,
+      disabled,
+      selected,
       value,
-      tabIndex,
       onClick,
       onKeyDown,
       onFocus,
       onBlur,
-      'aria-current': ariaCurrent,
-      'aria-label': ariaLabel
-      // We don't want to forward this prop to the root element
-      ,
-
       slots,
       slotProps
     } = props,
@@ -125,32 +92,24 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       ref.current?.focus();
     }
   }, [autoFocus]);
-  const MonthButton = slots?.monthButton ?? MonthCalendarButton;
+  const MonthButton = slots?.monthButton ?? DefaultMonthButton;
   const monthButtonProps = useSlotProps({
     elementType: MonthButton,
     externalSlotProps: slotProps?.monthButton,
+    externalForwardedProps: other,
     additionalProps: {
-      children,
       disabled,
-      tabIndex,
       ref,
       type: 'button',
       role: 'radio',
-      'aria-current': ariaCurrent,
       'aria-checked': selected,
-      'aria-label': ariaLabel,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
     ownerState,
-    className: classes.monthButton
+    className: classes.button
   });
-  return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
-  }));
+  return /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps));
 });

package/MonthCalendar/index.d.ts

@@ -2,6 +2,3 @@ export { MonthCalendar } from './MonthCalendar';
 export type { MonthCalendarProps, MonthCalendarSlots, MonthCalendarSlotProps, } from './MonthCalendar.types';
 export { monthCalendarClasses, getMonthCalendarUtilityClass } from './monthCalendarClasses';
 export type { MonthCalendarClasses, MonthCalendarClassKey } from './monthCalendarClasses';
-export { pickersMonthClasses } from './pickersMonthClasses';
-export type { PickersMonthClassKey, PickersMonthClasses } from './pickersMonthClasses';
-export type { ExportedPickersMonthProps } from './PickersMonth';

package/MonthCalendar/index.js

@@ -1,3 +1,2 @@
 export { MonthCalendar } from "./MonthCalendar.js";
-export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
-export { pickersMonthClasses } from "./pickersMonthClasses.js";
+export { monthCalendarClasses, getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";

package/MonthCalendar/monthCalendarClasses.d.ts

@@ -2,6 +2,12 @@ export declare function getMonthCalendarUtilityClass(slot: string): string;
 export interface MonthCalendarClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** Styles applied to the button element that represents a single month */
+    button: string;
+    /** Styles applied to a disabled button element. */
+    disabled: string;
+    /** Styles applied to a selected button element. */
+    selected: string;
 }
 export type MonthCalendarClassKey = keyof MonthCalendarClasses;
-export declare const monthCalendarClasses: Record<"root", string>;
+export declare const monthCalendarClasses: Record<keyof MonthCalendarClasses, string>;

package/MonthCalendar/monthCalendarClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getMonthCalendarUtilityClass(slot) {
   return generateUtilityClass('MuiMonthCalendar', slot);
 }
-export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root']);
+export const monthCalendarClasses = generateUtilityClasses('MuiMonthCalendar', ['root', 'button', 'disabled', 'selected']);

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -189,6 +189,9 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
         {
           const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({

package/PickersSectionList/PickersSectionList.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "elements", "sectionListRef"];
+const _excluded = ["slots", "slotProps", "elements", "sectionListRef", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
@@ -10,6 +10,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { getPickersSectionListUtilityClass, pickersSectionListClasses } from "./pickersSectionListClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const PickersSectionListRoot = styled('div', {
   name: 'MuiPickersSectionList',
@@ -38,10 +39,7 @@ export const PickersSectionListSectionContent = styled('span', {
 })({
   outline: 'none'
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     section: ['section'],
@@ -56,13 +54,16 @@ function PickersSection(props) {
     element,
     classes
   } = props;
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const Section = slots?.section ?? PickersSectionListSection;
   const sectionProps = useSlotProps({
     elementType: Section,
     externalSlotProps: slotProps?.section,
     externalForwardedProps: element.container,
     className: classes.section,
-    ownerState: {}
+    ownerState
   });
   const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
   const sectionContentProps = useSlotProps({
@@ -73,24 +74,24 @@ function PickersSection(props) {
       suppressContentEditableWarning: true
     },
     className: classes.sectionContent,
-    ownerState: {}
+    ownerState
   });
   const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
   const sectionSeparatorBeforeProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.before,
-    ownerState: {
-      position: 'before'
-    }
+    ownerState: _extends({}, ownerState, {
+      separatorPosition: 'before'
+    })
   });
   const sectionSeparatorAfterProps = useSlotProps({
     elementType: SectionSeparator,
     externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.after,
-    ownerState: {
-      position: 'after'
-    }
+    ownerState: _extends({}, ownerState, {
+      separatorPosition: 'after'
+    })
   });
   return /*#__PURE__*/_jsxs(Section, _extends({}, sectionProps, {
     children: [/*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorBeforeProps)), /*#__PURE__*/_jsx(SectionContent, _extends({}, sectionContentProps)), /*#__PURE__*/_jsx(SectionSeparator, _extends({}, sectionSeparatorAfterProps))]
@@ -135,10 +136,14 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
       slots,
       slotProps,
       elements,
-      sectionListRef
+      sectionListRef,
+      classes: classesProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(classesProp);
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
   const getRoot = methodName => {
@@ -186,7 +191,7 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
       suppressContentEditableWarning: true
     },
     className: classes.root,
-    ownerState: {}
+    ownerState
   });
   return /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
     children: rootProps.contentEditable ? elements.map(({

package/PickersSectionList/PickersSectionList.types.d.ts

@@ -1,19 +1,26 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import { PickersSectionListClasses } from './pickersSectionListClasses';
+import { PickerOwnerState } from '../models';
 export interface PickersSectionListSlots {
     root: React.ElementType;
     section: React.ElementType;
     sectionSeparator: React.ElementType;
     sectionContent: React.ElementType;
 }
+export interface PickerSectionSeparatorOwnerState extends PickerOwnerState {
+    /**
+     * The position of the separator.
+     * `before` if the separator is rendered before the section content.
+     * `after` if the separator is rendered after the section content.
+     */
+    separatorPosition: 'before' | 'after';
+}
 export interface PickersSectionListSlotProps {
-    root?: SlotComponentProps<'div', {}, {}>;
-    section?: SlotComponentProps<'span', {}, {}>;
-    sectionSeparator?: SlotComponentProps<'span', {}, {
-        position: 'before' | 'after';
-    }>;
-    sectionContent?: SlotComponentProps<'span', {}, {}>;
+    root?: SlotComponentProps<'div', {}, PickerOwnerState>;
+    section?: SlotComponentProps<'span', {}, PickerOwnerState>;
+    sectionSeparator?: SlotComponentProps<'span', {}, PickerSectionSeparatorOwnerState>;
+    sectionContent?: SlotComponentProps<'span', {}, PickerOwnerState>;
 }
 export interface PickersSectionElement {
     container: React.HTMLAttributes<HTMLSpanElement>;

package/PickersTextField/PickersFilledInput/PickersFilledInput.d.ts

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { PickersInputBaseProps } from '../PickersInputBase';
+import { PickerTextFieldOwnerState } from '../PickersTextField.types';
 export interface PickersFilledInputProps extends PickersInputBaseProps {
     disableUnderline?: boolean;
     hiddenLabel?: boolean;
 }
+export interface PickerFilledInputOwnerState extends PickerTextFieldOwnerState {
+    /**
+     * `true` if the input  has an underline, `false` otherwise.
+     */
+    inputHasUnderline: boolean;
+}
 /**
  * @ignore - internal component.
  */