@mui/x-date-pickers 7.7.1 → 7.8.0

package/AdapterDateFns/AdapterDateFns.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 import defaultLocale from 'date-fns/locale/en-US';
 import { AdapterFormats, AdapterOptions, MuiPickersAdapter } from '../models';
 import { AdapterDateFnsBase } from '../AdapterDateFnsBase';

package/AdapterDateFnsJalali/AdapterDateFnsJalali.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns-jalali" />
 import defaultLocale from 'date-fns-jalali/locale/fa-IR';
 import { AdapterFormats, AdapterOptions, MuiPickersAdapter } from '../models';
 import { AdapterDateFnsBase } from '../AdapterDateFnsBase';

package/CHANGELOG.md

@@ -3,6 +3,105 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.8.0
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce server-side data source for improved server integration in the Data Grid.
+
+  Supports server-side pagination, sorting and filtering on plain and tree data, and automatic caching.
+
+  To enable, provide a `getRows` function to the `unstable_dataSource` prop on the Data Grid component.
+
+  ```tsx
+  const dataSource = {
+    getRows: async (params: GridServerGetRowsParams) => {
+      const data = await fetch(
+        `https://api.example.com/data?${new URLSearchParams({
+          page: params.page,
+          pageSize: params.pageSize,
+          sortModel: JSON.stringify(params.sortModel),
+          filterModel: JSON.stringify(params.filterModel),
+        }).toString()}`,
+      );
+      return {
+        rows: data.rows,
+        totalRows: data.totalRows,
+      };
+    },
+  }
+  <DataGridPro
+    unstable_dataSource={dataSource}
+    {...otherProps}
+  />
+  ```
+
+  See [server-side data documentation](https://mui.com/x/react-data-grid/server-side-data/) for more details.
+
+- 📈 Support Date data on the BarChart component
+- ↕️ Support custom column sort icons on the Data Grid
+- 🖱️ Support modifying the expansion trigger on the Tree View components
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.8.0`
+
+- [DataGrid] Add `columnHeaderSortIcon` slot (#13563) @arminmeh
+- [DataGrid] Fix dimensions lag issue after autosize (#13587) @MBilalShafi
+- [DataGrid] Fix print export failure when `hideFooter` option is set (#13034) @tarunrajput
+
+#### `@mui/x-data-grid-pro@7.8.0` [![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@7.8.0`, plus:
+
+- [DataGridPro] Fix multi-sorting indicator being cut off (#13625) @KenanYusuf
+- [DataGridPro] Server-side tree data support (#12317) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.8.0` [![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@7.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.8.0`
+
+- [fields] Fix section clearing behavior on Android (#13652) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.8.0` [![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@7.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.8.0`
+
+- [charts] Fix line chart props not passing correct event handlers (#13609) @JCQuintas
+- [charts] Support BarChart with `Date` data (#13471) @alexfauquette
+- [charts] Support RTL for y-axis (#13614) @alexfauquette
+- [charts] Use default values instead of non-null assertion to prevent error being thrown (#13637) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.8.0`
+
+- [TreeView] Add `expansionTrigger` prop (#13533) @noraleonte
+- [TreeView] Support experimental features from plugin's dependencies (#13632) @flaviendelangle
+
+### Docs
+
+- [docs] Add callout for `Luxon` `throwOnInvalid` support (#13621) @LukasTy
+- [docs] Add "Overlays" section to the Data Grid documentation (#13624) @KenanYusuf
+
+### Core
+
+- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
+- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle
+
 ## 7.7.1
 
 _Jun 21, 2024_
@@ -44,7 +143,7 @@ Same changes as in `@mui/x-data-grid-pro@7.7.1`.
 - [pickers] Always use the same timezone in the field, the view and the layout components (#13481) @flaviendelangle
 - [pickers] Fix `AdapterDateFnsV3` generated method types (#13464) @alexey-kozlenkov
 - [pickers] Fix controlled `view` behavior (#13552) @LukasTy
-- [TimePicker] Improves RTL verification for the time pickers default views  (#13447) @arthurbalduini
+- [TimePicker] Improves RTL verification for the time pickers default views (#13447) @arthurbalduini
 
 #### `@mui/x-date-pickers-pro@7.7.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 

package/DateCalendar/useCalendarState.d.ts

@@ -22,7 +22,7 @@ interface ChangeFocusedDayPayload<TDate extends PickerValidDate> {
      */
     withoutMonthSwitchingAnimation?: boolean;
 }
-export declare const createCalendarStateReducer: <TDate extends PickerValidDate>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: ReducerAction<'finishMonthSwitchingAnimation'> | ReducerAction<'changeMonth', ChangeMonthPayload<TDate>> | ReducerAction<'changeFocusedDay', ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
+export declare const createCalendarStateReducer: <TDate extends PickerValidDate>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: ReducerAction<"finishMonthSwitchingAnimation"> | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
 interface UseCalendarStateParams<TDate extends PickerValidDate> extends Pick<DateCalendarDefaultizedProps<TDate>, 'value' | 'referenceDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
     timezone: PickersTimezone;

package/DateTimePicker/DateTimePickerToolbar.js

@@ -16,7 +16,7 @@ import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { formatMeridiem } from '../internals/utils/date-utils';
 import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses';
-import { pickersToolbarClasses } from '../internals';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -17,10 +17,12 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { resolveDateTimeFormat, resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
-import { VIEW_HEIGHT, isDatePickerView, isInternalTimeView } from '../internals';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
 import { digitalClockClasses } from '../DigitalClock';
 import { DesktopDateTimePickerLayout } from './DesktopDateTimePickerLayout';
+import { VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {

package/DesktopDateTimePicker/DesktopDateTimePickerLayout.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PickersLayoutProps } from '../PickersLayout';
 import { PickerValidDate } from '../models';
-import { DateOrTimeViewWithMeridiem } from '../internals';
+import { DateOrTimeViewWithMeridiem } from '../internals/models/common';
 /**
  * @ignore - internal component.
  */

package/TimeClock/ClockNumbers.d.ts

@@ -18,7 +18,7 @@ interface GetHourNumbersOptions<TDate extends PickerValidDate> {
  * @ignore - internal component.
  */
 export declare const getHourNumbers: <TDate extends PickerValidDate>({ ampm, value, getClockNumberText, isDisabled, selectedId, utils, }: GetHourNumbersOptions<TDate>) => React.JSX.Element[];
-export declare const getMinutesNumbers: <TDate extends PickerValidDate>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, 'ampm' | 'value'> & {
+export declare const getMinutesNumbers: <TDate extends PickerValidDate>({ utils, value, isDisabled, getClockNumberText, selectedId, }: Omit<GetHourNumbersOptions<TDate>, "ampm" | "value"> & {
     value: number;
 }) => React.JSX.Element[];
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.7.1
+ * @mui/x-date-pickers v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerViewRoot/PickerViewRoot.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PickerViewRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/internals/hooks/date-helpers-hooks.d.ts

@@ -12,5 +12,5 @@ export declare function useNextMonthDisabled<TDate extends PickerValidDate>(mont
 export declare function usePreviousMonthDisabled<TDate extends PickerValidDate>(month: TDate, { disablePast, minDate, timezone, }: Pick<MonthValidationOptions<TDate>, 'disablePast' | 'minDate' | 'timezone'>): boolean;
 export declare function useMeridiemMode<TDate extends PickerValidDate>(date: TDate | null, ampm: boolean | undefined, onChange: PickerOnChangeFn<TDate>, selectionState?: PickerSelectionState): {
     meridiemMode: import("../utils/time-utils").Meridiem | null;
-    handleMeridiemChange: (mode: 'am' | 'pm') => void;
+    handleMeridiemChange: (mode: "am" | "pm") => void;
 };

package/internals/hooks/defaultizedFieldProps.d.ts

@@ -9,11 +9,11 @@ export interface UseDefaultizedTimeFieldBaseProps extends BaseTimeValidationProp
     format?: string;
 }
 export declare const useDefaultizedTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedTimeFieldBaseProps & {
-    ampm?: boolean | undefined;
+    ampm?: boolean;
 }, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedTimeFieldBaseProps>;
 export interface UseDefaultizedDateTimeFieldBaseProps<TDate extends PickerValidDate> extends BaseDateValidationProps<TDate>, BaseTimeValidationProps {
     format?: string;
 }
 export declare const useDefaultizedDateTimeField: <TDate extends PickerValidDate, TKnownProps extends UseDefaultizedDateTimeFieldBaseProps<TDate> & DateTimeValidationProps<TDate> & TimeValidationProps<TDate> & {
-    ampm?: boolean | undefined;
+    ampm?: boolean;
 }, TAllProps extends {}>(props: TKnownProps & TAllProps) => TAllProps & DefaultizedProps<TKnownProps, keyof UseDefaultizedDateTimeFieldBaseProps<any>>;

package/internals/hooks/useField/useField.d.ts

@@ -1,5 +1,5 @@
-import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps } from './useField.types';
+import { UseFieldParams, UseFieldResponse, UseFieldCommonForwardedProps, UseFieldInternalProps, UseFieldForwardedProps } from './useField.types';
 import { PickerValidDate, FieldSection } from '../../../models';
-export declare const useField: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & (TEnableAccessibleFieldDOMStructure extends false ? import("./useField.types").UseFieldV6ForwardedProps : import("./useField.types").UseFieldV7ForwardedProps), TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
-    minutesStep?: number | undefined;
+export declare const useField: <TValue, TDate extends PickerValidDate, TSection extends FieldSection, TEnableAccessibleFieldDOMStructure extends boolean, TForwardedProps extends UseFieldCommonForwardedProps & UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure>, TInternalProps extends UseFieldInternalProps<any, any, any, TEnableAccessibleFieldDOMStructure, any> & {
+    minutesStep?: number;
 }>(params: UseFieldParams<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TForwardedProps, TInternalProps>) => UseFieldResponse<TEnableAccessibleFieldDOMStructure, TForwardedProps>;

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,6 +1,6 @@
 import { AvailableAdjustKeyCode, FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from './useField.types';
 import { FieldSectionType, FieldValueType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections } from '../../../models';
-export declare const getDateSectionConfigFromFormatToken: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, 'type' | 'contentType'> & {
+export declare const getDateSectionConfigFromFormatToken: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
     maxLength: number | undefined;
 };
 export declare const getDaysInWeekStr: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, format: string) => string[];
@@ -16,11 +16,11 @@ export declare const isStringNumber: (valueStr: string, localizedDigits: string[
  * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
  */
 export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, localizedDigits: string[], section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
+export declare const cleanDigitSectionValue: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, localizedDigits: string[], section: Pick<FieldSection, "format" | "type" | "contentType" | "hasLeadingZerosInFormat" | "hasLeadingZerosInInput" | "maxLength">) => string;
 export declare const adjustSectionValue: <TDate extends PickerValidDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, localizedDigits: string[], activeDate: TDate | null, stepsAttributes?: {
     minutesStep?: number;
 }) => string;
-export declare const getSectionVisibleValue: (section: FieldSection, target: 'input-rtl' | 'input-ltr' | 'non-input', localizedDigits: string[]) => string;
+export declare const getSectionVisibleValue: (section: FieldSection, target: "input-rtl" | "input-ltr" | "non-input", localizedDigits: string[]) => string;
 export declare const changeSectionValueFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
 /**

package/internals/hooks/useField/useFieldV6TextField.js

@@ -103,6 +103,13 @@ export const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
+        setTimeout(() => {
+          // handle case when the selection is not updated correctly
+          // could happen on Android
+          if (inputRef.current && inputRef.current === getActiveElement(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+            interactions.syncSelectionToDOM();
+          }
+        });
       }
 
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -265,10 +272,9 @@ export const useFieldV6TextField = params => {
     if (keyPressed.length === 0) {
       if (isAndroid()) {
         setTempAndroidValueStr(valueStr);
-      } else {
-        resetCharacterQuery();
-        clearActiveSection();
       }
+      resetCharacterQuery();
+      clearActiveSection();
       return;
     }
     applyCharacterEditing({

package/internals/hooks/usePicker/usePickerValue.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldChangeHandlerContext, UseFieldInternalProps } from '../useField';
 import { InferError, Validator } from '../useValidation';
 import { UseFieldValidationProps } from '../useField/useField.types';

package/internals/utils/date-utils.d.ts

@@ -17,7 +17,7 @@ export declare const applyDefaultDate: <TDate extends PickerValidDate>(utils: Mu
 export declare const areDatesEqual: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, a: TDate, b: TDate) => boolean;
 export declare const getMonthsInYear: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, year: TDate) => TDate[];
 export declare const getTodayDate: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, timezone: PickersTimezone, valueType?: FieldValueType) => TDate;
-export declare const formatMeridiem: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, meridiem: 'am' | 'pm') => string;
+export declare const formatMeridiem: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, meridiem: "am" | "pm") => string;
 export declare const isDatePickerView: (view: DateOrTimeViewWithMeridiem) => view is DateView;
 export declare const resolveDateFormat: <TDate extends PickerValidDate>(utils: MuiPickersAdapter<TDate>, { format, views }: {
     format?: string;

package/internals/utils/views.d.ts

@@ -1,6 +1,6 @@
 import { DateOrTimeView } from '../../models';
 import { DateOrTimeViewWithMeridiem } from '../models';
-export declare const areViewsEqual: <TView extends DateOrTimeView>(views: ReadonlyArray<DateOrTimeView>, expectedViews: TView[]) => views is readonly TView[];
+export declare const areViewsEqual: <TView extends DateOrTimeView>(views: ReadonlyArray<DateOrTimeView>, expectedViews: TView[]) => views is ReadonlyArray<TView>;
 export declare const applyDefaultViewProps: <TView extends DateOrTimeViewWithMeridiem>({ openTo, defaultOpenTo, views, defaultViews, }: {
     openTo: TView | undefined;
     defaultOpenTo: TView;

package/internals/utils/warning.d.ts

@@ -1,4 +1,4 @@
 export declare const buildDeprecatedPropsWarning: (message: string | string[]) => (deprecatedProps: {
     [key: string]: any;
 }) => void;
-export declare const buildWarning: (message: string | string[], gravity?: 'warning' | 'error') => () => void;
+export declare const buildWarning: (message: string | string[], gravity?: "warning" | "error") => () => void;

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -16,7 +16,7 @@ import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { formatMeridiem } from '../internals/utils/date-utils';
 import { pickersToolbarTextClasses } from '../internals/components/pickersToolbarTextClasses';
-import { pickersToolbarClasses } from '../internals';
+import { pickersToolbarClasses } from '../internals/components/pickersToolbarClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -17,10 +17,12 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { resolveDateTimeFormat, resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
-import { VIEW_HEIGHT, isDatePickerView, isInternalTimeView } from '../internals';
 import { multiSectionDigitalClockClasses, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
 import { digitalClockClasses } from '../DigitalClock';
 import { DesktopDateTimePickerLayout } from './DesktopDateTimePickerLayout';
+import { VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const rendererInterceptor = function rendererInterceptor(inViewRenderers, popperView, rendererProps) {
   const {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.7.1
+ * @mui/x-date-pickers v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/hooks/useField/useFieldV6TextField.js

@@ -103,6 +103,13 @@ export const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
+        setTimeout(() => {
+          // handle case when the selection is not updated correctly
+          // could happen on Android
+          if (inputRef.current && inputRef.current === getActiveElement(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+            interactions.syncSelectionToDOM();
+          }
+        });
       }
 
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -265,10 +272,9 @@ export const useFieldV6TextField = params => {
     if (keyPressed.length === 0) {
       if (isAndroid()) {
         setTempAndroidValueStr(valueStr);
-      } else {
-        resetCharacterQuery();
-        clearActiveSection();
       }
+      resetCharacterQuery();
+      clearActiveSection();
       return;
     }
     applyCharacterEditing({

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -22,7 +22,7 @@ var _dateHelpersHooks = require("../internals/hooks/date-helpers-hooks");
 var _dimensions = require("../internals/constants/dimensions");
 var _dateUtils = require("../internals/utils/date-utils");
 var _pickersToolbarTextClasses = require("../internals/components/pickersToolbarTextClasses");
-var _internals = require("../internals");
+var _pickersToolbarClasses = require("../internals/components/pickersToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "disabled", "readOnly", "toolbarVariant", "toolbarTitle", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -61,7 +61,7 @@ const DateTimePickerToolbarRoot = (0, _styles.styled)(_PickersToolbar.PickersToo
     },
     style: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-      [`& .${_internals.pickersToolbarClasses.content} .${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
+      [`& .${_pickersToolbarClasses.pickersToolbarClasses.content} .${_pickersToolbarTextClasses.pickersToolbarTextClasses.selected}`]: {
         color: (theme.vars || theme).palette.primary.main,
         fontWeight: theme.typography.fontWeightBold
       }

package/node/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -23,10 +23,12 @@ var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _extractValidationProps = require("../internals/utils/validation/extractValidationProps");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
 var _timeViewRenderers = require("../timeViewRenderers");
-var _internals = require("../internals");
 var _MultiSectionDigitalClock = require("../MultiSectionDigitalClock");
 var _DigitalClock = require("../DigitalClock");
 var _DesktopDateTimePickerLayout = require("./DesktopDateTimePickerLayout");
+var _dimensions = require("../internals/constants/dimensions");
+var _timeUtils = require("../internals/utils/time-utils");
+var _dateUtils = require("../internals/utils/date-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["openTo", "focusedView", "timeViewsCount"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -45,16 +47,16 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
         borderBottom: 0
       },
       [`&.${_MultiSectionDigitalClock.multiSectionDigitalClockClasses.root}, .${_MultiSectionDigitalClock.multiSectionDigitalClockSectionClasses.root}, &.${_DigitalClock.digitalClockClasses.root}`]: {
-        maxHeight: _internals.VIEW_HEIGHT
+        maxHeight: _dimensions.VIEW_HEIGHT
       }
     }]
   });
-  const isTimeViewActive = (0, _internals.isInternalTimeView)(popperView);
+  const isTimeViewActive = (0, _timeUtils.isInternalTimeView)(popperView);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [inViewRenderers[!isTimeViewActive ? popperView : 'day']?.((0, _extends2.default)({}, rendererProps, {
       view: !isTimeViewActive ? popperView : 'day',
-      focusedView: focusedView && (0, _internals.isDatePickerView)(focusedView) ? focusedView : null,
-      views: rendererProps.views.filter(_internals.isDatePickerView),
+      focusedView: focusedView && (0, _dateUtils.isDatePickerView)(focusedView) ? focusedView : null,
+      views: rendererProps.views.filter(_dateUtils.isDatePickerView),
       sx: [{
         gridColumn: 1
       }, ...finalProps.sx]
@@ -66,9 +68,9 @@ const rendererInterceptor = function rendererInterceptor(inViewRenderers, popper
         }
       }), inViewRenderers[isTimeViewActive ? popperView : 'hours']?.((0, _extends2.default)({}, finalProps, {
         view: isTimeViewActive ? popperView : 'hours',
-        focusedView: focusedView && (0, _internals.isInternalTimeView)(focusedView) ? focusedView : null,
-        openTo: (0, _internals.isInternalTimeView)(openTo) ? openTo : 'hours',
-        views: rendererProps.views.filter(_internals.isInternalTimeView),
+        focusedView: focusedView && (0, _timeUtils.isInternalTimeView)(focusedView) ? focusedView : null,
+        openTo: (0, _timeUtils.isInternalTimeView)(openTo) ? openTo : 'hours',
+        views: rendererProps.views.filter(_timeUtils.isInternalTimeView),
         sx: [{
           gridColumn: 3
         }, ...finalProps.sx]

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.7.1
+ * @mui/x-date-pickers v7.8.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/hooks/useField/useFieldV6TextField.js

@@ -113,6 +113,13 @@ const useFieldV6TextField = params => {
             inputRef.current.setSelectionRange(selectionStart, selectionEnd);
           }
         }
+        setTimeout(() => {
+          // handle case when the selection is not updated correctly
+          // could happen on Android
+          if (inputRef.current && inputRef.current === (0, _utils.getActiveElement)(document) && (inputRef.current.selectionStart !== selectionStart || inputRef.current.selectionEnd !== selectionEnd)) {
+            interactions.syncSelectionToDOM();
+          }
+        });
       }
 
       // Even reading this variable seems to do the trick, but also setting it just to make use of it
@@ -275,10 +282,9 @@ const useFieldV6TextField = params => {
     if (keyPressed.length === 0) {
       if ((0, _useField.isAndroid)()) {
         setTempAndroidValueStr(valueStr);
-      } else {
-        resetCharacterQuery();
-        clearActiveSection();
       }
+      resetCharacterQuery();
+      clearActiveSection();
       return;
     }
     applyCharacterEditing({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "7.7.1",
+  "version": "7.8.0",
   "description": "The community edition of the Date and Time Picker components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/timeViewRenderers/timeViewRenderers.d.ts

@@ -12,5 +12,5 @@ export type TimeViewRendererProps<TView extends TimeViewWithMeridiem, TComponent
     views: readonly TView[];
 };
 export declare const renderTimeViewClock: <TDate extends PickerValidDate>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, minutesStep, ampm, ampmInClock, slots, slotProps, readOnly, disabled, sx, autoFocus, showViewSwitcher, disableIgnoringDatePartForTimeValidation, timezone, }: TimeViewRendererProps<TimeView, TimeClockProps<TDate, TimeView>>) => React.JSX.Element;
-export declare const renderDigitalClockTimeView: <TDate extends PickerValidDate>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, minutesStep, ampm, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<Extract<TimeView, 'hours'>, Omit<DigitalClockProps<TDate>, 'timeStep'> & Pick<TimePickerProps<TDate>, 'timeSteps'>>) => React.JSX.Element;
+export declare const renderDigitalClockTimeView: <TDate extends PickerValidDate>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, minutesStep, ampm, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<Extract<TimeView, "hours">, Omit<DigitalClockProps<TDate>, "timeStep"> & Pick<TimePickerProps<TDate>, "timeSteps">>) => React.JSX.Element;
 export declare const renderMultiSectionDigitalClockTimeView: <TDate extends PickerValidDate>({ view, onViewChange, focusedView, onFocusedViewChange, views, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minTime, maxTime, shouldDisableTime, minutesStep, ampm, slots, slotProps, readOnly, disabled, sx, autoFocus, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timezone, }: TimeViewRendererProps<TimeViewWithMeridiem, MultiSectionDigitalClockProps<TDate>>) => React.JSX.Element;