[POC] Applying Joy UI in Data Grid

.eslintrc.js

@@ -77,6 +77,7 @@ module.exports = {
     'jsdoc/require-returns': ['error', { contexts: ['TSFunctionType'] }],
     'jsdoc/require-returns-type': ['error', { contexts: ['TSFunctionType'] }],
     'jsdoc/require-returns-description': ['error', { contexts: ['TSFunctionType'] }],
+    'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
   },
   overrides: [
     ...baselineOverrides,

.github/ISSUE_TEMPLATE/5.rfc.yml

@@ -1,47 +1,42 @@
 name: RFC 💬
 description: Request for comments for your proposal.
-title: "[RFC] "
+title: '[RFC] '
 labels: ['RFC']
 body:
   - type: markdown
     attributes:
       value: |
-        Please provide a searchable summary of the RFC in the title above ⬆️.
+        Please provide a searchable summary of the RFC in the title above. ⬆️
 
         Thanks for contributing by creating an RFC! ❤️
   - type: textarea
     attributes:
       label: What's the problem? 🤔
-      description: A short paragraph or bullet list that quickly explains what you're trying to do, what value do we expect to get or any other relevant information to understand motivation behind this RFC
+      description: Write a short paragraph or bulleted list to briefly explain what you're trying to do, what outcomes you're aiming for, and any other relevant details to help us understand the motivation behind this RFC.
 
   - type: textarea
     attributes:
       label: What are the requirements? ❓
-      description: Provide a list of requirements that should be met by the accepted proposal
+      description: Provide a list of requirements that should be met by the accepted proposal.
 
   - type: textarea
     attributes:
       label: What are our options? 💡
       description: |
-        Have you considered all options that we can achieve same/similar thing? It doesn't have to be explored in same detail as the main proposal, but having alternative options that you can present can help strengthen main proposal.
-
-        Consider:
-        - using diagrams to help illustrate your ideas
-        - including code examples if you're proposing an interface or system contract
-        - linking to project briefs or wireframes that are relevant
+        Have you considered alternative options for achieving your desired outcome? It's not necessary to go into too much detail here, but it can help strengthen your main proposal.
 
   - type: textarea
     attributes:
       label: Proposed solution 🟢
       description: |
-        This is the core of RFC, and its purpose is to clearly explain reasoning for the proposed solution, why it's better compared to the other options or why should it be chosen instead.
-        
+        This is the core of the RFC. Please clearly explain the reasoning behind your proposed solution, including why it would be preferred over possible alternatives.
+
         Consider:
         - using diagrams to help illustrate your ideas
         - including code examples if you're proposing an interface or system contract
-        - linking to project briefs or wireframes that are relevant
-  
+        - linking to relevant project briefs or wireframes
+
   - type: textarea
     attributes:
-      label: Relevant resources/benchmarks 🔗
+      label: Resources and benchmarks 🔗
       description: Attach any issues, PRs, links, documents, etc… that might be relevant to the RFC

CHANGELOG.md

@@ -3,6 +3,241 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.10
+
+_Nov 4, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Ukrainian (uk-UA) locale to pickers (#6661) @Dufran
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Remove `React.memo` from `GridCellCheckboxRenderer` (#6688) @mattcorner
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DateRangePicker] Fix input focused style and mobile behaviour (#6645) (#6714) @LukasTy
+- [pickers] Add Ukrainian (uk-UA) locale on the date picker (#6661) @Dufran
+
+### Docs
+
+- [docs] Mark data grid column group available (#6659) @alexfauquette
+
+## 5.17.9
+
+_Oct 28, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Fix memory leak during unmount of the DataGrid (#6579) @cherniavskii
+- 🎁 Allow to disable the autofocus of the search field when opening the column visibility panel (#6630) @e-cloud
+- 🐞 Bugfixes
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Allow to disable autofocusing the search field in the columns panel (#6630) @e-cloud
+- [DataGrid] Fix `setRows` method not persisting new rows data after `loading` prop change (#6637) @cherniavskii
+- [DataGrid] Fix memory leak on grid unmount (#6579) @cherniavskii
+- [l10n] Improve Bulgarian (bg-BG) locale (#6635) @AtanasVA
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [pickers] Ignore milliseconds in mask logic (#6618) @alexfauquette
+- [pickers] Update input when `inputFormat` is modified (#6617) @alexfauquette
+
+### Docs
+
+- [docs] Add token to redirect feedbacks on slack (#6592) @alexfauquette
+- [docs] Disable translations (#6639) @cherniavskii
+- [docs] Fix code edit for when v6 will be stable (#6600) @oliviertassinari
+- [docs] Fix typo in DataGrid demo page (#6632) (#6634) @LukasTy
+
+### Core
+
+- [core] Upgrade monorepo (#6570) @cherniavskii
+
+## 5.17.8
+
+_Oct 20, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Turkish (tr-TR) locale on the data grid and pickers (#6573) @ramazansancar
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Add `searchPredicate` prop to `GridColumnsPanel` component (#6572) @cherniavskii
+- [DataGrid] Fix grid not updating state on `rowCount` prop change (#6474) @cherniavskii
+- [DataGridPro] Fix row order being reset after updating the row (#6544) @cherniavskii
+- [l10n] Improve Turkish (tr-TR) locale on the data grid and pickers (#6542) (#6573) @ramazansancar
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6537) @flaviendelangle
+- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (pick #6448) (#6538) @alexfauquette
+- [pickers] Fix typescript issues (#6510) @flaviendelangle
+
+### Docs
+
+- [docs] Fix 301 link to the sx prop page @oliviertassinari
+
+## 5.17.7
+
+_Oct 13, 2022_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Fix error when using column grouping with all columns hidden (#6425) @alexfauquette
+- [DataGrid] Fix start edit mode with printable character in React 18 (#6478) @m4theushw
+
+## 5.17.6
+
+_Oct 6, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Japanese (ja-JP) locale to pickers (#6365) @sho918
+- 🎁 Improve support for theme augmentation in the DataGrid (#6406) @cherniavskii
+- 🐞 Bugfixes
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Add missing `valueOptions` (#6400) @DanailH
+- [DataGrid] Don't start edit mode when pressing <kbd>Shift</kbd> + <kbd>Space</kbd> (#6380) @m4theushw
+- [DataGrid] Pass generics to the components in the theme augmentation (#6406) @cherniavskii
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [l10n] Add Japanese (ja-JP) locale to pickers (#6365) (#6382) @sho918
+- [pickers] Prevent `CalendarPicker` getting focus when `autoFocus=false` (#6304) (#6362) @alexfauquette
+- [pickers] Fix git repository location @oliviertassinari
+
+### Docs
+
+- [docs] Fix customized day rendering demo style (#6342) @Ambrish-git
+
+## 5.17.5
+
+_Sep 29, 2022_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add theme augmentation module to DataGridPremium (#6316) @cherniavskii
+- 👀 Fix blank space when changing page with dynamic row height (#6320) @m4theushw
+- 📚 Improve controlled editing demo to make easier to reuse it (#6306) @cherniavskii
+- 🐞 Bugfixes
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Fix `GridPagination` props typing (#6295) @cherniavskii
+- [DataGrid] Fix `GridRow` not forwarding `ref` to the root element (#6303) @cherniavskii
+- [DataGrid] Fix `undefined` value being showed in filter button tooltip text (#6271) @cherniavskii
+- [DataGrid] Fix blank space when changing page with dynamic row height (#6320) @m4theushw
+- [DataGrid] Revert cell/row mode if `processRowUpdate` fails (#6319) @m4theushw
+- [DataGridPremium] Add missing `themeAugmentation` module (#6316) @cherniavskii
+
+### Docs
+
+- [docs] Pass model change callbacks in controlled grid editing demos (#6306) @cherniavskii
+
+### Core
+
+- [core] Reduce the amount of updated screenshots reported by Argos (#6310) @cherniavskii
+
+## 5.17.4
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6230) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 🐞 Bugfixes
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Fix 301 link (#6239) @oliviertassinari
+
+### Core
+
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+
+## 5.17.3
+
+_Sep 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Fix lost characters when typing into fields in the DataGrid (#5646) @m4theushw
+- 🌏 New locale and improvements for pickers
+- 🎁 Improve support to theme augmentation for pickers
+
+### `@mui/[email protected]` / `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [DataGrid] Only update input with value prop if debounce is off (#5646) @m4theushw
+
+### `@mui/[email protected]` / `@mui/[email protected]`
+
+#### Changes
+
+- [pickers] Add Icelandic (is-IS) locale (#6137) @elvatli
+- [pickers] Fix `@mui/x-date-pickers` theme augmentation and style overriding (#6156) @LukasTy
+- [pickers] Fix `@mui/x-date-pickers-pro` theme augmentation (#6096) @LukasTy
+- [pickers] Improve German (de-DE) locale (#6138) @alexfauquette
+
+### Docs
+
+- [docs] Improve main demo to show new functionalities (#5292) @joserodolfofreitas
+
+### Core
+
+- [core] Update to typescript 4.8.3 (#6136) @flaviendelangle
+- [core] Update RFC template (#6100) @bytasv
+
 ## 5.17.2
 
 _Sep 9, 2022_
@@ -67,7 +302,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
 
 If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
 

benchmark/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benchmark",
-  "version": "5.17.2",
+  "version": "5.17.3",
   "private": true,
   "scripts": {
     "browser": "webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js"
@@ -10,7 +10,7 @@
     "@emotion/styled": "^11.10.4",
     "@material-ui/core": "^5.0.0-beta.5",
     "@material-ui/icons": "^5.0.0-beta.5",
-    "@mui/material": "^5.10.2",
+    "@mui/material": "^5.10.5",
     "@mui/x-data-grid": "^4.0.0",
     "@visx/xychart": "^2.12.2",
     "ag-grid-community": "^28.1.1",

docs/data/data-grid/api-object/api-object.md

@@ -1,8 +1,4 @@
----
-title: Data Grid - API object
----
-
-# Data grid - API object
+# Data Grid - API object
 
 <p class="description">Interact with the grid using its API.</p>
 
@@ -30,11 +26,11 @@ If you need to access the API object inside component slots or inside renders (e
 you can use the `useGridApiContext` hook.
 
 ```tsx
-const CustomFooter = () => {
+function CustomFooter() {
   const apiRef = useGridApiContext();
 
   return <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>;
-};
+}
 ```
 
 :::info
@@ -49,7 +45,7 @@ When using the API object outside the grid components, you need to initialize it
 You can then pass it to the `apiRef` prop of the grid.
 
 ```tsx
-const CustomDataGrid = (props) => {
+function CustomDataGrid(props) {
   const apiRef = useGridApiRef();
 
   return (
@@ -58,7 +54,7 @@ const CustomDataGrid = (props) => {
       <DataGridPro apiRef={apiRef} {...other} />
     </div>
   );
-};
+}
 ```
 
 :::warning

docs/data/data-grid/column-groups/column-groups.md

@@ -70,7 +70,7 @@ In addition to the required `groupId` and `children`, you can use the following
 
 {{"demo": "CustomizationDemo.js", "bg": "inline"}}
 
-## Column reordering [<span class="plan-pro"></span>](https://mui.com/store/items/mui-x-pro/)
+## Column reordering [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)
 
 By default, the columns that are part of a group cannot be dragged to outside their group.
 You can customize this behavior on specific groups by setting `freeReordering: true` in a column group object.
@@ -87,7 +87,7 @@ This feature isn't implemented yet. It's coming.
 
 The column group should allow to switch between an extended/collapsed view which hide/show some columns
 
-## Reordering groups 🚧[<span class="plan-pro"></span>](https://mui.com/store/items/mui-x-pro/)
+## Reordering groups 🚧[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)
 
 :::warning
 This feature isn't implemented yet. It's coming.