[blog] MUI X v7 beta announcement blogpost (#40784)

Signed-off-by: José Rodolfo Freitas <joserodolfo.freitas@gmail.com>
Co-authored-by: Nora <72460825+noraleonte@users.noreply.github.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
Co-authored-by: Lukas <llukas.tyla@gmail.com>
Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>

docs/pages/blog/mui-x-v7-beta.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './mui-x-v7-beta.md?@mui/markdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}

docs/pages/blog/mui-x-v7-beta.md

@@ -0,0 +1,226 @@
+---
+title: MUI X v7 is now in beta
+description: Check out what's new and what's next for v7 stable.
+date: 2024-01-29T00:00:00.000Z
+authors: ['josefreitas']
+tags: ['MUI X', 'Product', 'News']
+card: true
+---
+
+<div style="max-width: 692px; width: 100%; height: 100%; overflow: hidden;">
+  <a href="https://github.com/mui/mui-x/releases/tag/v7.0.0-beta.0">
+    <img src="/static/blog/mui-x-v7-beta/intro.png" alt="MUI X v7 beta release" width="1200" height="400" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" />
+  </a>
+</div>
+
+It's the end of January, and we're ready to start rolling out some of the plans for 2024!
+We have new components, exciting features, and a lot of improvements for both developers and end-users.
+
+Starting [now](https://github.com/mui/mui-x/releases/tag/v7.0.0-beta.0), MUI X v7 is in beta.
+Most breaking changes are in place, and we shift our focus towards refining and expanding over the new version.
+
+## Table of contents
+
+- [Data Grid](#data-grid)
+  - [Sticky headers](#sticky-headers)
+  - [Improved columns panel design](#improved-columns-panel-design)
+  - [Date Object support in filter model](#date-object-support-in-filter-model)
+  - [New stable features](#new-stable-features)
+  - [Smaller bundle size](#smaller-bundle-size)
+- [Tree View](#tree-view)
+  - [RichTreeView](#richtreeview-new-component)
+- [Charts](#charts)
+  - [Reference Line](#reference-line)
+- [Date Pickers](#date-pickers)
+  - [Support for date-fns v3](#support-for-date-fns-v3)
+  - [Date Time Range Picker](#date-time-range-picker)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+- [What's next](#whats-next)
+- [Migration guide](#migration-guide)
+- [How to get involved](#how-to-get-involved)
+
+## Data Grid
+
+We have introduced critical breaking changes designed not only to enhance the developer experience but also to bring the user experience to a new level.
+
+### Sticky headers
+
+The column headers and pinning implementations have been refactored for an improved user experience.
+You'll notice a more responsive Data Grid with smoother horizontal scrolling and better screen reader support.
+The video below showcases some of these improvements.
+
+<video preload="metadata" autoplay muted loop playsinline width="690" height="417" controls>
+  <source src="/static/blog/mui-x-v7-beta/sticky-headers.mp4" type="video/mp4">
+</video>
+
+:::warning
+The new horizontal scroll experience is far better, but the solution has a limitation: **column headers can no longer be transparent** because content scrolls behind them.
+
+If you're using our theming system, the Data Grid will adapt to your application seamlessly.
+
+Without the theming system, you may need to manually set an appropriate background color to maintain your design.
+:::
+
+### Improved columns panel design
+
+The column management panel now features a sleeker, checkbox-based design, replacing the previous toggle button style. Additionally, we've extracted the internal component to facilitate the introduction of the upcoming pivoting UI.
+
+<img width="310" alt="new column management panel design" src="/static/blog/mui-x-v7-beta/column-management-panel.png">
+
+### Date Object support in filter model
+
+The `filterModel` now supports `Date` objects for `date` and `dateTime` column types, providing a more intuitive and efficient filtering experience.
+
+While string values remain compatible for these types, any updates to the `filterModel` made through the UI (such as via the filter panel) will now automatically use `Date` objects, ensuring consistency and ease of data handling.
+
+### Smaller bundle size
+
+The introduction of a separate entry point for locales has significantly reduced the bundle size of the barrel index in development mode.
+
+For example with the `@mui/x-data-grid` npm package, this change led to a reduction of approximately 22% – shrinking the bundle size from [114.2kB](https://bundlephobia.com/package/@mui/x-data-grid@6.19.2) to [88.5kB](https://bundlephobia.com/package/@mui/x-data-grid@7.0.0-beta.0).
+
+<img width="694" alt="Bundle size change" src="/static/blog/mui-x-v7-beta/new-bundle-size.png" style="padding-left: 20px; padding-right: 5px;">
+
+### New stable features
+
+During major version updates, MUI X introduces new features under the `experimentalFeatures` flag or using the `unstable_` prefix.
+This approach serves as a failsafe in case there's a need to change the API based on user feedback.
+
+We're excited to announce that the following features have been promoted to stable:
+
+- [Column groups](https://next.mui.com/x/react-data-grid/column-groups/)
+- [Header filters](https://next.mui.com/x/react-data-grid/filtering/header-filters/) [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+- [Cell selection](https://next.mui.com/x/react-data-grid/cell-selection/) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+- [Clipboard paste](https://next.mui.com/x/react-data-grid/clipboard/#clipboard-paste) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+## Tree View
+
+Following the promotion of the component from the labs to MUI X, our primary focus has been on improving its developer experience.
+This includes efforts to clarify documentation and improve key examples, making them more informative and user-friendly.
+
+A particularly significant initiative is the time-saving alternative to the traditional JSX architecture, the RichTreeView.
+
+### RichTreeView
+
+We've split the Tree View into two distinct components.
+
+The first is the `SimpleTreeView`, which retains the classic and familiar JSX approach and is still the one behind the original `<TreeView />` tag.
+
+The second is the `RichTreeView`, a new variant designed to streamline the development process, and with which we aim to support several common use cases out-of-the-box.
+
+Similar to the Data Grid, it requires only a dataset and possibly a few properties to render; it does all the heavy lifting for you, handling most of the complexities internally.
+
+```jsx
+const myDataSet = [
+  {
+    id: 'node-1',
+    label: 'Node 1',
+    children: [
+      { id: 'node-1-1', label: 'Node 1.1' },
+      { id: 'node-1-2', label: 'Node 1.2' },
+    ],
+  },
+  {
+    id: 'node-2',
+    label: 'Node 2',
+  },
+];
+```
+
+```jsx
+<RichTreeView items={myDataSet} multiSelect />
+```
+
+Check out the [new component](https://next.mui.com/x/react-tree-view/rich-tree-view/items/)!
+
+## Charts
+
+Since the initial stable release of MUI X Chart a few months ago, we have been diligently listening to your feedback and focusing on refining the foundational charts to ensure they effectively cater to your diverse use cases.
+This includes bug fixes, documentation improvements, and support for more complex scenarios.
+
+### Reference line
+
+The `ChartsReferenceLine` component enhances data visualization, providing users with a clear reference to better understand and analyze key data points.
+
+<img alt="Charts reference line" src="/static/blog/mui-x-v7-beta/charts-reference-line.png" width="1200" height="840" loading="lazy" />
+
+You can find more details on its [documentation](https://next.mui.com/x/react-charts/axis/#reference-line).
+
+## Date and Time Pickers
+
+The focus has been mostly on developing the highly anticipated new components, DateTimeRangePicker and TimeRangePicker, alongside a significant effort to enhance accessibility in the fields, ensuring that our components are as inclusive and user-friendly as possible.
+
+While our journey towards these new additions continues, our commitment to improving existing features remains a top priority.
+Accordingly, we consistently update existing components to align seamlessly with the latest versions of supported date libraries.
+
+### Date Time Range Picker [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+Support new use cases with this most anticipated component.
+The latest addition to the Date and Time Pickers suite is the `<DateTimeRangePicker />`, a component designed to enrich the user experience with advanced date and time selection.
+This intuitive picker simplifies the process of selecting date and time ranges, making it ideal for applications that require detailed scheduling or period selection.
+
+<video preload="metadata" autoplay muted loop playsinline width="600" height="510">
+  <source src="/static/blog/mui-x-v7-beta/date-time-range-picker.mp4" type="video/mp4">
+</video>
+
+Learn how to use and customize the [new component](https://next.mui.com/x/react-date-pickers/date-time-range-picker/) now!
+
+### Support for date-fns v3
+
+The Date and Time Pickers now support both versions of v2 and v3 of date-fns and you can select your desired version from one of the two import lines:
+
+```jsx
+// date-fns v2.x
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+```
+
+```jsx
+// date-fns v3.x
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+```
+
+## What's next
+
+As we approach the stable release of v7, our roadmap is well-defined, focusing on delivering key enhancements and features either just before or within a couple of weeks following the stable version's launch.
+
+### Data Grid
+
+- [Improved Server side integration](https://next.mui.com/x/react-data-grid/server-side-data/)
+- [Column management panel with support for pivoting](https://github.com/mui/mui-x/issues/5700)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+- [Pivoting](https://github.com/mui/mui-x/issues/214) [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+### Tree View
+
+- [Checkbox selection for Simple- and RichTreeView](https://github.com/mui/mui-x/issues/214)
+- [Drag and drop support for RichTreeView](https://github.com/mui/mui-x/issues/9686)[<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+
+### Charts
+
+- [Click events handling](https://github.com/mui/mui-x/issues/10005)
+
+### Date and Time Pickers
+
+- [TimeRangePicker](https://github.com/mui/mui-x/issues/4460)
+- Field with improved accessibility
+
+## Migration guide
+
+We fully understand that updating a dependency library can sometimes be daunting.
+To smooth the transition to the new version, we have documented all breaking changes in our migration guides:
+
+- [Data Grid](https://next.mui.com/x/migration/migration-data-grid-v6/)
+- [Date and Time Pickers](https://next.mui.com/x/migration/migration-pickers-v6/)
+- [Charts](https://next.mui.com/x/migration/migration-charts-v6/)
+- [Tree View](https://next.mui.com/x/migration/migration-tree-view-v6/)
+
+These component-specific guides are reference pages designed to assist you if you encounter any challenges while updating to the new major version.
+It's our way of making the upgrade process more manageable and less burdensome for you.
+However, should you need further assistance, please don't hesitate to contact us and send your feedback.
+
+## How to get involved
+
+Your feedback has been invaluable in developing MUI X, and we're always happy to hear from you. Please consider sharing your experiences and pain points by:
+
+- [Giving us a user interview](https://forms.gle/vsBv6CLPz9h57xg8A).
+- Reporting bugs and suggesting features on our [GitHub repository](https://github.com/mui/mui-x/issues/new/choose).
+
+We look forward to your input!