@mui/x-tree-view 7.3.0 → 7.4.0

package/CHANGELOG.md

@@ -3,6 +3,219 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.4.0
+
+_May 10, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add optional `id` attribute on shortcut items of the Date and Time Pickers
+- 🎁 Add support for `date-fns-jalali` v3 in the Date and Time Pickers
+- 🚀 Support rounded corners on `BarChart`
+- 🌍 Add accessibility page to TreeView docs
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.4.0`
+
+- [DataGrid] Fix error when focus moves from column header to `svg` element (#13028) @oukunan
+- [DataGrid] Fix error on column groups change (#12965) @romgrk
+
+#### `@mui/x-data-grid-pro@7.4.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@7.4.0`.
+
+#### `@mui/x-data-grid-premium@7.4.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@7.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.4.0`
+
+- [fields] Fix regression preventing form submit on "Enter" click (#13065) @LukasTy
+- [pickers] Add `AdapterDateFnsJalaliV3` adapter (#12891) @smmoosavi
+- [pickers] Add optional `id` attribute on shortcut items (#12976) @noraleonte
+
+#### `@mui/x-date-pickers-pro@7.4.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@7.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.4.0`
+
+- [charts] Add `ChartsGrid` to `themeAugmentation` (#13026) @noraleonte
+- [charts] Support rounded corners on `BarChart` (#12834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.4.0`
+
+- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
+
+### Docs
+
+- [docs] Add accessibility page to TreeView docs (#12845) @noraleonte
+- [docs] Fix Charts styling typos (#13061) @oliviertassinari
+- [docs] Fix legal link to EULA free trial (#13013) @oliviertassinari
+- [docs] Update interface name in pinned columns docs (#13070) @cherniavskii
+
+### Core
+
+- [core] Improve release process docs (#12977) @JCQuintas
+- [core] Prepare React 19 (#12991) @oliviertassinari
+- [docs-infra] Fix Netlify PR preview path (#12993) @oliviertassinari
+- [infra] Automation: Add release PR reviewers (#12982) @michelengelen
+
+## 7.3.2
+
+_May 2, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add "no data" and "loading" states to charts, allowing users to create [custom visualizations for each state](https://mui.com/x/react-charts/styling/#overlay)
+- 🌍 Improve Hebrew (he-IL) and Hungarian (hu-HU) locales on the Date and Time Pickers
+- 🌍 Improve Danish (da-DK) and Slovak (sk-SK) locales on the Data Grid
+- 📝 Fix a [typo](https://github.com/mui/mui-x/pull/12941/files/4bf4bffbc2799a01a96bc7458a17318cf41c1722#diff-26c31cc69d6f51110f89e339578ef9b3d4a3551f79077fff73f7babb81c5099f) in the auto-generated Charts gradient `id` attribute.
+  It should not affect you, but if you were relying on the gradient `id` attribute, please update your usage.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.3.2`
+
+- [DataGrid] Allow to change reset text in the columns management panel (#12972) @MBilalShafi
+- [DataGrid] Derive `formattedValue` from the edit value when passing to `renderEditCell` (#12870) @cherniavskii
+- [DataGrid] Fix rows not being recomputed on `props.rowCount` change (#12833) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#12844) @fosterbuster
+- [l10n] Improve Slovak (sk-SK) locale (#12949) @stefikp
+
+#### `@mui/x-data-grid-pro@7.3.2` [![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@7.3.2`.
+
+#### `@mui/x-data-grid-premium@7.3.2` [![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@7.3.2`, plus:
+
+- [DataGridPremium] Fix print export not working with row grouping (#12957) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.3.2`
+
+- [l10n] Improve Hebrew (he-IL) locale (#12910) @michaelNXT1
+- [l10n] Improve Hungarian (hu-HU) locale (#12930) @noherczeg
+- [pickers] Fix typo on the `viewRenderers` prop description (#12915) @flaviendelangle
+- [pickers] Improve TypeScript performance in `PickersDay` (#12920) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.3.2` [![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@7.3.2`.
+
+### Charts
+
+#### `@mui/x-charts@7.3.2`
+
+- [charts] Add an overlay for "no data" or "loading" states (#12817) @alexfauquette
+- [charts] Fix typos in documentation, translations and errors (#12941) @JCQuintas
+- [charts] Fix `prop.slots` and `prop.slotProps` not passed to `<ChartsTooltip />` (#12939) @JCQuintas
+
+### Docs
+
+- [docs] Improve Data Grid migration guide (#12969) @MBilalShafi
+- [docs] Polish references to the plans (#12922) @oliviertassinari
+
+### Core
+
+- [core] Fix dependencies (#12951) @LukasTy
+- [core] Remove inconsistent blank lines (#12966) @oliviertassinari
+- [code-infra] Bump node image used by CI in docker (#12961) @LukasTy
+- [docs-infra] Remove no longer needed `next.config` settings (#12861) @oliviertassinari
+- [docs-infra] Use the `@mui/docs/HighlightedCode` (#12848) @alexfauquette
+- [test] Restore `t` command (#12948) @LukasTy
+
+## 7.3.1
+
+_Apr 26, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Scatter Charts get a [z-axis to allow coloring data points independently from their coordinates](https://mui.com/x/react-charts/scatter/#color-scale)
+- 🌍 Improve Catalan (ca-ES) and Spanish (es-ES) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.3.1`
+
+- [DataGrid] Fix date filtering for negative timezone offsets (#12836) @cherniavskii
+- [DataGrid] Fix flex column width when used with pinned columns (#12849) @romgrk
+- [DataGrid] Fix group header resize (#12863) @arminmeh
+- [DataGrid] Pass slot props to `columnHeaders` slot (#12768) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.3.1` [![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@7.3.1`.
+
+#### `@mui/x-data-grid-premium@7.3.1` [![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@7.3.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.3.1`
+
+- [l10n] Improve Catalan (ca-ES) locale (#12856) @soler1212
+- [l10n] Improve Spanish (es-ES) locale (#12858) @soler1212
+
+#### `@mui/x-date-pickers-pro@7.3.1` [![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@7.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.3.1`
+
+- [charts] Add documentation on border radius alternative for `BarCharts` (#12859) @JCQuintas
+- [charts] Add z-axis to colorize scatter charts (#12738) @alexfauquette
+- [charts] Fix left/bottomAxis not picking up default axis id (#12894) @JCQuintas
+- [charts] Improve default tooltip content (#12257) @oliviertassinari
+- [charts] Round y values for bar chart (#12846) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.3.1`
+
+- [TreeView] Remove un-needed `aria-activedescendant` attribute (#12867) @flaviendelangle
+- [TreeView] Rework the selection internals (#12703) @flaviendelangle
+- [TreeView] Use the order in which the items are displayed for `type-ahead` (#12827) @flaviendelangle
+
+### Docs
+
+- [docs] Add demo for styling charts with `sx` props (#12791) @derek-0000
+- [docs] Cover webpack 4 support in migration guide (#12710) @cherniavskii
+- [docs] Document interfaces for charts (#12656) @alexfauquette
+- [docs] Fix Vale regression (#12862) @oliviertassinari
+- [docs] Improve Data Grid migration guide (#12879) @MBilalShafi
+- [docs] Update Column features availability (#12865) @DanailH
+
+### Core
+
+- [core] Fix `l10n` GH workflow (#12895) @LukasTy
+- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
+- [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
+- [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
+- [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
+- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
+
 ## 7.3.0
 
 _Apr 18, 2024_
@@ -228,7 +441,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 
 - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle
 - [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle
-- [TreeView] Create pro package (not released yet) (#12240) @flaviendelangle
+- [TreeView] Create Pro package (not released yet) (#12240) @flaviendelangle
 - [TreeView] Fix typo in errors (#12623) @alissa-tung
 - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle
 
@@ -243,7 +456,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Fix type arguments in Custom Field page (#12619) @Juneezee
 - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
 - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
-- [docs] Match IE 11 spacing with Material UI @oliviertassinari
+- [docs] Match IE 11 spacing with Material UI @oliviertassinari
 - [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
 - [docs] Remove ` around @default values (#12158) @alexfauquette
 - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
@@ -506,7 +719,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
 - [docs] Update links to v6 (#12496) @cherniavskii
 - [docs] Update links to v7 docs (#12500) @noraleonte
 - [docs] Update supported versions (#12508) @joserodolfofreitas
-- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
 
 ### Core
 
@@ -2440,7 +2653,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.3`.
 - [core] Make `@mui/system` a direct dependency (#11128) @LukasTy
 - [core] Remove blank lines, coding style @oliviertassinari
 - [core] Remove outdated `ENABLE_AD` env variable (#11181) @oliviertassinari
-- [github] Do not add `plan: Pro` and `plan: Premium` labels on pro / premium issue templates (#10183) @flaviendelangle
+- [github] Do not add `plan: Pro` and `plan: Premium` labels on Pro / Premium issue templates (#10183) @flaviendelangle
 
 ## 7.0.0-alpha.2
 
@@ -3363,10 +3576,10 @@ Same changes as in `@mui/x-date-pickers@6.19.5`.
 - [docs] Fix the Treemap illustration (#12189) @danilo-leal
 - [docs] Fix typo for `AdapterDateFnsV3` (#12037) @flaviendelangle
 - [docs] Improve performance on Charts entry point @oliviertassinari
-- [docs] Move Heatmap to pro (#12170) @alexfauquette
+- [docs] Move Heatmap to Pro (#12170) @alexfauquette
 - [docs] Remove Charts installation next tag call-out (#12133) @LukasTy
 - [docs] Removed `focused` prop from demo (#12126) @michelengelen
-- [docs] Add missing Heatmap pro icon @oliviertassinari
+- [docs] Add missing Heatmap Pro icon @oliviertassinari
 - [docs] Add more illustrations to the Overview page (#12041) @danilo-leal
 - [docs] Avoid use of shorthand (#12009) @oliviertassinari
 
@@ -6093,7 +6306,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - [docs] Create examples of pickers with custom fields (#8034) @flaviendelangle
 - [docs] Fix 301 redirections @oliviertassinari
 - [docs] Fix link to React's docs @oliviertassinari
-- [docs] Fix pro license links to point to the same page (#8303) @LukasTy
+- [docs] Fix Pro license links to point to the same page (#8303) @LukasTy
 - [docs] Give an incentive to upgrade (#8269) @oliviertassinari
 - [docs] Improve contrast on data grid navigation (#8239) @oliviertassinari
 - [docs] Update shortcuts page to use slotProps (#8288) @dcorb

package/TreeItem/TreeItem.js

@@ -19,8 +19,7 @@ import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TreeItem/TreeItemContent.js

@@ -5,8 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useTreeItemState } from './useTreeItemState';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
  */

package/TreeItem/useTreeItemState.js

@@ -32,9 +32,7 @@ export function useTreeItemState(itemId) {
       const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
       if (multiple) {
         if (event.shiftKey) {
-          instance.selectRange(event, {
-            end: itemId
-          });
+          instance.expandSelectionRange(event, itemId);
         } else {
           instance.selectItem(event, itemId, true);
         }

package/TreeItem2/TreeItem2.js

@@ -14,8 +14,7 @@ import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
 import { getTreeItemUtilityClass, treeItemClasses } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2Provider } from '../TreeItem2Provider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TreeItem2Root = styled('li', {
   name: 'MuiTreeItem2',
   slot: 'Root',
@@ -122,7 +121,7 @@ export const TreeItem2IconContainer = styled('div', {
   }
 });
 export const TreeItem2GroupTransition = styled(Collapse, {
-  name: 'MuiTreeItem2GroupTransition',
+  name: 'MuiTreeItem2',
   slot: 'GroupTransition',
   overridesResolver: (props, styles) => styles.groupTransition
 })({

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -40,9 +40,7 @@ export const useTreeItem2Utils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
-        instance.selectRange(event, {
-          end: itemId
-        });
+        instance.expandSelectionRange(event, itemId);
       } else {
         instance.selectItem(event, itemId, true);
       }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.3.0
+ * @mui/x-tree-view v7.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/TreeViewProvider/useTreeViewContext.d.ts

@@ -1,3 +1,3 @@
 import { TreeViewAnyPluginSignature } from '../models';
 import { TreeViewContextValue } from './TreeViewProvider.types';
-export declare const useTreeViewContext: <TPlugins extends readonly TreeViewAnyPluginSignature[]>() => TreeViewContextValue<TPlugins>;
+export declare const useTreeViewContext: <TPlugins extends readonly TreeViewAnyPluginSignature[]>() => NonNullable<TreeViewContextValue<TPlugins>>;

package/internals/hooks/useInstanceEventHandler.d.ts

@@ -7,9 +7,9 @@ interface RegistryContainer {
 }
 export declare function createUseInstanceEventHandler(registryContainer: RegistryContainer): <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance["$$signature"]>[E]>) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
 export declare const unstable_resetCleanupTracking: () => void;
 export declare const useInstanceEventHandler: <Instance extends UseTreeViewInstanceEventsInstance & {
     $$signature: TreeViewAnyPluginSignature;
-}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance["$$signature"]>[E]>) => void;
+}, E extends keyof Instance["$$signature"]["events"] | keyof import("../models").MergePluginsProperty<[import("../corePlugins").TreeViewCorePluginsSignature, ...Instance["$$signature"]["dependantPlugins"]], "events">>(instance: Instance, eventName: E, handler: TreeViewEventListener<TreeViewUsedEvents<Instance['$$signature']>[E]>) => void;
 export {};

package/internals/models/treeView.d.ts

@@ -11,12 +11,6 @@ export interface TreeViewItemMeta {
      */
     label?: string;
 }
-export interface TreeViewItemRange {
-    start?: string | null;
-    end?: string | null;
-    next?: string | null;
-    current?: string;
-}
 export interface TreeViewModel<TValue> {
     name: string;
     value: TValue;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -105,12 +105,9 @@ export const useTreeViewFocus = ({
       instance.focusDefaultItem(event);
     }
   };
-  const focusedItem = instance.getItemMeta(state.focusedItemId);
-  const activeDescendant = focusedItem ? instance.getTreeItemIdAttribute(focusedItem.id, focusedItem.idAttribute) : null;
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createRootHandleFocus(otherHandlers),
-      'aria-activedescendant': activeDescendant ?? undefined
+      onFocus: createRootHandleFocus(otherHandlers)
     }),
     publicAPI: {
       focusItem

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -5,14 +5,6 @@ import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getP
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
-function findNextFirstChar(firstChars, startIndex, char) {
-  for (let i = startIndex; i < firstChars.length; i += 1) {
-    if (char === firstChars[i]) {
-      return i;
-    }
-  }
-  return -1;
-}
 export const useTreeViewKeyboardNavigation = ({
   instance,
   params,
@@ -35,42 +27,29 @@ export const useTreeViewKeyboardNavigation = ({
     Object.values(state.items.itemMetaMap).forEach(processItem);
     firstCharMap.current = newFirstCharMap;
   }, [state.items.itemMetaMap, params.getItemId, instance]);
-  const getFirstMatchingItem = (itemId, firstChar) => {
-    let start;
-    let index;
-    const lowercaseChar = firstChar.toLowerCase();
-    const firstCharIds = [];
-    const firstChars = [];
-    // This really only works since the ids are strings
-    Object.keys(firstCharMap.current).forEach(mapItemId => {
-      const map = instance.getItemMeta(mapItemId);
-      const visible = map.parentId ? instance.isItemExpanded(map.parentId) : true;
-      const shouldBeSkipped = params.disabledItemsFocusable ? false : instance.isItemDisabled(mapItemId);
-      if (visible && !shouldBeSkipped) {
-        firstCharIds.push(mapItemId);
-        firstChars.push(firstCharMap.current[mapItemId]);
+  const getFirstMatchingItem = (itemId, query) => {
+    const cleanQuery = query.toLowerCase();
+    const getNextItem = itemIdToCheck => {
+      const nextItemId = getNextNavigableItem(instance, itemIdToCheck);
+      // We reached the end of the tree, check from the beginning
+      if (nextItemId === null) {
+        return getFirstNavigableItem(instance);
+      }
+      return nextItemId;
+    };
+    let matchingItemId = null;
+    let currentItemId = getNextItem(itemId);
+    const checkedItems = {};
+    // The "!checkedItems[currentItemId]" condition avoids an infinite loop when there is no matching item.
+    while (matchingItemId == null && !checkedItems[currentItemId]) {
+      if (firstCharMap.current[currentItemId] === cleanQuery) {
+        matchingItemId = currentItemId;
+      } else {
+        checkedItems[currentItemId] = true;
+        currentItemId = getNextItem(currentItemId);
       }
-    });
-
-    // Get start index for search based on position of currentItem
-    start = firstCharIds.indexOf(itemId) + 1;
-    if (start >= firstCharIds.length) {
-      start = 0;
-    }
-
-    // Check remaining slots in the menu
-    index = findNextFirstChar(firstChars, start, lowercaseChar);
-
-    // If not found in remaining slots, check from beginning
-    if (index === -1) {
-      index = findNextFirstChar(firstChars, 0, lowercaseChar);
-    }
-
-    // If a match was found...
-    if (index > -1) {
-      return firstCharIds[index];
     }
-    return null;
+    return matchingItemId;
   };
   const canToggleItemSelection = itemId => !params.disableSelection && !instance.isItemDisabled(itemId);
   const canToggleItemExpansion = itemId => {
@@ -95,9 +74,7 @@ export const useTreeViewKeyboardNavigation = ({
         {
           event.preventDefault();
           if (params.multiSelect && event.shiftKey) {
-            instance.selectRange(event, {
-              end: itemId
-            });
+            instance.expandSelectionRange(event, itemId);
           } else if (params.multiSelect) {
             instance.selectItem(event, itemId, true);
           } else {
@@ -136,10 +113,7 @@ export const useTreeViewKeyboardNavigation = ({
             // Multi select behavior when pressing Shift + ArrowDown
             // Toggles the selection state of the next item
             if (params.multiSelect && event.shiftKey && canToggleItemSelection(nextItem)) {
-              instance.selectRange(event, {
-                end: nextItem,
-                current: itemId
-              }, true);
+              instance.selectItemFromArrowNavigation(event, itemId, nextItem);
             }
           }
           break;
@@ -156,10 +130,7 @@ export const useTreeViewKeyboardNavigation = ({
             // Multi select behavior when pressing Shift + ArrowUp
             // Toggles the selection state of the previous item
             if (params.multiSelect && event.shiftKey && canToggleItemSelection(previousItem)) {
-              instance.selectRange(event, {
-                end: previousItem,
-                current: itemId
-              }, true);
+              instance.selectItemFromArrowNavigation(event, itemId, previousItem);
             }
           }
           break;
@@ -202,12 +173,12 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the first item in the tree
       case key === 'Home':
         {
-          instance.focusItem(event, getFirstNavigableItem(instance));
-
           // Multi select behavior when pressing Ctrl + Shift + Home
           // Selects the focused item and all items up to the first item.
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
-            instance.rangeSelectToFirst(event, itemId);
+            instance.selectRangeFromStartToItem(event, itemId);
+          } else {
+            instance.focusItem(event, getFirstNavigableItem(instance));
           }
           event.preventDefault();
           break;
@@ -216,12 +187,12 @@ export const useTreeViewKeyboardNavigation = ({
       // Focuses the last item in the tree
       case key === 'End':
         {
-          instance.focusItem(event, getLastNavigableItem(instance));
-
           // Multi select behavior when pressing Ctrl + Shirt + End
           // Selects the focused item and all the items down to the last item.
           if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
-            instance.rangeSelectToLast(event, itemId);
+            instance.selectRangeFromItemToEnd(event, itemId);
+          } else {
+            instance.focusItem(event, getLastNavigableItem(instance));
           }
           event.preventDefault();
           break;
@@ -239,10 +210,7 @@ export const useTreeViewKeyboardNavigation = ({
       // Selects all the items
       case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
-          instance.selectRange(event, {
-            start: getFirstNavigableItem(instance),
-            end: getLastNavigableItem(instance)
-          });
+          instance.selectAllNavigableItems(event);
           event.preventDefault();
           break;
         }