Skip to content

Commit

Permalink
Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@flaviendelangle
flaviendelangle committed Mar 18, 2024
1 parent 19447ec commit 4a31e2d
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 45 deletions.
2 changes: 1 addition & 1 deletion packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ describe('<SimpleTreeView />', () => {
});
});

describe('onNodeToggle', () => {
describe('onExpandedItemsChange', () => {
it('should be called when a parent item label is clicked', () => {
const onExpandedItemsChange = spy();

Expand Down
12 changes: 6 additions & 6 deletions packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,7 +519,7 @@ describe('<TreeItem />', () => {
expect(getByTestId('two')).toHaveFocus();
});

it('should do nothing if focus is on an end node', () => {
it('should do nothing if focus is on an end item', () => {
const { getByTestId } = render(
<SimpleTreeView defaultExpandedItems={['one']}>
<TreeItem itemId="one" label="one" data-testid="one">
Expand All @@ -540,7 +540,7 @@ describe('<TreeItem />', () => {
});

describe('left arrow interaction', () => {
it('should close the node if focus is on an open node', () => {
it('should close the item if focus is on an open item', () => {
const { getByTestId, getByText } = render(
<SimpleTreeView>
<TreeItem itemId="one" label="one" data-testid="one">
Expand All @@ -562,7 +562,7 @@ describe('<TreeItem />', () => {
expect(getByTestId('one')).toHaveFocus();
});

it("should move focus to the item's parent item if focus is on a child node that is an end node", () => {
it("should move focus to the item's parent item if focus is on a child node that is an end item", () => {
const { getByTestId } = render(
<SimpleTreeView defaultExpandedItems={['one']}>
<TreeItem itemId="one" label="one" data-testid="one">
Expand Down Expand Up @@ -660,7 +660,7 @@ describe('<TreeItem />', () => {
expect(getByTestId('two')).toHaveFocus();
});

it('moves focus to a child node', () => {
it('moves focus to a child item', () => {
const { getByTestId } = render(
<SimpleTreeView defaultExpandedItems={['one']}>
<TreeItem itemId="one" label="one" data-testid="one">
Expand All @@ -679,7 +679,7 @@ describe('<TreeItem />', () => {
expect(getByTestId('two')).toHaveFocus();
});

it('moves focus to a child node works with a dynamic tree', () => {
it('moves focus to a child item works with a dynamic tree', () => {
function TestComponent() {
const [hide, setState] = React.useState(false);

Expand Down Expand Up @@ -1266,7 +1266,7 @@ describe('<TreeItem />', () => {
});
});

it('should deselect the node when pressing space on a selected node', () => {
it('should deselect the item when pressing space on a selected item', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect defaultSelectedItems={['one']}>
<TreeItem itemId="one" label="one" data-testid="one" />
Expand Down
16 changes: 8 additions & 8 deletions packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const useTabbableItemId = (
instance: TreeViewUsedInstance<UseTreeViewFocusSignature>,
selectedItems: string | string[] | null,
) => {
const isItemVisible = (nodeId: string) => {
const item = instance.getNode(nodeId);
return item && (item.parentId == null || instance.isNodeExpanded(item.parentId));
const isItemVisible = (itemId: string) => {
const node = instance.getNode(itemId);
return node && (node.parentId == null || instance.isNodeExpanded(node.parentId));
};

let tabbableItemId: string | null | undefined;
Expand Down Expand Up @@ -67,8 +67,8 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
};

const innerFocusItem = (event: React.SyntheticEvent | null, itemId: string) => {
const item = instance.getNode(itemId);
const itemElement = document.getElementById(instance.getTreeItemId(itemId, item.idAttribute));
const node = instance.getNode(itemId);
const itemElement = document.getElementById(instance.getTreeItemId(itemId, node.idAttribute));
if (itemElement) {
itemElement.focus();
}
Expand Down Expand Up @@ -106,9 +106,9 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
return;
}

const item = instance.getNode(state.focusedNodeId);
const node = instance.getNode(state.focusedNodeId);
const itemElement = document.getElementById(
instance.getTreeItemId(state.focusedNodeId, item.idAttribute),
instance.getTreeItemId(state.focusedNodeId, node.idAttribute),
);
if (itemElement) {
itemElement.blur();
Expand All @@ -117,7 +117,7 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
setFocusedItemId(null);
});

const canItemBeTabbed = (nodeId: string) => nodeId === tabbableItemId;
const canItemBeTabbed = (itemId: string) => itemId === tabbableItemId;

populateInstance<UseTreeViewFocusSignature>(instance, {
isNodeFocused,
Expand Down
2 changes: 1 addition & 1 deletion packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';

export interface UseTreeViewFocusInstance {
isNodeFocused: (itemId: string) => boolean;
canItemBeTabbed: (nodeId: string) => boolean;
canItemBeTabbed: (itemId: string) => boolean;
focusItem: (event: React.SyntheticEvent, nodeId: string) => void;
focusDefaultNode: (event: React.SyntheticEvent | null) => void;
removeFocusedItem: () => void;
Expand Down
56 changes: 28 additions & 28 deletions ...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
const handleItemKeyDown = (
event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent,
nodeId: string,
itemId: string,
) => {
if (event.defaultMuiPrevented) {
return;
Expand All @@ -131,30 +131,30 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// eslint-disable-next-line default-case
switch (true) {
// Select the node when pressing "Space"
case key === ' ' && canToggleItemSelection(nodeId): {
case key === ' ' && canToggleItemSelection(itemId): {
event.preventDefault();
if (params.multiSelect && event.shiftKey) {
instance.selectRange(event, { end: nodeId });
instance.selectRange(event, { end: itemId });
} else if (params.multiSelect) {
instance.selectNode(event, nodeId, true);
instance.selectNode(event, itemId, true);
} else {
instance.selectNode(event, nodeId);
instance.selectNode(event, itemId);
}
break;
}

// If the focused node has children, we expand it.
// If the focused node has no children, we select it.
case key === 'Enter': {
if (canToggleItemExpansion(nodeId)) {
instance.toggleNodeExpansion(event, nodeId);
if (canToggleItemExpansion(itemId)) {
instance.toggleNodeExpansion(event, itemId);
event.preventDefault();
} else if (canToggleItemSelection(nodeId)) {
} else if (canToggleItemSelection(itemId)) {
if (params.multiSelect) {
event.preventDefault();
instance.selectNode(event, nodeId, true);
} else if (!instance.isNodeSelected(nodeId)) {
instance.selectNode(event, nodeId);
instance.selectNode(event, itemId, true);
} else if (!instance.isNodeSelected(itemId)) {
instance.selectNode(event, itemId);
event.preventDefault();
}
}
Expand All @@ -164,7 +164,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<

// Focus the next focusable item
case key === 'ArrowDown': {
const nextItem = getNextNode(instance, nodeId);
const nextItem = getNextNode(instance, itemId);
if (nextItem) {
event.preventDefault();
instance.focusItem(event, nextItem);
Expand All @@ -176,7 +176,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
event,
{
end: nextItem,
current: nodeId,
current: itemId,
},
true,
);
Expand All @@ -188,7 +188,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<

// Focuses the previous focusable item
case key === 'ArrowUp': {
const previousItem = getPreviousNode(instance, nodeId);
const previousItem = getPreviousNode(instance, itemId);
if (previousItem) {
event.preventDefault();
instance.focusItem(event, previousItem);
Expand All @@ -200,7 +200,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
event,
{
end: previousItem,
current: nodeId,
current: itemId,
},
true,
);
Expand All @@ -213,14 +213,14 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// If the focused item is expanded, we move the focus to its first child
// If the focused item is collapsed and has children, we expand it
case (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL): {
if (instance.isNodeExpanded(nodeId)) {
const nextNodeId = getNextNode(instance, nodeId);
if (instance.isNodeExpanded(itemId)) {
const nextNodeId = getNextNode(instance, itemId);
if (nextNodeId) {
instance.focusItem(event, nextNodeId);
event.preventDefault();
}
} else if (canToggleItemExpansion(nodeId)) {
instance.toggleNodeExpansion(event, nodeId);
} else if (canToggleItemExpansion(itemId)) {
instance.toggleNodeExpansion(event, itemId);
event.preventDefault();
}

Expand All @@ -230,11 +230,11 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// If the focused item is expanded, we collapse it
// If the focused item is collapsed and has a parent, we move the focus to this parent
case (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL): {
if (canToggleItemExpansion(nodeId) && instance.isNodeExpanded(nodeId)) {
instance.toggleNodeExpansion(event, nodeId);
if (canToggleItemExpansion(itemId) && instance.isNodeExpanded(itemId)) {
instance.toggleNodeExpansion(event, itemId);
event.preventDefault();
} else {
const parent = instance.getNode(nodeId).parentId;
const parent = instance.getNode(itemId).parentId;
if (parent) {
instance.focusItem(event, parent);
event.preventDefault();
Expand All @@ -250,8 +250,8 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<

// Multi select behavior when pressing Ctrl + Shift + Home
// Selects the focused node and all nodes up to the first node.
if (canToggleItemSelection(nodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
instance.rangeSelectToFirst(event, nodeId);
if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
instance.rangeSelectToFirst(event, itemId);
}

event.preventDefault();
Expand All @@ -264,8 +264,8 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<

// Multi select behavior when pressing Ctrl + Shirt + End
// Selects the focused item and all the items down to the last item.
if (canToggleItemSelection(nodeId) && params.multiSelect && ctrlPressed && event.shiftKey) {
instance.rangeSelectToLast(event, nodeId);
if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
instance.rangeSelectToLast(event, itemId);
}

event.preventDefault();
Expand All @@ -274,7 +274,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<

// Expand all siblings that are at the same level as the focused item
case key === '*': {
instance.expandAllSiblings(event, nodeId);
instance.expandAllSiblings(event, itemId);
event.preventDefault();
break;
}
Expand All @@ -293,7 +293,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
// Type-ahead
// TODO: Support typing multiple characters
case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): {
const matchingNode = getFirstMatchingItem(nodeId, key);
const matchingNode = getFirstMatchingItem(itemId, key);
if (matchingNode != null) {
instance.focusItem(event, matchingNode);
event.preventDefault();
Expand Down
2 changes: 1 addition & 1 deletion ...rc/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export interface UseTreeViewKeyboardNavigationInstance {
updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
handleItemKeyDown: (
event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent,
nodeId: string,
itemId: string,
) => void;
}

Expand Down

0 comments on commit 4a31e2d

Please sign in to comment.