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

package/CHANGELOG.md

@@ -3,6 +3,166 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.15.0
+
+_Sep 22, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Implement columns auto-sizing (#10180) @romgrk
+- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces
+- 🌍 Improve Finnish (fi-FI) locale
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.15.0`
+
+- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces
+- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk
+- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk
+- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk
+- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk
+- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk
+- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865
+
+#### `@mui/x-data-grid-pro@6.15.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.15.0`, plus:
+
+- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk
+- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi
+- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii
+- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.15.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.15.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.15.0`
+
+- [pickers] Support tokens without spaces (#10185) @alexfauquette
+- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila
+
+#### `@mui/x-date-pickers-pro@6.15.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.15.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.12`
+
+- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette
+- [charts] Remove components from `@mui/material` (#10115) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.4`
+
+- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle
+
+### Docs
+
+- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette
+- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
+- [docs] Clearer component pattern @oliviertassinari
+- [docs] Easier to understand demo (#10370) @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Improve the column visibility section (#10327) @MBilalShafi
+- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
+- [docs] Improve pickers localization documentation (#10202) @flaviendelangle
+- [docs] Polish typescript ref usage (#10359) @oliviertassinari
+- [docs] Improve charts tooltip wording (#10406) @alexfauquette
+
+### Core
+
+- [core] Cleanup GitHub issues template (#10372) @romgrk
+- [core] Fix Circle CI OOM (#10385) @romgrk
+- [core] Improve sleep test helper @oliviertassinari
+- [core] Remove unwanted prefixes @oliviertassinari
+- [core] Remove duplicate label @oliviertassinari
+- [core] Simplify source @oliviertassinari
+- [core] Upgrade monorepo (#10425) @cherniavskii
+- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle
+- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle
+- [test] Name test suites according to sentence case (#10429) @alexfauquette
+
+## 6.14.0
+
+_Sep 14, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix `YearCalendar` and `MonthCalendar` accessibility (#10312) @LukasTy
+
+  The `YearCalendar` and `MonthCalendar` items role has been changed from `button` to `radio` in order to improve the component's a11y support.
+  If you were relying on the mentioned components having a `button` role for items, you will need to update your usage to expect a `radio` role instead.
+
+- 🌍 Improve Japanese (ja-JP), Persian (fa-IR), and Vietnamese (vi-VN) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.14.0`
+
+- [l10n] Improve Japanese (ja-JP) locale (#10299) @makoto14
+- [l10n] Improve Persian (fa-IR) locale (#10277) @aminsaedi
+- [l10n] Improve Vietnamese (vi-VN) locale (#10280) @khangnguyen2100
+
+#### `@mui/x-data-grid-pro@6.14.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.14.0`.
+
+#### `@mui/x-data-grid-premium@6.14.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.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard import cutting off at 100 rows (#9930) @gitstart
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.14.0`
+
+- [pickers] Fix `YearCalendar` and `MonthCalendar` a11y (#10312) @LukasTy
+- [pickers] Localize `TimeClock` meridiem text (#10324) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.14.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.14.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.11`
+
+- [charts] Add default `barGapRatio` and increase `categoryGapRatio` (#10317) @LukasTy
+- [charts] Enable `eslint` on the package (#10330) @LukasTy
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.3`
+
+- [TreeView] Fix box-sizing dependency (#10255) @oliviertassinari
+
+### Docs
+
+- [docs] Add conditional range picker props example (#10227) @LukasTy
+- [docs] Add toolbar to the multi-filters demo (#10223) @MBilalShafi
+- [docs] Avoid the use of "We" @oliviertassinari
+- [docs] Clarify MUI vs. MUI Core difference @oliviertassinari
+- [docs] Enable `ariaV7` flag for demos using `useDemoData` hook (#10204) @cherniavskii
+- [docs] Fix Tree View link to API references (#10282) @oliviertassinari
+- [docs] Fix image layout shift (#10313) @oliviertassinari
+- [docs] Fix link to MUI X from readme logo @oliviertassinari
+- [docs] Fix redirection to Base UI URLs @oliviertassinari
+- [docs] Improve Tree View demos (#10268) @oliviertassinari
+- [docs] Improve docs for ref type props (#10273) @michelengelen
+- [docs] Improve npm package README (#10269) @oliviertassinari
+- [docs] Improve the clarity of the npm links @oliviertassinari
+- [docs] Keep installation readme simple @oliviertassinari
+- [docs] Make each component feel more standalone @oliviertassinari
+
+### Core
+
+- [core] Add types extension for clarity @oliviertassinari
+- [core] Set logo height to fix layout shift in GitHub @oliviertassinari
+- [core] TrapFocus was renamed to FocusTrap @oliviertassinari
+
 ## 6.13.0
 
 _Sep 8, 2023_
@@ -12,6 +172,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - 🎁 Fix `anchorRef` behavior on range pickers (#10077) @LukasTy
 
   The range picker popup will now be anchored to the first input element and left aligned like other pickers.
+
 - 🌍 Improve Slovak (sk-SK) locale on the data grid
 - 🐞 Bugfixes
 - 📚 Documentation improvements
@@ -1838,7 +1999,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
-- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @ivek-Prajapatii
+- [DataGrid] Allow to pass props to the `FocusTrap` inside the panel wrapper (#7733) @ivek-Prajapatii
 - [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
 - [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
 - [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi

package/README.md

@@ -1,7 +1,7 @@
-# @mui/x-tree-view
+# MUI X Tree View
 
 This package is the community edition of the tree view components.
-It's part of MUI X, an open-core extension of MUI, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 
@@ -11,12 +11,6 @@ Install the package in your project directory with:
 npm install @mui/x-tree-view
 ```
 
-or
-
-```bash
-yarn add @mui/x-tree-view
-```
-
 This component has the following peer dependencies that you will need to install as well.
 
 ```json
@@ -30,4 +24,4 @@ This component has the following peer dependencies that you will need to install
 
 ## Documentation
 
-WIP
+Visit [https://mui.com/x/react-tree-view/](https://mui.com/x/react-tree-view/) to view the full documentation.

package/TreeItem/TreeItem.d.ts

@@ -4,10 +4,10 @@ import { TreeItemProps } from './TreeItem.types';
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLLIElement>>;

package/TreeItem/TreeItem.js

@@ -11,10 +11,10 @@ import useForkRef from '@mui/utils/useForkRef';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
-import { TreeViewContext } from '../TreeView/TreeViewContext';
-import { DescendantProvider, useDescendant } from '../TreeView/descendants';
+import { DescendantProvider, useDescendant } from '../internals/TreeViewProvider/DescendantProvider';
 import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -59,6 +59,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 }) => ({
   padding: '0 8px',
   width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -101,10 +103,12 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }
   },
   [`& .${treeItemClasses.label}`]: _extends({
+    paddingLeft: 4,
     width: '100%',
+    boxSizing: 'border-box',
+    // prevent width + padding to overflow
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
-    paddingLeft: 4,
     position: 'relative'
   }, theme.typography.body1)
 }));
@@ -122,11 +126,11 @@ const TreeItemGroup = styled(Collapse, {
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeItem API](https://mui.com/material-ui/api/tree-item/)
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
  */
 export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, ref) {
   const props = useThemeProps({
@@ -154,19 +158,11 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     icons: contextIcons,
-    focus,
-    isExpanded,
-    isFocused,
-    isSelected,
-    isDisabled,
     multiSelect,
     disabledItemsFocusable,
-    mapFirstChar,
-    unMapFirstChar,
-    registerNode,
-    unregisterNode,
-    treeId
-  } = React.useContext(TreeViewContext);
+    treeId,
+    instance
+  } = useTreeViewContext();
   let id;
   if (idProp != null) {
     id = idProp;
@@ -185,10 +181,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     parentId
   } = useDescendant(descendant);
   const expandable = Boolean(Array.isArray(children) ? children.length : children);
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const ownerState = _extends({}, props, {
     expanded,
     focused,
@@ -212,8 +208,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   }
   React.useEffect(() => {
     // On the first render a node's index will be -1. We want to wait for the real index.
-    if (registerNode && unregisterNode && index !== -1) {
-      registerNode({
+    if (instance && index !== -1) {
+      instance.updateNode({
         id: nodeId,
         idAttribute: id,
         index,
@@ -221,22 +217,17 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
         expandable,
         disabled: disabledProp
       });
-      return () => {
-        unregisterNode(nodeId);
-      };
+      return () => instance.removeNode(nodeId);
     }
     return undefined;
-  }, [registerNode, unregisterNode, parentId, index, nodeId, expandable, disabledProp, id]);
+  }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
   React.useEffect(() => {
-    if (mapFirstChar && unMapFirstChar && label) {
+    if (instance && label) {
       var _contentRef$current$t, _contentRef$current;
-      mapFirstChar(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
-      return () => {
-        unMapFirstChar(nodeId);
-      };
+      return instance.mapFirstChar(nodeId, ((_contentRef$current$t = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.textContent) != null ? _contentRef$current$t : '').substring(0, 1).toLowerCase());
     }
     return undefined;
-  }, [mapFirstChar, unMapFirstChar, nodeId, label]);
+  }, [instance, nodeId, label]);
   let ariaSelected;
   if (multiSelect) {
     ariaSelected = selected;
@@ -263,8 +254,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       });
     }
     const unfocusable = !disabledItemsFocusable && disabled;
-    if (!focused && event.currentTarget === event.target && !unfocusable) {
-      focus(event, nodeId);
+    if (instance && !focused && event.currentTarget === event.target && !unfocusable) {
+      instance.focusNode(event, nodeId);
     }
   }
   return /*#__PURE__*/_jsxs(TreeItemRoot, _extends({

package/TreeItem/useTreeItem.js

@@ -1,52 +1,43 @@
-import * as React from 'react';
-import { TreeViewContext } from '../TreeView/TreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 export function useTreeItem(nodeId) {
   const {
-    focus,
-    isExpanded,
-    isExpandable,
-    isFocused,
-    isDisabled,
-    isSelected,
-    multiSelect,
-    selectNode,
-    selectRange,
-    toggleExpansion
-  } = React.useContext(TreeViewContext);
-  const expandable = isExpandable ? isExpandable(nodeId) : false;
-  const expanded = isExpanded ? isExpanded(nodeId) : false;
-  const focused = isFocused ? isFocused(nodeId) : false;
-  const disabled = isDisabled ? isDisabled(nodeId) : false;
-  const selected = isSelected ? isSelected(nodeId) : false;
+    instance,
+    multiSelect
+  } = useTreeViewContext();
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
   const handleExpansion = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
       // If already expanded and trying to toggle selection don't close
-      if (expandable && !(multiple && isExpanded(nodeId))) {
-        toggleExpansion(event, nodeId);
+      if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+        instance.toggleNodeExpansion(event, nodeId);
       }
     }
   };
   const handleSelection = event => {
-    if (!disabled) {
+    if (instance && !disabled) {
       if (!focused) {
-        focus(event, nodeId);
+        instance.focusNode(event, nodeId);
       }
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
-          selectRange(event, {
+          instance.selectRange(event, {
             end: nodeId
           });
         } else {
-          selectNode(event, nodeId, true);
+          instance.selectNode(event, nodeId, true);
         }
       } else {
-        selectNode(event, nodeId);
+        instance.selectNode(event, nodeId);
       }
     }
   };

package/TreeView/TreeView.d.ts

@@ -1,14 +1,17 @@
 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) & {
+    propTypes?: any;
+};
 /**
  *
  * Demos:
  *
- * - [Tree View](https://mui.com/material-ui/react-tree-view/)
+ * - [Tree View](https://mui.com/x/react-tree-view/)
  *
  * API:
  *
- * - [TreeView API](https://mui.com/material-ui/api/tree-view/)
+ * - [TreeView API](https://mui.com/x/api/tree-view/tree-view/)
  */
-declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;
+declare const TreeView: TreeViewComponent;
 export { TreeView };