Merge

mui · Jan 14, 2025 · 86d236b · 86d236b
2 parents 83af35e + 7c505ea
commit 86d236b
Show file tree

Hide file tree

Showing 218 changed files with 3,256 additions and 2,170 deletions.
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml
@@ -25,7 +25,7 @@ jobs:
       pull-requests: write
     steps:
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
+        uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 # v3.0.3
         with:
           dirtyLabel: 'PR: out-of-date'
           repoToken: '${{ secrets.GITHUB_TOKEN }}'

diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
@@ -44,6 +44,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/upload-sarif@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           sarif_file: results.sarif
diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md
@@ -113,10 +113,10 @@ Each _Picker_ is available in a responsive, desktop and mobile variant:
 - The responsive component (for example `DatePicker`) which renders the desktop component or the mobile one depending on the device it runs on.
 
 - The desktop component (for example `DesktopDatePicker`) which works best for mouse devices and large screens.
-  It renders the views inside a popover and allows editing values directly inside the field.
+  It renders the views inside a popover and a field for keyboard editing.
 
 - The mobile component (for example `MobileDatePicker`) which works best for touch devices and small screens.
-  It renders the view inside a modal and does not allow editing values directly inside the field.
+  It renders the view inside a modal and a field for keyboard editing.
 
 {{"demo": "ResponsivePickers.js"}}
 

diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.js b/docs/data/date-pickers/calendar-systems/AdapterHijri.js
@@ -24,16 +24,7 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const {
-    InputProps,
-    slotProps,
-    slots,
-    ownerState,
-    label,
-    focused,
-    name,
-    ...other
-  } = forwardedProps;
+  const { ownerState, label, focused, name, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -54,7 +45,7 @@ function ButtonDateTimeField(props) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
-      ref={InputProps?.ref}
+      ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}

diff --git a/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx b/docs/data/date-pickers/calendar-systems/AdapterHijri.tsx
@@ -28,16 +28,7 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const {
-    InputProps,
-    slotProps,
-    slots,
-    ownerState,
-    label,
-    focused,
-    name,
-    ...other
-  } = forwardedProps;
+  const { ownerState, label, focused, name, ...other } = forwardedProps;
 
   const pickerContext = usePickerContext();
   const parsedFormat = useParsedFormat();
@@ -58,7 +49,7 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
       {...other}
       variant="outlined"
       color={hasValidationError ? 'error' : 'primary'}
-      ref={InputProps?.ref}
+      ref={pickerContext.triggerRef}
       onClick={() => pickerContext.setOpen((prev) => !prev)}
     >
       {label ? `${label}: ${valueStr}` : valueStr}

diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.js b/docs/data/date-pickers/custom-field/BrowserV7Field.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
   display: 'flex',
@@ -41,6 +44,8 @@ const BrowserDateField = React.forwardRef((props, ref) => {
     onInput,
     onPaste,
     onKeyDown,
+    // Should be passed to the button that opens the picker
+    openPickerAriaLabel,
     // Can be passed to a hidden <input /> element
     onChange,
     value,
@@ -55,16 +60,15 @@ const BrowserDateField = React.forwardRef((props, ref) => {
     readOnly,
     focused,
     error,
-    InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
     // The rest can be passed to the root element
     ...other
   } = fieldResponse;
 
-  const handleRef = useForkRef(InputPropsRef, ref);
+  const pickerContext = usePickerContext();
+  const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
   return (
     <BrowserFieldRoot ref={handleRef} {...other}>
-      {startAdornment}
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -78,7 +82,13 @@ const BrowserDateField = React.forwardRef((props, ref) => {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
+      <IconButton
+        onClick={() => pickerContext.setOpen((prev) => !prev)}
+        sx={{ marginLeft: 1.5 }}
+        aria-label={openPickerAriaLabel}
+      >
+        <CalendarIcon />
+      </IconButton>
     </BrowserFieldRoot>
   );
 });

diff --git a/docs/data/date-pickers/custom-field/BrowserV7Field.tsx b/docs/data/date-pickers/custom-field/BrowserV7Field.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { CalendarIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
@@ -10,6 +12,7 @@ import {
 } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 import { Unstable_PickersSectionList as PickersSectionList } from '@mui/x-date-pickers/PickersSectionList';
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
 
 const BrowserFieldRoot = styled('div', { name: 'BrowserField', slot: 'Root' })({
   display: 'flex',
@@ -48,6 +51,9 @@ const BrowserDateField = React.forwardRef(
       onPaste,
       onKeyDown,
 
+      // Should be passed to the button that opens the picker
+      openPickerAriaLabel,
+
       // Can be passed to a hidden <input /> element
       onChange,
       value,
@@ -66,17 +72,15 @@ const BrowserDateField = React.forwardRef(
       focused,
       error,
 
-      InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
-
       // The rest can be passed to the root element
       ...other
     } = fieldResponse;
 
-    const handleRef = useForkRef(InputPropsRef, ref);
+    const pickerContext = usePickerContext();
+    const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
     return (
       <BrowserFieldRoot ref={handleRef} {...other}>
-        {startAdornment}
         <BrowserFieldContent>
           <PickersSectionList
             elements={elements}
@@ -90,7 +94,13 @@ const BrowserDateField = React.forwardRef(
             onKeyDown={onKeyDown}
           />
         </BrowserFieldContent>
-        {endAdornment}
+        <IconButton
+          onClick={() => pickerContext.setOpen((prev) => !prev)}
+          sx={{ marginLeft: 1.5 }}
+          aria-label={openPickerAriaLabel}
+        >
+          <CalendarIcon />
+        </IconButton>
       </BrowserFieldRoot>
     );
   },

diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js
@@ -82,18 +82,18 @@ const BrowserTextField = React.forwardRef((props, ref) => {
 const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
   const manager = useDateRangeManager();
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { slotProps, slots, ownerState, ...otherForwardedProps } = forwardedProps;
+  const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
 
   const startTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'start' },
+    ownerState: { position: 'start' },
   });
 
   const endTextFieldProps = useSlotProps({
     elementType: 'input',
     externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'end' },
+    ownerState: { position: 'end' },
   });
 
   const fieldResponse = useMultiInputRangeField({

diff --git a/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx
@@ -108,7 +108,11 @@ interface BrowserMultiInputDateRangeFieldProps
       DateRangePickerFieldProps,
       'unstableFieldRef' | 'clearable' | 'onClear'
     >,
-    MultiInputFieldRefs {}
+    MultiInputFieldRefs {
+  slotProps: {
+    textField: any;
+  };
+}
 
 type BrowserMultiInputDateRangeFieldComponent = ((
   props: BrowserMultiInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,
@@ -118,18 +122,18 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
   (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const manager = useDateRangeManager();
     const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-    const { slotProps, slots, ownerState, ...otherForwardedProps } = forwardedProps;
+    const { slotProps, ownerState, ...otherForwardedProps } = forwardedProps;
 
     const startTextFieldProps = useSlotProps({
       elementType: 'input',
       externalSlotProps: slotProps?.textField,
-      ownerState: { ...props, position: 'start' },
+      ownerState: { position: 'start' } as any,
     }) as MultiInputFieldSlotTextFieldProps;
 
     const endTextFieldProps = useSlotProps({
       elementType: 'input',
       externalSlotProps: slotProps?.textField,
-      ownerState: { ...props, position: 'end' },
+      ownerState: { position: 'end' } as any,
     }) as MultiInputFieldSlotTextFieldProps;
 
     const fieldResponse = useMultiInputRangeField({

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.js
@@ -59,13 +59,12 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     readOnly,
     focused,
     error,
-    InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
     // The rest can be passed to the root element
     ...other
   } = fieldResponse;
 
   const pickerContext = usePickerContext();
-  const handleRef = useForkRef(InputPropsRef, ref);
+  const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
   return (
     <BrowserFieldRoot
@@ -75,7 +74,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
         minWidth: 300,
       }}
     >
-      {startAdornment}
       <BrowserFieldContent>
         <PickersSectionList
           elements={elements}
@@ -89,7 +87,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
           onKeyDown={onKeyDown}
         />
       </BrowserFieldContent>
-      {endAdornment}
       <InputAdornment position="end">
         <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
           <DateRangeIcon />

diff --git a/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx b/docs/data/date-pickers/custom-field/BrowserV7SingleInputRangeField.tsx
@@ -77,14 +77,12 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       focused,
       error,
 
-      InputProps: { ref: InputPropsRef, startAdornment, endAdornment } = {},
-
       // The rest can be passed to the root element
       ...other
     } = fieldResponse;
 
     const pickerContext = usePickerContext();
-    const handleRef = useForkRef(InputPropsRef, ref);
+    const handleRef = useForkRef(pickerContext.triggerRef, ref);
 
     return (
       <BrowserFieldRoot
@@ -94,7 +92,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
           minWidth: 300,
         }}
       >
-        {startAdornment}
         <BrowserFieldContent>
           <PickersSectionList
             elements={elements}
@@ -108,7 +105,6 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
             onKeyDown={onKeyDown}
           />
         </BrowserFieldContent>
-        {endAdornment}
         <InputAdornment position="end">
           <IconButton onClick={() => pickerContext.setOpen((prev) => !prev)}>
             <DateRangeIcon />