@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
42 lines • 2.33 kB
JavaScript
import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
import { selectionSelectors } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
import { isItemDisabled } from "../useTreeViewItems/useTreeViewItems.utils.js";
import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
const defaultFocusableItemIdSelector = createSelectorMemoized(selectionSelectors.selectedItems, expansionSelectors.expandedItemsMap, itemsSelectors.itemMetaLookup, itemsSelectors.disabledItemFocusable, state => itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
const firstSelectedItem = selectedItems.find(itemId => {
if (!disabledItemsFocusable && isItemDisabled(itemMetaLookup, itemId)) {
return false;
}
const itemMeta = itemMetaLookup[itemId];
return itemMeta && (itemMeta.parentId == null || expandedItemsMap.has(itemMeta.parentId));
});
if (firstSelectedItem != null) {
return firstSelectedItem;
}
const firstNavigableItem = orderedRootItemIds.find(itemId => disabledItemsFocusable || !isItemDisabled(itemMetaLookup, itemId));
if (firstNavigableItem != null) {
return firstNavigableItem;
}
return null;
});
export const focusSelectors = {
/**
* Gets the item that should be sequentially focusable (usually with the Tab key).
* At any point in time, there is a single item that can be sequentially focused in the Tree View.
* This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
*/
defaultFocusableItemId: defaultFocusableItemIdSelector,
/**
* Checks whether an item is the default focusable item.
*/
isItemTheDefaultFocusableItem: createSelector(defaultFocusableItemIdSelector, (defaultFocusableItemId, itemId) => defaultFocusableItemId === itemId),
/**
* Gets the id of the item that is currently focused.
*/
focusedItemId: createSelector(state => state.focus.focusedItemId),
/**
* Checks whether an item is focused.
*/
isItemFocused: createSelector((state, itemId) => state.focus.focusedItemId === itemId)
};