Skip to content
Open
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
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ All third-party contributions to this project must be accompanied by a signed co
## Where to start
There are many places to dive into react-spectrum to help out. Before you take on a feature or issue, make sure you become familiar with [our architecture](https://github.com/adobe/react-spectrum/blob/main/rfcs/2019-v3-architecture.md).

If you are looking for place to start, consider the following options:
If you are looking for a place to start, consider the following options:
- Look for issues tagged with help wanted and/or good first issue.
- Help triage existing issues by investigating problems and following up on missing information.
- Update missing or fix existing documentation
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/releases/2021-12-16.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ For our end of year release we worked on improving our accessibility, types and
- Fix incorrect color rending for `Checkbox` - [@paulchan14](https://github.com/paulchan14) - [PR](https://github.com/adobe/react-spectrum/pull/2662)
- Pass filtered DOM props to Tabs - [@khoad](https://github.com/khoad) - [PR](https://github.com/adobe/react-spectrum/pull/2655)
- Fix incorrect active state on disabled `Checkbox` in Firefox - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/2582)
- Update types for ComboBox to seperate stately props - [@frdclav](https://github.com/frdclav) - [PR](https://github.com/adobe/react-spectrum/pull/2651)
- Update types for ComboBox to separate stately props - [@frdclav](https://github.com/frdclav) - [PR](https://github.com/adobe/react-spectrum/pull/2651)
- Remove unused type `disallowEmptySelection` from `ComboBox`, `Select` and `useSingleSelectListState` - [@qilto](https://github.com/qilto) - [PR](https://github.com/adobe/react-spectrum/pull/2652/)
- Improve VO support for selection and long press - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/2521)
- Add additional translations for long press support in React Aria `grid` - [andmail101](https://github.com/angmail101) - [PR](https://github.com/adobe/react-spectrum/pull/2690)
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/releases/2024-07-22.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ Because of various breaking changes, several packages are being bumped a major v
- Add Breadcrumb render props to docs - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6489)
- Add Ripple button example to docs - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6579), [PR](https://github.com/adobe/react-spectrum/pull/6709)
- Add example customizing `selectvalue` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6425)
- Fix various doc examples for accessiblity - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6607)
- Fix various doc examples for accessibility - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/6607)
- Fix typo in interactions docs - [@jvliwanag](https://github.com/jvliwanag) - [PR](https://github.com/adobe/react-spectrum/pull/6698)
- Fix typo in DropZone docs - [@wojtekmaj](https://github.com/wojtekmaj) - [PR](https://github.com/adobe/react-spectrum/pull/6334)
- Fix RAC Slider label example - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/6710)
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/releases/2025-01-15.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ We are also excited to announce the alpha release of the [@react-aria/test-utils
- Overlays
- Prevent `Popover` from closing on scroll - [@jabrks](https://github.com/jabrks) - [PR](https://github.com/adobe/react-spectrum/pull/7541)
- Fix dismissing iOS keyboard when input in dialog has focus - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/7479)
- Include scroll padding in `scrollIntoView` caclulations inside overlays - [@jeffijoe](https://github.com/jeffijoe) - [PR](https://github.com/adobe/react-spectrum/pull/7484)
- Include scroll padding in `scrollIntoView` calculations inside overlays - [@jeffijoe](https://github.com/jeffijoe) - [PR](https://github.com/adobe/react-spectrum/pull/7484)
- Misc
- Skip elements with `contenteditable=false` in FocusScope - [@nwidynski](https://github.com/nwidynski) - [PR](https://github.com/adobe/react-spectrum/pull/7340)
- Fix `@react-aria/optimize-locales-plugin` path resolution on Windows - [@ohansFavour](https://github.com/ohansFavour) - [PR](https://github.com/adobe/react-spectrum/pull/7568)
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/releases/2025-05-19.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ As always, thank you to our community for their support and contributions!
* Collections
* Fix updating dynamic `Table` columns - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/8211)
* Improve performance of collection updates in React transitions - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/8204)
* Prevent disabled items in collections from recieving focus when clicked - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/8246)
* Prevent disabled items in collections from receiving focus when clicked - [@yihuiliao](https://github.com/yihuiliao) - [PR](https://github.com/adobe/react-spectrum/pull/8246)
* Date and Time
* Apply `aria-details` on `Calendar` - [@Persists](https://github.com/Persists) - [PR](https://github.com/adobe/react-spectrum/pull/8042)
* Fix circular dependency in @internationalized/date - [@luixo](https://github.com/luixo) - [PR](https://github.com/adobe/react-spectrum/pull/8001)
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/docs/pages/releases/2025-10-02.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ To support multi-selection in React Aria Select, we are updating the API from `s
* Prevent crash in React Aria collections when used with Suspense and `useTransition` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/8835)
* Fix collection dirty node tracking with Suspense - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/8892)
* Date and Time
* Fix the day the week starts with when specifiying `ISO 8601` in the locale - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/8815), [PR](https://github.com/adobe/react-spectrum/pull/8877)
* Fix the day the week starts with when specifying `ISO 8601` in the locale - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/8815), [PR](https://github.com/adobe/react-spectrum/pull/8877)
* Fix date parsing when there are seconds in the offset - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/8900)
* Ensure `isReadonly` applies to all non-literal date segments - [@Persists](https://github.com/Persists) - [PR](https://github.com/adobe/react-spectrum/pull/7969)
* Add `isReadOnly` to the render props in React Aria DateField/DatePicker - [@Mr-Heidari](https://github.com/Mr-Heidari) - [PR](https://github.com/adobe/react-spectrum/pull/8818)
Expand Down
2 changes: 1 addition & 1 deletion packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -684,7 +684,7 @@ const stocks = [
{
id: 10,
symbol: 'THQ',
name: 'Tekla Healthcare Opportunies Fund',
name: 'Tekla Healthcare Opportunities Fund',
sector: 'n/a',
marketCap: '$772.41M',
industry: 'n/a',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ The `inputMode` DOM attribute can be used to control the on screen keyboard show
</figure>
<figure style={{width: '200px'}}>
<img src={numberfieldIphonePositive} style={{margin: 0, width: '100%'}} alt="Iphone screenshot of example NumberField inputMode=decimal" />
<Caption>Wth inputMode="decimal", iOS does include a decimal point, but no minus key.</Caption>
<Caption>With inputMode="decimal", iOS does include a decimal point, but no minus key.</Caption>
</figure>
<figure style={{width: '200px'}}>
<img src={numberfieldIphoneDefault} style={{margin: 0, width: '100%'}} alt="Iphone screenshot of example NumberField inputMode=text" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ However, this assumption proved too broad. In some locales, such as Arabic (`ar-
</div>
```

Through much trial and error, we discovered that applying the [left-to-right embedding (LRE) Unicode](https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings) on each date segment displayed date fields in Hebrew as left-to-right but also preserved the right-to-left marks on the separaters in Arabic, ensuring that dates in both languages were formatted correctly. While we could have added Unicode to the segments like we did with the time fields, we opted for the [equivalent CSS](https://unicode.org/reports/tr9/#Markup_And_Formatting) approach instead to avoid modifying the DOM. This CSS is applied on date segments with placeholder or actual values to avoid the behavior discussed earlier with shifting segments. Through additional testing, we found that we should only apply left-to-right embedding on numeric values. If the value was displayed as text (e.g. "November" instead of "11"), we did not apply this CSS.
Through much trial and error, we discovered that applying the [left-to-right embedding (LRE) Unicode](https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings) on each date segment displayed date fields in Hebrew as left-to-right but also preserved the right-to-left marks on the separators in Arabic, ensuring that dates in both languages were formatted correctly. While we could have added Unicode to the segments like we did with the time fields, we opted for the [equivalent CSS](https://unicode.org/reports/tr9/#Markup_And_Formatting) approach instead to avoid modifying the DOM. This CSS is applied on date segments with placeholder or actual values to avoid the behavior discussed earlier with shifting segments. Through additional testing, we found that we should only apply left-to-right embedding on numeric values. If the value was displayed as text (e.g. "November" instead of "11"), we did not apply this CSS.

## Keyboard Navigation

Expand Down
8 changes: 4 additions & 4 deletions rfcs/2022-v3-resizable-columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ The `defaultWidth` prop is used on the `<Column>` component to set the width for

The `minWidth` and `maxWidth` props are used on the `<Column>` component to define the minimum and maximum allowed column widths respectively. These props support pixel values and percentages.

The `onColumnResize`and `onColumnResizeEnd` props can be added to the `<TableView>` component. `onColumnResize` will call the onResize callback whenever columns are resized by the user, passing in an array of all the columns that were affected by the resize. `onColumnResizeEnd` is the same as `onColumnResize` but only get's called when done resizing.
The `onColumnResize`and `onColumnResizeEnd` props can be added to the `<TableView>` component. `onColumnResize` will call the onResize callback whenever columns are resized by the user, passing in an array of all the columns that were affected by the resize. `onColumnResizeEnd` is the same as `onColumnResize` but only gets called when done resizing.

```
<TableView width={800} onColumnResize={onResize} onColumnResizeEnd={onResizeEnd}>
Expand All @@ -52,9 +52,9 @@ The `onColumnResize`and `onColumnResizeEnd` props can be added to the `<TableVie

### Resize Behavior

Code sandbox used to develop the resize alogrithm and test it: https://codesandbox.io/s/column-width-resizer-final-jo4rr?file=/src/column-utils.spec.js
Code sandbox used to develop the resize algorithm and test it: https://codesandbox.io/s/column-width-resizer-final-jo4rr?file=/src/column-utils.spec.js

Codepen demo of the resize alogrithm: https://codepen.io/mpeterson/pen/PoJpJvK
Codepen demo of the resize algorithm: https://codepen.io/mpeterson/pen/PoJpJvK

Columns get bucketed into two different categories when resizing. These buckets are static columns and dynamic columns. Static columns do not change size unless the user explicitly resizes them. Dynamic columns can change size when columns around them are resized as well as when they are explicitly resized by the user.

Expand All @@ -75,7 +75,7 @@ Calculating column widths follows this flow:
1. Static columns are calculated first. Pixel values are straightforward, these are simply checked to see if they should be clamped by a min or max. Percent values are set as a percent of the visible table width (not the total width of all table contents).
2. Dynamic columns are calculated next. With dynamic columns, the amount of space remaining is divided up amongst the remaining columns. If no `defaultWidth` is provided, the column defaults to `1fr`.

### Accessibilty Functionality
### Accessibility Functionality
* Using arrow keys, users can navigate to the column header
* While the column header is focused, pressing `return/enter` or `space` will activate a dropdown
* One of the options in the dropdown will be to resize the column (if column is resizable)
Expand Down