Skip to content

Commit 14a4cd3

Browse files
devongovettdevongovett
committed
Merge branch 'main' of github.com:adobe/react-spectrum into tableview-crash-bug
2 parents 86b92f9 + 2bfb2a1 commit 14a4cd3

File tree

715 files changed

+15177
-7729
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

715 files changed

+15177
-7729
lines changed

‎.eslintrc.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ module.exports = {
5353
}, {
5454
files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
5555
rules: {
56+
'rsp-rules/no-react-key': [ERROR],
5657
'rsp-rules/act-events-test': ERROR,
5758
'rsp-rules/no-getByRole-toThrow': ERROR,
5859
'rulesdir/imports': OFF,
@@ -182,7 +183,8 @@ module.exports = {
182183
'react-hooks/exhaustive-deps': WARN,
183184

184185
// custom rules
185-
'rulesdir/sort-imports': [ERROR],
186+
'rsp-rules/no-react-key': [ERROR],
187+
'rsp-rules/sort-imports': [ERROR],
186188
'rulesdir/imports': [ERROR],
187189
'rulesdir/useLayoutEffectRule': [ERROR],
188190
'rulesdir/pure-render': [ERROR],

‎NOTICE.txt

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,6 @@ This codebase contains a portion of code from react which can be obtained at:
4747
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
4848
SOFTWARE.
4949

50-
-------------------------------------------------------------------------------
51-
This codebase contains a modified portion of code from Modernizr which can be obtained at:
52-
* SOURCE:
53-
* https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
54-
55-
* LICENSE:
56-
* https://github.com/Modernizr/Modernizr/blob/master/LICENSE
57-
5850
-------------------------------------------------------------------------------
5951
This codebase contains a modified portion of code from react-window which can be obtained at:
6052
* SOURCE:

‎examples/rac-spectrum-tailwind/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@adobe/react-spectrum": "^3.28.0",
1111
"@spectrum-icons/illustrations": "^3.6.3",
1212
"@spectrum-icons/workflow": "^4.2.2",
13-
"parcel": "^2.9.1",
13+
"parcel": "^2.10.2",
1414
"postcss": "^8.2.1",
1515
"react": "^18.2.0",
1616
"react-aria-components": "^1.0.0-alpha.4",

‎examples/rac-tailwind/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"dependencies": {
1010
"@heroicons/react": "^2.0.16",
1111
"framer-motion": "^10.12.16",
12-
"parcel": "^2.9.1",
12+
"parcel": "^2.10.2",
1313
"postcss": "^8.4.21",
1414
"react": "^18.2.0",
1515
"react-aria-components": "^1.0.0-alpha.4",

‎examples/rac-tailwind/src/App.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
22
import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
33
import { useMemo, useState } from 'react';
4-
import { Button, Cell, Collection, Column, ComboBox, DateInput, DatePicker, DateSegment, Dialog, DialogTrigger, Group, Header, Heading, Input, Item, Label, ListBox, Menu, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, TabPanels, Tabs, Text } from 'react-aria-components';
4+
import { Button, Cell, Collection, Column, ComboBox, DateInput, DatePicker, DateSegment, Dialog, DialogTrigger, Group, Header, Heading, Input, Label, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, OverlayArrow, Popover, ProgressBar, Radio, RadioGroup, Row, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, Text } from 'react-aria-components';
55
import { useAsyncList } from 'react-stately';
66
import { people } from './people.js';
77
import stocks from './stocks.json';
@@ -41,22 +41,22 @@ function MenuExample() {
4141
<OverlayButton aria-label="Menu">☰</OverlayButton>
4242
<Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 data-[entering]:animate-in data-[entering]:fade-in data-[entering]:zoom-in-95 data-[exiting]:animate-out data-[exiting]:fade-out data-[exiting]:zoom-out-95 fill-mode-forwards origin-top-left">
4343
<Menu className="outline-none">
44-
<MenuItem id="new">New…</MenuItem>
45-
<MenuItem id="open">Open…</MenuItem>
44+
<MyMenuItem id="new">New…</MyMenuItem>
45+
<MyMenuItem id="open">Open…</MyMenuItem>
4646
<Separator className="border-b border-b-gray-300 mx-3 my-1" />
47-
<MenuItem id="save">Save</MenuItem>
48-
<MenuItem id="save-as">Save as…</MenuItem>
47+
<MyMenuItem id="save">Save</MyMenuItem>
48+
<MyMenuItem id="save-as">Save as…</MyMenuItem>
4949
<Separator className="border-b border-b-gray-300 mx-3 my-1" />
50-
<MenuItem id="print">Print…</MenuItem>
50+
<MyMenuItem id="print">Print…</MyMenuItem>
5151
</Menu>
5252
</Popover>
5353
</MenuTrigger>
5454
</div>
5555
);
5656
}
5757

58-
function MenuItem(props) {
59-
return <Item {...props} className={({ isFocused }) => `
58+
function MyMenuItem(props) {
59+
return <MenuItem {...props} className={({ isFocused }) => `
6060
group flex w-full items-center rounded-md px-3 py-2 sm:text-sm outline-none cursor-default
6161
${isFocused ? 'bg-violet-500 text-white' : 'text-gray-900'}
6262
`} />;
@@ -79,21 +79,21 @@ function SelectExample() {
7979
</Button>
8080
<Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-[entering]:animate-in data-[entering]:fade-in data-[exiting]:animate-out data-[exiting]:fade-out fill-mode-forwards">
8181
<ListBox className="outline-none p-1 [--focus-bg:theme(colors.rose.600)]">
82-
<ListBoxItem>Aardvark</ListBoxItem>
83-
<ListBoxItem>Cat</ListBoxItem>
84-
<ListBoxItem>Dog</ListBoxItem>
85-
<ListBoxItem>Kangaroo</ListBoxItem>
86-
<ListBoxItem>Panda</ListBoxItem>
82+
<MyListBoxItem>Aardvark</MyListBoxItem>
83+
<MyListBoxItem>Cat</MyListBoxItem>
84+
<MyListBoxItem>Dog</MyListBoxItem>
85+
<MyListBoxItem>Kangaroo</MyListBoxItem>
86+
<MyListBoxItem>Panda</MyListBoxItem>
8787
</ListBox>
8888
</Popover>
8989
</Select>
9090
</div>
9191
);
9292
}
9393

94-
function ListBoxItem(props) {
94+
function MyListBoxItem(props) {
9595
return (
96-
<Item
96+
<ListBoxItem
9797
{...props}
9898
textValue={props.children}
9999
className={({isFocused}) => `
@@ -110,7 +110,7 @@ function ListBoxItem(props) {
110110
}
111111
</>
112112
)}
113-
</Item>
113+
</ListBoxItem>
114114
);
115115
}
116116

@@ -129,11 +129,11 @@ function ComboBoxExample() {
129129
</div>
130130
<Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-[exiting]:animate-out data-[exiting]:fade-out fill-mode-forwards duration-100 ease-in">
131131
<ListBox className="outline-none p-1 [--focus-bg:theme(colors.sky.600)]">
132-
<ListBoxItem>Aardvark</ListBoxItem>
133-
<ListBoxItem>Cat</ListBoxItem>
134-
<ListBoxItem>Dog</ListBoxItem>
135-
<ListBoxItem>Kangaroo</ListBoxItem>
136-
<ListBoxItem>Panda</ListBoxItem>
132+
<MyListBoxItem>Aardvark</MyListBoxItem>
133+
<MyListBoxItem>Cat</MyListBoxItem>
134+
<MyListBoxItem>Dog</MyListBoxItem>
135+
<MyListBoxItem>Kangaroo</MyListBoxItem>
136+
<MyListBoxItem>Panda</MyListBoxItem>
137137
</ListBox>
138138
</Popover>
139139
</ComboBox>
@@ -446,12 +446,12 @@ function ContactSection({title, children, items}) {
446446

447447
function Contact({id, avatar, name, handle}) {
448448
return (
449-
<Item id={id} textValue={name} className="group peer relative py-1 px-2 text-sm outline-none cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded aria-selected:bg-blue-500 text-slate-700 aria-selected:text-white aria-selected:[&:has(+[aria-selected=true])]:rounded-b-none aria-selected:peer-aria-selected:rounded-t-none data-[focus-visible]:ring-2 ring-offset-2 ring-blue-500 [&[aria-selected=false]:has(+[aria-selected=false])_.divider]:block [&[aria-selected=true]:has(+[aria-selected=true])_.divider]:block">
449+
<ListBoxItem id={id} textValue={name} className="group peer relative py-1 px-2 text-sm outline-none cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded aria-selected:bg-blue-500 text-slate-700 aria-selected:text-white aria-selected:[&:has(+[aria-selected=true])]:rounded-b-none aria-selected:peer-aria-selected:rounded-t-none data-[focus-visible]:ring-2 ring-offset-2 ring-blue-500 [&[aria-selected=false]:has(+[aria-selected=false])_.divider]:block [&[aria-selected=true]:has(+[aria-selected=true])_.divider]:block">
450450
<img src={avatar} alt="" className="row-span-2 place-self-center h-8 w-8 rounded-full" />
451451
<Text slot="label" className="font-medium truncate">{name}</Text>
452452
<Text slot="description" className="truncate text-xs text-slate-600 group-aria-selected:text-white">{handle}</Text>
453453
<div className="divider hidden absolute left-12 right-2 bottom-0 h-px bg-gray-200 group-aria-selected:bg-blue-400" />
454-
</Item>
454+
</ListBoxItem>
455455
);
456456
}
457457

@@ -473,10 +473,10 @@ function ImageGridExample() {
473473
<div className="bg-gradient-to-r from-sky-500 to-teal-500 p-8 rounded-lg flex justify-center">
474474
<ListBox aria-label="Images" items={list.items} selectionMode="single" selectionBehavior="replace" className="max-h-[280px] overflow-auto outline-none bg-white rounded-lg shadow p-2 grid grid-cols-3 gap-2">
475475
{item => (
476-
<Item textValue={item.user.name} className="rounded outline-none group cursor-default">
476+
<ListBoxItem textValue={item.user.name} className="rounded outline-none group cursor-default">
477477
<img src={item.urls.regular} alt={item.alt_description} className="w-full h-[80px] object-cover rounded group-aria-selected:ring group-aria-selected:ring-2 group-aria-selected:ring-offset-2 group-aria-selected:ring-sky-600" />
478478
<Text slot="label" className="text-[11px] text-gray-700 font-semibold overflow-hidden text-ellipsis whitespace-nowrap max-w-full block mt-1">{item.user.name}</Text>
479-
</Item>
479+
</ListBoxItem>
480480
)}
481481
</ListBox>
482482
</div>

‎examples/rsp-cra-18/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function App() {
4646
{(item: any) =>
4747
(<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
4848
{(key) => {
49-
return <Cell>{item[key.toString()]}</Cell>;
49+
return <Cell>{item[key]}</Cell>;
5050
}}
5151
</Row>)
5252
}

‎examples/rsp-cra-18/src/Journal.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {Key} from 'react'
1+
import {Key} from '@react-types/shared';
22

33
interface Journal{
4-
rate: Key,
5-
description: string,
4+
rate: Key,
5+
description: string,
66
id: number
77
}
88

9-
export default Journal
9+
export default Journal

‎examples/rsp-cra-18/src/JournalEntries.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function JournalEntries(props : {list : Journal[]}){
66
const element = props.list.map(item => (
77
<li key={item.id}>
88
<Divider size="M" marginTop="size-200" marginBottom="size-300" />
9-
<p>Your day was: {item.rate.toString()} </p>
9+
<p>Your day was: {item.rate} </p>
1010
<p>{item.description}</p>
1111
</li>
1212

‎examples/rsp-next-ts-17/components/Section.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33

44
interface SectionProps {
55
title: string;
6-
children: JSX.Element | JSX.Element[];
6+
children: React.JSX.Element | React.JSX.Element[];
77
}
88

99
export default function Section(props: SectionProps) {

‎examples/rsp-next-ts/components/Section.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33

44
interface SectionProps {
55
title: string;
6-
children: JSX.Element | JSX.Element[];
6+
children: React.JSX.Element | React.JSX.Element[];
77
}
88

99
export default function Section(props: SectionProps) {

0 commit comments

Comments
 (0)