Merge branch 'master' into all-pluggin-way

Author: alexfauquette

docs/data/charts/axis/CustomDomainYAxis.js

@@ -5,10 +5,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
 const settings = {
-  valueFormatter: (value) => `${value}%`,
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };

docs/data/charts/axis/CustomDomainYAxis.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 
-const settings = {
-  valueFormatter: (value: number | null) => `${value}%`,
+const settings: BarChartProps = {
   height: 200,
-  showTooltip: true,
-  showHighlight: true,
   series: [{ data: [60, -15, 66, 68, 87, 82, 83, 85, 92, 75, 76, 50, 91] }],
   margin: { top: 10, bottom: 20 },
 };

docs/data/charts/styling/ColorTemplate.js

@@ -33,7 +33,6 @@ const legendPlacement = {
         horizontal: 'right',
       },
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {

docs/data/charts/styling/ColorTemplate.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ScatterValueType } from '@mui/x-charts/models';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
@@ -29,23 +29,22 @@ function getGaussianSeriesData(
   });
 }
 
-const legendPlacement = {
+const legendPlacement: Partial<ScatterChartProps> = {
   slotProps: {
     legend: {
       position: {
         vertical: 'middle',
         horizontal: 'right',
       },
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
     top: 20,
     right: 20,
     left: 30,
   },
-} as const;
+};
 const series = [
   { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) },
   { label: 'Series 2', data: getGaussianSeriesData([-4, 0]) },

docs/data/charts/styling/MuiColorTemplate.js

@@ -39,7 +39,6 @@ const legendPlacement = {
   slotProps: {
     legend: {
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {

docs/data/charts/styling/MuiColorTemplate.tsx

@@ -9,7 +9,7 @@ import Button from '@mui/material/Button';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { Chance } from 'chance';
-import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { ScatterChart, ScatterChartProps } from '@mui/x-charts/ScatterChart';
 import { ScatterValueType } from '@mui/x-charts/models';
 import {
   blueberryTwilightPalette,
@@ -39,18 +39,17 @@ function getGaussianSeriesData(
   });
 }
 
-const legendPlacement = {
+const legendPlacement: Partial<ScatterChartProps> = {
   slotProps: {
     legend: {
       direction: 'vertical',
-      itemGap: 2,
     },
   },
   margin: {
     top: 20,
     right: 20,
   },
-} as const;
+};
 
 const series = [
   { label: 'Series 1', data: getGaussianSeriesData([-5, 0]) },

docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx

@@ -50,7 +50,7 @@ export default function ColumnSizingPersistWidthOrder() {
 }
 
 const useColumnsState = (
-  apiRef: React.MutableRefObject<GridApiPro>,
+  apiRef: React.RefObject<GridApiPro>,
   columns: GridColDef[],
 ) => {
   const [widths, setWidths] = React.useState<Record<GridColDef['field'], number>>(

docs/data/data-grid/components/CustomColumnsPanel.tsx

@@ -43,7 +43,7 @@ function ColumnGroup({
 }: {
   group: GridColumnGroup;
   columnLookup: GridColumnLookup;
-  apiRef: React.MutableRefObject<GridApi>;
+  apiRef: React.RefObject<GridApi>;
   columnVisibilityModel: GridColumnVisibilityModel;
 }) {
   const leaves = React.useMemo(() => {

docs/data/data-grid/export/CustomExport.tsx

@@ -16,7 +16,7 @@ import {
 import MenuItem from '@mui/material/MenuItem';
 import { ButtonProps } from '@mui/material/Button';
 
-const getJson = (apiRef: React.MutableRefObject<GridApi>) => {
+const getJson = (apiRef: React.RefObject<GridApi>) => {
   // Select rows and columns
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js

@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>

docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx

@@ -2,14 +2,21 @@ import * as React from 'react';
 import Portal from '@mui/material/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridPortalWrapper,
+  GridToolbarQuickFilter,
+  GridToolbar,
+} from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
       <Portal container={() => document.getElementById('filter-panel')!}>
-        <GridToolbarQuickFilter />
+        <GridPortalWrapper>
+          <GridToolbarQuickFilter />
+        </GridPortalWrapper>
       </Portal>
       <GridToolbar {...props} />
     </React.Fragment>

docs/data/date-pickers/calendar-systems/AdapterHijri.js

@@ -24,7 +24,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, format } = internalProps;
   const {
     InputProps,
     slotProps,
@@ -37,16 +36,18 @@ function ButtonDateTimeField(props) {
   } = forwardedProps;
 
   const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
   const { hasValidationError } = useValidation({
     validator: validateDate,
-    value,
-    timezone,
+    value: pickerContext.value,
+    timezone: pickerContext.timezone,
     props: internalProps,
   });
 
-  const valueStr = value == null ? parsedFormat : value.format(format);
+  const valueStr =
+    pickerContext.value == null
+      ? parsedFormat
+      : pickerContext.value.format(pickerContext.fieldFormat);
 
   return (
     <Button

docs/data/date-pickers/calendar-systems/AdapterHijri.tsx

@@ -28,7 +28,6 @@ const cacheRtl = createCache({
 
 function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date');
-  const { value, timezone, format } = internalProps;
   const {
     InputProps,
     slotProps,
@@ -41,16 +40,18 @@ function ButtonDateTimeField(props: DateTimePickerFieldProps) {
   } = forwardedProps;
 
   const pickerContext = usePickerContext();
-
-  const parsedFormat = useParsedFormat(internalProps);
+  const parsedFormat = useParsedFormat();
   const { hasValidationError } = useValidation({
     validator: validateDate,
-    value,
-    timezone,
+    value: pickerContext.value,
+    timezone: pickerContext.timezone,
     props: internalProps,
   });
 
-  const valueStr = value == null ? parsedFormat : value.format(format);
+  const valueStr =
+    pickerContext.value == null
+      ? parsedFormat
+      : pickerContext.value.format(pickerContext.fieldFormat);
 
   return (
     <Button

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.js

@@ -80,18 +80,12 @@ const BrowserTextField = React.forwardRef((props, ref) => {
 const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
   const {
     slotProps,
-    value,
-    format,
-    onChange,
     readOnly,
-    disabled,
     shouldDisableDate,
     minDate,
     maxDate,
     disableFuture,
     disablePast,
-    selectedSections,
-    onSelectedSectionsChange,
     className,
     unstableStartFieldRef,
     unstableEndFieldRef,
@@ -111,18 +105,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
 
   const fieldResponse = useMultiInputDateRangeField({
     sharedProps: {
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       enableAccessibleFieldDOMStructure: true,
     },
     startTextFieldProps,

docs/data/date-pickers/custom-field/BrowserV7MultiInputRangeField.tsx

@@ -116,18 +116,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
   (props: BrowserMultiInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
       slotProps,
-      value,
-      format,
-      onChange,
       readOnly,
-      disabled,
       shouldDisableDate,
       minDate,
       maxDate,
       disableFuture,
       disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
       className,
       unstableStartFieldRef,
       unstableEndFieldRef,
@@ -150,18 +144,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       MultiInputFieldSlotTextFieldProps
     >({
       sharedProps: {
-        value,
-        format,
-        onChange,
         readOnly,
-        disabled,
         shouldDisableDate,
         minDate,
         maxDate,
         disableFuture,
         disablePast,
-        selectedSections,
-        onSelectedSectionsChange,
         enableAccessibleFieldDOMStructure: true,
       },
       startTextFieldProps,

docs/data/date-pickers/custom-field/JoyV6Field.js

@@ -21,10 +21,7 @@ import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateF
 const joyTheme = extendJoyTheme();
 
 const JoyDateField = React.forwardRef((props, ref) => {
-  const fieldResponse = useDateField({
-    ...props,
-    enableAccessibleFieldDOMStructure: false,
-  });
+  const fieldResponse = useDateField(props);
 
   const {
     // Should be ignored
@@ -64,6 +61,7 @@ const JoyDatePicker = React.forwardRef((props, ref) => {
     <DatePicker
       ref={ref}
       {...props}
+      enableAccessibleFieldDOMStructure={false}
       slots={{ ...props.slots, field: JoyDateField }}
     />
   );

docs/data/date-pickers/custom-field/JoyV6Field.tsx

@@ -26,10 +26,7 @@ const joyTheme = extendJoyTheme();
 
 const JoyDateField = React.forwardRef(
   (props: DatePickerFieldProps<false>, ref: React.Ref<HTMLDivElement>) => {
-    const fieldResponse = useDateField<false, typeof props>({
-      ...props,
-      enableAccessibleFieldDOMStructure: false,
-    });
+    const fieldResponse = useDateField<false, typeof props>(props);
 
     const {
       // Should be ignored
@@ -73,6 +70,7 @@ const JoyDatePicker = React.forwardRef(
       <DatePicker
         ref={ref}
         {...props}
+        enableAccessibleFieldDOMStructure={false}
         slots={{ ...props.slots, field: JoyDateField }}
       />
     );