[docs] Fix typos and grammar issues (#11049)

docs/data/charts/areas-demo/areas-demo.md

@@ -4,7 +4,7 @@ title: Charts - Areas demonstration
 
 # Charts - Areas demonstration
 
-<p class="description">This page groups demonstration using areas charts.</p>
+<p class="description">This page groups demonstration using area charts.</p>
 
 ## SimpleAreaChart
 

docs/data/charts/bars/bars.md

@@ -64,7 +64,7 @@ If you're using [composition](/x/react-charts/#multiple-charts), you should set
 
 ## Animation
 
-To skip animation at the creation and update of your chart you can use the `skipAnimation` prop.
+To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
 Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).

docs/data/charts/components/components.md

@@ -12,7 +12,7 @@ title: Charts - Custom components
 
 Charts dimensions are defined by a few props:
 
-- `height` and `width` for the `<svg />` size. If not provided those values are derived from the container.
+- `height` and `width` for the `<svg />` size. If not provided, those values are derived from the container.
 - `margin` for adding space between the `<svg />` border and the **drawing area**.
 
 The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs).

docs/data/charts/funnel/funnel.md

@@ -4,7 +4,7 @@ title: React Funnel chart
 
 # Charts - Funnel 🚧[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">Funnel charts allows to express quantity evolution along a process, such as audience engagement.</p>
+<p class="description">Funnel charts allow to express quantity evolution along a process, such as audience engagement.</p>
 
 :::warning
 This feature isn't implemented yet. It's coming.

docs/data/charts/gauge/gauge.md

@@ -4,7 +4,7 @@ title: React Gauge chart
 
 # Charts - Gauge 🚧
 
-<p class="description">Gauge chart allows to evaluate a metric.</p>
+<p class="description">Gauge charts let the user evaluate metrics.</p>
 
 :::warning
 This feature isn't implemented yet. It's coming.

docs/data/charts/heat-map/heat-map.md

@@ -4,7 +4,7 @@ title: React Heat map chart
 
 # Charts - Heat map 🚧
 
-<p class="description">Heat map charts allows to highlight correlation between categories.</p>
+<p class="description">Heat map charts allow to highlight correlation between categories.</p>
 
 :::warning
 This feature isn't implemented yet. It's coming.

docs/data/charts/legend/legend.md

@@ -30,7 +30,7 @@ By default, the legend is placed above the charts.
 
 {{"demo": "LegendPositionNoSnap.js", "hideToolbar": true, "bg": "inline"}}
 
-### Hidding
+### Hiding
 
 You can hide the legend with the property `slotProps.legend.hidden`.
 

docs/data/charts/lines/lines.md

@@ -56,7 +56,7 @@ For more information, see [stacking docs](/x/react-charts/stacking/).
 
 ### Skip missing points
 
-Line series can have less data than the axis.
+Line series can have fewer data points than the axis.
 You can handle lines with partial data or data starting at different points by providing `null` values.
 
 By default, the tooltip does not show series if they have no value.
@@ -85,7 +85,7 @@ The following code plots a line for x between 2 and 4.
 
 Line series accepts a `connectNulls` property which will continue the interpolation across points with a `null` value.
 This property can link two sets of points, with `null` data between them.
-However, it can not extrapolate the curve before the first non-null data point or after the last one.
+However, it cannot extrapolate the curve before the first non-null data point or after the last one.
 
 {{"demo": "ConnectNulls.js"}}
 

docs/data/charts/stacking/StackOrderDemo.js

@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { BarChart } from '@mui/x-charts/BarChart';
 
-// Data comming from https://www.insee.fr/fr/statistiques/5013868
+// Data coming from https://www.insee.fr/fr/statistiques/5013868
 const commonTransportation = [
   6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7,
   14.3, 14.3, 14.3, 14.1, 14.2, 14.2, 14.0, 13.8, 13.8, 13.9, 13.6, 14.0, 14.9, 14.8,

docs/data/charts/stacking/StackOrderDemo.tsx

@@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { BarChart } from '@mui/x-charts/BarChart';
 import { StackOrderType } from '@mui/x-charts/models';
 
-// Data comming from https://www.insee.fr/fr/statistiques/5013868
+// Data coming from https://www.insee.fr/fr/statistiques/5013868
 const commonTransportation = [
   6.5, 12.5, 17.2, 19.6, 20.1, 20.0, 19.5, 18.8, 18.2, 17.3, 16.4, 15.9, 15.2, 14.7,
   14.3, 14.3, 14.3, 14.1, 14.2, 14.2, 14.0, 13.8, 13.8, 13.9, 13.6, 14.0, 14.9, 14.8,

docs/data/charts/styling/styling.md

@@ -4,7 +4,7 @@ title: Charts - Styling
 
 # Charts - Styling
 
-<p class="description">This page groups topics about charts customistion.</p>
+<p class="description">This page groups topics about charts customization.</p>
 
 ## Colors
 

docs/data/charts/tooltip/Formatting.js

@@ -76,7 +76,7 @@ const lineChartsParams = {
   height: 400,
 };
 
-const yearFormater = (date) => date.getFullYear().toString();
+const yearFormatter = (date) => date.getFullYear().toString();
 const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
@@ -86,7 +86,7 @@ export default function Formatting() {
   return (
     <LineChart
       {...lineChartsParams}
-      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
       series={lineChartsParams.series.map((s) => ({
         ...s,
         valueFormatter: currencyFormatter,

docs/data/charts/tooltip/Formatting.tsx

@@ -76,7 +76,7 @@ const lineChartsParams = {
   height: 400,
 };
 
-const yearFormater = (date: Date) => date.getFullYear().toString();
+const yearFormatter = (date: Date) => date.getFullYear().toString();
 const currencyFormatter = new Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
@@ -86,7 +86,7 @@ export default function Formatting() {
   return (
     <LineChart
       {...lineChartsParams}
-      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+      xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
       series={lineChartsParams.series.map((s) => ({
         ...s,
         valueFormatter: currencyFormatter,

docs/data/charts/tooltip/Formatting.tsx.preview

@@ -1,6 +1,6 @@
 <LineChart
   {...lineChartsParams}
-  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormater }]}
+  xAxis={[{ data: years, scaleType: 'time', valueFormatter: yearFormatter }]}
   series={lineChartsParams.series.map((s) => ({
     ...s,
     valueFormatter: currencyFormatter,

docs/data/charts/tooltip/tooltip.md

@@ -81,10 +81,10 @@ It will remove the header showing the x-axis value from the tooltip.
 
 ## Composition
 
-If you're using composition, by default the axis will be listening for mouse events to get its current x/y values.
+If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values.
 If you don't need it, you can disable those listeners with the `disableAxisListener` prop.
 
-You need those listerne if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#interactions).
+You need those listeners if you are using [axes highlight](/x/react-charts/tooltip/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#interactions).
 
 ```jsx
 <ChartContainer {...} disableAxisListener>

docs/data/data-grid/accessibility/accessibility.md

@@ -13,7 +13,7 @@ The most commonly encountered conformance guidelines for accessibility are:
 - Europe: [EAA](https://ec.europa.eu/social/main.jsp?catId=1202) (European Accessibility Act)
 
 WCAG 2.1 has three levels of conformance: A, AA, and AAA.
-Level AA meet the most commonly encountered conformance guidelines.
+Level AA meets the most commonly encountered conformance guidelines.
 This is the most common target for organizations so what MUI aims to support very well.
 
 The [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) provide valuable information on how to optimize the accessibility of a data grid.

docs/data/data-grid/custom-columns/custom-columns.md

@@ -40,7 +40,7 @@ The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` colu
 {{"demo": "EditingWithDatePickers.js", "bg": "inline", "defaultCodeOpen": false }}
 
 :::warning
-You can change date format by importing different locale (`en-US` locale is used in the example above).
+You can change the date format by importing different locale (`en-US` locale is used in the example above).
 See [Localization](/x/react-date-pickers/localization/) for more information.
 :::
 

docs/data/data-grid/filtering/header-filters.md

@@ -25,7 +25,7 @@ You can switch between different operators by clicking the operator button in th
 
 ## Simple header filters
 
-You can disable default filter panel using `disableColumnFilter` prop and only show the default operator by passing `slots.headerFilterMenu` as `null`.
+You can disable the default filter panel using `disableColumnFilter` prop and only show the default operator by passing `slots.headerFilterMenu` as `null`.
 
 {{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/data-grid/row-definition/row-definition.md

@@ -48,7 +48,7 @@ The data grid pulls this information directly from the data set itself, not from
 Just like the `rows` prop, the `getRowId` function should keep the same JavaScript reference between two renders.
 Otherwise, the data grid will re-apply heavy work like sorting and filtering.
 
-It could be achieved by either defining the prop outside of the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope.
+It could be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope.
 :::
 
 ## Styling rows

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

@@ -20,7 +20,7 @@ export default function AdapterHijri() {
           <DateTimePicker
             label="Date Picker"
             defaultValue={moment(new Date(2022, 1, 1))}
-            // moment-hijri support dates bewteen 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
+            // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
             minDate={moment(new Date(1938, 0, 1))}
             maxDate={moment(new Date(2075, 11, 31))}
           />

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

@@ -20,7 +20,7 @@ export default function AdapterHijri() {
           <DateTimePicker
             label="Date Picker"
             defaultValue={moment(new Date(2022, 1, 1))}
-            // moment-hijri support dates bewteen 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
+            // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
             minDate={moment(new Date(1938, 0, 1))}
             maxDate={moment(new Date(2075, 11, 31))}
           />

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

@@ -4,7 +4,7 @@
       <DateTimePicker
         label="Date Picker"
         defaultValue={moment(new Date(2022, 1, 1))}
-        // moment-hijri support dates bewteen 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
+        // moment-hijri support dates between 1356-01-01 and 1499-12-29 H (1937-03-14 and 2076-11-26)
         minDate={moment(new Date(1938, 0, 1))}
         maxDate={moment(new Date(2075, 11, 31))}
       />

docs/data/date-pickers/custom-components/custom-components.md

@@ -145,7 +145,7 @@ In the example below, the actions are the same as in the section above, but they
 ## Tabs
 
 The tabs are available on all date time picker components.
-It allows to switch between date and time interfaces.
+It allows switching between date and time interfaces.
 
 ### Component props
 
@@ -192,7 +192,7 @@ It displays the current values and allows to switch between different views.
 ### Component props
 
 You can customize how the toolbar displays the current value with `toolbarFormat`.
-By default empty values are replaced by `__`.
+By default, empty values are replaced by `__`.
 This can be modified by using `toolbarPlaceholder` props.
 
 By default, the toolbar is `hidden` on desktop, and `visible` on mobile.
@@ -238,5 +238,5 @@ You can pass custom components—to replace the icons, for example—as shown be
 
 ## Shortcuts
 
-You can add shortcuts to every pickers.
+You can add shortcuts to every Picker component.
 For more information, check the [dedicated page](/x/react-date-pickers/shortcuts/).

docs/data/date-pickers/date-calendar/date-calendar.md

@@ -69,8 +69,8 @@ If you only need the `year` view or the `month` view, you can use the `YearCalen
 
 To show all days of displayed weeks, including those outside of the current month, use `showDaysOutsideCurrentMonth`.
 
-By default, only weeks of the current month are displayed, but you can provide a total number of week to display with `fixedWeekNumber` prop.
-This value is usually set to `6` for Gregorian calendars, because months display can vary between 4 and 6 weeks.
+By default, only weeks of the current month are displayed, but you can provide a total number of weeks to display with `fixedWeekNumber` prop.
+This value is usually set to `6` for Gregorian calendars, because month display can vary between 4 and 6 weeks.
 
 {{"demo": "CustomMonthLayout.js"}}
 

docs/data/date-pickers/date-range-field/date-range-field.md

@@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers-pro'
 
 # Date Range Field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">The Date Range Field components let the user select a date range with the keyboard.</p>
+<p class="description">The Date Range Field lets the user select a date range with the keyboard.</p>
 
 ## Basic usage
 

docs/data/date-pickers/date-range-picker/date-range-picker.md

@@ -9,7 +9,7 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 # Date Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">The Date Range Picker let the user select a range of dates.</p>
+<p class="description">The Date Range Picker lets the user select a range of dates.</p>
 
 ## Basic usage
 

docs/data/date-pickers/date-time-range-field/date-time-range-field.md

@@ -8,7 +8,7 @@ packageName: '@mui/x-date-pickers-pro'
 
 # Date Time Range Field [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">The Date Time Range Field let the user select a range of dates with an explicit starting and ending time with the keyboard.</p>
+<p class="description">The Date Time Range Field lets the user select a range of dates with an explicit starting and ending time with the keyboard.</p>
 
 ## Basic usage
 

docs/data/date-pickers/date-time-range-picker/date-time-range-picker.md

@@ -8,7 +8,7 @@ materialDesign: https://m2.material.io/components/date-pickers
 
 # Date Time Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')🚧
 
-<p class="description">The Date Time Range Picker let the user select a range of dates with an explicit starting and ending time.</p>
+<p class="description">The Date Time Range Picker lets the user select a range of dates with an explicit starting and ending time.</p>
 
 :::warning
 This feature isn't implemented yet. It's coming.

docs/data/date-pickers/digital-clock/digital-clock.md

@@ -8,13 +8,13 @@ packageName: '@mui/x-date-pickers'
 
 # Digital Clock
 
-<p class="description">The Digital Clock components let the user select a time without any input or popper / modal.</p>
+<p class="description">The Digital Clock lets the user select a time without any input or popper / modal.</p>
 
 ## Description
 
 There are two component versions for different cases. The `DigitalClock` handles selection of a single time instance in one step, just like a `select` component. The `MultiSectionDigitalClock` allows selecting time using separate sections for separate views.
 
-The `DigitalClock` is more appropriate when there is a limited amount of time options needed, while the `MultiSectionDigitalClock` is suited for cases when a more granular time selection is needed.
+The `DigitalClock` is more appropriate when there is a limited number of time options needed, while the `MultiSectionDigitalClock` is suited for cases when a more granular time selection is needed.
 
 ## Basic usage
 

docs/data/date-pickers/lifecycle/ServerInteraction.js

@@ -62,16 +62,19 @@ function DateFieldWithAccept(props) {
     default: null,
   });
 
-  // Debounced function needs to be memoized to keep the same timeout beween each render.
+  // Debounced function needs to be memoized to keep the same timeout between each render.
   // For the same reason, the `onAccept` needs to be wrapped in useCallback.
-  const deboucedOnAccept = React.useMemo(() => debounce(onAccept, 1000), [onAccept]);
+  const debouncedOnAccept = React.useMemo(
+    () => debounce(onAccept, 1000),
+    [onAccept],
+  );
 
   return (
     <DateField
       value={value}
       onChange={(newValue, context) => {
         setValue(newValue);
-        deboucedOnAccept(newValue);
+        debouncedOnAccept(newValue);
         onChange?.(newValue, context);
       }}
       {...other}

docs/data/date-pickers/lifecycle/ServerInteraction.tsx

@@ -68,16 +68,19 @@ function DateFieldWithAccept(
     default: null,
   });
 
-  // Debounced function needs to be memoized to keep the same timeout beween each render.
+  // Debounced function needs to be memoized to keep the same timeout between each render.
   // For the same reason, the `onAccept` needs to be wrapped in useCallback.
-  const deboucedOnAccept = React.useMemo(() => debounce(onAccept, 1000), [onAccept]);
+  const debouncedOnAccept = React.useMemo(
+    () => debounce(onAccept, 1000),
+    [onAccept],
+  );
 
   return (
     <DateField
       value={value}
       onChange={(newValue, context) => {
         setValue(newValue);
-        deboucedOnAccept(newValue);
+        debouncedOnAccept(newValue);
         onChange?.(newValue, context);
       }}
       {...other}

docs/data/date-pickers/shortcuts/BasicShortcuts.js

@@ -5,7 +5,8 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
 const getMonthWeekday = (monthIndex, weekdayIndex, dayRank) => {
-  // Helper to find for example the 3rd monday in Jun
+  // Helper to find the nth weekday in a given month.
+  // For example, Find the 3rd Monday in January.
   const today = dayjs();
   const firstDayOfMonth = today.month(monthIndex).startOf('month');
   const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

docs/data/date-pickers/shortcuts/BasicShortcuts.tsx

@@ -10,7 +10,8 @@ const getMonthWeekday = (
   weekdayIndex: number,
   dayRank: number,
 ) => {
-  // Helper to find for example the 3rd monday in Jun
+  // Helper to find the nth weekday in a given month.
+  // For example, Find the 3rd Monday in January.
   const today = dayjs();
   const firstDayOfMonth = today.month(monthIndex).startOf('month');
   const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)

docs/data/date-pickers/shortcuts/ChangeImportance.js

@@ -9,7 +9,8 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 
 const getMonthWeekday = (monthIndex, weekdayIndex, dayRank) => {
-  // Helper to find for example the 3rd monday in Jun
+  // Helper to find the nth weekday in a given month.
+  // For example, Find the 3rd Monday in January.
   const today = dayjs();
   const firstDayOfMonth = today.month(monthIndex).startOf('month');
   const weekDay = firstDayOfMonth.day(); // 0 (Sunday) to 6 (Saturday)