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
adobe · Feb 20, 2025 · 2ce6172 · 2ce6172
2 parents 22964a3 + a7b8580
commit 2ce6172
Show file tree

Hide file tree

Showing 75 changed files with 2,528 additions and 442 deletions.
diff --git a/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch b/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch
@@ -0,0 +1,26 @@
+diff --git a/dist/cjs/document/prepareDocument.js b/dist/cjs/document/prepareDocument.js
+index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364eeef3e297 100644
+--- a/dist/cjs/document/prepareDocument.js
++++ b/dist/cjs/document/prepareDocument.js
+@@ -30,7 +30,7 @@ function prepareDocument(document) {
+         const initialValue = UI.getInitialValue(el);
+         if (initialValue !== undefined) {
+             if (el.value !== initialValue) {
+-                dispatchEvent.dispatchDOMEvent(el, 'change');
++                el.dispatchEvent(new Event('change'));
+             }
+             UI.clearInitialValue(el);
+         }
+diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js
+index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644
+--- a/dist/cjs/utils/focus/getActiveElement.js
++++ b/dist/cjs/utils/focus/getActiveElement.js
+@@ -6,6 +6,8 @@ function getActiveElement(document) {
+     const activeElement = document.activeElement;
+     if (activeElement === null || activeElement === undefined ? undefined : activeElement.shadowRoot) {
+         return getActiveElement(activeElement.shadowRoot);
++    } else if (activeElement && activeElement.tagName === 'IFRAME') {
++        return getActiveElement(activeElement.contentWindow.document);
+     } else {
+         // Browser does not yield disabled elements as document.activeElement - jsdom does
+         if (isDisabled.isDisabled(activeElement)) {
diff --git a/examples/rac-tailwind/src/App.js b/examples/rac-tailwind/src/App.js
@@ -1,7 +1,59 @@
-import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { ArrowUpIcon, BellIcon, CheckCircleIcon, CheckIcon, ChevronUpDownIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
 import { ChatBubbleOvalLeftEllipsisIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import { useMemo, useState } from 'react';
-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';
+import {
+  Tree as AriaTree,
+  TreeItem as AriaTreeItem,
+  TreeItemContent as AriaTreeItemContent,
+  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';
 import { useAsyncList } from 'react-stately';
 import { people } from './people.js';
 import stocks from './stocks.json';
@@ -30,6 +82,7 @@ export function App() {
         <ComboBoxExample />
         <ProgressBarExample />
         <AutocompleteExample />
+        <TreeExample />
       </div>
     </>
   );
@@ -578,3 +631,72 @@ function AutocompleteExample() {
     </div>
   );
 }
+
+function TreeExample (
+  { children, ...props }
+) {
+  return (
+    <div className="bg-linear-to-r from-amber-500 to-rose-500 p-8 rounded-lg flex justify-center flex-col">
+      <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'}>
+        <TreeItem id="documents" textValue="Documents">
+          <TreeItemContent>
+            Documents
+          </TreeItemContent>
+          <TreeItem id="project" textValue="Project">
+            <TreeItemContent>
+              Project
+            </TreeItemContent>
+            <TreeItem id="report" textValue="Weekly Report">
+              <TreeItemContent>
+                Weekly Report
+              </TreeItemContent>
+            </TreeItem>
+          </TreeItem>
+        </TreeItem>
+        <TreeItem id="photos" textValue="Photos">
+          <TreeItemContent>
+            Photos
+          </TreeItemContent>
+          <TreeItem id="one" textValue="Image 1">
+            <TreeItemContent>
+              Image 1
+            </TreeItemContent>
+          </TreeItem>
+          <TreeItem id="two" textValue="Image 2">
+            <TreeItemContent>
+              Image 2
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+      </AriaTree>
+    </div>
+  );
+}
+
+export function TreeItem(props) {
+  return (
+    <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" />
+  )
+}
+
+export function TreeItemContent({ children, ...props }) {
+  return (
+    <AriaTreeItemContent {...props}>
+      {({ selectionMode, selectionBehavior, hasChildItems }) => (
+        <div className={`flex items-center`}>
+          {selectionMode === 'multiple' && selectionBehavior === 'toggle' && (
+            <Checkbox slot="selection" />
+          )}
+          <div className='shrink-0 w-[calc(calc(var(--tree-item-level)_-_1)_*_calc(var(--spacing)_*_3))]' />
+          {hasChildItems ? (
+            <Button slot="chevron" className="shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-start cursor-default">
+              <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" />
+            </Button>
+          ) : <div className='shrink-0 w-8 h-8' />}
+          {children}
+        </div>
+      )}
+    </AriaTreeItemContent>
+  );
+}
+
diff --git a/examples/rsp-cra-18/src/sections/CollectionExamples.tsx b/examples/rsp-cra-18/src/sections/CollectionExamples.tsx
@@ -1,4 +1,29 @@
-import {ActionMenu, Flex, Divider, Item, ListBox, ListView, MenuTrigger, Menu, SubmenuTrigger, ActionButton, TableBody, TableView, Row, Cell, TableHeader, Column, TagGroup} from '@adobe/react-spectrum';
+import {
+  ActionMenu,
+  Flex,
+  Divider,
+  Item,
+  ListBox,
+  ListView,
+  MenuTrigger,
+  Menu,
+  SubmenuTrigger,
+  ActionButton,
+  TableBody,
+  TableView,
+  Row,
+  Cell,
+  TableHeader,
+  Column,
+  TagGroup,
+  Text,
+  TreeView,
+  TreeViewItem,
+  TreeViewItemContent
+} from '@adobe/react-spectrum';
+
+import FileTxt from '@spectrum-icons/workflow/FileTxt';
+import Folder from '@spectrum-icons/workflow/Folder';
 
 export default function CollectionExamples(){
     return (
@@ -92,6 +117,46 @@ export default function CollectionExamples(){
             <Item>Gaming</Item>
             <Item>Shopping</Item>
           </TagGroup>
+          <div style={{width: '300px', height: '150px', overflow: 'auto'}}>
+            <TreeView disabledKeys={['projects-1']} aria-label="test static tree">
+              <TreeViewItem id="Photos" textValue="Photos">
+                <TreeViewItemContent>
+                  <Text>Photos</Text>
+                  <Folder />
+                </TreeViewItemContent>
+              </TreeViewItem>
+              <TreeViewItem id="projects" textValue="Projects">
+                <TreeViewItemContent>
+                  <Text>Projects</Text>
+                  <Folder />
+                </TreeViewItemContent>
+                <TreeViewItem id="projects-1" textValue="Projects-1">
+                  <TreeViewItemContent>
+                    <Text>Projects-1</Text>
+                    <Folder />
+                  </TreeViewItemContent>
+                  <TreeViewItem id="projects-1A" textValue="Projects-1A">
+                    <TreeViewItemContent>
+                      <Text>Projects-1A</Text>
+                      <FileTxt />
+                    </TreeViewItemContent>
+                  </TreeViewItem>
+                </TreeViewItem>
+                <TreeViewItem id="projects-2" textValue="Projects-2">
+                  <TreeViewItemContent>
+                    <Text>Projects-2</Text>
+                    <FileTxt />
+                  </TreeViewItemContent>
+                </TreeViewItem>
+                <TreeViewItem id="projects-3" textValue="Projects-3">
+                  <TreeViewItemContent>
+                    <Text>Projects-3</Text>
+                    <FileTxt />
+                  </TreeViewItemContent>
+                </TreeViewItem>
+              </TreeViewItem>
+            </TreeView>
+          </div>
         </Flex>
       </>
     )

diff --git a/examples/rsp-next-ts-17/pages/index.tsx b/examples/rsp-next-ts-17/pages/index.tsx
@@ -81,7 +81,10 @@ import {
   Accordion,
   Disclosure,
   DisclosureTitle,
-  DisclosurePanel
+  DisclosurePanel,
+  TreeView,
+  TreeViewItem,
+  TreeViewItemContent
 } from "@adobe/react-spectrum";
 import Edit from "@spectrum-icons/workflow/Edit";
 import NotFound from "@spectrum-icons/illustrations/NotFound";
@@ -90,6 +93,9 @@ import ReorderableListView from "../components/ReorderableListView";
 import {ToastQueue} from '@react-spectrum/toast';
 import {SubmenuTrigger} from "@react-spectrum/menu";
 
+import FileTxt from '@spectrum-icons/workflow/FileTxt';
+import Folder from '@spectrum-icons/workflow/Folder';
+
 let nestedItems = [
   {foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
     {foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
@@ -238,6 +244,46 @@ export default function Home() {
                 }
               </TableBody>
             </TableView>
+            <div style={{width: '300px', height: '150px', overflow: 'auto'}}>
+              <TreeView disabledKeys={['projects-1']} aria-label="test static tree">
+                <TreeViewItem id="Photos" textValue="Photos">
+                  <TreeViewItemContent>
+                    <Text>Photos</Text>
+                    <Folder />
+                  </TreeViewItemContent>
+                </TreeViewItem>
+                <TreeViewItem id="projects" textValue="Projects">
+                  <TreeViewItemContent>
+                    <Text>Projects</Text>
+                    <Folder />
+                  </TreeViewItemContent>
+                  <TreeViewItem id="projects-1" textValue="Projects-1">
+                    <TreeViewItemContent>
+                      <Text>Projects-1</Text>
+                      <Folder />
+                    </TreeViewItemContent>
+                    <TreeViewItem id="projects-1A" textValue="Projects-1A">
+                      <TreeViewItemContent>
+                        <Text>Projects-1A</Text>
+                        <FileTxt />
+                      </TreeViewItemContent>
+                    </TreeViewItem>
+                  </TreeViewItem>
+                  <TreeViewItem id="projects-2" textValue="Projects-2">
+                    <TreeViewItemContent>
+                      <Text>Projects-2</Text>
+                      <FileTxt />
+                    </TreeViewItemContent>
+                  </TreeViewItem>
+                  <TreeViewItem id="projects-3" textValue="Projects-3">
+                    <TreeViewItemContent>
+                      <Text>Projects-3</Text>
+                      <FileTxt />
+                    </TreeViewItemContent>
+                  </TreeViewItem>
+                </TreeViewItem>
+              </TreeView>
+            </div>
           </Section>
 
           <Section title="Color">

diff --git a/examples/rsp-next-ts/pages/index.tsx b/examples/rsp-next-ts/pages/index.tsx
@@ -81,7 +81,10 @@ import {
   Accordion,
   Disclosure,
   DisclosureTitle,
-  DisclosurePanel
+  DisclosurePanel,
+  TreeView,
+  TreeViewItem,
+  TreeViewItemContent
 } from "@adobe/react-spectrum";
 import {AutocompleteExample} from "../components/AutocompleteExample";
 import Edit from "@spectrum-icons/workflow/Edit";
@@ -91,6 +94,9 @@ import ReorderableListView from "../components/ReorderableListView";
 import {ToastQueue} from '@react-spectrum/toast';
 import {SubmenuTrigger} from "@react-spectrum/menu";
 
+import FileTxt from '@spectrum-icons/workflow/FileTxt';
+import Folder from '@spectrum-icons/workflow/Folder';
+
 let nestedItems = [
   {foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
     {foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
@@ -242,6 +248,47 @@ export default function Home() {
               </TableBody>
             </TableView>
             <AutocompleteExample />
+
+            <div style={{width: '300px', height: '150px', overflow: 'auto'}}>
+              <TreeView disabledKeys={['projects-1']} aria-label="test static tree">
+                <TreeViewItem id="Photos" textValue="Photos">
+                  <TreeViewItemContent>
+                    <Text>Photos</Text>
+                    <Folder />
+                  </TreeViewItemContent>
+                </TreeViewItem>
+                <TreeViewItem id="projects" textValue="Projects">
+                  <TreeViewItemContent>
+                    <Text>Projects</Text>
+                    <Folder />
+                  </TreeViewItemContent>
+                  <TreeViewItem id="projects-1" textValue="Projects-1">
+                    <TreeViewItemContent>
+                      <Text>Projects-1</Text>
+                      <Folder />
+                    </TreeViewItemContent>
+                    <TreeViewItem id="projects-1A" textValue="Projects-1A">
+                      <TreeViewItemContent>
+                        <Text>Projects-1A</Text>
+                        <FileTxt />
+                      </TreeViewItemContent>
+                    </TreeViewItem>
+                  </TreeViewItem>
+                  <TreeViewItem id="projects-2" textValue="Projects-2">
+                    <TreeViewItemContent>
+                      <Text>Projects-2</Text>
+                      <FileTxt />
+                    </TreeViewItemContent>
+                  </TreeViewItem>
+                  <TreeViewItem id="projects-3" textValue="Projects-3">
+                    <TreeViewItemContent>
+                      <Text>Projects-3</Text>
+                      <FileTxt />
+                    </TreeViewItemContent>
+                  </TreeViewItem>
+                </TreeViewItem>
+              </TreeView>
+            </div>
           </Section>
 
           <Section title="Color">