@mui/x-tree-view 8.16.0 → 8.18.0

package/internals/plugins/useTreeViewSelection/itemPlugin.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemRootSlotPropsFromSelection {
+  'aria-checked': React.AriaAttributes['aria-checked'];
+}
+interface UseTreeItemCheckboxSlotPropsFromSelection {
+  visible?: boolean;
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  tabIndex?: -1;
+  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
+  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
+}
+export {};

package/internals/plugins/useTreeViewSelection/{useTreeViewSelection.itemPlugin.js → itemPlugin.js}

@@ -51,9 +51,29 @@ const useTreeViewSelectionItemPlugin = ({
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
   const isItemSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
-  const checkboxSelectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
+  const selectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
+  const isSelectionEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
   return {
     propsEnhancers: {
+      root: () => {
+        // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+        let ariaChecked;
+        if (selectionStatus === 'checked') {
+          // - each selected node has aria-checked set to true.
+          ariaChecked = true;
+        } else if (selectionStatus === 'indeterminate') {
+          ariaChecked = 'mixed';
+        } else if (!isSelectionEnabledForItem) {
+          // - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
+          ariaChecked = undefined;
+        } else {
+          // - all nodes that are selectable but not selected have aria-checked set to false.
+          ariaChecked = false;
+        }
+        return {
+          'aria-checked': ariaChecked
+        };
+      },
       checkbox: ({
         externalEventHandlers,
         interactions
@@ -73,8 +93,8 @@ const useTreeViewSelectionItemPlugin = ({
           onChange: handleChange,
           visible: isCheckboxSelectionEnabled,
           disabled: !isItemSelectionEnabled,
-          checked: checkboxSelectionStatus === 'checked',
-          indeterminate: checkboxSelectionStatus === 'indeterminate'
+          checked: selectionStatus === 'checked',
+          indeterminate: selectionStatus === 'indeterminate'
         };
       }
     }

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -13,7 +13,7 @@ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect"
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("./useTreeViewSelection.utils");
 var _useTreeViewSelection2 = require("./useTreeViewSelection.selectors");
-var _useTreeViewSelection3 = require("./useTreeViewSelection.itemPlugin");
+var _itemPlugin = require("./itemPlugin");
 const useTreeViewSelection = ({
   store,
   params
@@ -206,7 +206,7 @@ const useTreeViewSelection = ({
   };
 };
 exports.useTreeViewSelection = useTreeViewSelection;
-useTreeViewSelection.itemPlugin = _useTreeViewSelection3.useTreeViewSelectionItemPlugin;
+useTreeViewSelection.itemPlugin = _itemPlugin.useTreeViewSelectionItemPlugin;
 const DEFAULT_SELECTED_ITEMS = [];
 const EMPTY_SELECTION_PROPAGATION = {};
 useTreeViewSelection.applyDefaultValuesToParams = ({

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

@@ -3,18 +3,18 @@ import type { DefaultizedProps } from '@mui/x-internals/types';
 import type { TreeViewPluginSignature } from "../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
-import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewSelectionPropagation, TreeViewItemId } from "../../../models/index.js";
 export interface UseTreeViewSelectionPublicAPI {
   /**
    * Select or deselect an item.
    * @param {object} parameters The parameters of the method.
-   * @param {string} parameters.itemId The id of the item to select or deselect.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to select or deselect.
    * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
    * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
    * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
    */
   setItemSelection: (parameters: {
-    itemId: string;
+    itemId: TreeViewItemId;
     event?: React.SyntheticEvent;
     shouldBeSelected?: boolean;
     keepExistingSelection?: boolean;
@@ -29,33 +29,33 @@ export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublic
   /**
    * Expand the current selection range up to the given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand the selection to.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
    */
-  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand the current selection range from the first navigable item to the given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item up to which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
    */
-  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand the current selection range from the given item to the last navigable item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item from which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
    */
-  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Update the selection when navigating with ArrowUp / ArrowDown keys.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} currentItemId The id of the active item before the keyboard navigation.
-   * @param {string} nextItemId The id of the active item after the keyboard navigation.
+   * @param {TreeViewItemId} currentItemId The id of the active item before the keyboard navigation.
+   * @param {TreeViewItemId} nextItemId The id of the active item after the keyboard navigation.
    */
-  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: string, nextItemId: string) => void;
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: TreeViewItemId, nextItemId: TreeViewItemId) => void;
 }
-export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
+export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? TreeViewItemId[] : TreeViewItemId | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {
   /**
-   * If `true` selection is disabled.
+   * Whether selection is disabled.
    * @default false
    */
   disableSelection?: boolean;
@@ -71,12 +71,12 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    */
   selectedItems?: TreeViewSelectionValue<Multiple>;
   /**
-   * If `true`, `ctrl` and `shift` will trigger multiselect.
+   * Whether multiple items can be selected.
    * @default false
    */
   multiSelect?: Multiple;
   /**
-   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection?: boolean;
@@ -100,17 +100,17 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
   /**
    * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {string[] | string} itemIds The ids of the selected items.
+   * @param {TreeViewItemId[] | TreeViewItemId} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
   onSelectedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewSelectionValue<Multiple>) => void;
   /**
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {array} itemId The itemId of the modified item.
+   * @param {TreeViewItemId} itemId The itemId of the modified item.
    * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
+  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isSelected: boolean) => void;
 }
 export type UseTreeViewSelectionParametersWithDefaults<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 export interface UseTreeViewSelectionState {
@@ -129,15 +129,4 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewSelectionPublicAPI;
   state: UseTreeViewSelectionState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemCheckboxSlotPropsFromSelection {
-  visible?: boolean;
-  checked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  tabIndex?: -1;
-  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
-}
-declare module '@mui/x-tree-view/useTreeItem' {
-  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
-}
+}>;

package/models/items.d.ts

@@ -2,6 +2,7 @@ export type TreeViewItemId = string;
 export type TreeViewDefaultItemModelProperties = {
   id: string;
   label: string;
+  children?: TreeViewDefaultItemModelProperties[];
 };
 export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.16.0",
+  "version": "8.18.0",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Tree View components.",
   "license": "MIT",
@@ -33,12 +33,12 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@base-ui-components/utils": "0.1.2",
-    "@mui/utils": "^7.3.3",
+    "@mui/utils": "^7.3.5",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.16.0"
+    "@mui/x-internals": "8.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/useTreeItem/useTreeItem.js

@@ -61,7 +61,6 @@ const useTreeItem = parameters => {
   const handleContentRef = (0, _useMergedRefs.useMergedRefs)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
-  const isSelectionEnabledForItem = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.canItemBeSelected, itemId);
   const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _useTreeViewSelection.selectionSelectors.isCheckboxSelectionEnabled);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
@@ -154,26 +153,12 @@ const useTreeItem = parameters => {
   });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
-
-    // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
-    let ariaSelected;
-    if (status.selected) {
-      // - each selected node has aria-selected set to true.
-      ariaSelected = true;
-    } else if (!isSelectionEnabledForItem) {
-      // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
-      ariaSelected = undefined;
-    } else {
-      // - all nodes that are selectable but not selected have aria-selected set to false.
-      ariaSelected = false;
-    }
     const props = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
-      'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
       style: (0, _extends2.default)({}, externalProps.style ?? {}, {

package/useTreeItem/useTreeItem.types.d.ts

@@ -42,7 +42,6 @@ export interface UseTreeItemRootSlotPropsFromUseTreeItem {
   tabIndex: 0 | -1;
   id: string;
   'aria-expanded': React.AriaAttributes['aria-expanded'];
-  'aria-selected': React.AriaAttributes['aria-selected'];
   'aria-disabled': React.AriaAttributes['aria-disabled'];
   onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
   onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;

package/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts

@@ -1,2 +0,0 @@
-import { TreeViewItemPlugin } from "../../models/index.js";
-export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;