-
+ const { user } = render(
+
+
,
);
- act(() => getColumnHeaderCell(0, 0).focus());
+ // Tab to the first column header
+ await user.keyboard('{Tab}');
const virtualScroller = document.querySelector
('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
+ // We then need to move up to the group header, then right to the first named column
+ await user.keyboard('{ArrowUp}{ArrowUp}{ArrowRight}');
expect(virtualScroller.scrollLeft).not.to.equal(0);
});
- it('should scroll horizontally when navigating between column headers with arrows even if rows are empty', function test() {
+ it('should scroll horizontally when navigating between column headers with arrows even if rows are empty', async function test() {
if (isJSDOM) {
// Need layouting for column virtualization
this.skip();
}
- render(
-
+ const { user } = render(
+
,
);
- act(() => getColumnHeaderCell(0, 0).focus());
+ // Tab to the first column header
+ await user.keyboard('{Tab}');
const virtualScroller = document.querySelector
('.MuiDataGrid-virtualScroller')!;
expect(virtualScroller.scrollLeft).to.equal(0);
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
+ // We then need to move up to the group header, then right to the first named column
+ await user.keyboard('{ArrowUp}{ArrowUp}{ArrowRight}');
expect(virtualScroller.scrollLeft).not.to.equal(0);
expect(document.activeElement!).toHaveAccessibleName('prices');
});
- it('should move to the group header below when pressing "ArrowDown" on a column group header', () => {
- render();
+ it('should move to the group header below when pressing "ArrowDown" on a column group header', async () => {
+ const { user } = render();
- act(() => getColumnHeaderCell(2, 0).focus());
+ // Tab to the first column header then move to the first group header on the third column
+ await user.keyboard('{Tab}{ArrowUp}{ArrowUp}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
+ // Move down to the group header below
+ await user.keyboard('{ArrowDown}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 3 });
});
- it('should go back to the same group header when pressing "ArrowUp" and "ArrowDown"', () => {
- render();
+ it('should go back to the same group header when pressing "ArrowUp" and "ArrowDown"', async () => {
+ const { user } = render();
- act(() => getColumnHeaderCell(3, 1).focus());
+ // Tab to the first column header then move to the testing group header
+ await user.keyboard('{Tab}{ArrowUp}{ArrowRight}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 4 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
+ await user.keyboard('{ArrowUp}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
+ await user.keyboard('{ArrowDown}');
expectAriaCoordinate(document.activeElement, { rowIndex: 2, colIndex: 4 });
});
- it('should go to next group header when pressing "ArrowRight"', () => {
- render();
+ it('should go to next group header when pressing "ArrowRight"', async () => {
+ const { user } = render();
- act(() => getColumnHeaderCell(0, 0).focus());
+ // Tab to the first column header then move to the testing group header
+ await user.keyboard('{Tab}{ArrowUp}{ArrowUp}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 1 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
+ await user.keyboard('{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });
+ await user.keyboard('{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 7 });
});
- it('should go to previous group header when pressing "ArrowLeft"', () => {
- render();
+ it('should go to previous group header when pressing "ArrowLeft"', async () => {
+ const { user } = render();
- act(() => getColumnHeaderCell(6, 0).focus());
+ // Tab to the first column header then move to the testing group header
+ await user.keyboard('{Tab}{ArrowUp}{ArrowUp}{ArrowRight}{ArrowRight}{ArrowRight}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 7 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
+ await user.keyboard('{ArrowLeft}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 3 });
- fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });
+ await user.keyboard('{ArrowLeft}');
expectAriaCoordinate(document.activeElement, { rowIndex: 1, colIndex: 1 });
});
diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
index 002a0d18ccad8..3bcd4f342042b 100644
--- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx
@@ -613,7 +613,7 @@ describe(' - Pagination', () => {
it('should support server side pagination with estimated row count', () => {
const { setProps } = render();
expect(getColumnValues(0)).to.deep.equal(['0']);
- expect(screen.getByText('1–1 of more than 2')).not.to.equal(null);
+ expect(screen.getByText('1–1 of around 2')).not.to.equal(null);
fireEvent.click(screen.getByRole('button', { name: /next page/i }));
expect(getColumnValues(0)).to.deep.equal(['1']);
expect(screen.getByText('2–2 of more than 2')).not.to.equal(null);
diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
index 62016200ac5fd..c9018d6db8e3c 100644
--- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx
@@ -1,14 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
-import {
- createRenderer,
- fireEvent,
- screen,
- act,
- waitFor,
- flushMicrotasks,
-} from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils';
import {
DataGrid,
DataGridProps,
@@ -46,7 +39,7 @@ function getSelectedRowIds() {
}
describe(' - Row selection', () => {
- const { render, clock } = createRenderer();
+ const { render } = createRenderer();
const defaultData = getBasicGridData(4, 2);
@@ -592,25 +585,26 @@ describe(' - Row selection', () => {
expect(getSelectedRowIds()).to.deep.equal([]);
});
- describe('ripple', () => {
- clock.withFakeTimers();
-
- it('should keep only one ripple visible when navigating between checkboxes', async function test() {
- if (isJSDOM) {
- // JSDOM doesn't fire "blur" when .focus is called in another element
- // FIXME Firefox doesn't show any ripple
- this.skip();
- }
- render();
- const cell = getCell(1, 1);
- fireUserEvent.mousePress(cell);
- fireEvent.keyDown(cell, { key: 'ArrowLeft' });
- fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' });
- clock.runToLast(); // Wait for transition
- await flushMicrotasks();
- expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
- });
- });
+ // Skip on everything as this is failing on all environments on ubuntu/CI
+ // describe('ripple', () => {
+ // clock.withFakeTimers();
+
+ // it('should keep only one ripple visible when navigating between checkboxes', async function test() {
+ // if (isJSDOM) {
+ // // JSDOM doesn't fire "blur" when .focus is called in another element
+ // // FIXME Firefox doesn't show any ripple
+ // this.skip();
+ // }
+ // render();
+ // const cell = getCell(1, 1);
+ // fireUserEvent.mousePress(cell);
+ // fireEvent.keyDown(cell, { key: 'ArrowLeft' });
+ // fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' });
+ // clock.runToLast(); // Wait for transition
+ // await flushMicrotasks();
+ // expect(document.querySelectorAll('.MuiTouchRipple-rippleVisible')).to.have.length(1);
+ // });
+ // });
});
describe('prop: isRowSelectable', () => {
@@ -677,6 +671,17 @@ describe(' - Row selection', () => {
);
}).not.toErrorDev();
});
+
+ it('should set the "Select all" checkbox to selected state on clicking even when some rows are not selectable', () => {
+ render(
+ Number(id) % 2 === 0}
+ />,
+ );
+ fireEvent.click(getColumnHeaderCell(0).querySelector('input')!);
+ expect(getColumnHeaderCell(0).querySelector('input')).to.have.property('checked', true);
+ });
});
describe('prop: rows', () => {
diff --git a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx
index c3875d9b3889f..ef0b006133d1c 100644
--- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx
+++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx
@@ -11,7 +11,7 @@ describe(' - Row spanning', () => {
let apiRef: React.MutableRefObject;
const baselineProps: DataGridProps = {
- unstable_rowSpanning: true,
+ rowSpanning: true,
columns: [
{
field: 'code',
diff --git a/packages/x-date-pickers-pro/package.json b/packages/x-date-pickers-pro/package.json
index 7ea584efa2297..28a2b17b1eea1 100644
--- a/packages/x-date-pickers-pro/package.json
+++ b/packages/x-date-pickers-pro/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/x-date-pickers-pro",
- "version": "8.0.0-alpha.1",
+ "version": "8.0.0-alpha.3",
"description": "The Pro plan edition of the Date and Time Picker components (MUI X).",
"author": "MUI Team",
"main": "src/index.ts",
@@ -96,11 +96,11 @@
}
},
"devDependencies": {
- "@mui/internal-test-utils": "^1.0.21",
- "@mui/material": "^5.16.7",
- "@mui/system": "^5.16.7",
+ "@mui/internal-test-utils": "^1.0.22",
+ "@mui/material": "^5.16.9",
+ "@mui/system": "^5.16.8",
"@types/luxon": "^3.4.2",
- "@types/prop-types": "^15.7.13",
+ "@types/prop-types": "^15.7.14",
"date-fns": "^2.30.0",
"date-fns-jalali": "^2.30.0-0",
"dayjs": "^1.11.13",
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
index 8afa430155061..013359cc8f084 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts
@@ -9,7 +9,7 @@ import {
MobileDateRangePickerSlots,
MobileDateRangePickerSlotProps,
} from '../MobileDateRangePicker';
-import { DateRangeValidationError, RangeFieldSection } from '../models';
+import { DateRangeValidationError } from '../models';
import { ValidateDateRangeProps } from '../validation';
export interface DateRangePickerSlots
@@ -48,7 +48,6 @@ export type DateRangePickerFieldProps;
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
index 97fb5bf29d8a4..2ce9fb24f1d27 100644
--- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePickerToolbar.tsx
@@ -12,6 +12,8 @@ import {
BaseToolbarProps,
ExportedBaseToolbarProps,
PickerRangeValue,
+ PickerToolbarOwnerState,
+ useToolbarOwnerState,
} from '@mui/x-date-pickers/internals';
import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
@@ -20,8 +22,7 @@ import {
getDateRangePickerToolbarUtilityClass,
} from './dateRangePickerToolbarClasses';
-const useUtilityClasses = (ownerState: DateRangePickerToolbarProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
container: ['container'],
@@ -47,7 +48,7 @@ const DateRangePickerToolbarRoot = styled(PickersToolbar, {
slot: 'Root',
overridesResolver: (_, styles) => styles.root,
})<{
- ownerState: DateRangePickerToolbarProps;
+ ownerState: PickerToolbarOwnerState;
}>({});
const DateRangePickerToolbarContainer = styled('div', {
@@ -85,6 +86,7 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
onRangePositionChange,
toolbarFormat,
className,
+ classes: classesProp,
onViewChange,
view,
views,
@@ -92,6 +94,8 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
} = props;
const translations = usePickerTranslations();
+ const ownerState = useToolbarOwnerState();
+ const classes = useUtilityClasses(classesProp);
const startDateValue = start
? utils.formatByString(start, toolbarFormat || utils.formats.shortDate)
@@ -101,9 +105,6 @@ const DateRangePickerToolbar = React.forwardRef(function DateRangePickerToolbar(
? utils.formatByString(end, toolbarFormat || utils.formats.shortDate)
: translations.end;
- const ownerState = props;
- const classes = useUtilityClasses(ownerState);
-
return (
= ValidateDateTimeRangeProps &
BaseSingleInputFieldProps<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
DateTimeRangeValidationError
>;
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
index a4139a783f6c6..e2c0511949eba 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerTabs.tsx
@@ -11,7 +11,9 @@ import {
BaseTabsProps,
ExportedBaseTabsProps,
isDatePickerView,
+ usePickerPrivateContext,
} from '@mui/x-date-pickers/internals';
+import { PickerOwnerState } from '@mui/x-date-pickers/models';
import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
import IconButton from '@mui/material/IconButton';
import Button from '@mui/material/Button';
@@ -67,8 +69,7 @@ export interface DateTimeRangePickerTabsProps
BaseTabsProps,
Pick {}
-const useUtilityClasses = (ownerState: DateTimeRangePickerTabsProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
tabButton: ['tabButton'],
@@ -83,7 +84,7 @@ const DateTimeRangePickerTabsRoot = styled('div', {
name: 'MuiDateTimeRangePickerTabs',
slot: 'Root',
overridesResolver: (_, styles) => styles.root,
-})<{ ownerState: DateTimeRangePickerTabsProps }>(({ theme }) => ({
+})<{ ownerState: PickerOwnerState }>(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
@@ -120,11 +121,13 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
rangePosition,
onRangePositionChange,
className,
+ classes: classesProp,
sx,
} = props;
const translations = usePickerTranslations();
- const classes = useUtilityClasses(props);
+ const { ownerState } = usePickerPrivateContext();
+ const classes = useUtilityClasses(classesProp);
const value = React.useMemo(() => viewToTab(view, rangePosition), [view, rangePosition]);
const isPreviousHidden = value === 'start-date';
const isNextHidden = value === 'end-time';
@@ -175,7 +178,7 @@ const DateTimeRangePickerTabs = function DateTimeRangePickerTabs(
return (
diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
index d551097dbfe1b..bc2dcc282966a 100644
--- a/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
+++ b/packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePickerToolbar.tsx
@@ -9,15 +9,14 @@ import {
ExportedBaseToolbarProps,
useUtils,
DateOrTimeViewWithMeridiem,
- PickerVariant,
PickerRangeValue,
+ useToolbarOwnerState,
+ PickerToolbarOwnerState,
+ DateTimePickerToolbarForceDesktopVariant,
} from '@mui/x-date-pickers/internals';
import { usePickerContext, usePickerTranslations } from '@mui/x-date-pickers/hooks';
import { PickerValidDate } from '@mui/x-date-pickers/models';
-import {
- DateTimePickerToolbarProps,
- DateTimePickerToolbar,
-} from '@mui/x-date-pickers/DateTimePicker';
+import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
import { UseRangePositionResponse } from '../internals/hooks/useRangePosition';
import {
DateTimeRangePickerToolbarClasses,
@@ -25,8 +24,7 @@ import {
} from './dateTimeRangePickerToolbarClasses';
import { calculateRangeChange } from '../internals/utils/date-range-manager';
-const useUtilityClasses = (ownerState: DateTimeRangePickerToolbarProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
startToolbar: ['startToolbar'],
@@ -43,7 +41,6 @@ export interface DateTimeRangePickerToolbarProps
Pick,
ExportedDateTimeRangePickerToolbarProps {
ampm?: boolean;
- toolbarVariant?: PickerVariant;
}
export interface ExportedDateTimeRangePickerToolbarProps extends ExportedBaseToolbarProps {
@@ -58,58 +55,26 @@ const DateTimeRangePickerToolbarRoot = styled('div', {
slot: 'Root',
overridesResolver: (_, styles) => styles.root,
})<{
- ownerState: DateTimeRangePickerToolbarProps;
+ ownerState: PickerToolbarOwnerState;
}>({
display: 'flex',
flexDirection: 'column',
});
-type DateTimeRangePickerStartOrEndToolbarProps = DateTimePickerToolbarProps & {
- ownerState?: DateTimeRangePickerToolbarProps;
-};
-
-type DateTimeRangePickerStartOrEndToolbarComponent = (
- props: DateTimeRangePickerStartOrEndToolbarProps,
-) => React.JSX.Element;
-
const DateTimeRangePickerToolbarStart = styled(DateTimePickerToolbar, {
name: 'MuiDateTimeRangePickerToolbar',
slot: 'StartToolbar',
overridesResolver: (_, styles) => styles.startToolbar,
-})({
+})<{ ownerState?: PickerToolbarOwnerState }>({
borderBottom: 'none',
- variants: [
- {
- props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) =>
- toolbarVariant !== 'desktop',
- style: {
- padding: '12px 8px 0 12px',
- },
- },
- {
- props: { toolbarVariant: 'desktop' },
- style: {
- paddingBottom: 0,
- },
- },
- ],
-}) as DateTimeRangePickerStartOrEndToolbarComponent;
+ paddingBottom: 0,
+});
const DateTimeRangePickerToolbarEnd = styled(DateTimePickerToolbar, {
name: 'MuiDateTimeRangePickerToolbar',
slot: 'EndToolbar',
overridesResolver: (_, styles) => styles.endToolbar,
-})({
- variants: [
- {
- props: ({ toolbarVariant }: DateTimeRangePickerStartOrEndToolbarProps) =>
- toolbarVariant !== 'desktop',
- style: {
- padding: '12px 8px 12px 12px',
- },
- },
- ],
-}) as DateTimeRangePickerStartOrEndToolbarComponent;
+})<{ ownerState?: PickerToolbarOwnerState }>({});
type DateTimeRangePickerToolbarComponent = ((
props: DateTimeRangePickerToolbarProps & React.RefAttributes,
@@ -127,8 +92,8 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
rangePosition,
onRangePositionChange,
className,
+ classes: classesProp,
onViewChange,
- toolbarVariant,
onChange,
classes: inClasses,
view,
@@ -144,6 +109,9 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
} = props;
const { disabled, readOnly } = usePickerContext();
+ const translations = usePickerTranslations();
+ const ownerState = useToolbarOwnerState();
+ const classes = useUtilityClasses(classesProp);
const commonToolbarProps = {
isLandscape,
@@ -156,11 +124,6 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
toolbarPlaceholder,
};
- const translations = usePickerTranslations();
-
- const ownerState = props;
- const classes = useUtilityClasses(ownerState);
-
const handleStartRangeViewChange = React.useCallback(
(newView: DateOrTimeViewWithMeridiem) => {
if (newView === 'year' || newView === 'month') {
@@ -214,30 +177,30 @@ const DateTimeRangePickerToolbar = React.forwardRef(function DateTimeRangePicker
sx={sx}
{...other}
>
-
-
+
+
+
+
);
}) as DateTimeRangePickerToolbarComponent;
@@ -286,7 +249,6 @@ DateTimeRangePickerToolbar.propTypes = {
* @default "––"
*/
toolbarPlaceholder: PropTypes.node,
- toolbarVariant: PropTypes.oneOf(['desktop', 'mobile']),
value: PropTypes.arrayOf(PropTypes.object).isRequired,
/**
* Currently visible picker view.
diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
index 8fd06df96b685..f9255bdd65af6 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx
@@ -12,6 +12,7 @@ import {
} from 'test/utils/pickers';
import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
import { describeConformance } from 'test/utils/describeConformance';
describe(' - Describes', () => {
@@ -45,7 +46,7 @@ describe(' - Describes', () => {
],
}));
- describeValue(DesktopDateRangePicker, () => ({
+ describeValue(DesktopDateRangePicker, () => ({
render,
componentFamily: 'picker',
type: 'date-range',
@@ -76,7 +77,7 @@ describe(' - Describes', () => {
value,
{ isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
) => {
- let newValue: any[];
+ let newValue: PickerNonNullableRangeValue;
if (applySameValue) {
newValue = value;
} else if (setEndDate) {
@@ -101,7 +102,7 @@ describe(' - Describes', () => {
}));
// With single input field
- describeValue(DesktopDateRangePicker, () => ({
+ describeValue(DesktopDateRangePicker, () => ({
render,
componentFamily: 'picker',
type: 'date-range',
@@ -138,7 +139,7 @@ describe(' - Describes', () => {
value,
{ isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
) => {
- let newValue: any[];
+ let newValue: PickerNonNullableRangeValue;
if (applySameValue) {
newValue = value;
} else if (setEndDate) {
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
index 4c93efaf101e3..fe76558163298 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/DesktopDateTimeRangePicker.tsx
@@ -190,7 +190,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang
},
toolbar: {
hidden: true,
- toolbarVariant: 'desktop',
...defaultizedProps.slotProps?.toolbar,
},
actionBar: (ownerState: PickerLayoutOwnerState) => ({
diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
index d3a4235ce6e1b..dfdd329087ff3 100644
--- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
import {
createPickerRenderer,
adapterToUse,
@@ -46,7 +47,7 @@ describe(' - Describes', () => {
],
}));
- describeValue(DesktopDateTimeRangePicker, () => ({
+ describeValue(DesktopDateTimeRangePicker, () => ({
render,
componentFamily: 'picker',
type: 'date-time-range',
@@ -86,7 +87,7 @@ describe(' - Describes', () => {
value,
{ isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
) => {
- let newValue: any[];
+ let newValue: PickerNonNullableRangeValue;
if (applySameValue) {
newValue = value;
} else if (setEndDate) {
diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
index 3d5b9c2013bc3..8304680152111 100644
--- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx
@@ -1,6 +1,7 @@
import * as React from 'react';
import { screen, fireDiscreteEvent, fireEvent } from '@mui/internal-test-utils';
import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
import {
adapterToUse,
createPickerRenderer,
@@ -45,7 +46,7 @@ describe(' - Describes', () => {
],
}));
- describeValue(MobileDateRangePicker, () => ({
+ describeValue(MobileDateRangePicker, () => ({
render,
componentFamily: 'picker',
type: 'date-range',
@@ -73,7 +74,7 @@ describe(' - Describes', () => {
expectFieldValueV7(endFieldRoot, expectedEndValueStr);
},
setNewValue: (value, { isOpened, applySameValue, setEndDate = false }) => {
- let newValue: any[];
+ let newValue: PickerNonNullableRangeValue;
if (applySameValue) {
newValue = value;
} else if (setEndDate) {
diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
index 05cd5521a2ce9..5bade8b66ee44 100644
--- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/MobileDateTimeRangePicker.tsx
@@ -188,7 +188,6 @@ const MobileDateTimeRangePicker = React.forwardRef(function MobileDateTimeRangeP
},
toolbar: {
hidden: false,
- toolbarVariant: 'mobile',
...defaultizedProps.slotProps?.toolbar,
},
},
diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
index e0ba6d9c933a9..90a5dc4057ec1 100644
--- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
+++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
import {
createPickerRenderer,
adapterToUse,
@@ -10,7 +11,7 @@ import {
getFieldSectionsContainer,
openPicker,
} from 'test/utils/pickers';
-import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
+import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker';
describe(' - Describes', () => {
const { render, clock } = createPickerRenderer({
@@ -47,7 +48,7 @@ describe(' - Describes', () => {
],
}));
- describeValue(MobileDateTimeRangePicker, () => ({
+ describeValue(MobileDateTimeRangePicker, () => ({
render,
componentFamily: 'picker',
type: 'date-time-range',
@@ -91,7 +92,7 @@ describe(' - Describes', () => {
initialFocus: setEndDate ? 'end' : 'start',
});
}
- let newValue: any[];
+ let newValue: PickerNonNullableRangeValue;
if (applySameValue) {
newValue = value;
} else if (setEndDate) {
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
index c3c9fb73c19d5..50cd4f22cbb75 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -12,7 +12,10 @@ import {
unstable_generateUtilityClass as generateUtilityClass,
unstable_generateUtilityClasses as generateUtilityClasses,
} from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import {
@@ -30,8 +33,7 @@ export const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses = gene
export const getMultiInputDateRangeFieldUtilityClass = (slot: string) =>
generateUtilityClass('MuiMultiInputDateRangeField', slot);
-const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
separator: ['separator'],
@@ -95,11 +97,12 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
unstableStartFieldRef,
unstableEndFieldRef,
className,
+ classes: classesProp,
...otherForwardedProps
} = forwardedProps;
- const ownerState = themeProps;
- const classes = useUtilityClasses(ownerState);
+ const ownerState = useFieldOwnerState(internalProps);
+ const classes = useUtilityClasses(classesProp);
const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
const rootProps = useSlotProps({
@@ -118,7 +121,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
(inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
const startTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputDateRangeFieldSlotProps['textField'],
+ MultiInputDateRangeFieldSlotProps['textField'],
{},
MultiInputDateRangeFieldProps & {
position: RangePosition;
@@ -130,7 +133,7 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
});
const endTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputDateRangeFieldSlotProps['textField'],
+ MultiInputDateRangeFieldSlotProps['textField'],
{},
MultiInputDateRangeFieldProps & {
position: RangePosition;
@@ -323,10 +326,10 @@ MultiInputDateRangeField.propTypes = {
*/
shouldDisableDate: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts
index 8b31315cee9fb..6565d64012de7 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.types.ts
@@ -1,8 +1,10 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
import {
MultiInputFieldRefs,
@@ -53,7 +55,7 @@ export interface MultiInputDateRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: MultiInputDateRangeFieldSlotProps;
+ slotProps?: MultiInputDateRangeFieldSlotProps;
}
export interface MultiInputDateRangeFieldSlots {
@@ -65,7 +67,7 @@ export interface MultiInputDateRangeFieldSlots {
/**
* Form control with an input to render a date.
* It is rendered twice: once for the start date and once for the end date.
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+ * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
*/
textField?: React.ElementType;
/**
@@ -75,24 +77,14 @@ export interface MultiInputDateRangeFieldSlots {
separator?: React.ElementType;
}
-export interface MultiInputDateRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> {
- root?: SlotComponentProps<
- typeof Stack,
- {},
- MultiInputDateRangeFieldProps
- >;
- textField?: SlotComponentProps<
- typeof TextField,
+export interface MultiInputDateRangeFieldSlotProps {
+ root?: SlotComponentPropsFromProps;
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- MultiInputDateRangeFieldProps & {
+ FieldOwnerState & {
position: RangePosition;
}
>;
- separator?: SlotComponentProps<
- typeof Typography,
- {},
- MultiInputDateRangeFieldProps
- >;
+ separator?: SlotComponentPropsFromProps;
}
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
index 3531d3a14dd9d..06b5798770357 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -12,7 +12,10 @@ import {
unstable_generateUtilityClass as generateUtilityClass,
unstable_generateUtilityClasses as generateUtilityClasses,
} from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import {
@@ -28,8 +31,7 @@ export const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses =
export const getMultiInputDateTimeRangeFieldUtilityClass = (slot: string) =>
generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
-const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
separator: ['separator'],
@@ -93,11 +95,12 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
unstableStartFieldRef,
unstableEndFieldRef,
className,
+ classes: classesProp,
...otherForwardedProps
} = forwardedProps;
- const ownerState = themeProps;
- const classes = useUtilityClasses(ownerState);
+ const ownerState = useFieldOwnerState(themeProps);
+ const classes = useUtilityClasses(classesProp);
const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
const rootProps = useSlotProps({
@@ -116,7 +119,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
(inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
const startTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputDateTimeRangeFieldSlotProps['textField'],
+ MultiInputDateTimeRangeFieldSlotProps['textField'],
{},
MultiInputDateTimeRangeFieldProps & {
position: RangePosition;
@@ -128,7 +131,7 @@ const MultiInputDateTimeRangeField = React.forwardRef(function MultiInputDateTim
});
const endTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputDateTimeRangeFieldSlotProps['textField'],
+ MultiInputDateTimeRangeFieldSlotProps['textField'],
{},
MultiInputDateTimeRangeFieldProps & {
position: RangePosition;
@@ -361,10 +364,10 @@ MultiInputDateTimeRangeField.propTypes = {
*/
shouldDisableTime: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts
index e66073ee71f5e..51675345af78b 100644
--- a/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.ts
@@ -1,8 +1,10 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
import { UseDateTimeRangeFieldProps } from '../internals/models/dateTimeRange';
import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -52,7 +54,7 @@ export interface MultiInputDateTimeRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: MultiInputDateTimeRangeFieldSlotProps;
+ slotProps?: MultiInputDateTimeRangeFieldSlotProps;
}
export interface MultiInputDateTimeRangeFieldSlots {
@@ -74,24 +76,14 @@ export interface MultiInputDateTimeRangeFieldSlots {
separator?: React.ElementType;
}
-export interface MultiInputDateTimeRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> {
- root?: SlotComponentProps<
- typeof Stack,
- {},
- MultiInputDateTimeRangeFieldProps
- >;
- textField?: SlotComponentProps<
- typeof TextField,
+export interface MultiInputDateTimeRangeFieldSlotProps {
+ root?: SlotComponentPropsFromProps;
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- MultiInputDateTimeRangeFieldProps & {
+ FieldOwnerState & {
position: RangePosition;
}
>;
- separator?: SlotComponentProps<
- typeof Typography,
- {},
- MultiInputDateTimeRangeFieldProps
- >;
+ separator?: SlotComponentPropsFromProps;
}
diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
index c533888fd193c..e9e5c24a2ea26 100644
--- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -12,7 +12,10 @@ import {
unstable_generateUtilityClass as generateUtilityClass,
unstable_generateUtilityClasses as generateUtilityClasses,
} from '@mui/utils';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import {
@@ -30,8 +33,7 @@ export const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses = gene
export const getMultiInputTimeRangeFieldUtilityClass = (slot: string) =>
generateUtilityClass('MuiMultiInputTimeRangeField', slot);
-const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps) => {
- const { classes } = ownerState;
+const useUtilityClasses = (classes: Partial | undefined) => {
const slots = {
root: ['root'],
separator: ['separator'],
@@ -95,11 +97,12 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
unstableStartFieldRef,
unstableEndFieldRef,
className,
+ classes: classesProp,
...otherForwardedProps
} = forwardedProps;
- const ownerState = themeProps;
- const classes = useUtilityClasses(ownerState);
+ const ownerState = useFieldOwnerState(themeProps);
+ const classes = useUtilityClasses(classesProp);
const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
const rootProps = useSlotProps({
@@ -118,7 +121,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
(inProps.enableAccessibleFieldDOMStructure === false ? MuiTextField : PickersTextField);
const startTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputTimeRangeFieldSlotProps['textField'],
+ MultiInputTimeRangeFieldSlotProps['textField'],
{},
MultiInputTimeRangeFieldProps & {
position: RangePosition;
@@ -131,7 +134,7 @@ const MultiInputTimeRangeField = React.forwardRef(function MultiInputTimeRangeFi
const endTextFieldProps = useSlotProps<
typeof TextField,
- MultiInputTimeRangeFieldSlotProps['textField'],
+ MultiInputTimeRangeFieldSlotProps['textField'],
{},
MultiInputTimeRangeFieldProps & {
position: RangePosition;
@@ -336,10 +339,10 @@ MultiInputTimeRangeField.propTypes = {
*/
shouldDisableTime: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts
index a9fcc08313112..08708712d12de 100644
--- a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.types.ts
@@ -1,8 +1,10 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import Typography from '@mui/material/Typography';
-import Stack, { StackProps } from '@mui/material/Stack';
-import TextField from '@mui/material/TextField';
+import type { TypographyProps } from '@mui/material/Typography';
+import type { StackProps } from '@mui/material/Stack';
+import type { TextFieldProps } from '@mui/material/TextField';
+import { FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
import { UseTimeRangeFieldProps } from '../internals/models/timeRange';
import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
import { MultiInputFieldRefs, MultiInputRangeFieldClasses, RangePosition } from '../models';
@@ -49,7 +51,7 @@ export interface MultiInputTimeRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: MultiInputTimeRangeFieldSlotProps;
+ slotProps?: MultiInputTimeRangeFieldSlotProps;
}
export interface MultiInputTimeRangeFieldSlots {
@@ -71,24 +73,14 @@ export interface MultiInputTimeRangeFieldSlots {
separator?: React.ElementType;
}
-export interface MultiInputTimeRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> {
- root?: SlotComponentProps<
- typeof Stack,
- {},
- MultiInputTimeRangeFieldProps
- >;
- textField?: SlotComponentProps<
- typeof TextField,
+export interface MultiInputTimeRangeFieldSlotProps {
+ root?: SlotComponentPropsFromProps;
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- MultiInputTimeRangeFieldProps & {
+ FieldOwnerState & {
position: RangePosition;
}
>;
- separator?: SlotComponentProps<
- typeof Typography,
- {},
- MultiInputTimeRangeFieldProps
- >;
+ separator?: SlotComponentPropsFromProps;
}
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
index 02f127c0c715d..86707618138fb 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.tsx
@@ -6,7 +6,10 @@ import { useThemeProps } from '@mui/material/styles';
import useSlotProps from '@mui/utils/useSlotProps';
import { refType } from '@mui/utils';
import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
@@ -40,7 +43,7 @@ const SingleInputDateRangeField = React.forwardRef(function SingleInputDateRange
const { slots, slotProps, InputProps, inputProps, ...other } = themeProps;
- const ownerState = themeProps;
+ const ownerState = useFieldOwnerState(themeProps);
const TextField =
slots?.textField ??
@@ -292,10 +295,10 @@ SingleInputDateRangeField.propTypes = {
*/
shouldDisableDate: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts
index da88995ac3044..027ffbfbdb1de 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts
@@ -1,18 +1,15 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
import {
ExportedUseClearableFieldProps,
UseClearableFieldSlots,
UseClearableFieldSlotProps,
} from '@mui/x-date-pickers/hooks';
-import type {
- RangeFieldSection,
- DateRangeValidationError,
- UseDateRangeFieldProps,
-} from '../models';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import type { DateRangeValidationError, UseDateRangeFieldProps } from '../models';
export interface UseSingleInputDateRangeFieldProps<
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -21,7 +18,6 @@ export interface UseSingleInputDateRangeFieldProps<
Pick<
UseFieldInternalProps<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
DateRangeValidationError
>,
@@ -44,23 +40,21 @@ export type SingleInputDateRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: SingleInputDateRangeFieldSlotProps;
+ slotProps?: SingleInputDateRangeFieldSlotProps;
};
export interface SingleInputDateRangeFieldSlots extends UseClearableFieldSlots {
/**
* Form control with an input to render the value.
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+ * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
*/
textField?: React.ElementType;
}
-export interface SingleInputDateRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseClearableFieldSlotProps {
- textField?: SlotComponentProps<
- typeof TextField,
+export interface SingleInputDateRangeFieldSlotProps extends UseClearableFieldSlotProps {
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- SingleInputDateRangeFieldProps
+ FieldOwnerState
>;
}
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts
index 628a548326c42..e1b71090039e7 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts
@@ -5,7 +5,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
import { validateDateRange } from '../validation';
-import { RangeFieldSection } from '../models';
export const useSingleInputDateRangeField = <
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -27,7 +26,6 @@ export const useSingleInputDateRangeField = <
return useField<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
typeof forwardedProps,
typeof internalProps
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx
index 1c3a0b1469dd2..f81834fd4ff77 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.tsx
@@ -2,7 +2,10 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import MuiTextField from '@mui/material/TextField';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import { useThemeProps } from '@mui/material/styles';
import { refType } from '@mui/utils';
@@ -40,7 +43,7 @@ const SingleInputDateTimeRangeField = React.forwardRef(function SingleInputDateT
const { slots, slotProps, InputProps, inputProps, ...other } = themeProps;
- const ownerState = themeProps;
+ const ownerState = useFieldOwnerState(themeProps);
const TextField =
slots?.textField ??
@@ -332,10 +335,10 @@ SingleInputDateTimeRangeField.propTypes = {
*/
shouldDisableTime: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts
index 6632d68fc3eb4..9624ffa1c73e0 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts
@@ -1,15 +1,16 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
import {
ExportedUseClearableFieldProps,
UseClearableFieldSlots,
UseClearableFieldSlotProps,
} from '@mui/x-date-pickers/hooks';
import { UseDateTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, DateTimeRangeValidationError } from '../models';
+import { DateTimeRangeValidationError } from '../models';
export interface UseSingleInputDateTimeRangeFieldProps<
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -18,7 +19,6 @@ export interface UseSingleInputDateTimeRangeFieldProps<
Pick<
UseFieldInternalProps<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
DateTimeRangeValidationError
>,
@@ -41,23 +41,21 @@ export type SingleInputDateTimeRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: SingleInputDateTimeRangeFieldSlotProps;
+ slotProps?: SingleInputDateTimeRangeFieldSlotProps;
};
export interface SingleInputDateTimeRangeFieldSlots extends UseClearableFieldSlots {
/**
* Form control with an input to render the value.
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+ * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
*/
textField?: React.ElementType;
}
-export interface SingleInputDateTimeRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseClearableFieldSlotProps {
- textField?: SlotComponentProps<
- typeof TextField,
+export interface SingleInputDateTimeRangeFieldSlotProps extends UseClearableFieldSlotProps {
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- SingleInputDateTimeRangeFieldProps
+ FieldOwnerState
>;
}
diff --git a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts
index f96bfe35fd10d..1fbed22a25d09 100644
--- a/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts
@@ -9,7 +9,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
import { validateDateTimeRange } from '../validation';
-import { RangeFieldSection } from '../models';
export const useSingleInputDateTimeRangeField = <
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -31,7 +30,6 @@ export const useSingleInputDateTimeRangeField = <
return useField<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
typeof forwardedProps,
typeof internalProps
diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx
index ff5b9d8524cd9..b820b6a27f605 100644
--- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx
+++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.tsx
@@ -3,7 +3,10 @@ import * as React from 'react';
import PropTypes from 'prop-types';
import MuiTextField from '@mui/material/TextField';
import { useClearableField } from '@mui/x-date-pickers/hooks';
-import { convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
+import {
+ convertFieldResponseIntoMuiTextFieldProps,
+ useFieldOwnerState,
+} from '@mui/x-date-pickers/internals';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import { useThemeProps } from '@mui/material/styles';
import useSlotProps from '@mui/utils/useSlotProps';
@@ -40,7 +43,7 @@ const SingleInputTimeRangeField = React.forwardRef(function SingleInputTimeRange
const { slots, slotProps, InputProps, inputProps, ...other } = themeProps;
- const ownerState = themeProps;
+ const ownerState = useFieldOwnerState(themeProps);
const TextField =
slots?.textField ??
@@ -304,10 +307,10 @@ SingleInputTimeRangeField.propTypes = {
*/
shouldDisableTime: PropTypes.func,
/**
- * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
- * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+ * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+ * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
*
- * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+ * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
*
* Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
* If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts
index 1cc0fa3fd4835..46b019e84e955 100644
--- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts
@@ -1,15 +1,16 @@
import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import TextField from '@mui/material/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
-import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
+import { BuiltInFieldTextFieldProps, FieldOwnerState } from '@mui/x-date-pickers/models';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { PickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
import {
ExportedUseClearableFieldProps,
UseClearableFieldSlots,
UseClearableFieldSlotProps,
} from '@mui/x-date-pickers/hooks';
import { UseTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, TimeRangeValidationError } from '../models';
+import { TimeRangeValidationError } from '../models';
export interface UseSingleInputTimeRangeFieldProps<
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -18,7 +19,6 @@ export interface UseSingleInputTimeRangeFieldProps<
Pick<
UseFieldInternalProps<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
TimeRangeValidationError
>,
@@ -41,23 +41,21 @@ export type SingleInputTimeRangeFieldProps<
* The props used for each component slot.
* @default {}
*/
- slotProps?: SingleInputTimeRangeFieldSlotProps;
+ slotProps?: SingleInputTimeRangeFieldSlotProps;
};
export interface SingleInputTimeRangeFieldSlots extends UseClearableFieldSlots {
/**
* Form control with an input to render the value.
- * @default TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.
+ * @default , or from '@mui/material' if `enableAccessibleFieldDOMStructure` is `false`.
*/
textField?: React.ElementType;
}
-export interface SingleInputTimeRangeFieldSlotProps<
- TEnableAccessibleFieldDOMStructure extends boolean,
-> extends UseClearableFieldSlotProps {
- textField?: SlotComponentProps<
- typeof TextField,
+export interface SingleInputTimeRangeFieldSlotProps extends UseClearableFieldSlotProps {
+ textField?: SlotComponentPropsFromProps<
+ PickersTextFieldProps | TextFieldProps,
{},
- SingleInputTimeRangeFieldProps
+ FieldOwnerState
>;
}
diff --git a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts
index f7a4eec521e66..a55e35d42c97f 100644
--- a/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts
+++ b/packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts
@@ -5,7 +5,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
import { validateTimeRange } from '../validation';
-import { RangeFieldSection } from '../models';
export const useSingleInputTimeRangeField = <
TEnableAccessibleFieldDOMStructure extends boolean,
@@ -27,7 +26,6 @@ export const useSingleInputTimeRangeField = <
return useField<
PickerRangeValue,
- RangeFieldSection,
TEnableAccessibleFieldDOMStructure,
typeof forwardedProps,
typeof internalProps
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
index 53e0cd5f8b160..9564e78e3c579 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/models/useRangePicker.ts
@@ -5,7 +5,7 @@ import {
UsePickerViewsProps,
BaseNonStaticPickerProps,
UsePickerValueNonStaticProps,
- UsePickerViewsNonStaticProps,
+ UsePickerProviderNonStaticProps,
DateOrTimeViewWithMeridiem,
ExportedBaseTabsProps,
PickerRangeValue,
@@ -20,7 +20,6 @@ import {
RangePickerFieldSlots,
RangePickerFieldSlotProps,
} from '../useEnrichedRangePickerFieldProps';
-import { RangeFieldSection } from '../../../models';
export interface UseRangePickerSlots
extends ExportedPickersLayoutSlots,
@@ -38,7 +37,7 @@ export interface UseRangePickerSlotProps<
export interface RangeOnlyPickerProps
extends BaseNonStaticPickerProps,
UsePickerValueNonStaticProps,
- UsePickerViewsNonStaticProps,
+ UsePickerProviderNonStaticProps,
BaseRangeNonStaticPickerProps,
UseRangePositionProps {}
@@ -58,13 +57,7 @@ export interface UseRangePickerParams<
TExternalProps extends UseRangePickerProps,
TAdditionalViewProps extends {},
> extends Pick<
- UsePickerParams<
- PickerRangeValue,
- TView,
- RangeFieldSection,
- TExternalProps,
- TAdditionalViewProps
- >,
+ UsePickerParams,
'valueManager' | 'valueType' | 'validator' | 'rendererInterceptor'
> {
props: TExternalProps;
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
index 34d4e46d8008a..4dabe621a1e73 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.tsx
@@ -11,6 +11,7 @@ import {
DateOrTimeViewWithMeridiem,
ExportedBaseTabsProps,
PickerProvider,
+ PickerValue,
PickerRangeValue,
} from '@mui/x-date-pickers/internals';
import { FieldRef, InferError } from '@mui/x-date-pickers/models';
@@ -24,7 +25,6 @@ import {
useEnrichedRangePickerFieldProps,
} from '../useEnrichedRangePickerFieldProps';
import { getReleaseInfo } from '../../utils/releaseInfo';
-import { RangeFieldSection } from '../../../models';
import { useRangePosition } from '../useRangePosition';
const releaseInfo = getReleaseInfo();
@@ -69,16 +69,26 @@ export const useDesktopRangePicker = <
const fieldContainerRef = React.useRef(null);
const anchorRef = React.useRef(null);
const popperRef = React.useRef(null);
- const startFieldRef = React.useRef>(null);
- const endFieldRef = React.useRef>(null);
+ const startFieldRef = React.useRef>(null);
+ const endFieldRef = React.useRef>(null);
+ const singleInputFieldRef = React.useRef>(null);
const initialView = React.useRef(props.openTo ?? null);
const fieldType = (slots.field as any).fieldType ?? 'multi-input';
const { rangePosition, onRangePositionChange } = useRangePosition(
props,
- fieldType === 'single-input' ? startFieldRef : undefined,
+ fieldType === 'single-input' ? singleInputFieldRef : undefined,
);
+ let fieldRef: React.RefObject | FieldRef>;
+ if (fieldType === 'single-input') {
+ fieldRef = singleInputFieldRef;
+ } else if (rangePosition === 'start') {
+ fieldRef = startFieldRef;
+ } else {
+ fieldRef = endFieldRef;
+ }
+
const {
open,
actions,
@@ -88,18 +98,12 @@ export const useDesktopRangePicker = <
shouldRestoreFocus,
fieldProps: pickerFieldProps,
ownerState,
- } = usePicker<
- PickerRangeValue,
- TView,
- RangeFieldSection,
- TExternalProps,
- DesktopRangePickerAdditionalViewProps
- >({
+ } = usePicker({
...pickerParams,
props,
variant: 'desktop',
autoFocusView: false,
- fieldRef: rangePosition === 'start' ? startFieldRef : endFieldRef,
+ fieldRef,
localeText,
additionalViewProps: {
rangePosition,
@@ -181,6 +185,7 @@ export const useDesktopRangePicker = <
anchorRef,
startFieldRef,
endFieldRef,
+ singleInputFieldRef,
currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
initialView: initialView.current ?? undefined,
onViewChange: layoutProps.onViewChange,
diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
index 17ffbc770c215..a858ae3df40b3 100644
--- a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
+++ b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
@@ -6,7 +6,12 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
import useEventCallback from '@mui/utils/useEventCallback';
import useForkRef from '@mui/utils/useForkRef';
import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { FieldSelectedSections, FieldRef, PickerOwnerState } from '@mui/x-date-pickers/models';
+import {
+ FieldSelectedSections,
+ FieldRef,
+ PickerOwnerState,
+ FieldOwnerState,
+} from '@mui/x-date-pickers/models';
import {
UseClearableFieldSlots,
UseClearableFieldSlotProps,
@@ -20,15 +25,14 @@ import {
DateOrTimeViewWithMeridiem,
BaseSingleInputFieldProps,
PickerRangeValue,
+ PickerValue,
} from '@mui/x-date-pickers/internals';
import { PickersTextField } from '@mui/x-date-pickers/PickersTextField';
import {
MultiInputFieldSlotRootProps,
MultiInputFieldSlotTextFieldProps,
- RangeFieldSection,
RangePosition,
FieldType,
- UseDateRangeFieldProps,
PickerRangeFieldSlotProps,
} from '../../models';
import { UseRangePositionResponse } from './useRangePosition';
@@ -57,20 +61,16 @@ export interface RangePickerFieldSlots extends UseClearableFieldSlots {
export interface RangePickerFieldSlotProps
extends UseClearableFieldSlotProps {
field?: SlotComponentPropsFromProps<
- PickerRangeFieldSlotProps<
- PickerRangeValue,
- RangeFieldSection,
- TEnableAccessibleFieldDOMStructure
- >,
+ PickerRangeFieldSlotProps,
{},
PickerOwnerState
>;
- fieldRoot?: SlotComponentProps>;
- fieldSeparator?: SlotComponentProps>;
+ fieldRoot?: SlotComponentProps;
+ fieldSeparator?: SlotComponentProps;
textField?: SlotComponentProps<
typeof PickersTextField,
{},
- UseDateRangeFieldProps