Skip to content

Commit ee685cc

Browse files
LFDanLuLFDanLu
authored
chore: Remaining Autocomplete alpha release checklist audit items (#7589)
* Alpha audit for autocomplete * Add tailwind example * add example to next and cra apps * make it comment build temporarily * Revert "make it comment build temporarily" This reverts commit 1f6c1ff. * fix copy * Revert "Revert "make it comment build temporarily"" This reverts commit 8d22f25. * Revert "Revert "Revert "make it comment build temporarily""" This reverts commit d42cd5e.
1 parent 6e6ae21 commit ee685cc

File tree

18 files changed

+220
-13
lines changed

18 files changed

+220
-13
lines changed

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

Lines changed: 30 additions & 1 deletion
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, 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';
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';
55
import { useAsyncList } from 'react-stately';
66
import { people } from './people.js';
77
import stocks from './stocks.json';
@@ -29,6 +29,7 @@ export function App() {
2929
<ImageGridExample />
3030
<ComboBoxExample />
3131
<ProgressBarExample />
32+
<AutocompleteExample />
3233
</div>
3334
</>
3435
);
@@ -549,3 +550,31 @@ function StockRow(props) {
549550
function StockCell(props) {
550551
return <Cell {...props} className={`px-4 py-2 text-sm ${props.className} data-[focus-visible]:outline data-[focus-visible]:outline-2 data-[focus-visible]:outline-slate-600 data-[focus-visible]:-outline-offset-4 group-aria-selected:data-[focus-visible]:outline-white`} />;
551552
}
553+
554+
function AutocompleteExample() {
555+
let {contains} = useFilter({sensitivity: 'base'});
556+
return (
557+
<div className="bg-gradient-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center flex-col">
558+
<Autocomplete filter={contains} className="flex flex-col gap-1 w-5/6">
559+
<SearchField>
560+
<Label className="text-sm text-black">Contacts</Label>
561+
<div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
562+
<Input className="w-full border-none py-2 pl-3 pr-2 sm:text-sm leading-5 text-gray-900 bg-transparent outline-none" />
563+
</div>
564+
</SearchField>
565+
<div className="h-[300px] py-2 rounded-lg flex justify-center">
566+
<ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
567+
<ContactSection title="Favorites">
568+
<Contact id="wade" name="Tony Baldwin" handle="@tony" avatar="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
569+
<Contact id="arelene" name="Julienne Langstrath" handle="@jlangstrath" avatar="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
570+
<Contact id="tom" name="Roberto Gonzalez" handle="@rgonzalez" avatar="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
571+
</ContactSection>
572+
<ContactSection title="All Contacts" items={people}>
573+
{item => <Contact name={item.name} handle={item.username} avatar={item.avatar} />}
574+
</ContactSection>
575+
</ListBox>
576+
</div>
577+
</Autocomplete>
578+
</div>
579+
);
580+
}

‎examples/rsp-cra-18/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@types/react": "^18",
2222
"@types/react-dom": "^18",
2323
"react": "^18.1.0",
24+
"react-aria-components": "latest",
2425
"react-dom": "^18.1.0",
2526
"react-scripts": "5.0.1",
2627
"typescript": "5.0.4",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import StatusExamples from './sections/StatusExamples';
1515
import ContentExamples from './sections/ContentExamples';
1616
import PickerExamples from './sections/PickerExamples';
1717
import DragAndDropExamples from './sections/DragAndDropExamples';
18+
import {AutocompleteExample} from './AutocompleteExample';
1819

1920
let columns = [
2021
{name: 'Foo', key: 'foo'},
@@ -61,6 +62,7 @@ function App() {
6162
}
6263
</TableBody>
6364
</TableView>
65+
<AutocompleteExample />
6466
<ButtonExamples />
6567
<CollectionExamples />
6668
<ColorExamples />

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {UNSTABLE_Autocomplete as Autocomplete, Input, Label, Menu, MenuItem, SearchField, Text, useFilter} from 'react-aria-components'
2+
import {classNames} from '@react-spectrum/utils';
3+
import styles from './autocomplete.css';
4+
5+
interface AutocompleteItem {
6+
id: string,
7+
name: string
8+
}
9+
10+
let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
11+
12+
export function AutocompleteExample() {
13+
let {contains} = useFilter({sensitivity: 'base'});
14+
15+
return (
16+
<Autocomplete filter={contains}>
17+
<div>
18+
<SearchField autoFocus>
19+
<Label style={{display: 'block'}}>Test</Label>
20+
<Input />
21+
<Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
22+
</SearchField>
23+
<Menu items={items} selectionMode="single">
24+
{item => (
25+
<MenuItem
26+
id={item.id}
27+
className={({isFocused, isSelected, isOpen}) => classNames(styles, 'item', {
28+
focused: isFocused,
29+
selected: isSelected,
30+
open: isOpen
31+
})}>
32+
{item.name}
33+
</MenuItem>
34+
)}
35+
</Menu>
36+
</div>
37+
</Autocomplete>
38+
);
39+
}

‎examples/rsp-cra-18/src/autocomplete.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.react-aria-Menu {
2+
display: block;
3+
min-width: 150px;
4+
width: fit-content;
5+
margin: 4px 0 0 0;
6+
border: 1px solid gray;
7+
background: lightgray;
8+
padding: 0;
9+
list-style: none;
10+
overflow-y: auto;
11+
height: 100px;
12+
}
13+
14+
.item {
15+
padding: 2px 5px;
16+
outline: none;
17+
cursor: default;
18+
color: black;
19+
background: transparent;
20+
}
21+
22+
.item[data-disabled] {
23+
opacity: 0.4;
24+
}
25+
26+
.item.focused {
27+
background: gray;
28+
color: white;
29+
}
30+
31+
.item.open:not(.focused) {
32+
background: lightslategray;
33+
color: white;
34+
}
35+
36+
.item.item.hovered {
37+
background: lightsalmon;
38+
color: white;
39+
}
40+
41+
.item.selected {
42+
background: purple;
43+
color: white;
44+
}

‎examples/rsp-cra-18/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"jsx": "react-jsx"
2222
},
2323
"include": [
24-
"src"
24+
"src",
25+
"typings.d.ts"
2526
]
2627
}

‎examples/rsp-cra-18/typings.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "*.css";

‎examples/rsp-next-ts/.yarn/install-state.gz‎

1.04 MB
Binary file not shown.

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {UNSTABLE_Autocomplete as Autocomplete, Input, Label, Menu, MenuItem, SearchField, Text, useFilter} from 'react-aria-components'
2+
import {classNames} from '@react-spectrum/utils';
3+
import React from 'react';
4+
import styles from './autocomplete.module.css';
5+
6+
interface AutocompleteItem {
7+
id: string,
8+
name: string
9+
}
10+
11+
let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
12+
13+
export function AutocompleteExample() {
14+
let {contains} = useFilter({sensitivity: 'base'});
15+
16+
return (
17+
<Autocomplete filter={contains}>
18+
<div>
19+
<SearchField autoFocus>
20+
<Label style={{display: 'block'}}>Test</Label>
21+
<Input />
22+
<Text style={{display: 'block'}} slot="description">Please select an option below.</Text>
23+
</SearchField>
24+
<Menu items={items} className={styles.menu} selectionMode="single">
25+
{item => (
26+
<MenuItem
27+
id={item.id}
28+
className={({isFocused, isSelected, isOpen}) => classNames(styles, 'item', {
29+
focused: isFocused,
30+
selected: isSelected,
31+
open: isOpen
32+
})}>
33+
{item.name}
34+
</MenuItem>
35+
)}
36+
</Menu>
37+
</div>
38+
</Autocomplete>
39+
);
40+
}

‎examples/rsp-next-ts/components/autocomplete.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.menu {
2+
display: block;
3+
min-width: 150px;
4+
width: fit-content;
5+
margin: 4px 0 0 0;
6+
border: 1px solid gray;
7+
background: lightgray;
8+
padding: 0;
9+
list-style: none;
10+
overflow-y: auto;
11+
height: 100px;
12+
}
13+
14+
.item {
15+
padding: 2px 5px;
16+
outline: none;
17+
cursor: default;
18+
color: black;
19+
background: transparent;
20+
}
21+
22+
.item[data-disabled] {
23+
opacity: 0.4;
24+
}
25+
26+
.item.focused {
27+
background: gray;
28+
color: white;
29+
}
30+
31+
.item.open:not(.focused) {
32+
background: lightslategray;
33+
color: white;
34+
}
35+
36+
.item.item.hovered {
37+
background: lightsalmon;
38+
color: white;
39+
}
40+
41+
.item.selected {
42+
background: purple;
43+
color: white;
44+
}

0 commit comments

Comments
 (0)