Merge branch 'main' of github.com:adobe/react-spectrum into tableview-crash-bug

Author: devongovett

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
   }, {
     files: ['**/test/**', '**/stories/**', '**/docs/**', '**/chromatic/**', '**/__tests__/**'],
     rules: {
+      'rsp-rules/no-react-key': [ERROR],
       'rsp-rules/act-events-test': ERROR,
       'rsp-rules/no-getByRole-toThrow': ERROR,
       'rulesdir/imports': OFF,
@@ -182,7 +183,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': WARN,
 
     // custom rules
-    'rulesdir/sort-imports': [ERROR],
+    'rsp-rules/no-react-key': [ERROR],
+    'rsp-rules/sort-imports': [ERROR],
     'rulesdir/imports': [ERROR],
     'rulesdir/useLayoutEffectRule': [ERROR],
     'rulesdir/pure-render': [ERROR],

NOTICE.txt

@@ -47,14 +47,6 @@ This codebase contains a portion of code from react which can be obtained at:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
--------------------------------------------------------------------------------
-This codebase contains a modified portion of code from Modernizr which can be obtained at:
-  * SOURCE:
-    * https://github.com/Modernizr/Modernizr/blob/7efb9d0edd66815fb115fdce95fabaf019ce8db5/feature-detects/css/flexgap.js
-
-  * LICENSE:
-    * https://github.com/Modernizr/Modernizr/blob/master/LICENSE
-
 -------------------------------------------------------------------------------
 This codebase contains a modified portion of code from react-window which can be obtained at:
   * SOURCE:

examples/rac-spectrum-tailwind/package.json

@@ -10,7 +10,7 @@
     "@adobe/react-spectrum": "^3.28.0",
     "@spectrum-icons/illustrations": "^3.6.3",
     "@spectrum-icons/workflow": "^4.2.2",
-    "parcel": "^2.9.1",
+    "parcel": "^2.10.2",
     "postcss": "^8.2.1",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.0-alpha.4",

examples/rac-tailwind/package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.16",
     "framer-motion": "^10.12.16",
-    "parcel": "^2.9.1",
+    "parcel": "^2.10.2",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-aria-components": "^1.0.0-alpha.4",

examples/rac-tailwind/src/App.js

@@ -1,7 +1,7 @@
 import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { useMemo, useState } from 'react';
-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';
+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';
 import { useAsyncList } from 'react-stately';
 import { people } from './people.js';
 import stocks from './stocks.json';
@@ -41,22 +41,22 @@ function MenuExample() {
         <OverlayButton aria-label="Menu">☰</OverlayButton>
         <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">
           <Menu className="outline-none">
-            <MenuItem id="new">New…</MenuItem>
-            <MenuItem id="open">Open…</MenuItem>
+            <MyMenuItem id="new">New…</MyMenuItem>
+            <MyMenuItem id="open">Open…</MyMenuItem>
             <Separator className="border-b border-b-gray-300 mx-3 my-1" />
-            <MenuItem id="save">Save</MenuItem>
-            <MenuItem id="save-as">Save as…</MenuItem>
+            <MyMenuItem id="save">Save</MyMenuItem>
+            <MyMenuItem id="save-as">Save as…</MyMenuItem>
             <Separator className="border-b border-b-gray-300 mx-3 my-1" />
-            <MenuItem id="print">Print…</MenuItem>
+            <MyMenuItem id="print">Print…</MyMenuItem>
           </Menu>
         </Popover>
       </MenuTrigger>
     </div>
   );
 }
 
-function MenuItem(props) {
-  return <Item {...props} className={({ isFocused }) => `
+function MyMenuItem(props) {
+  return <MenuItem {...props} className={({ isFocused }) => `
     group flex w-full items-center rounded-md px-3 py-2 sm:text-sm outline-none cursor-default
     ${isFocused ? 'bg-violet-500 text-white' : 'text-gray-900'}
   `} />;
@@ -79,21 +79,21 @@ function SelectExample() {
         </Button>
         <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">
           <ListBox className="outline-none p-1 [--focus-bg:theme(colors.rose.600)]">
-            <ListBoxItem>Aardvark</ListBoxItem>
-            <ListBoxItem>Cat</ListBoxItem>
-            <ListBoxItem>Dog</ListBoxItem>
-            <ListBoxItem>Kangaroo</ListBoxItem>
-            <ListBoxItem>Panda</ListBoxItem>
+            <MyListBoxItem>Aardvark</MyListBoxItem>
+            <MyListBoxItem>Cat</MyListBoxItem>
+            <MyListBoxItem>Dog</MyListBoxItem>
+            <MyListBoxItem>Kangaroo</MyListBoxItem>
+            <MyListBoxItem>Panda</MyListBoxItem>
           </ListBox>
         </Popover>
       </Select>
     </div>
   );
 }
 
-function ListBoxItem(props) {
+function MyListBoxItem(props) {
   return (
-    <Item
+    <ListBoxItem
       {...props}
       textValue={props.children}
       className={({isFocused}) => `
@@ -110,7 +110,7 @@ function ListBoxItem(props) {
           }
         </>
       )}
-    </Item>
+    </ListBoxItem>
   );
 }
 
@@ -129,11 +129,11 @@ function ComboBoxExample() {
         </div>
         <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">
           <ListBox className="outline-none p-1 [--focus-bg:theme(colors.sky.600)]">
-            <ListBoxItem>Aardvark</ListBoxItem>
-            <ListBoxItem>Cat</ListBoxItem>
-            <ListBoxItem>Dog</ListBoxItem>
-            <ListBoxItem>Kangaroo</ListBoxItem>
-            <ListBoxItem>Panda</ListBoxItem>
+            <MyListBoxItem>Aardvark</MyListBoxItem>
+            <MyListBoxItem>Cat</MyListBoxItem>
+            <MyListBoxItem>Dog</MyListBoxItem>
+            <MyListBoxItem>Kangaroo</MyListBoxItem>
+            <MyListBoxItem>Panda</MyListBoxItem>
           </ListBox>
         </Popover>
       </ComboBox>
@@ -446,12 +446,12 @@ function ContactSection({title, children, items}) {
 
 function Contact({id, avatar, name, handle}) {
   return (
-    <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">
+    <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">
       <img src={avatar} alt="" className="row-span-2 place-self-center h-8 w-8 rounded-full" />
       <Text slot="label" className="font-medium truncate">{name}</Text>
       <Text slot="description" className="truncate text-xs text-slate-600 group-aria-selected:text-white">{handle}</Text>
       <div className="divider hidden absolute left-12 right-2 bottom-0 h-px bg-gray-200 group-aria-selected:bg-blue-400" />
-    </Item>
+    </ListBoxItem>
   );
 }
 
@@ -473,10 +473,10 @@ function ImageGridExample() {
     <div className="bg-gradient-to-r from-sky-500 to-teal-500 p-8 rounded-lg flex justify-center">
       <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">
         {item => (
-          <Item textValue={item.user.name} className="rounded outline-none group cursor-default">
+          <ListBoxItem textValue={item.user.name} className="rounded outline-none group cursor-default">
             <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" />
             <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>
-          </Item>
+          </ListBoxItem>
         )}
       </ListBox>
     </div>

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

@@ -46,7 +46,7 @@ function App() {
             {(item: any) =>
               (<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
                 {(key) => {
-                  return <Cell>{item[key.toString()]}</Cell>;
+                  return <Cell>{item[key]}</Cell>;
                 }}
               </Row>)
             }

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

@@ -1,9 +1,9 @@
-import {Key} from 'react'
+import {Key} from '@react-types/shared';
 
 interface Journal{
-    rate: Key, 
-    description: string, 
+    rate: Key,
+    description: string,
     id: number
 }
 
-export default Journal
+export default Journal

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

@@ -6,7 +6,7 @@ function JournalEntries(props : {list : Journal[]}){
     const element = props.list.map(item => (
         <li key={item.id}>
             <Divider size="M" marginTop="size-200" marginBottom="size-300" />
-            <p>Your day was: {item.rate.toString()} </p>
+            <p>Your day was: {item.rate} </p>
             <p>{item.description}</p>
         </li>
 

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

@@ -3,7 +3,7 @@ import React from "react";
 
 interface SectionProps {
   title: string;
-  children: JSX.Element | JSX.Element[];
+  children: React.JSX.Element | React.JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {

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

@@ -3,7 +3,7 @@ import React from "react";
 
 interface SectionProps {
   title: string;
-  children: JSX.Element | JSX.Element[];
+  children: React.JSX.Element | React.JSX.Element[];
 }
 
 export default function Section(props: SectionProps) {