Skip to content

Commit

Permalink
Revert reverts from before latest release (adobe#6926)
Browse files Browse the repository at this point in the history 
* Update Picker placeholder to be shorter (adobe#6796)

* feat: Support fragments in collections (adobe#6430)

Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

* Exposing prop disabledBehavior to TableView (adobe#6832)

* fix/bug useTablist adobe#5996 (adobe#6023)

* fix/bug useTabist adobe#5996 and added tests

* Extract `ToggleStateProps` type to use only what is needed in `useToggleState` (adobe#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]>
  • Loading branch information
@reidbarber @snowystinger
@solimant @ktabors @mdhmaiti @Andarist
6 people committed Aug 21, 2024
1 parent 6b8cb7a commit 859615a
Show file tree
Hide file tree
Showing 10 changed files with 514 additions and 68 deletions.
44 changes: 28 additions & 16 deletions packages/@react-aria/selection/src/useSelectableCollection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,49 +164,57 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
switch (e.key) {
case 'ArrowDown': {
if (delegate.getKeyBelow) {
e.preventDefault();
let nextKey = manager.focusedKey != null
? delegate.getKeyBelow(manager.focusedKey)
? delegate.getKeyBelow?.(manager.focusedKey)
: delegate.getFirstKey?.();
if (nextKey == null && shouldFocusWrap) {
nextKey = delegate.getFirstKey?.(manager.focusedKey);
}
navigateToKey(nextKey);
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey);
}
}
break;
}
case 'ArrowUp': {
if (delegate.getKeyAbove) {
e.preventDefault();
let nextKey = manager.focusedKey != null
? delegate.getKeyAbove(manager.focusedKey)
? delegate.getKeyAbove?.(manager.focusedKey)
: delegate.getLastKey?.();
if (nextKey == null && shouldFocusWrap) {
nextKey = delegate.getLastKey?.(manager.focusedKey);
}
navigateToKey(nextKey);
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey);
}
}
break;
}
case 'ArrowLeft': {
if (delegate.getKeyLeftOf) {
e.preventDefault();
let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey);
if (nextKey == null && shouldFocusWrap) {
nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
}
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
}
}
break;
}
case 'ArrowRight': {
if (delegate.getKeyRightOf) {
e.preventDefault();
let nextKey = delegate.getKeyRightOf(manager.focusedKey);
let nextKey = delegate.getKeyRightOf?.(manager.focusedKey);
if (nextKey == null && shouldFocusWrap) {
nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
}
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
}
}
break;
}
Expand Down Expand Up @@ -236,16 +244,20 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
break;
case 'PageDown':
if (delegate.getKeyPageBelow) {
e.preventDefault();
let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
navigateToKey(nextKey);
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey);
}
}
break;
case 'PageUp':
if (delegate.getKeyPageAbove) {
e.preventDefault();
let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
navigateToKey(nextKey);
if (nextKey != null) {
e.preventDefault();
navigateToKey(nextKey);
}
}
break;
case 'a':
Expand Down
23 changes: 16 additions & 7 deletions packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
private collection: Collection<Node<T>>;
private flipDirection: boolean;
private disabledKeys: Set<Key>;
private tabDirection: boolean;

constructor(collection: Collection<Node<T>>, direction: Direction, orientation: Orientation, disabledKeys: Set<Key> = new Set()) {
this.collection = collection;
this.flipDirection = direction === 'rtl' && orientation === 'horizontal';
this.disabledKeys = disabledKeys;
this.tabDirection = orientation === 'horizontal';
}

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

getKeyAbove(key: Key) {
return this.getPreviousKey(key);
}

getKeyBelow(key: Key) {
return this.getNextKey(key);
}

private isDisabled(key: Key) {
return this.disabledKeys.has(key) || !!this.collection.getItem(key)?.props?.isDisabled;
Expand All @@ -64,6 +59,20 @@ export class TabsKeyboardDelegate<T> implements KeyboardDelegate {
}
return key;
}

getKeyAbove(key: Key) {
if (this.tabDirection) {
return null;
}
return this.getPreviousKey(key);
}

getKeyBelow(key: Key) {
if (this.tabDirection) {
return null;
}
return this.getNextKey(key);
}

getNextKey(key) {
do {
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/picker/intl/en-US.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"placeholder": "Select an option…",
"placeholder": "Select…",
"loading": "Loading…"
}
50 changes: 25 additions & 25 deletions packages/@react-spectrum/picker/test/Picker.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ describe('Picker', function () {
expect(picker).toHaveAttribute('data-testid', 'test');

let label = getAllByText('Test')[0];
let value = getByText('Select an option…');
let value = getByText('Select…');
expect(label).toBeVisible();
expect(value).toBeVisible();
});
Expand Down Expand Up @@ -362,7 +362,7 @@ describe('Picker', function () {
expect(listbox).toBeVisible();
expect(onOpenChange).not.toBeCalled();

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

Expand Down Expand Up @@ -393,7 +393,7 @@ describe('Picker', function () {
expect(listbox).toBeVisible();
expect(onOpenChange).not.toBeCalled();

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

Expand Down Expand Up @@ -721,7 +721,7 @@ describe('Picker', function () {
expect(listbox).toBeVisible();
expect(onOpenChange).not.toBeCalled();

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

Expand Down Expand Up @@ -751,7 +751,7 @@ describe('Picker', function () {
expect(getByRole('listbox')).toBeVisible();
expect(onOpenChange).not.toBeCalled();

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

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

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

let picker = getByRole('button');
let value = getByText('Select an option…');
let value = getByText('Select…');
expect(picker).toHaveAttribute('id');
expect(value).toHaveAttribute('id');
expect(picker).toHaveAttribute('aria-label', 'Test');
Expand All @@ -855,7 +855,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
let value = getByText('Select an option…');
let value = getByText('Select…');
expect(picker).toHaveAttribute('id');
expect(value).toHaveAttribute('id');
expect(picker).toHaveAttribute('aria-labelledby', `${value.id} foo`);
Expand All @@ -880,7 +880,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
let value = getByText('Select an option…');
let value = getByText('Select…');
expect(picker).toHaveAttribute('id');
expect(value).toHaveAttribute('id');
expect(picker).toHaveAttribute('aria-label', 'Test');
Expand Down Expand Up @@ -914,7 +914,7 @@ describe('Picker', function () {
expect(span).not.toHaveAttribute('aria-hidden');

let label = span.parentElement;
let value = getByText('Select an option…');
let value = getByText('Select…');
expect(label).toHaveAttribute('id');
expect(value).toHaveAttribute('id');
expect(picker).toHaveAttribute('aria-labelledby', `${value.id} ${label.id}`);
Expand Down Expand Up @@ -978,7 +978,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1015,7 +1015,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1086,7 +1086,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1132,7 +1132,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
act(() => {picker.focus();});

fireEvent.keyDown(picker, {key: 'ArrowUp'});
Expand Down Expand Up @@ -1177,7 +1177,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1223,7 +1223,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
expect(onOpenChangeSpy).toHaveBeenCalledTimes(0);
await user.click(picker);
act(() => jest.runAllTimers());
Expand Down Expand Up @@ -1370,7 +1370,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1443,7 +1443,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.click(picker);
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1545,7 +1545,7 @@ describe('Picker', function () {

let picker = getByRole('button');
act(() => {picker.focus();});
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
fireEvent.keyDown(picker, {key: 'ArrowDown'});
act(() => jest.runAllTimers());

Expand Down Expand Up @@ -1641,7 +1641,7 @@ describe('Picker', function () {

let picker = getByRole('button');
await user.tab();
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');
await user.keyboard('{ArrowLeft}');
act(() => jest.runAllTimers());
expect(onSelectionChange).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -1687,7 +1687,7 @@ describe('Picker', function () {

let picker = getByRole('button');
act(() => {picker.focus();});
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');

fireEvent.keyDown(picker, {key: 't'});
fireEvent.keyUp(picker, {key: 't'});
Expand Down Expand Up @@ -1715,7 +1715,7 @@ describe('Picker', function () {

let picker = getByRole('button');
act(() => {picker.focus();});
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');

fireEvent.keyDown(picker, {key: 't'});
fireEvent.keyUp(picker, {key: 't'});
Expand Down Expand Up @@ -1744,7 +1744,7 @@ describe('Picker', function () {

let picker = getByRole('button');
act(() => {picker.focus();});
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');

fireEvent.keyDown(picker, {key: 't'});
fireEvent.keyUp(picker, {key: 't'});
Expand Down Expand Up @@ -1772,7 +1772,7 @@ describe('Picker', function () {
);

let picker = getByRole('button');
expect(picker).toHaveTextContent('Select an option…');
expect(picker).toHaveTextContent('Select…');

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

expect(button).toHaveTextContent('Select an option…');
expect(button).toHaveTextContent('Select…');
expect(listbox).not.toBeInTheDocument();
expect(onClick.mock.calls[0][0].target).toBeInstanceOf(HTMLAnchorElement);
expect(onClick.mock.calls[0][0].target.href).toBe('https://google.com/');
Expand Down
7 changes: 6 additions & 1 deletion packages/@react-spectrum/table/src/TableViewWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

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

0 comments on commit 859615a

Please sign in to comment.