Skip to content

Commit 04a9b04

Browse files
LFDanLuLFDanLu
authored
Revert "feat: Keyboard shortcut handler (adobe#9929)" (adobe#10197)
This reverts commit 9e1b070.
1 parent 0b6001a commit 04a9b04

32 files changed

Lines changed: 823 additions & 1408 deletions

‎packages/@adobe/react-spectrum/src/actionbar/ActionBar.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,9 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: Ref<HTMLDivElemen
110110
}
111111

112112
let {keyboardProps} = useKeyboard({
113-
shortcuts: {
114-
Escape: () => {
113+
onKeyDown(e) {
114+
if (e.key === 'Escape') {
115+
e.preventDefault();
115116
onClearSelection();
116117
}
117118
}

‎packages/@react-spectrum/s2/src/ActionBar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,12 @@ const ActionBarInner = forwardRef(function ActionBarInner(
167167
});
168168

169169
let {keyboardProps} = useKeyboard({
170-
shortcuts: {
171-
Escape: () => {
170+
onKeyDown(e) {
171+
if (e.key === 'Escape') {
172+
e.preventDefault();
172173
onClearSelection?.();
174+
} else {
175+
e.continuePropagation();
173176
}
174177
}
175178
});

‎packages/react-aria-components/test/ListBox.test.js‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2396,40 +2396,3 @@ describe('ListBox', () => {
23962396
});
23972397
}
23982398
});
2399-
2400-
describe('keyboard modifier keys', () => {
2401-
let user;
2402-
let platformMock;
2403-
beforeAll(() => {
2404-
user = userEvent.setup({delay: null, pointerMap});
2405-
});
2406-
// selectionMode: 'none', 'single', 'multiple'
2407-
// selectionBehavior: 'toggle', 'replace'
2408-
// platform: 'mac', 'windows'
2409-
2410-
// modifier key: 'alt', 'ctrl', 'meta', 'shift'
2411-
// key: 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'home', 'end', 'page-up', 'page-down', 'enter', 'space', 'tab'
2412-
// expected behavior: 'navigate', 'select', 'toggle', 'replace'
2413-
describe('mac', () => {
2414-
beforeAll(() => {
2415-
platformMock = jest.spyOn(navigator, 'platform', 'get').mockImplementation(() => 'Mac');
2416-
});
2417-
afterAll(() => {
2418-
platformMock.mockRestore();
2419-
});
2420-
it('should not navigate when using unsupported modifier keys', async () => {
2421-
let {getByRole} = renderListbox({selectionMode: 'none'});
2422-
await user.tab();
2423-
let listbox = getByRole('listbox');
2424-
let options = within(listbox).getAllByRole('option');
2425-
await user.keyboard('{ArrowDown}');
2426-
expect(document.activeElement).toBe(options[1]);
2427-
await user.keyboard('{Meta>}{ArrowDown}{/Meta}');
2428-
expect(document.activeElement).toBe(options[1]);
2429-
await user.keyboard('{Meta>}{ArrowUp}{/Meta}');
2430-
expect(document.activeElement).toBe(options[1]);
2431-
await user.keyboard('{Control>}{Home}{/Control}');
2432-
expect(document.activeElement).toBe(options[1]);
2433-
});
2434-
});
2435-
});

‎packages/react-aria/src/actiongroup/useActionGroup.ts‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ import {
2424
} from '@react-types/shared';
2525
import {createFocusManager} from '../focus/FocusScope';
2626
import {filterDOMProps} from '../utils/filterDOMProps';
27+
import {getEventTarget, nodeContains} from '../utils/shadowdom/DOMFunctions';
28+
import {KeyboardEventHandler, useState} from 'react';
2729
import {ListState} from 'react-stately/useListState';
28-
import {useKeyboard} from '../interactions/useKeyboard';
2930
import {useLayoutEffect} from '../utils/useLayoutEffect';
3031
import {useLocale} from '../i18n/I18nProvider';
31-
import {useState} from 'react';
3232

3333
const BUTTON_GROUP_ROLES = {
3434
none: 'toolbar',
@@ -91,30 +91,34 @@ export function useActionGroup<T>(
9191
let {direction} = useLocale();
9292
let focusManager = createFocusManager(ref);
9393
let flipDirection = direction === 'rtl' && orientation === 'horizontal';
94-
let {keyboardProps} = useKeyboard({
95-
shortcuts: {
96-
ArrowRight: () => {
97-
if (flipDirection) {
94+
let onKeyDown: KeyboardEventHandler = e => {
95+
if (!nodeContains(e.currentTarget, getEventTarget(e))) {
96+
return;
97+
}
98+
99+
switch (e.key) {
100+
case 'ArrowRight':
101+
case 'ArrowDown':
102+
e.preventDefault();
103+
e.stopPropagation();
104+
if (e.key === 'ArrowRight' && flipDirection) {
98105
focusManager.focusPrevious({wrap: true});
99106
} else {
100107
focusManager.focusNext({wrap: true});
101108
}
102-
},
103-
ArrowDown: () => {
104-
focusManager.focusNext({wrap: true});
105-
},
106-
ArrowLeft: () => {
107-
if (flipDirection) {
109+
break;
110+
case 'ArrowLeft':
111+
case 'ArrowUp':
112+
e.preventDefault();
113+
e.stopPropagation();
114+
if (e.key === 'ArrowLeft' && flipDirection) {
108115
focusManager.focusNext({wrap: true});
109116
} else {
110117
focusManager.focusPrevious({wrap: true});
111118
}
112-
},
113-
ArrowUp: () => {
114-
focusManager.focusPrevious({wrap: true});
115-
}
119+
break;
116120
}
117-
});
121+
};
118122

119123
let role: string | undefined = BUTTON_GROUP_ROLES[state.selectionManager.selectionMode];
120124
if (isInToolbar && role === 'toolbar') {
@@ -126,7 +130,7 @@ export function useActionGroup<T>(
126130
role,
127131
'aria-orientation': role === 'toolbar' ? orientation : undefined,
128132
'aria-disabled': isDisabled,
129-
...keyboardProps
133+
onKeyDown
130134
}
131135
};
132136
}

‎packages/react-aria/src/calendar/useCalendarGrid.ts‎

Lines changed: 46 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ import {CalendarDate, startOfWeek, today} from '@internationalized/date';
1414
import {CalendarSelectionMode, CalendarState} from 'react-stately/useCalendarState';
1515
import {DOMAttributes} from '@react-types/shared';
1616
import {hookData, useVisibleRangeDescription} from './utils';
17+
import {KeyboardEvent, useMemo} from 'react';
1718
import {mergeProps} from '../utils/mergeProps';
1819
import {RangeCalendarState} from 'react-stately/useRangeCalendarState';
1920
import {useDateFormatter} from '../i18n/useDateFormatter';
20-
import {useKeyboard} from '../interactions/useKeyboard';
2121
import {useLabels} from '../utils/useLabels';
2222
import {useLocale} from '../i18n/I18nProvider';
23-
import {useMemo} from 'react';
2423

2524
export interface AriaCalendarGridProps {
2625
/**
@@ -79,61 +78,70 @@ export function useCalendarGrid(
7978

8079
let {direction} = useLocale();
8180

82-
let {keyboardProps} = useKeyboard({
83-
shortcuts: {
84-
Enter: () => {
81+
let onKeyDown = (e: KeyboardEvent) => {
82+
switch (e.key) {
83+
case 'Enter':
84+
case ' ':
85+
e.preventDefault();
8586
state.selectFocusedDate();
86-
},
87-
' ': () => {
88-
state.selectFocusedDate();
89-
},
90-
PageUp: () => {
91-
state.focusPreviousSection();
92-
},
93-
'Shift+PageUp': () => {
94-
state.focusPreviousSection(true);
95-
},
96-
PageDown: () => {
97-
state.focusNextSection();
98-
},
99-
'Shift+PageDown': () => {
100-
state.focusNextSection(true);
101-
},
102-
End: () => {
87+
break;
88+
case 'PageUp':
89+
e.preventDefault();
90+
e.stopPropagation();
91+
state.focusPreviousSection(e.shiftKey);
92+
break;
93+
case 'PageDown':
94+
e.preventDefault();
95+
e.stopPropagation();
96+
state.focusNextSection(e.shiftKey);
97+
break;
98+
case 'End':
99+
e.preventDefault();
100+
e.stopPropagation();
103101
state.focusSectionEnd();
104-
},
105-
Home: () => {
102+
break;
103+
case 'Home':
104+
e.preventDefault();
105+
e.stopPropagation();
106106
state.focusSectionStart();
107-
},
108-
ArrowLeft: () => {
107+
break;
108+
case 'ArrowLeft':
109+
e.preventDefault();
110+
e.stopPropagation();
109111
if (direction === 'rtl') {
110112
state.focusNextDay();
111113
} else {
112114
state.focusPreviousDay();
113115
}
114-
},
115-
ArrowUp: () => {
116+
break;
117+
case 'ArrowUp':
118+
e.preventDefault();
119+
e.stopPropagation();
116120
state.focusPreviousRow();
117-
},
118-
ArrowRight: () => {
121+
break;
122+
case 'ArrowRight':
123+
e.preventDefault();
124+
e.stopPropagation();
119125
if (direction === 'rtl') {
120126
state.focusPreviousDay();
121127
} else {
122128
state.focusNextDay();
123129
}
124-
},
125-
ArrowDown: () => {
130+
break;
131+
case 'ArrowDown':
132+
e.preventDefault();
133+
e.stopPropagation();
126134
state.focusNextRow();
127-
},
128-
Escape: () => {
135+
break;
136+
case 'Escape':
129137
// Cancel the selection.
130138
if ('setAnchorDate' in state) {
139+
e.preventDefault();
131140
state.setAnchorDate(null);
132141
}
133-
return false; // TODO: is this really correct? or should it return true when we cancel and only propagate if there's nothing to do
134-
}
142+
break;
135143
}
136-
});
144+
};
137145

138146
let visibleRangeDescription = useVisibleRangeDescription(
139147
startDate,
@@ -174,7 +182,7 @@ export function useCalendarGrid(
174182
'aria-disabled': state.isDisabled || undefined,
175183
'aria-multiselectable':
176184
'highlightedRange' in state || state.selectionMode === 'multiple' || undefined,
177-
...keyboardProps,
185+
onKeyDown,
178186
onFocus: () => state.setFocused(true),
179187
onBlur: () => state.setFocused(false)
180188
}),

‎packages/react-aria/src/color/useColorArea.ts‎

Lines changed: 39 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -111,56 +111,46 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
111111

112112
let currentPosition = useRef<{x: number; y: number} | null>(null);
113113

114-
let keyboardUpdate = (cb, inputRef: RefObject<HTMLInputElement | null>, input: 'x' | 'y') => {
115-
state.setDragging(true);
116-
setValueChangedViaKeyboard(true);
117-
cb();
118-
state.setDragging(false);
119-
focusInput(inputRef);
120-
setFocusedInput(input);
121-
};
122-
123114
let {keyboardProps} = useKeyboard({
124-
shortcuts: {
125-
PageUp: () => {
126-
return keyboardUpdate(
127-
() => {
128-
state.incrementY(state.yChannelPageStep);
129-
},
130-
inputYRef,
131-
'y'
132-
);
133-
},
134-
PageDown: () => {
135-
return keyboardUpdate(
136-
() => {
137-
state.decrementY(state.yChannelPageStep);
138-
},
139-
inputYRef,
140-
'y'
141-
);
142-
},
143-
Home: () => {
144-
return keyboardUpdate(
145-
() => {
146-
direction === 'rtl'
147-
? state.incrementX(state.xChannelPageStep)
148-
: state.decrementX(state.xChannelPageStep);
149-
},
150-
inputXRef,
151-
'x'
152-
);
153-
},
154-
End: () => {
155-
return keyboardUpdate(
156-
() => {
157-
direction === 'rtl'
158-
? state.decrementX(state.xChannelPageStep)
159-
: state.incrementX(state.xChannelPageStep);
160-
},
161-
inputXRef,
162-
'x'
163-
);
115+
onKeyDown(e) {
116+
// these are the cases that useMove doesn't handle
117+
if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
118+
e.continuePropagation();
119+
return;
120+
}
121+
// same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
122+
e.preventDefault();
123+
// remember to set this and unset it so that onChangeEnd is fired
124+
state.setDragging(true);
125+
setValueChangedViaKeyboard(true);
126+
let dir;
127+
switch (e.key) {
128+
case 'PageUp':
129+
state.incrementY(state.yChannelPageStep);
130+
dir = 'y';
131+
break;
132+
case 'PageDown':
133+
state.decrementY(state.yChannelPageStep);
134+
dir = 'y';
135+
break;
136+
case 'Home':
137+
direction === 'rtl'
138+
? state.incrementX(state.xChannelPageStep)
139+
: state.decrementX(state.xChannelPageStep);
140+
dir = 'x';
141+
break;
142+
case 'End':
143+
direction === 'rtl'
144+
? state.decrementX(state.xChannelPageStep)
145+
: state.incrementX(state.xChannelPageStep);
146+
dir = 'x';
147+
break;
148+
}
149+
state.setDragging(false);
150+
if (dir) {
151+
let input = dir === 'x' ? inputXRef : inputYRef;
152+
focusInput(input);
153+
setFocusedInput(dir);
164154
}
165155
}
166156
});

0 commit comments

Comments
 (0)