Skip to content

Commit 2ce6172

Browse files
devongovettdevongovett
committed
Merge branch 'main' of github.com:adobe/react-spectrum into document_prefix
# Conflicts: # packages/@react-aria/menu/src/useMenuItem.ts # packages/@react-aria/selection/src/useSelectableCollection.ts # packages/@react-aria/selection/src/useSelectableItem.ts
2 parents 22964a3 + a7b8580 commit 2ce6172

File tree

75 files changed

+2528
-442
lines changed

Some content is hidden

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

75 files changed

+2528
-442
lines changed

‎.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
diff --git a/dist/cjs/document/prepareDocument.js b/dist/cjs/document/prepareDocument.js
2+
index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364eeef3e297 100644
3+
--- a/dist/cjs/document/prepareDocument.js
4+
+++ b/dist/cjs/document/prepareDocument.js
5+
@@ -30,7 +30,7 @@ function prepareDocument(document) {
6+
const initialValue = UI.getInitialValue(el);
7+
if (initialValue !== undefined) {
8+
if (el.value !== initialValue) {
9+
- dispatchEvent.dispatchDOMEvent(el, 'change');
10+
+ el.dispatchEvent(new Event('change'));
11+
}
12+
UI.clearInitialValue(el);
13+
}
14+
diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js
15+
index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644
16+
--- a/dist/cjs/utils/focus/getActiveElement.js
17+
+++ b/dist/cjs/utils/focus/getActiveElement.js
18+
@@ -6,6 +6,8 @@ function getActiveElement(document) {
19+
const activeElement = document.activeElement;
20+
if (activeElement === null || activeElement === undefined ? undefined : activeElement.shadowRoot) {
21+
return getActiveElement(activeElement.shadowRoot);
22+
+ } else if (activeElement && activeElement.tagName === 'IFRAME') {
23+
+ return getActiveElement(activeElement.contentWindow.document);
24+
} else {
25+
// Browser does not yield disabled elements as document.activeElement - jsdom does
26+
if (isDisabled.isDisabled(activeElement)) {

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

+124-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,59 @@
1-
import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
1+
import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
22
import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
33
import { useMemo, useState } from 'react';
4-
import { UNSTABLE_Autocomplete as Autocomplete, 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, SearchField, Section, Select, SelectValue, Separator, Slider, SliderOutput, SliderThumb, SliderTrack, Switch, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, Text, useFilter} from 'react-aria-components';
4+
import {
5+
Tree as AriaTree,
6+
TreeItem as AriaTreeItem,
7+
TreeItemContent as AriaTreeItemContent,
8+
UNSTABLE_Autocomplete as Autocomplete,
9+
Button,
10+
Cell,
11+
Collection,
12+
Column,
13+
ComboBox,
14+
DateInput,
15+
DatePicker,
16+
DateSegment,
17+
Dialog,
18+
DialogTrigger,
19+
Group,
20+
Header,
21+
Heading,
22+
Input,
23+
Label,
24+
ListBox,
25+
ListBoxItem,
26+
Menu,
27+
MenuItem,
28+
MenuTrigger,
29+
Modal,
30+
ModalOverlay,
31+
OverlayArrow,
32+
Popover,
33+
ProgressBar,
34+
Radio,
35+
RadioGroup,
36+
Row,
37+
SearchField,
38+
Section,
39+
Select,
40+
SelectValue,
41+
Separator,
42+
Slider,
43+
SliderOutput,
44+
SliderThumb,
45+
SliderTrack,
46+
Switch,
47+
Tab,
48+
Table,
49+
TableBody,
50+
TableHeader,
51+
TabList,
52+
TabPanel,
53+
Tabs,
54+
Text,
55+
useFilter
56+
} from 'react-aria-components';
557
import { useAsyncList } from 'react-stately';
658
import { people } from './people.js';
759
import stocks from './stocks.json';
@@ -30,6 +82,7 @@ export function App() {
3082
<ComboBoxExample />
3183
<ProgressBarExample />
3284
<AutocompleteExample />
85+
<TreeExample />
3386
</div>
3487
</>
3588
);
@@ -578,3 +631,72 @@ function AutocompleteExample() {
578631
</div>
579632
);
580633
}
634+
635+
function TreeExample (
636+
{ children, ...props }
637+
) {
638+
return (
639+
<div className="bg-linear-to-r from-amber-500 to-rose-500 p-8 rounded-lg flex justify-center flex-col">
640+
<AriaTree {...props} className={'w-72 h-[290px] overflow-auto outline-hidden bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow-sm scroll-pb-2 scroll-pt-7'}>
641+
<TreeItem id="documents" textValue="Documents">
642+
<TreeItemContent>
643+
Documents
644+
</TreeItemContent>
645+
<TreeItem id="project" textValue="Project">
646+
<TreeItemContent>
647+
Project
648+
</TreeItemContent>
649+
<TreeItem id="report" textValue="Weekly Report">
650+
<TreeItemContent>
651+
Weekly Report
652+
</TreeItemContent>
653+
</TreeItem>
654+
</TreeItem>
655+
</TreeItem>
656+
<TreeItem id="photos" textValue="Photos">
657+
<TreeItemContent>
658+
Photos
659+
</TreeItemContent>
660+
<TreeItem id="one" textValue="Image 1">
661+
<TreeItemContent>
662+
Image 1
663+
</TreeItemContent>
664+
</TreeItem>
665+
<TreeItem id="two" textValue="Image 2">
666+
<TreeItemContent>
667+
Image 2
668+
</TreeItemContent>
669+
</TreeItem>
670+
</TreeItem>
671+
</AriaTree>
672+
</div>
673+
);
674+
}
675+
676+
export function TreeItem(props) {
677+
return (
678+
<AriaTreeItem {...props} className="group peer relative py-1 px-2 text-sm outline-hidden cursor-default flex gap-x-3 rounded-sm aria-selected:bg-blue-500 text-slate-700 aria-selected:text-white [&:has(+[aria-selected=true])]:aria-selected:rounded-b-none peer-aria-selected: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" />
679+
)
680+
}
681+
682+
export function TreeItemContent({ children, ...props }) {
683+
return (
684+
<AriaTreeItemContent {...props}>
685+
{({ selectionMode, selectionBehavior, hasChildItems }) => (
686+
<div className={`flex items-center`}>
687+
{selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
688+
<Checkbox slot="selection" />
689+
)}
690+
<div className='shrink-0 w-[calc(calc(var(--tree-item-level)_-_1)_*_calc(var(--spacing)_*_3))]' />
691+
{hasChildItems ? (
692+
<Button slot="chevron" className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-start cursor-default">
693+
<ChevronRightIcon aria-hidden className="w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ease-in-out group-data-[expanded=true]:rotate-90" />
694+
</Button>
695+
) : <div className='shrink-0 w-8 h-8' />}
696+
{children}
697+
</div>
698+
)}
699+
</AriaTreeItemContent>
700+
);
701+
}
702+

‎examples/rsp-cra-18/src/sections/CollectionExamples.tsx

+66-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1-
import {ActionMenu, Flex, Divider, Item, ListBox, ListView, MenuTrigger, Menu, SubmenuTrigger, ActionButton, TableBody, TableView, Row, Cell, TableHeader, Column, TagGroup} from '@adobe/react-spectrum';
1+
import {
2+
ActionMenu,
3+
Flex,
4+
Divider,
5+
Item,
6+
ListBox,
7+
ListView,
8+
MenuTrigger,
9+
Menu,
10+
SubmenuTrigger,
11+
ActionButton,
12+
TableBody,
13+
TableView,
14+
Row,
15+
Cell,
16+
TableHeader,
17+
Column,
18+
TagGroup,
19+
Text,
20+
TreeView,
21+
TreeViewItem,
22+
TreeViewItemContent
23+
} from '@adobe/react-spectrum';
24+
25+
import FileTxt from '@spectrum-icons/workflow/FileTxt';
26+
import Folder from '@spectrum-icons/workflow/Folder';
227

328
export default function CollectionExamples(){
429
return (
@@ -92,6 +117,46 @@ export default function CollectionExamples(){
92117
<Item>Gaming</Item>
93118
<Item>Shopping</Item>
94119
</TagGroup>
120+
<div style={{width: '300px', height: '150px', overflow: 'auto'}}>
121+
<TreeView disabledKeys={['projects-1']} aria-label="test static tree">
122+
<TreeViewItem id="Photos" textValue="Photos">
123+
<TreeViewItemContent>
124+
<Text>Photos</Text>
125+
<Folder />
126+
</TreeViewItemContent>
127+
</TreeViewItem>
128+
<TreeViewItem id="projects" textValue="Projects">
129+
<TreeViewItemContent>
130+
<Text>Projects</Text>
131+
<Folder />
132+
</TreeViewItemContent>
133+
<TreeViewItem id="projects-1" textValue="Projects-1">
134+
<TreeViewItemContent>
135+
<Text>Projects-1</Text>
136+
<Folder />
137+
</TreeViewItemContent>
138+
<TreeViewItem id="projects-1A" textValue="Projects-1A">
139+
<TreeViewItemContent>
140+
<Text>Projects-1A</Text>
141+
<FileTxt />
142+
</TreeViewItemContent>
143+
</TreeViewItem>
144+
</TreeViewItem>
145+
<TreeViewItem id="projects-2" textValue="Projects-2">
146+
<TreeViewItemContent>
147+
<Text>Projects-2</Text>
148+
<FileTxt />
149+
</TreeViewItemContent>
150+
</TreeViewItem>
151+
<TreeViewItem id="projects-3" textValue="Projects-3">
152+
<TreeViewItemContent>
153+
<Text>Projects-3</Text>
154+
<FileTxt />
155+
</TreeViewItemContent>
156+
</TreeViewItem>
157+
</TreeViewItem>
158+
</TreeView>
159+
</div>
95160
</Flex>
96161
</>
97162
)

‎examples/rsp-next-ts-17/pages/index.tsx

+47-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,10 @@ import {
8181
Accordion,
8282
Disclosure,
8383
DisclosureTitle,
84-
DisclosurePanel
84+
DisclosurePanel,
85+
TreeView,
86+
TreeViewItem,
87+
TreeViewItemContent
8588
} from "@adobe/react-spectrum";
8689
import Edit from "@spectrum-icons/workflow/Edit";
8790
import NotFound from "@spectrum-icons/illustrations/NotFound";
@@ -90,6 +93,9 @@ import ReorderableListView from "../components/ReorderableListView";
9093
import {ToastQueue} from '@react-spectrum/toast';
9194
import {SubmenuTrigger} from "@react-spectrum/menu";
9295

96+
import FileTxt from '@spectrum-icons/workflow/FileTxt';
97+
import Folder from '@spectrum-icons/workflow/Folder';
98+
9399
let nestedItems = [
94100
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
95101
{foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
@@ -238,6 +244,46 @@ export default function Home() {
238244
}
239245
</TableBody>
240246
</TableView>
247+
<div style={{width: '300px', height: '150px', overflow: 'auto'}}>
248+
<TreeView disabledKeys={['projects-1']} aria-label="test static tree">
249+
<TreeViewItem id="Photos" textValue="Photos">
250+
<TreeViewItemContent>
251+
<Text>Photos</Text>
252+
<Folder />
253+
</TreeViewItemContent>
254+
</TreeViewItem>
255+
<TreeViewItem id="projects" textValue="Projects">
256+
<TreeViewItemContent>
257+
<Text>Projects</Text>
258+
<Folder />
259+
</TreeViewItemContent>
260+
<TreeViewItem id="projects-1" textValue="Projects-1">
261+
<TreeViewItemContent>
262+
<Text>Projects-1</Text>
263+
<Folder />
264+
</TreeViewItemContent>
265+
<TreeViewItem id="projects-1A" textValue="Projects-1A">
266+
<TreeViewItemContent>
267+
<Text>Projects-1A</Text>
268+
<FileTxt />
269+
</TreeViewItemContent>
270+
</TreeViewItem>
271+
</TreeViewItem>
272+
<TreeViewItem id="projects-2" textValue="Projects-2">
273+
<TreeViewItemContent>
274+
<Text>Projects-2</Text>
275+
<FileTxt />
276+
</TreeViewItemContent>
277+
</TreeViewItem>
278+
<TreeViewItem id="projects-3" textValue="Projects-3">
279+
<TreeViewItemContent>
280+
<Text>Projects-3</Text>
281+
<FileTxt />
282+
</TreeViewItemContent>
283+
</TreeViewItem>
284+
</TreeViewItem>
285+
</TreeView>
286+
</div>
241287
</Section>
242288

243289
<Section title="Color">

‎examples/rsp-next-ts/pages/index.tsx

+48-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,10 @@ import {
8181
Accordion,
8282
Disclosure,
8383
DisclosureTitle,
84-
DisclosurePanel
84+
DisclosurePanel,
85+
TreeView,
86+
TreeViewItem,
87+
TreeViewItemContent
8588
} from "@adobe/react-spectrum";
8689
import {AutocompleteExample} from "../components/AutocompleteExample";
8790
import Edit from "@spectrum-icons/workflow/Edit";
@@ -91,6 +94,9 @@ import ReorderableListView from "../components/ReorderableListView";
9194
import {ToastQueue} from '@react-spectrum/toast';
9295
import {SubmenuTrigger} from "@react-spectrum/menu";
9396

97+
import FileTxt from '@spectrum-icons/workflow/FileTxt';
98+
import Folder from '@spectrum-icons/workflow/Folder';
99+
94100
let nestedItems = [
95101
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
96102
{foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
@@ -242,6 +248,47 @@ export default function Home() {
242248
</TableBody>
243249
</TableView>
244250
<AutocompleteExample />
251+
252+
<div style={{width: '300px', height: '150px', overflow: 'auto'}}>
253+
<TreeView disabledKeys={['projects-1']} aria-label="test static tree">
254+
<TreeViewItem id="Photos" textValue="Photos">
255+
<TreeViewItemContent>
256+
<Text>Photos</Text>
257+
<Folder />
258+
</TreeViewItemContent>
259+
</TreeViewItem>
260+
<TreeViewItem id="projects" textValue="Projects">
261+
<TreeViewItemContent>
262+
<Text>Projects</Text>
263+
<Folder />
264+
</TreeViewItemContent>
265+
<TreeViewItem id="projects-1" textValue="Projects-1">
266+
<TreeViewItemContent>
267+
<Text>Projects-1</Text>
268+
<Folder />
269+
</TreeViewItemContent>
270+
<TreeViewItem id="projects-1A" textValue="Projects-1A">
271+
<TreeViewItemContent>
272+
<Text>Projects-1A</Text>
273+
<FileTxt />
274+
</TreeViewItemContent>
275+
</TreeViewItem>
276+
</TreeViewItem>
277+
<TreeViewItem id="projects-2" textValue="Projects-2">
278+
<TreeViewItemContent>
279+
<Text>Projects-2</Text>
280+
<FileTxt />
281+
</TreeViewItemContent>
282+
</TreeViewItem>
283+
<TreeViewItem id="projects-3" textValue="Projects-3">
284+
<TreeViewItemContent>
285+
<Text>Projects-3</Text>
286+
<FileTxt />
287+
</TreeViewItemContent>
288+
</TreeViewItem>
289+
</TreeViewItem>
290+
</TreeView>
291+
</div>
245292
</Section>
246293

247294
<Section title="Color">

0 commit comments

Comments
 (0)