Skip to content

Commit 859615a

Browse files
reidbarbersnowystingersolimantktaborsmdhmaiti
authored
Revert reverts from before latest release (#6926)
* Update Picker placeholder to be shorter (#6796) * feat: Support fragments in collections (#6430) Co-authored-by: Reid Barber <[email protected]> Co-authored-by: Robert Snow <[email protected]> * Exposing prop disabledBehavior to TableView (#6832) * fix/bug useTablist #5996 (#6023) * fix/bug useTabist #5996 and added tests * Extract `ToggleStateProps` type to use only what is needed in `useToggleState` (#3836) * Extract `ToggleStateProps` type to use only what is needed in `useToggleState` --------- Co-authored-by: Robert Snow <[email protected]> Co-authored-by: solimant <[email protected]> Co-authored-by: Kyle Taborski <[email protected]> Co-authored-by: Medhashis Maiti <[email protected]> Co-authored-by: Mateusz Burzyński <[email protected]>
1 parent 6b8cb7a commit 859615a

File tree

10 files changed

+514
-68
lines changed

10 files changed

+514
-68
lines changed

‎packages/@react-aria/selection/src/useSelectableCollection.ts

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -164,49 +164,57 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
164164
switch (e.key) {
165165
case 'ArrowDown': {
166166
if (delegate.getKeyBelow) {
167-
e.preventDefault();
168167
let nextKey = manager.focusedKey != null
169-
? delegate.getKeyBelow(manager.focusedKey)
168+
? delegate.getKeyBelow?.(manager.focusedKey)
170169
: delegate.getFirstKey?.();
171170
if (nextKey == null && shouldFocusWrap) {
172171
nextKey = delegate.getFirstKey?.(manager.focusedKey);
173172
}
174-
navigateToKey(nextKey);
173+
if (nextKey != null) {
174+
e.preventDefault();
175+
navigateToKey(nextKey);
176+
}
175177
}
176178
break;
177179
}
178180
case 'ArrowUp': {
179181
if (delegate.getKeyAbove) {
180-
e.preventDefault();
181182
let nextKey = manager.focusedKey != null
182-
? delegate.getKeyAbove(manager.focusedKey)
183+
? delegate.getKeyAbove?.(manager.focusedKey)
183184
: delegate.getLastKey?.();
184185
if (nextKey == null && shouldFocusWrap) {
185186
nextKey = delegate.getLastKey?.(manager.focusedKey);
186187
}
187-
navigateToKey(nextKey);
188+
if (nextKey != null) {
189+
e.preventDefault();
190+
navigateToKey(nextKey);
191+
}
188192
}
189193
break;
190194
}
191195
case 'ArrowLeft': {
192196
if (delegate.getKeyLeftOf) {
193-
e.preventDefault();
194-
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
197+
let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey);
195198
if (nextKey == null && shouldFocusWrap) {
196199
nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
197200
}
198-
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
201+
if (nextKey != null) {
202+
e.preventDefault();
203+
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
204+
}
199205
}
200206
break;
201207
}
202208
case 'ArrowRight': {
203209
if (delegate.getKeyRightOf) {
204-
e.preventDefault();
205-
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
210+
let nextKey = delegate.getKeyRightOf?.(manager.focusedKey);
206211
if (nextKey == null && shouldFocusWrap) {
207212
nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
208213
}
209-
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
214+
if (nextKey != null) {
215+
e.preventDefault();
216+
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
217+
}
210218
}
211219
break;
212220
}
@@ -236,16 +244,20 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
236244
break;
237245
case 'PageDown':
238246
if (delegate.getKeyPageBelow) {
239-
e.preventDefault();
240247
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
241-
navigateToKey(nextKey);
248+
if (nextKey != null) {
249+
e.preventDefault();
250+
navigateToKey(nextKey);
251+
}
242252
}
243253
break;
244254
case 'PageUp':
245255
if (delegate.getKeyPageAbove) {
246-
e.preventDefault();
247256
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
248-
navigateToKey(nextKey);
257+
if (nextKey != null) {
258+
e.preventDefault();
259+
navigateToKey(nextKey);
260+
}
249261
}
250262
break;
251263
case 'a':

‎packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
1616
private collection: Collection<Node<T>>;
1717
private flipDirection: boolean;
1818
private disabledKeys: Set<Key>;
19+
private tabDirection: boolean;
1920

2021
constructor(collection: Collection<Node<T>>, direction: Direction, orientation: Orientation, disabledKeys: Set<Key> = new Set()) {
2122
this.collection = collection;
2223
this.flipDirection = direction === 'rtl' && orientation === 'horizontal';
2324
this.disabledKeys = disabledKeys;
25+
this.tabDirection = orientation === 'horizontal';
2426
}
2527

2628
getKeyLeftOf(key: Key) {
@@ -37,13 +39,6 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
3739
return this.getNextKey(key);
3840
}
3941

40-
getKeyAbove(key: Key) {
41-
return this.getPreviousKey(key);
42-
}
43-
44-
getKeyBelow(key: Key) {
45-
return this.getNextKey(key);
46-
}
4742

4843
private isDisabled(key: Key) {
4944
return this.disabledKeys.has(key) || !!this.collection.getItem(key)?.props?.isDisabled;
@@ -64,6 +59,20 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
6459
}
6560
return key;
6661
}
62+
63+
getKeyAbove(key: Key) {
64+
if (this.tabDirection) {
65+
return null;
66+
}
67+
return this.getPreviousKey(key);
68+
}
69+
70+
getKeyBelow(key: Key) {
71+
if (this.tabDirection) {
72+
return null;
73+
}
74+
return this.getNextKey(key);
75+
}
6776

6877
getNextKey(key) {
6978
do {

‎packages/@react-spectrum/picker/intl/en-US.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"placeholder": "Select an option…",
2+
"placeholder": "Select…",
33
"loading": "Loading…"
44
}

‎packages/@react-spectrum/picker/test/Picker.test.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('Picker', function () {
7070
expect(picker).toHaveAttribute('data-testid', 'test');
7171

7272
let label = getAllByText('Test')[0];
73-
let value = getByText('Select an option…');
73+
let value = getByText('Select…');
7474
expect(label).toBeVisible();
7575
expect(value).toBeVisible();
7676
});
@@ -362,7 +362,7 @@ describe('Picker', function () {
362362
expect(listbox).toBeVisible();
363363
expect(onOpenChange).not.toBeCalled();
364364

365-
let picker = getByLabelText('Select an option…');
365+
let picker = getByLabelText('Select…');
366366
expect(picker).toHaveAttribute('aria-expanded', 'true');
367367
expect(picker).toHaveAttribute('aria-controls', listbox.id);
368368

@@ -393,7 +393,7 @@ describe('Picker', function () {
393393
expect(listbox).toBeVisible();
394394
expect(onOpenChange).not.toBeCalled();
395395

396-
let picker = getByLabelText('Select an option…');
396+
let picker = getByLabelText('Select…');
397397
expect(picker).toHaveAttribute('aria-expanded', 'true');
398398
expect(picker).toHaveAttribute('aria-controls', listbox.id);
399399

@@ -721,7 +721,7 @@ describe('Picker', function () {
721721
expect(listbox).toBeVisible();
722722
expect(onOpenChange).not.toBeCalled();
723723

724-
let picker = getByLabelText('Select an option…');
724+
let picker = getByLabelText('Select…');
725725
expect(picker).toHaveAttribute('aria-expanded', 'true');
726726
expect(picker).toHaveAttribute('aria-controls', listbox.id);
727727

@@ -751,7 +751,7 @@ describe('Picker', function () {
751751
expect(getByRole('listbox')).toBeVisible();
752752
expect(onOpenChange).not.toBeCalled();
753753

754-
let picker = getByLabelText('Select an option…');
754+
let picker = getByLabelText('Select…');
755755
expect(picker).toHaveAttribute('aria-expanded', 'true');
756756

757757
let listbox = getByRole('listbox');
@@ -804,7 +804,7 @@ describe('Picker', function () {
804804
expect(picker).toHaveAttribute('aria-haspopup', 'listbox');
805805

806806
let label = getAllByText('Test')[0];
807-
let value = getByText('Select an option…');
807+
let value = getByText('Select…');
808808
expect(label).toHaveAttribute('id');
809809
expect(value).toHaveAttribute('id');
810810
expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${label.id}`);
@@ -829,7 +829,7 @@ describe('Picker', function () {
829829
);
830830

831831
let picker = getByRole('button');
832-
let value = getByText('Select an option…');
832+
let value = getByText('Select…');
833833
expect(picker).toHaveAttribute('id');
834834
expect(value).toHaveAttribute('id');
835835
expect(picker).toHaveAttribute('aria-label', 'Test');
@@ -855,7 +855,7 @@ describe('Picker', function () {
855855
);
856856

857857
let picker = getByRole('button');
858-
let value = getByText('Select an option…');
858+
let value = getByText('Select…');
859859
expect(picker).toHaveAttribute('id');
860860
expect(value).toHaveAttribute('id');
861861
expect(picker).toHaveAttribute('aria-labelledby', `${value.id} foo`);
@@ -880,7 +880,7 @@ describe('Picker', function () {
880880
);
881881

882882
let picker = getByRole('button');
883-
let value = getByText('Select an option…');
883+
let value = getByText('Select…');
884884
expect(picker).toHaveAttribute('id');
885885
expect(value).toHaveAttribute('id');
886886
expect(picker).toHaveAttribute('aria-label', 'Test');
@@ -914,7 +914,7 @@ describe('Picker', function () {
914914
expect(span).not.toHaveAttribute('aria-hidden');
915915

916916
let label = span.parentElement;
917-
let value = getByText('Select an option…');
917+
let value = getByText('Select…');
918918
expect(label).toHaveAttribute('id');
919919
expect(value).toHaveAttribute('id');
920920
expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${label.id}`);
@@ -978,7 +978,7 @@ describe('Picker', function () {
978978
);
979979

980980
let picker = getByRole('button');
981-
expect(picker).toHaveTextContent('Select an option…');
981+
expect(picker).toHaveTextContent('Select…');
982982
await user.click(picker);
983983
act(() => jest.runAllTimers());
984984

@@ -1015,7 +1015,7 @@ describe('Picker', function () {
10151015
);
10161016

10171017
let picker = getByRole('button');
1018-
expect(picker).toHaveTextContent('Select an option…');
1018+
expect(picker).toHaveTextContent('Select…');
10191019
await user.click(picker);
10201020
act(() => jest.runAllTimers());
10211021

@@ -1086,7 +1086,7 @@ describe('Picker', function () {
10861086
);
10871087

10881088
let picker = getByRole('button');
1089-
expect(picker).toHaveTextContent('Select an option…');
1089+
expect(picker).toHaveTextContent('Select…');
10901090
await user.click(picker);
10911091
act(() => jest.runAllTimers());
10921092

@@ -1132,7 +1132,7 @@ describe('Picker', function () {
11321132
);
11331133

11341134
let picker = getByRole('button');
1135-
expect(picker).toHaveTextContent('Select an option…');
1135+
expect(picker).toHaveTextContent('Select…');
11361136
act(() => {picker.focus();});
11371137

11381138
fireEvent.keyDown(picker, {key: 'ArrowUp'});
@@ -1177,7 +1177,7 @@ describe('Picker', function () {
11771177
);
11781178

11791179
let picker = getByRole('button');
1180-
expect(picker).toHaveTextContent('Select an option…');
1180+
expect(picker).toHaveTextContent('Select…');
11811181
await user.click(picker);
11821182
act(() => jest.runAllTimers());
11831183

@@ -1223,7 +1223,7 @@ describe('Picker', function () {
12231223
);
12241224

12251225
let picker = getByRole('button');
1226-
expect(picker).toHaveTextContent('Select an option…');
1226+
expect(picker).toHaveTextContent('Select…');
12271227
expect(onOpenChangeSpy).toHaveBeenCalledTimes(0);
12281228
await user.click(picker);
12291229
act(() => jest.runAllTimers());
@@ -1370,7 +1370,7 @@ describe('Picker', function () {
13701370
);
13711371

13721372
let picker = getByRole('button');
1373-
expect(picker).toHaveTextContent('Select an option…');
1373+
expect(picker).toHaveTextContent('Select…');
13741374
await user.click(picker);
13751375
act(() => jest.runAllTimers());
13761376

@@ -1443,7 +1443,7 @@ describe('Picker', function () {
14431443
);
14441444

14451445
let picker = getByRole('button');
1446-
expect(picker).toHaveTextContent('Select an option…');
1446+
expect(picker).toHaveTextContent('Select…');
14471447
await user.click(picker);
14481448
act(() => jest.runAllTimers());
14491449

@@ -1545,7 +1545,7 @@ describe('Picker', function () {
15451545

15461546
let picker = getByRole('button');
15471547
act(() => {picker.focus();});
1548-
expect(picker).toHaveTextContent('Select an option…');
1548+
expect(picker).toHaveTextContent('Select…');
15491549
fireEvent.keyDown(picker, {key: 'ArrowDown'});
15501550
act(() => jest.runAllTimers());
15511551

@@ -1641,7 +1641,7 @@ describe('Picker', function () {
16411641

16421642
let picker = getByRole('button');
16431643
await user.tab();
1644-
expect(picker).toHaveTextContent('Select an option…');
1644+
expect(picker).toHaveTextContent('Select…');
16451645
await user.keyboard('{ArrowLeft}');
16461646
act(() => jest.runAllTimers());
16471647
expect(onSelectionChange).toHaveBeenCalledTimes(1);
@@ -1687,7 +1687,7 @@ describe('Picker', function () {
16871687

16881688
let picker = getByRole('button');
16891689
act(() => {picker.focus();});
1690-
expect(picker).toHaveTextContent('Select an option…');
1690+
expect(picker).toHaveTextContent('Select…');
16911691

16921692
fireEvent.keyDown(picker, {key: 't'});
16931693
fireEvent.keyUp(picker, {key: 't'});
@@ -1715,7 +1715,7 @@ describe('Picker', function () {
17151715

17161716
let picker = getByRole('button');
17171717
act(() => {picker.focus();});
1718-
expect(picker).toHaveTextContent('Select an option…');
1718+
expect(picker).toHaveTextContent('Select…');
17191719

17201720
fireEvent.keyDown(picker, {key: 't'});
17211721
fireEvent.keyUp(picker, {key: 't'});
@@ -1744,7 +1744,7 @@ describe('Picker', function () {
17441744

17451745
let picker = getByRole('button');
17461746
act(() => {picker.focus();});
1747-
expect(picker).toHaveTextContent('Select an option…');
1747+
expect(picker).toHaveTextContent('Select…');
17481748

17491749
fireEvent.keyDown(picker, {key: 't'});
17501750
fireEvent.keyUp(picker, {key: 't'});
@@ -1772,7 +1772,7 @@ describe('Picker', function () {
17721772
);
17731773

17741774
let picker = getByRole('button');
1775-
expect(picker).toHaveTextContent('Select an option…');
1775+
expect(picker).toHaveTextContent('Select…');
17761776

17771777
let hiddenLabel = getByText('Test', {hidden: true, selector: 'label'});
17781778
expect(hiddenLabel.tagName).toBe('LABEL');
@@ -2500,7 +2500,7 @@ describe('Picker', function () {
25002500
jest.runAllTimers();
25012501
});
25022502

2503-
expect(button).toHaveTextContent('Select an option…');
2503+
expect(button).toHaveTextContent('Select…');
25042504
expect(listbox).not.toBeInTheDocument();
25052505
expect(onClick.mock.calls[0][0].target).toBeInstanceOf(HTMLAnchorElement);
25062506
expect(onClick.mock.calls[0][0].target.href).toBe('https://google.com/');

‎packages/@react-spectrum/table/src/TableViewWrapper.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import type {AriaLabelingProps, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
13+
import type {AriaLabelingProps, DisabledBehavior, DOMProps, DOMRef, Key, SpectrumSelectionProps, StyleProps} from '@react-types/shared';
1414
import type {ColumnSize, TableProps} from '@react-types/table';
1515
import type {DragAndDropHooks} from '@react-spectrum/dnd';
1616
import React, {JSX, ReactElement} from 'react';
@@ -33,6 +33,11 @@ export interface SpectrumTableProps<T> extends TableProps<T>, SpectrumSelectionP
3333
isQuiet?: boolean,
3434
/** Sets what the TableView should render when there is no content to display. */
3535
renderEmptyState?: () => JSX.Element,
36+
/**
37+
* Whether `disabledKeys` applies to all interactions, or only selection.
38+
* @default "selection"
39+
*/
40+
disabledBehavior?: DisabledBehavior,
3641
/** Handler that is called when a user performs an action on a row. */
3742
onAction?: (key: Key) => void,
3843
/**

0 commit comments

Comments
 (0)