Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .github/labeler.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
needs translations:
- changed-files:
- any-glob-to-any-file: ['**/intl/*.json']
12 changes: 12 additions & 0 deletions .github/workflows/labeler.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
name: "Pull Request Labeler"
on:
- pull_request_target

jobs:
labeler:
permissions:
contents: read
pull-requests: write
runs-on: ubuntu-latest
steps:
- uses: actions/labeler@v5
3 changes: 3 additions & 0 deletions packages/@react-aria/tabs/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ export function generateId<T>(state: TabListState<T> | null, key: Key | null | u
}

let baseId = tabsIds.get(state);
if (process.env.NODE_ENV !== 'production' && !baseId) {
console.error('There is no tab id, please check if you have rendered the tab panel before the tab list.');
}
return `${baseId}-${role}-${key}`;
}

29 changes: 16 additions & 13 deletions packages/@react-aria/virtualizer/src/ScrollView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ React.forwardRef(ScrollView);
export {ScrollViewForwardRef as ScrollView};

interface ScrollViewAria {
isScrolling: boolean,
scrollViewProps: HTMLAttributes<HTMLElement>,
contentProps: HTMLAttributes<HTMLElement>
}
Expand Down Expand Up @@ -84,6 +85,16 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
let {direction} = useLocale();

let [isScrolling, setScrolling] = useState(false);

let onScrollTimeout = useCallback(() => {
state.isScrolling = false;
setScrolling(false);
state.scrollTimeout = null;

window.dispatchEvent(new Event('tk.connect-observer'));
onScrollEnd?.();
}, [state, onScrollEnd]);

let onScroll = useCallback((e) => {
if (e.target !== e.currentTarget) {
return;
Expand Down Expand Up @@ -117,30 +128,21 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
// keep track of the current timeout time and only reschedule
// the timer when it is getting close.
let now = Date.now();
if (state.scrollEndTime <= now + 50) {
if (!('onscrollend' in window) && state.scrollEndTime <= now + 50) {
state.scrollEndTime = now + 300;

if (state.scrollTimeout != null) {
clearTimeout(state.scrollTimeout);
}

state.scrollTimeout = setTimeout(() => {
state.isScrolling = false;
setScrolling(false);
state.scrollTimeout = null;

window.dispatchEvent(new Event('tk.connect-observer'));
if (onScrollEnd) {
onScrollEnd();
}
}, 300);
state.scrollTimeout = setTimeout(onScrollTimeout, 300);
}
});
}, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);
}, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollTimeout]);

// Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
useEvent(ref, 'scroll', onScroll);

useEvent(ref, 'scrollend', onScrollTimeout);

useEffect(() => {
return () => {
Expand Down Expand Up @@ -265,6 +267,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
};

return {
isScrolling,
scrollViewProps: {
...otherProps,
style
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/combobox/docs/ComboBox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -994,7 +994,7 @@ behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/combobox/test/ComboBox.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/list/docs/ListView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1193,7 +1193,7 @@ behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/list/test/ListView.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/listbox/docs/ListBox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ Please see the following sections in the testing docs for more information on ho
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/test/ListBox.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/menu/docs/MenuTrigger.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/test/MenuTrigger.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/picker/docs/Picker.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -590,7 +590,7 @@ for more information on how to handle these behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/picker/test/Picker.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/table/docs/TableView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1962,7 +1962,7 @@ behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/table/test/Table.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/tabs/docs/Tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -633,7 +633,7 @@ function Example() {

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

Tabs features automatic tab collapse behavior and may need specific mocks to test said behavior. Please also refer to
[React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/326f48154e301edab425c8198c5c3af72422462b/packages/%40react-spectrum/tabs/test/Tabs.test.js#L58-L62) if you
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/tree/docs/TreeView.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ behaviors in your test suite.
Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/tree/test/TreeView.test.tsx) if you find that the above
isn't sufficient when resolving issues in your own test cases.

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-spectrum/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the tree tester and a sample of how you could use it in your test suite.
Expand Down
9 changes: 8 additions & 1 deletion packages/@react-stately/datepicker/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,14 @@ function getLocale() {
// Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided
// validation messages, which to not respect our provider's language.
// @ts-ignore
return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';
let locale = typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage) || 'en-US';

try {
Intl.DateTimeFormat.supportedLocalesOf([locale]);
} catch {
locale = 'en-US';
}
return locale;
}

export function getValidationResult(
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/react-aria/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ userEvent.tab();
userEvent.click(document.activeElement);
```

## React Aria test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
## React Aria test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

[@react-aria/test-utils](https://www.npmjs.com/package/@react-aria/test-utils) is a set of testing utilities that aims to make writing unit tests easier for consumers of React Aria
or for users who have built their own components following the respective ARIA pattern specification. By using the ARIA specification for any given component pattern as a source of truth,
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/react-spectrum/testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@ import {SSRProvider, Provider, lightTheme} from '@adobe/react-spectrum';
</SSRProvider>
```

## React Spectrum test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
## React Spectrum test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

In addition to the test utilities mentioned above, [@react-spectrum/test-utils](https://www.npmjs.com/package/@react-spectrum/test-utils) re-exports the same test utils available in `@react-aria/test-utils`, including
the ARIA pattern testers. These testers are set of testing utilities that aims to make writing unit tests easier for consumers of React Spectrum. By using the ARIA specification for any given component pattern as a source of truth,
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/ComboBox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1544,7 +1544,7 @@ If you need to customize things even further, such as accessing internal state,

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/GridList.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1944,7 +1944,7 @@ If you need to customize things even further, such as accessing internal state,

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/ListBox.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2152,7 +2152,7 @@ If you need to customize things even further, such as accessing internal state o

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Menu.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1222,7 +1222,7 @@ By providing the above contexts, the existing `Button`, `Popover`, and `Menu` co

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Select.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1303,7 +1303,7 @@ from your automated accessibility tests as shown [here](./accessibility.html#fal

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Table.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2660,7 +2660,7 @@ If you need to customize things even further, such as accessing internal state o

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Tabs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -756,7 +756,7 @@ If you need to customize things even further, such as accessing internal state o

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common tabs interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the tabs tester and a sample of how you could use it in your test suite.
Expand Down
2 changes: 1 addition & 1 deletion packages/react-aria-components/docs/Tree.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2161,7 +2161,7 @@ If you need to customize things even further, such as accessing internal state o

## Testing

### Test utils <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />

`@react-aria/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
in your tests. Below is the full definition of the tree tester and a sample of how you could use it in your test suite.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,13 @@ function CommandPaletteExample() {

let [isOpen, setOpen] = useState(false);
let {contains} = useFilter({sensitivity: 'base'});
let isMac = useMemo(() => /Mac/.test(navigator.platform), []);
let isMac = useMemo(
() =>
typeof navigator === 'undefined'
? false
: /mac(os|intosh)/i.test(navigator.userAgent),
[]
)

useEffect(() => {
const handleKeyDown = (e) => {
Expand Down
Loading