@mui/x-tree-view 6.0.0-alpha.4 → 6.0.0-beta.0

package/CHANGELOG.md

@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.16.0
+
+_Sep 29, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add a clearable behavior to all the single input pickers and fields (#9095) @noraleonte
+
+  The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value).
+
+  <img width="380" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/72460825/e4a66169-83b5-4579-b9f6-6e15bb528411">
+
+- 💫 Add Date Picker customization playground (#9581) @noraleonte
+
+  You can play around with style customization options on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#customization).
+
+  We are thrilled to hear your feedback about this functionality!
+
+- 🚀 Fix header filters menu auto closing on render (#10483) @MBilalShafi
+- 🎯 Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- 🌍 Improve Russian (ru-RU) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.0`
+
+- [DataGrid] Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- [DataGrid] Rename `global` to `globalScope` due to Jest issue (#10470) @romgrk
+- [l10n] Improve Russian (ru-RU) locale (#10464 and #10407) @NKodos
+
+#### `@mui/x-data-grid-pro@6.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.0`, plus:
+
+- [DataGridPro] Fix header filters menu auto closing on render (#10483) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.0`
+
+- [pickers] Add warning to `shouldDisableDate` validation (#10502) @michelengelen
+- [pickers] Implement `clearable` field behavior (#9095) @noraleonte
+- [pickers] Refactor `dayOfWeekFormatter` (#10345) @michelengelen
+
+#### `@mui/x-date-pickers-pro@6.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.13`
+
+- [charts] Share upfront future Pro features (#10465) @oliviertassinari
+
+### Tree View / `@mui/x-tree-view@6.0.0-beta.0`
+
+- [TreeView] Do not try to focus a collapsed node when re-focusing the TreeView (#10422) @flaviendelangle
+- [TreeView] Fix the typing of the `Multiple` generic (#10478) @flaviendelangle
+
+### Docs
+
+- [docs] Correct the typo in data grid api docs (#10477) @MBilalShafi
+- [docs] Add customization playground (#9581) @noraleonte
+- [docs] Fix Tree View product ID (#10428) @oliviertassinari
+- [docs] Fix demo crashing when all rows are deleted (#10438) @cherniavskii
+- [docs] Fix mobile scrollbar column resize (#10455) @oliviertassinari
+- [docs] Fix usage of `GridRenderCellParams` interface (#10435) @cherniavskii
+
+### Core
+
+- [core] Fix typo in header data grid quick filter @oliviertassinari
+- [core] Group D3 renovate PRs (#10480) @flaviendelangle
+- [core] Link the priority support page (#10495) @michelengelen
+- [core] Move the pickers describes to the test utils folder (#10490) @flaviendelangle
+- [core] Priority Support casing normalization @oliviertassinari
+- [core] Remove automated DataGrid performance tests (#10414) @romgrk
+- [core] Sync `prism-okaidia.css` with docs-infra @oliviertassinari
+- [core] Update issue actions & templates (#10375) @romgrk
+- [core] Update release guide (#10468) @DanailH
+
 ## 6.15.0
 
 _Sep 22, 2023_

package/TreeView/TreeView.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TreeViewProps } from './TreeView.types';
-type TreeViewComponent = (<Multiple extends boolean | undefined>(props: TreeViewProps<Multiple> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element) & {
+type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(props: TreeViewProps<Multiple> & React.RefAttributes<HTMLUListElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.4
+ * @mui/x-tree-view v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -47,8 +47,20 @@ export const useTreeViewFocus = ({
 
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const firstSelected = Array.isArray(models.selected.value) ? models.selected.value[0] : models.selected.value;
-      instance.focusNode(event, firstSelected || instance.getNavigableChildrenIds(null)[0]);
+      const isNodeVisible = nodeId => {
+        const node = instance.getNode(nodeId);
+        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+      };
+      let nodeToFocusId;
+      if (Array.isArray(models.selected.value)) {
+        nodeToFocusId = models.selected.value.find(isNodeVisible);
+      } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+        nodeToFocusId = models.selected.value;
+      }
+      if (nodeToFocusId == null) {
+        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+      }
+      instance.focusNode(event, nodeToFocusId);
     }
   };
   const createHandleBlur = otherHandlers => event => {

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { TreeViewPluginSignature } from '../../models';
 import type { UseTreeViewNodesSignature } from '../useTreeViewNodes';
 import type { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewFocusInstance {
     isNodeFocused: (nodeId: string) => boolean;
     focusNode: (event: React.SyntheticEvent, nodeId: string | null) => void;
@@ -21,5 +22,6 @@ export interface UseTreeViewFocusState {
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<UseTreeViewFocusParameters, UseTreeViewFocusParameters, UseTreeViewFocusInstance, {}, UseTreeViewFocusState, never, [
     UseTreeViewNodesSignature,
-    UseTreeViewSelectionSignature<any>
+    UseTreeViewSelectionSignature<any>,
+    UseTreeViewExpansionSignature
 ]>;

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.4
+ * @mui/x-tree-view v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -50,8 +50,20 @@ export var useTreeViewFocus = function useTreeViewFocus(_ref) {
 
       // if the event bubbled (which is React specific) we don't want to steal focus
       if (event.target === event.currentTarget) {
-        var firstSelected = Array.isArray(models.selected.value) ? models.selected.value[0] : models.selected.value;
-        instance.focusNode(event, firstSelected || instance.getNavigableChildrenIds(null)[0]);
+        var isNodeVisible = function isNodeVisible(nodeId) {
+          var node = instance.getNode(nodeId);
+          return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+        };
+        var nodeToFocusId;
+        if (Array.isArray(models.selected.value)) {
+          nodeToFocusId = models.selected.value.find(isNodeVisible);
+        } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+          nodeToFocusId = models.selected.value;
+        }
+        if (nodeToFocusId == null) {
+          nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+        }
+        instance.focusNode(event, nodeToFocusId);
       }
     };
   };

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.4
+ * @mui/x-tree-view v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -46,8 +46,20 @@ export const useTreeViewFocus = ({
 
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const firstSelected = Array.isArray(models.selected.value) ? models.selected.value[0] : models.selected.value;
-      instance.focusNode(event, firstSelected || instance.getNavigableChildrenIds(null)[0]);
+      const isNodeVisible = nodeId => {
+        const node = instance.getNode(nodeId);
+        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+      };
+      let nodeToFocusId;
+      if (Array.isArray(models.selected.value)) {
+        nodeToFocusId = models.selected.value.find(isNodeVisible);
+      } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+        nodeToFocusId = models.selected.value;
+      }
+      if (nodeToFocusId == null) {
+        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+      }
+      instance.focusNode(event, nodeToFocusId);
     }
   };
   const createHandleBlur = otherHandlers => event => {

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v6.0.0-alpha.4
+ * @mui/x-tree-view v6.0.0-beta.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -55,8 +55,20 @@ const useTreeViewFocus = ({
 
     // if the event bubbled (which is React specific) we don't want to steal focus
     if (event.target === event.currentTarget) {
-      const firstSelected = Array.isArray(models.selected.value) ? models.selected.value[0] : models.selected.value;
-      instance.focusNode(event, firstSelected || instance.getNavigableChildrenIds(null)[0]);
+      const isNodeVisible = nodeId => {
+        const node = instance.getNode(nodeId);
+        return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
+      };
+      let nodeToFocusId;
+      if (Array.isArray(models.selected.value)) {
+        nodeToFocusId = models.selected.value.find(isNodeVisible);
+      } else if (models.selected.value != null && isNodeVisible(models.selected.value)) {
+        nodeToFocusId = models.selected.value;
+      }
+      if (nodeToFocusId == null) {
+        nodeToFocusId = instance.getNavigableChildrenIds(null)[0];
+      }
+      instance.focusNode(event, nodeToFocusId);
     }
   };
   const createHandleBlur = otherHandlers => event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "6.0.0-alpha.4",
+  "version": "6.0.0-beta.0",
   "description": "The community edition of the tree view components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",