Merge branch 'master' into react-18

mui · Aug 4, 2022 · 51e5822 · 51e5822
2 parents 2bf51b5 + 17a2570
commit 51e5822
Show file tree

Hide file tree

Showing 90 changed files with 385 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.15.1
+
+_Aug 4, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 New [page presenting the `apiRef`](https://mui.com/x/react-data-grid/api-object/) (#5273) @flaviendelangle
+- ✨ Better keyboard support for start editing cells (#5511) @oliviertassinari
+- 🌍 Improvements to different locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.1` / `@mui/x-data-grid-pro@v5.15.1` / `@mui/x-data-grid-premium@v5.15.1`
+
+#### Changes
+
+- [DataGrid] Improve start edit UX (#5511) @oliviertassinari
+- [DataGrid] Add `initialOpen` prop to `GridEditSingleSelectCell` to allow overriding initial open state (#5645) @shapaaa
+- [DataGrid] Forward `ref` to root element in `GridEditInputCell` (#5631) @Zenoo
+- [DataGrid] Toggle open state when clicking on buttons in the `GridToolbar` (#5503) @cherniavskii
+- [DataGrid] Improve German (de-DE) locale (#5586) @sebastianfrey
+- [DataGrid] Improve Korean (ko-KR) locale (#5668) @Einere
+- [DataGrid] Complete Italian (it-IT) locale (#5487) @mamodev
+
+### `@mui/x-date-pickers@v5.0.0-beta.4` / `@mui/x-date-picker-pro@5.0.0-beta.4`
+
+#### Changes
+
+- [DatePicker] Customize day formatter in the calendar (#5373) @alexfauquette
+
+### Docs
+
+- [docs] New location for the legal content (#5595) @oliviertassinari
+- [docs] Update description of `maxDateTime` prop (#5639) @jurecuhalev
+- [docs] Add missing `date-fns` dependency when opening Codesandbox demo (#5692) @cherniavskii
+
+### Core
+
+- [core] Drop usage of `GRID_EXPERIMENTAL_ENABLED` env variable (#5669) @ar7casper
+- [core] Isolate asset loading under /x/ (#5594) @oliviertassinari
+- [core] Upgrade node to v14 (#4999) @cherniavskii
+
 ## 5.15.0
 
 _Jul 29, 2022_
@@ -13,7 +54,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
   Premium users can now aggregate data in the grid.
   Extract information like sum, average, count, and others with a couple of clicks.
-  
+
   https://user-images.githubusercontent.com/45398769/181581503-77cc412e-9d9e-4de1-8bc3-c3bccc54cdaa.mp4
 
   To enable this feature, add `experimentalFeatures={{ aggregation: true }}`.

diff --git a/docs/data/date-pickers/date-picker/date-picker-pt.md b/docs/data/date-pickers/date-picker/date-picker-pt.md
@@ -46,7 +46,7 @@ The date picker component can be disabled or read-only.
 
 ## Localização
 
-Use `LocalizationProvider` para alterar a date-engine de localização que é usada para renderizar o seletor de data. Aqui esta um exemplo de alteração da localidade com o adaptador `date-fns`:
+Use `LocalizationProvider` para alterar a date-library de localização que é usada para renderizar o seletor de data. Aqui esta um exemplo de alteração da localidade com o adaptador `date-fns`:
 
 {{"demo": "LocalizedDatePicker.js"}}
 

diff --git a/docs/data/date-pickers/date-picker/date-picker-zh.md b/docs/data/date-pickers/date-picker/date-picker-zh.md
@@ -46,7 +46,7 @@ The date picker component can be disabled or read-only.
 
 ## Localization 本地化
 
-你可以使用 `LocalizationProvider` 来改变用于渲染日期选择的 date-engine（日期引擎）本地化设置。 下面是一个更改 `date-fns` 适配器本地化设置的示例：
+你可以使用 `LocalizationProvider` 来改变用于渲染日期选择的 date-library（日期引擎）本地化设置。 下面是一个更改 `date-fns` 适配器本地化设置的示例：
 
 {{"demo": "LocalizedDatePicker.js"}}
 

diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md
@@ -48,7 +48,8 @@ The date picker component can be disabled or read-only.
 
 ## Localization
 
-Use `LocalizationProvider` to change the date-engine locale that is used to render the date picker. Here is an example of changing the locale for the `date-fns` adapter:
+Use `LocalizationProvider` to change the date-library locale that is used to render the date picker.
+See the documentation page [about localization](/x/react-date-pickers/date-picker/#localization) for more details.
 
 ## Jalali calendar system
 

diff --git a/docs/data/date-pickers/localization/CustomizeDayPicker.js b/docs/data/date-pickers/localization/CustomizeDayPicker.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+
+const adapter = new AdapterDateFns();
+export default function CustomizeDayPicker() {
+  const [value, setValue] = React.useState(adapter.date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <StaticDatePicker
+        displayStaticWrapperAs="desktop"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        dayOfWeekFormatter={(day) => `${day}.`}
+        toolbarFormat="eee dd MMMM"
+        showToolbar
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/localization/CustomizeDayPicker.tsx b/docs/data/date-pickers/localization/CustomizeDayPicker.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
+
+const adapter = new AdapterDateFns();
+export default function CustomizeDayPicker() {
+  const [value, setValue] = React.useState<Date | null>(adapter.date());
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <StaticDatePicker
+        displayStaticWrapperAs="desktop"
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+        renderInput={(params) => <TextField {...params} />}
+        dayOfWeekFormatter={(day) => `${day}.`}
+        toolbarFormat="eee dd MMMM"
+        showToolbar
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/localization/CustomizeDayPicker.tsx.preview b/docs/data/date-pickers/localization/CustomizeDayPicker.tsx.preview
@@ -0,0 +1,13 @@
+<LocalizationProvider dateAdapter={AdapterDateFns}>
+  <StaticDatePicker
+    displayStaticWrapperAs="desktop"
+    value={value}
+    onChange={(newValue) => {
+      setValue(newValue);
+    }}
+    renderInput={(params) => <TextField {...params} />}
+    dayOfWeekFormatter={(day) => `${day}.`}
+    toolbarFormat="eee dd MMMM"
+    showToolbar
+  />
+</LocalizationProvider>
diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md
@@ -10,9 +10,9 @@ The default locale of MUI is English (United States). If you want to use other l
 
 Localization can impact pickers components rendering in two distincts ways: The date format, and the components attributes such as `aria-label`.
 
-## Date-engine locale
+## Date-library locale
 
-Use `LocalizationProvider` to change the date-engine locale that is used to render pickers. Here is an example of changing the locale for the `date-fns` adapter:
+Use `LocalizationProvider` to change the date-library locale that is used to render pickers. Here is an example of changing the locale for the `date-fns` adapter:
 
 {{"demo": "LocalizedDatePicker.js"}}
 
@@ -23,6 +23,17 @@ This can be overridden by using the `ampm` prop.
 
 {{"demo": "LocalizedTimePicker.js"}}
 
+### Advanced customization
+
+To customize the date format used in the toolbar, you can use prop `toolbarFormat`.
+
+To customize day names in calendar header, you can use `dayOfWeekFormatter` which takes as an input the short name of the day provided by the date-library and returns it's formatted version.
+The default formatter only keeps the first letter and capitalises it.
+
+In the example bellow, we add a dot at the end of each day in the calendar header, and use `eee dd MMMM` format for the toolbar.
+
+{{"demo": "CustomizeDayPicker.js"}}
+
 ## Translation keys
 
 As the rest of MUI components, you can modify text and translations.

diff --git a/docs/data/date-pickers/time-picker/time-picker-pt.md b/docs/data/date-pickers/time-picker/time-picker-pt.md
@@ -43,7 +43,7 @@ The time picker component can be disabled or read-only.
 
 ## Localização
 
-Use `LocalizationProvider` para alterar a date-engine de localização que é usada para renderizar o seletor de hora. O seletor de hora ajustará automaticamente à configuração de horário da localidade, ou seja, ao formato 12 horas ou 24 horas. Isso pode ser controlado com a propriedade `ampm`.
+Use `LocalizationProvider` para alterar a date-library de localização que é usada para renderizar o seletor de hora. O seletor de hora ajustará automaticamente à configuração de horário da localidade, ou seja, ao formato 12 horas ou 24 horas. Isso pode ser controlado com a propriedade `ampm`.
 
 {{"demo": "LocalizedTimePicker.js"}}
 

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "5.15.0",
+  "version": "5.15.1",
   "private": true,
   "author": "MUI Team",
   "license": "MIT",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -40,22 +40,19 @@ ponyfillGlobal.muiDocConfig = {
   csbIncludePeerDependencies: (deps, { versions }) => {
     const newDeps = { ...deps };
 
-    if (newDeps['@mui/x-data-grid']) {
-      newDeps['@mui/material'] = versions['@mui/material'];
+    if (newDeps['@mui/x-data-grid-premium']) {
+      newDeps['@mui/x-data-grid-pro'] = versions['@mui/x-data-grid-pro'];
+      // TODO: remove when https://github.com/mui/material-ui/pull/32492 is released
+      // use `import 'exceljs'` in demonstrations instead
+      newDeps.exceljs = versions.exceljs;
     }
 
     if (newDeps['@mui/x-data-grid-pro']) {
-      newDeps['@mui/material'] = versions['@mui/material'];
       newDeps['@mui/x-data-grid'] = versions['@mui/x-data-grid'];
     }
 
-    if (newDeps['@mui/x-data-grid-premium']) {
+    if (newDeps['@mui/x-data-grid']) {
       newDeps['@mui/material'] = versions['@mui/material'];
-      newDeps['@mui/x-data-grid'] = versions['@mui/x-data-grid'];
-      newDeps['@mui/x-data-grid-pro'] = versions['@mui/x-data-grid-pro'];
-      // TODO: remove when https://github.com/mui/material-ui/pull/32492 is released
-      // use `import 'exceljs'` in demonstrations instead
-      newDeps.exceljs = versions.exceljs;
     }
 
     if (newDeps['@mui/x-data-grid-generator']) {
@@ -65,14 +62,13 @@ ponyfillGlobal.muiDocConfig = {
       newDeps['@mui/x-data-grid-pro'] = versions['@mui/x-data-grid-pro']; // Some TS types are imported from @mui/x-data-grid-pro
     }
 
-    if (newDeps['@mui/x-date-pickers']) {
-      newDeps['@mui/material'] = versions['@mui/material'];
-      newDeps['date-fns'] = versions['date-fns'];
+    if (newDeps['@mui/x-date-pickers-pro']) {
+      newDeps['@mui/x-date-pickers'] = versions['@mui/x-date-pickers'];
     }
 
-    if (newDeps['@mui/x-date-pickers-pro']) {
+    if (newDeps['@mui/x-date-pickers']) {
       newDeps['@mui/material'] = versions['@mui/material'];
-      newDeps['@mui/x-date-pickers'] = versions['@mui/x-date-pickers'];
+      newDeps['date-fns'] = versions['date-fns'];
     }
 
     return newDeps;

diff --git a/docs/pages/x/api/date-pickers/calendar-picker.json b/docs/pages/x/api/date-pickers/calendar-picker.json
@@ -3,6 +3,10 @@
     "onChange": { "type": { "name": "func" }, "required": true },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableFuture": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json
@@ -13,6 +13,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "desktopModeMediaQuery": {
       "type": { "name": "string" },

diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json
@@ -18,6 +18,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "desktopModeMediaQuery": {
       "type": { "name": "string" },

diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json
@@ -16,6 +16,10 @@
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "desktopModeMediaQuery": {
       "type": { "name": "string" },

diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json
@@ -13,6 +13,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableFuture": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json
@@ -18,6 +18,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
@@ -16,6 +16,10 @@
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableFuture": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json
@@ -13,6 +13,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "DialogProps": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json
@@ -18,6 +18,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "DialogProps": { "type": { "name": "object" } },
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json
@@ -16,6 +16,10 @@
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "DialogProps": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json
@@ -13,6 +13,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableFuture": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json
@@ -18,6 +18,10 @@
     },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disableAutoMonthSwitching": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },

diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json
@@ -16,6 +16,10 @@
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },
     "dateRangeIcon": { "type": { "name": "node" } },
+    "dayOfWeekFormatter": {
+      "type": { "name": "func" },
+      "default": "(day) => day.charAt(0).toUpperCase()"
+    },
     "defaultCalendarMonth": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" } },
     "disableFuture": { "type": { "name": "bool" } },

diff --git a/docs/translations/api-docs/date-pickers/calendar-picker-pt.json b/docs/translations/api-docs/date-pickers/calendar-picker-pt.json
@@ -3,6 +3,7 @@
   "propDescriptions": {
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",
+    "dayOfWeekFormatter": "Formats the day of week displayed in the calendar header.<br><br><strong>Signature:</strong><br><code>function(day: string) =&gt; string</code><br><em>day:</em> The day of week provided by the adapter&#39;s method <code>getWeekdays</code>.<br> <em>returns</em> (string): The name to display.",
     "defaultCalendarMonth": "Default calendar month displayed when <code>value={null}</code>.",
     "disabled": "If <code>true</code>, the picker and text field are disabled.",
     "disableFuture": "If <code>true</code> future days are disabled.",