{page.tableOfContents?.[0].title}
}
- {parentPage?.exports?.title}
+ {parentPage?.exports?.title ?? parentPage?.tableOfContents?.[0]?.title ?? parentPage?.name}
{currentPage.tableOfContents?.[0].title}
@@ -409,6 +429,10 @@ function SubpageHeader({currentPage, parentPage, isLongForm}: SubpageHeaderProps ); } +function isExternalUrl(url: string): boolean { + return url.startsWith('http://') || url.startsWith('https://'); +} + function MobileRelatedPages({pages}: {pages: Array<{title: string, url: string}>}) { return (
})}>
);
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index b75a023acd1..10496d2ced9 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -1,30 +1,21 @@
'use client';
-import {Autocomplete, Key, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
+import {Autocomplete, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps, Tab as RACTab, TabList as RACTabList, TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps, TabProps as RACTabProps, Tabs as RACTabs, SelectionIndicator, TabRenderProps} from 'react-aria-components';
import {baseColor, focusRing, style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {CloseButton, SearchField, TextContext} from '@react-spectrum/s2';
-import {ComponentCardItem, ComponentCardView} from './ComponentCardView';
+import {ComponentCardView} from './ComponentCardView';
import {
- filterAndSortSearchItems,
- getOrderedLibraries,
- getPageTitle,
getResourceTags,
- getSearchSection,
+ LazyIconSearchView,
SearchEmptyState,
- type Section,
- sortItemsForDisplay,
- useFilteredIcons,
- useSearchTagSelection,
- useSectionTagsForDisplay
+ useSearchMenuState
} from './searchUtils';
-import {getLibraryFromPage} from './library';
import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
// @ts-ignore
import {type Library} from './constants';
import {Page} from '@parcel/rsc';
-import React, {lazy, ReactNode, Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {ReactNode, Suspense, useContext, useEffect, useRef, useState} from 'react';
import {SearchTagGroups} from './SearchTagGroups';
-import {stripMarkdown} from './SearchMenu';
import {useId} from '@react-aria/utils';
@@ -141,8 +132,6 @@ const mobileTabPanel = style({
outlineStyle: 'none'
});
-const IconSearchView = lazy(() => import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView})));
-
const stickySearchContainer = style({
width: 'full',
display: 'flex',
@@ -228,24 +217,28 @@ const MobileCustomDialog = function MobileCustomDialog(props: MobileDialogProps)
function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage: Page, initialTag?: string}) {
let overlayTriggerState = useContext(OverlayTriggerStateContext);
let [searchFocused, setSearchFocused] = useState(false);
- let [searchValue, setSearchValue] = useState('');
let scrollContainerRef = useRefRelated pages
-
- {pages.map((page, i) => (
-
- - - {page.title} - - - ))} + {pages.map((page, i) => { + let isExternal = isExternalUrl(page.url); + return ( +
- + + {page.title} + + + ); + })}
@@ -439,15 +290,12 @@ function MobileNav({pages, currentPage, initialTag}: {pages: Page[], currentPage
{libraries.map(library => {
- const isIconsSelected = selectedSection === 'icons' && library.id === 'react-spectrum';
const libraryResourceTags = getResourceTags(library.id);
- const selectedResourceTag = libraryResourceTags.find(tag => tag.id === selectedSection);
- const placeholderText = selectedResourceTag
- ? `Search ${selectedResourceTag.name}`
- : `Search ${library.label}`;
+ const placeholderText = getPlaceholderText(library.label);
+ const showIcons = isIconsSelected && library.id === 'react-spectrum';
return (
- {isIconsSelected ? (
+ {showIcons ? (
();
+ groupMap = new Map();
}
let groupPages = groupMap.get(section) ?? [];
groupPages.push(page);
@@ -82,7 +83,7 @@ export function Nav({pages, currentPage}: PageProps) {
if (b[0] === 'Guides') {
return -1;
}
-
+
return a[0].localeCompare(b[0]);
});
@@ -271,12 +272,14 @@ export function SideNavItem(props) {
export function SideNavLink(props) {
let linkRef = useRef(null);
let selected = useContext(SideNavContext);
- let {...linkProps} = props;
+ let {isExternal, ...linkProps} = props;
return (
{props.children}
+ {isExternal && (
+
@@ -72,7 +76,7 @@ function RelatedPages({pages}: {pages: Array<{title: string, url: string}>}) {
{pages.map((page, i) => (
- {page.title}
+ {page.title}
))}
diff --git a/packages/dev/s2-docs/src/PatternTestingFAQ.tsx b/packages/dev/s2-docs/src/PatternTestingFAQ.tsx
new file mode 100644
index 00000000000..6ef7b742f81
--- /dev/null
+++ b/packages/dev/s2-docs/src/PatternTestingFAQ.tsx
@@ -0,0 +1,24 @@
+import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
+import React from 'react';
+
+export function PatternTestingFAQ({patternName}: {patternName: string}) {
+ return (
+ <>
+
+ When using the test utils, what if a certain interaction errors or doesn't seem to result in the expected state?
+
+ In cases like this, first double check your test setup and make sure that your test is rendering your {patternName} in its expected
+ state before the test util interaction call. If everything looks correct, you can always fall back to simulating interactions manually,
+ and using the test util to query your {patternName}'s state post interaction.
+
+
+
+ The tester doesn't offer a specific interaction flow, what should I do?
+
+ Whenever the {patternName} tester queries its elements or triggers a user flow, it does so against the current state of the {patternName}. Therefore the {patternName} tester can be used alongside
+ whatever simulated user flow you add.
+
+
+
+ );
+}
diff --git a/packages/dev/s2-docs/src/S2Colors.tsx b/packages/dev/s2-docs/src/S2Colors.tsx
index 946aa8eba13..e4dd8f5e457 100644
--- a/packages/dev/s2-docs/src/S2Colors.tsx
+++ b/packages/dev/s2-docs/src/S2Colors.tsx
@@ -1,135 +1,150 @@
+'use client';
+
import {colorSwatch, getColorScale} from './color.macro' with {type: 'macro'};
import {Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
import React from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
-export function S2Colors() {
+export function BackgroundColorsDisclosure() {
+ return (
+
+ Background colors
+
+
+
+ );
+}
+
+export function TextColorsDisclosure() {
+ return (
+
+ Text colors
+
+
+
+ );
+}
+
+export function SemanticColorsDisclosure() {
+ return (
+
+ Semantic colors
+
+
+
+ );
+}
+
+export function GlobalColorsDisclosure() {
return (
- <>
-
- Background colors
-
-
-
-
- Text colors
-
-
-
-
- Semantic colors
-
-
-
-
- Global colors
-
-
-
-
+
+ Global colors
+
+
+
);
}
diff --git a/packages/dev/s2-docs/src/S2Typography.tsx b/packages/dev/s2-docs/src/S2Typography.tsx
index b490cda231b..eeff8cafa67 100644
--- a/packages/dev/s2-docs/src/S2Typography.tsx
+++ b/packages/dev/s2-docs/src/S2Typography.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import React from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 3572af7856b..4530271d21f 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -5,35 +5,21 @@ import {Autocomplete, Dialog, Key, OverlayTriggerStateContext, Provider} from 'r
import Close from '@react-spectrum/s2/icons/Close';
import {ComponentCardView} from './ComponentCardView';
import {
- type ComponentItem,
- createSearchOptions,
- filterAndSortSearchItems,
- getOrderedLibraries,
- getPageTitle,
getResourceTags,
- getSearchSection,
+ LazyIconSearchView,
SearchEmptyState,
- sortItemsForDisplay,
- sortSearchItems,
- useFilteredIcons,
- useSearchTagSelection,
- useSectionTagsForDisplay
+ useSearchMenuState
} from './searchUtils';
-import {getLibraryFromPage, getLibraryFromUrl} from './library';
import {IconSearchSkeleton, useIconFilter} from './IconSearchView';
import {type Library, TAB_DEFS} from './constants';
// @ts-ignore
import {Page} from '@parcel/rsc';
-import React, {CSSProperties, lazy, Suspense, useEffect, useMemo, useRef, useState} from 'react';
+import React, {CSSProperties, Suspense, useCallback, useEffect, useRef} from 'react';
import {SearchTagGroups} from './SearchTagGroups';
import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
import {Tab, TabList, TabPanel, Tabs} from './Tabs';
import {TextFieldRef} from '@react-types/textfield';
-export function stripMarkdown(description: string | undefined) {
- return (description || '').replace(/\[(.*?)\]\(.*?\)/g, '$1');
-}
-
export const divider = style({
marginY: 8,
marginStart: -8,
@@ -50,7 +36,6 @@ export const divider = style({
width: '[3px]'
});
-const IconSearchView = lazy(() => import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView})));
interface SearchMenuProps {
pages: Page[],
@@ -77,16 +62,31 @@ function CloseButton({onClose}: {onClose: () => void}) {
export function SearchMenu(props: SearchMenuProps) {
let {pages, currentPage, onClose, overlayId, isSearchOpen} = props;
- const currentLibrary = getLibraryFromPage(currentPage);
- let [selectedLibrary, setSelectedLibrary] = useState(currentLibrary);
- let [searchValue, setSearchValue] = useState(props.initialSearchValue);
-
- const orderedTabs = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
-
const searchRef = useRef | null>(null);
+ const iconFilter = useIconFilter();
+
+ const {
+ selectedLibrary,
+ setSelectedLibrary,
+ orderedLibraries: orderedTabs,
+ searchValue,
+ setSearchValue,
+ sectionTagsForDisplay,
+ selectedTagId,
+ handleTagSelectionChange,
+ filteredIcons,
+ isIconsSelected,
+ selectedItems,
+ selectedSectionName,
+ getPlaceholderText
+ } = useSearchMenuState({
+ pages,
+ currentPage,
+ initialSearchValue: props.initialSearchValue,
+ initialTag: props.initialTag
+ });
// Auto-focus search field when menu opens
- // We don't put autoFocus on the SearchField because it will cause a flicker when switching tabs
useEffect(() => {
const timer = setTimeout(() => {
searchRef.current?.focus();
@@ -94,102 +94,8 @@ export function SearchMenu(props: SearchMenuProps) {
return () => clearTimeout(timer);
}, []);
- // Transform pages data into component data structure
- const transformedComponents = useMemo(() => {
- if (!pages || !Array.isArray(pages)) {
- return [];
- }
-
- const components = pages
- .filter(page => page.url && page.url.endsWith('.html') && getLibraryFromUrl(page.url) === selectedLibrary && !page.exports?.hideFromSearch)
- .map(page => {
- const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
- const title = getPageTitle(page);
- const section: string = getSearchSection(page);
- const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
- const description: string = stripMarkdown(page.exports?.description);
- const date: string | undefined = page.exports?.date;
- return {
- id: name,
- name: title,
- href: page.url,
- section,
- tags,
- description,
- date
- };
- });
-
- return components;
- }, [pages, selectedLibrary]);
-
- // Build sections for the selected library
- const sections = useMemo(() => {
- const sectionNames = Array.from(new Set(transformedComponents.map(c => c.section || 'Components')));
- return sectionNames.map(sectionName => ({
- id: sectionName.toLowerCase(),
- name: sectionName,
- children: transformedComponents.filter(c => (c.section || 'Components') === sectionName)
- })).sort((a, b) => {
- if (a.id === 'components') {
- return -1;
- }
- if (b.id === 'components') {
- return 1;
- }
- return 0;
- });
- }, [transformedComponents]);
-
- const sectionTags = useMemo(() => sections.map(s => ({id: s.id, name: s.name})), [sections]);
- const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
-
- const [selectedTagId, setSelectedTagId] = useSearchTagSelection(
- searchValue,
- sectionTags,
- resourceTags,
- props.initialTag || currentPage.exports?.section?.toLowerCase() || 'components'
- );
-
- const filteredIcons = useFilteredIcons(searchValue);
- const iconFilter = useIconFilter();
-
- let filteredComponents = useMemo(() => {
- if (!searchValue) {
- return sections;
- }
-
- const allItems = sections.flatMap(section => section.children);
-
- const sortedItems = filterAndSortSearchItems(allItems, searchValue, createSearchOptions());
-
- const resultsBySection = new Map();
-
- sortedItems.forEach(item => {
- const section = item.section || 'Components';
- if (!resultsBySection.has(section)) {
- resultsBySection.set(section, []);
- }
- resultsBySection.get(section)!.push(item);
- });
-
- return sections
- .map(section => ({
- ...section,
- children: resultsBySection.get(section.name) || []
- }))
- .filter(section => section.children.length > 0);
- }, [sections, searchValue]);
-
- const sectionTagsForDisplay = useSectionTagsForDisplay(
- sections,
- searchValue,
- selectedTagId,
- resourceTags.map(t => t.id)
- );
-
- const handleTabSelectionChange = React.useCallback((key: Key) => {
- setSelectedLibrary(key as typeof selectedLibrary);
+ const handleTabSelectionChange = useCallback((key: Key) => {
+ setSelectedLibrary(key as Library);
// Focus main search field of the newly selected tab
setTimeout(() => {
const lib = key as Library;
@@ -198,47 +104,7 @@ export function SearchMenu(props: SearchMenuProps) {
searchRef.current.focus();
}
}, 10);
- }, []);
-
- const handleSectionSelectionChange = React.useCallback((keys: Iterable) => {
- const firstKey = Array.from(keys)[0] as string;
- if (firstKey) {
- setSelectedTagId(firstKey);
- }
- }, [setSelectedTagId]);
-
- const handleIconSelectionChange = React.useCallback((keys: Iterable) => {
- const firstKey = Array.from(keys)[0] as string;
- if (firstKey) {
- setSelectedTagId(firstKey);
- }
- }, [setSelectedTagId]);
-
- const selectedItems = useMemo(() => {
- let items: typeof transformedComponents = [];
- if (selectedTagId === 'all') {
- items = filteredComponents.flatMap(s => s.children) || [];
- if (searchValue.trim().length > 0) {
- items = sortSearchItems(items, searchValue, createSearchOptions());
- } else {
- items = sortItemsForDisplay(items, searchValue);
- }
- } else {
- items = (filteredComponents.find(s => s.id === selectedTagId)?.children) || [];
- items = sortItemsForDisplay(items, searchValue);
- }
-
- return items;
- }, [filteredComponents, selectedTagId, searchValue]);
-
- const selectedSectionName = useMemo(() => {
- if (selectedTagId === 'all') {
- return 'All';
- }
- return (filteredComponents.find(s => s.id === selectedTagId)?.name)
- || (sections.find(s => s.id === selectedTagId)?.name)
- || 'Items';
- }, [filteredComponents, sections, selectedTagId]);
+ }, [setSelectedLibrary]);
useEffect(() => {
const handleNavigationStart = () => {
@@ -278,13 +144,10 @@ export function SearchMenu(props: SearchMenuProps) {
{orderedTabs.map((tab, i) => {
const tabResourceTags = getResourceTags(tab.id);
- const selectedResourceTag = tabResourceTags.find(tag => tag.id === selectedTagId);
- const placeholderText = selectedResourceTag
- ? `Search ${selectedResourceTag.name}`
- : `Search ${tab.label}`;
+ const placeholderText = getPlaceholderText(tab.label);
return (
-
+
+
+ ) : null}
{children}
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index d7ba0ae707f..23710ff51ae 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -1,15 +1,16 @@
'use client';
import {Content, Heading, IllustratedMessage} from '@react-spectrum/s2';
-import {getLibraryFromPage} from './library';
+import {getLibraryFromPage, getLibraryFromUrl} from './library';
// @ts-ignore
import {iconList, useIconFilter} from './IconSearchView';
+import {Key} from 'react-aria-components';
import {type Library, TAB_DEFS} from './constants';
// eslint-disable-next-line monorepo/no-internal-import
import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
// @ts-ignore
import {Page} from '@parcel/rsc';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
export interface SearchableItem {
@@ -39,6 +40,161 @@ export interface Tag {
name: string
}
+/**
+ * Strips markdown link syntax from a string, keeping only the link text.
+ */
+export function stripMarkdown(description: string | undefined): string {
+ return (description || '').replace(/\[(.*?)\]\(.*?\)/g, '$1');
+}
+
+/**
+ * Transforms a page into a ComponentItem for search/display.
+ */
+export function transformPageToComponentItem(page: Page): ComponentItem {
+ const name = page.url.replace(/^\//, '').replace(/\.html$/, '');
+ const title = getPageTitle(page);
+ const section: string = getSearchSection(page);
+ const tags: string[] = (page.exports?.tags || page.exports?.keywords as string[]) || [];
+ const description: string = stripMarkdown(page.exports?.description);
+ const date: string | undefined = page.exports?.date;
+ return {
+ id: name,
+ name: title,
+ href: page.url,
+ section,
+ tags,
+ description,
+ date
+ };
+}
+
+/**
+ * Builds sections from pages for a given library.
+ * Sorts sections with 'Components' first.
+ */
+export function buildSectionsFromPages(pages: Page[], library: Library): Section[] {
+ const filteredPages = pages.filter(page =>
+ page.url &&
+ page.url.endsWith('.html') &&
+ getLibraryFromUrl(page.url) === library &&
+ !page.exports?.hideFromSearch
+ );
+
+ const components = filteredPages.map(transformPageToComponentItem);
+
+ const sectionNames = Array.from(new Set(components.map(c => c.section || 'Components')));
+
+ return sectionNames
+ .map(sectionName => ({
+ id: sectionName.toLowerCase(),
+ name: sectionName,
+ children: components.filter(c => (c.section || 'Components') === sectionName)
+ }))
+ .sort((a, b) => {
+ if (a.id === 'components') {
+ return -1;
+ }
+ if (b.id === 'components') {
+ return 1;
+ }
+ return 0;
+ });
+}
+
+/**
+ * Gets items for a given section selection (handles 'all' and specific sections).
+ */
+export function getItemsForSection(
+ sections: Section[],
+ sectionId: string,
+ searchValue: string,
+ resourceTagIds: string[] = []
+): ComponentItem[] {
+ // Check if this is a resource tag (e.g., icons) - return empty, handled separately
+ if (resourceTagIds.includes(sectionId)) {
+ return [];
+ }
+
+ let items: ComponentItem[];
+ if (sectionId === 'all') {
+ items = sections.flatMap(s => s.children);
+ if (searchValue.trim().length > 0) {
+ items = sortSearchItems(items, searchValue, createSearchOptions());
+ } else {
+ items = sortItemsForDisplay(items, searchValue);
+ }
+ } else {
+ items = sections.find(s => s.id === sectionId)?.children || [];
+ items = sortItemsForDisplay(items, searchValue);
+ }
+
+ return items;
+}
+
+/**
+ * Filters sections based on search value.
+ */
+export function filterSections(sections: Section[], searchValue: string): Section[] {
+ if (!searchValue) {
+ return sections;
+ }
+
+ const allItems = sections.flatMap(section => section.children);
+ const sortedItems = filterAndSortSearchItems(allItems, searchValue, createSearchOptions());
+
+ const resultsBySection = new Map();
+ sortedItems.forEach(item => {
+ const section = item.section || 'Components';
+ if (!resultsBySection.has(section)) {
+ resultsBySection.set(section, []);
+ }
+ resultsBySection.get(section)!.push(item);
+ });
+
+ return sections
+ .map(section => ({
+ ...section,
+ children: resultsBySection.get(section.name) || []
+ }))
+ .filter(section => section.children.length > 0);
+}
+
+/**
+ * Hook to build and manage sections for a library with search filtering.
+ */
+export function useLibrarySections(pages: Page[], library: Library, searchValue: string) {
+ const sections = useMemo(
+ () => buildSectionsFromPages(pages, library),
+ [pages, library]
+ );
+
+ const filteredSections = useMemo(
+ () => filterSections(sections, searchValue),
+ [sections, searchValue]
+ );
+
+ const getSectionNames = useCallback(() => {
+ return sections.map(s => s.name);
+ }, [sections]);
+
+ return {sections, filteredSections, getSectionNames};
+}
+
+/**
+ * Creates search options for filtering/sorting Page objects directly.
+ */
+export function createSearchOptionsForPages(): SearchOptions {
+ return {
+ getName: (page: Page) => getPageTitle(page),
+ getTags: (page: Page) => page.exports?.tags || [],
+ getDate: (page: Page) => page.exports?.date,
+ shouldUseDateSort: (page: Page) => {
+ const section = getSearchSection(page);
+ return section === 'Blog' || section === 'Releases';
+ }
+ };
+}
+
export interface SearchOptions {
/**
* Function to extract the name from an item.
@@ -341,3 +497,174 @@ export function SearchEmptyState({searchValue, libraryLabel}: {searchValue: stri
);
}
+
+export const LazyIconSearchView = React.lazy(() =>
+ import('./IconSearchView').then(({IconSearchView}) => ({default: IconSearchView}))
+);
+
+export interface SearchMenuStateOptions {
+ pages: Page[],
+ currentPage: Page,
+ initialSearchValue?: string,
+ initialTag?: string
+}
+
+export interface SearchMenuState {
+ // Library state
+ selectedLibrary: Library,
+ setSelectedLibrary: (library: Library) => void,
+ orderedLibraries: ReturnType,
+
+ // Search state
+ searchValue: string,
+ setSearchValue: (value: string) => void,
+
+ // Section state
+ sections: Section[],
+ filteredSections: Section[],
+ sectionTags: Tag[],
+ sectionTagsForDisplay: Tag[],
+
+ // Resource tags (icons, etc.)
+ resourceTags: Tag[],
+ resourceTagIds: string[],
+
+ // Tag selection
+ selectedTagId: string,
+ setSelectedTagId: (id: string) => void,
+ handleTagSelectionChange: (keys: Iterable) => void,
+
+ // Icons
+ filteredIcons: typeof iconList,
+ iconFilter: ReturnType,
+ isIconsSelected: boolean,
+
+ // Computed items
+ selectedItems: ComponentItem[],
+ selectedSectionName: string,
+
+ // Helpers
+ getPlaceholderText: (libraryLabel: string) => string
+}
+
+export function useSearchMenuState(options: SearchMenuStateOptions): SearchMenuState {
+ const {pages, currentPage, initialSearchValue = '', initialTag} = options;
+
+ // Library state
+ const currentLibrary = getLibraryFromPage(currentPage);
+ const [selectedLibrary, setSelectedLibrary] = useState(currentLibrary);
+ const orderedLibraries = useMemo(() => getOrderedLibraries(currentPage), [currentPage]);
+
+ // Search state
+ const [searchValue, setSearchValue] = useState(initialSearchValue);
+
+ // Build sections for the selected library
+ const {sections, filteredSections} = useLibrarySections(
+ pages || [],
+ selectedLibrary,
+ searchValue
+ );
+
+ // Section and resource tags
+ const sectionTags = useMemo(() => sections.map(s => ({id: s.id, name: s.name})), [sections]);
+ const resourceTags = useMemo(() => getResourceTags(selectedLibrary), [selectedLibrary]);
+ const resourceTagIds = useMemo(() => resourceTags.map(t => t.id), [resourceTags]);
+
+ // Compute initial selected section
+ const initialSelectedSection = useMemo(() => {
+ const currentSection = sections.find(s =>
+ s.children.some(c => c.href === currentPage.url)
+ );
+ return initialTag || currentSection?.id || currentPage.exports?.section?.toLowerCase() || 'components';
+ }, [initialTag, currentPage, sections]);
+
+ // Tag selection
+ const [selectedTagId, setSelectedTagId] = useSearchTagSelection(
+ searchValue,
+ sectionTags,
+ resourceTags,
+ initialSelectedSection
+ );
+
+ // Section tags for display (includes "All" when searching)
+ const sectionTagsForDisplay = useSectionTagsForDisplay(
+ sections,
+ searchValue,
+ selectedTagId,
+ resourceTagIds
+ );
+
+ // Icons
+ const filteredIcons = useFilteredIcons(searchValue);
+ const iconFilter = useIconFilter();
+ const isIconsSelected = selectedTagId === 'icons';
+
+ // Handler for tag selection change (works with TagGroup's onSelectionChange)
+ const handleTagSelectionChange = useCallback((keys: Iterable) => {
+ const firstKey = Array.from(keys)[0] as string;
+ if (firstKey) {
+ setSelectedTagId(firstKey);
+ }
+ }, [setSelectedTagId]);
+
+ // Computed selected items
+ const selectedItems = useMemo(() => {
+ return getItemsForSection(filteredSections, selectedTagId, searchValue, resourceTagIds);
+ }, [filteredSections, selectedTagId, searchValue, resourceTagIds]);
+
+ // Computed section name for aria-label
+ const selectedSectionName = useMemo(() => {
+ if (selectedTagId === 'all') {
+ return 'All';
+ }
+ return (filteredSections.find(s => s.id === selectedTagId)?.name)
+ || (sections.find(s => s.id === selectedTagId)?.name)
+ || 'Items';
+ }, [filteredSections, sections, selectedTagId]);
+
+ // Helper to get placeholder text based on selected resource tag
+ const getPlaceholderText = useCallback((libraryLabel: string) => {
+ const selectedResourceTag = resourceTags.find(tag => tag.id === selectedTagId);
+ return selectedResourceTag
+ ? `Search ${selectedResourceTag.name}`
+ : `Search ${libraryLabel}`;
+ }, [resourceTags, selectedTagId]);
+
+ return {
+ // Library state
+ selectedLibrary,
+ setSelectedLibrary,
+ orderedLibraries,
+
+ // Search state
+ searchValue,
+ setSearchValue,
+
+ // Section state
+ sections,
+ filteredSections,
+ sectionTags,
+ sectionTagsForDisplay,
+
+ // Resource tags
+ resourceTags,
+ resourceTagIds,
+
+ // Tag selection
+ selectedTagId,
+ setSelectedTagId,
+ handleTagSelectionChange,
+
+ // Icons
+ filteredIcons,
+ iconFilter,
+ isIconsSelected,
+
+ // Computed items
+ selectedItems,
+ selectedSectionName,
+
+ // Helpers
+ getPlaceholderText
+ };
+}
diff --git a/packages/dev/s2-docs/src/styleProperties.ts b/packages/dev/s2-docs/src/styleProperties.ts
index 7df98cc25ab..ad1e6501f16 100644
--- a/packages/dev/s2-docs/src/styleProperties.ts
+++ b/packages/dev/s2-docs/src/styleProperties.ts
@@ -413,7 +413,7 @@ const shorthandMapping: {[key: string]: {values: string[], mapping: string[]}} =
mapping: ['overflowX', 'overflowY', 'textOverflow', 'whiteSpace']
},
font: {
- values: ['fontSize'],
+ values: [...fontSize],
mapping: ['fontFamily', 'fontSize', 'fontWeight', 'lineHeight', 'color']
}
};
@@ -465,18 +465,6 @@ export const spacingTypeValues = {
negativeSpacing: negativeBaseSpacingValues
};
-// a mapping of value to relative links that should be replaced in place
-// opted NOT to link to Fonts from 'ui', 'code', etc since the visual example
-// is so close to the area in the table where those are rendered
-const relativeLinks: {[key: string]: string} = {
- 'text-to-control': '#dimensions',
- 'text-to-visual': '#dimensions',
- 'edge-to-text': '#dimensions',
- 'pill': '#dimensions',
- 'baseColors': '#colors',
- 'fontSize': '#text'
-};
-
// a mapping of value to mdn links that should be replaced in place
const mdnTypeLinks: {[key: string]: string} = {
'string': 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String',
@@ -546,8 +534,6 @@ export function getPropertyDefinitions(propertyCategory: string): {[key: string]
if (mdnTypeLinks[value]) {
links[value] = {href: mdnTypeLinks[value]};
- } else if (relativeLinks[value]) {
- links[value] = {href: relativeLinks[value], isRelative: true};
}
}
}
@@ -576,8 +562,6 @@ export function getShorthandDefinitions(): {[key: string]: StyleMacroPropertyDef
if (mdnTypeLinks[value]) {
links[value] = {href: mdnTypeLinks[value]};
- } else if (relativeLinks[value]) {
- links[value] = {href: relativeLinks[value], isRelative: true};
}
}
diff --git a/packages/dev/s2-docs/src/types.tsx b/packages/dev/s2-docs/src/types.tsx
index 015c5f53727..d9295b9278d 100644
--- a/packages/dev/s2-docs/src/types.tsx
+++ b/packages/dev/s2-docs/src/types.tsx
@@ -10,12 +10,15 @@
* governing permissions and limitations under the License.
*/
+import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/s2';
import Asterisk from '../../../@react-spectrum/s2/ui-icons/Asterisk';
+import {BackgroundColorsDisclosure, GlobalColorsDisclosure, SemanticColorsDisclosure, TextColorsDisclosure} from './S2Colors';
import {Code, styles as codeStyles} from './Code';
import {ColorLink, Link as SpectrumLink} from './Link';
import {getDoc} from 'globals-docs';
import Markdown from 'markdown-to-jsx';
import React, {ReactNode} from 'react';
+import {S2Typography} from './S2Typography';
import {spacingTypeValues} from './styleProperties';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table';
@@ -696,7 +699,7 @@ function TemplateLiteral({elements}: TTemplate) {
);
}
-const styleMacroTypeLinks = {
+const styleMacroValueDesc = {
'baseSpacing': {
description: 'Base spacing values in pixels, following a 4px grid. Will be converted to rem.',
body: (
@@ -723,6 +726,48 @@ const styleMacroTypeLinks = {
)
},
+ 'text-to-control': {
+ description: 'Default spacing between text and a control (e.g., label and input). Scales with font size.'
+ },
+ 'text-to-visual': {
+ description: 'Default spacing between text and a visual element (e.g., icon). Scales with font size.'
+ },
+ 'edge-to-text': {
+ description: 'Default spacing between the edge of a control and its text. Relative to control height.'
+ },
+ 'pill': {
+ description: 'Default spacing between the edge of a pill-shaped control and its text. Relative to control height.'
+ },
+ 'baseColors': {
+ description: <>
- <>
-
- );
-}
-
interface StyleMacroPropertyDefinition {
values: string[],
additionalTypes?: string[],
@@ -765,94 +790,182 @@ interface StyleMacroPropertiesProps {
export function StyleMacroProperties({properties}: StyleMacroPropertiesProps) {
let propertyNames = Object.keys(properties);
- let hasMapping = Object.values(properties).some(p => p.mapping);
return (
-
-
+ {propDef.description && (
+
+
+
+ );
+ })}
+
);
}
diff --git a/packages/react-aria-components/docs/CheckboxGroup.mdx b/packages/react-aria-components/docs/CheckboxGroup.mdx
index b4d5082e6cb..1ecece634b0 100644
--- a/packages/react-aria-components/docs/CheckboxGroup.mdx
+++ b/packages/react-aria-components/docs/CheckboxGroup.mdx
@@ -13,7 +13,8 @@ export default Layout;
import docs from 'docs:react-aria-components';
import statelyDocs from 'docs:@react-stately/checkbox';
import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs';
+import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts';
+import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable, VersionBadge, ClassAPI} from '@react-spectrum/docs';
import styles from '@react-spectrum/docs/src/docs.css';
import packageData from 'react-aria-components/package.json';
import Anatomy from '@react-aria/checkbox/docs/checkboxgroup-anatomy.svg';
@@ -609,3 +610,40 @@ function SelectionCount() {
### Hooks
If you need to customize things further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See [useCheckboxGroup](useCheckboxGroup.html) for more details.
+
+## Testing
+
+### Test utils
+ ...
+
+ );
+ let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
+ expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0);
+
+ await checkboxGroupTester.toggleCheckbox({checkbox: 0});
+ expect(checkboxGroupTester.checkboxes[0]).toBeChecked();
+ expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
+
+ await checkboxGroupTester.toggleCheckbox({checkbox: 4});
+ expect(checkboxGroupTester.checkboxes[4]).toBeChecked();
+ expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
+});
+```
+
+
+
+
+
+
+
+ );
+ let button = getByRole('button');
+ let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
+ await dialogTester.open();
+ let dialog = dialogTester.dialog;
+ expect(dialog).toHaveAttribute('role', 'alertdialog');
+ await dialogTester.close();
+ expect(dialog).not.toBeInTheDocument();
+});
+```
+
+
+ ...
+
+ );
+
+ let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
+ let radios = radioGroupTester.radios;
+ expect(radioGroupTester.selectedRadio).toBeFalsy();
+
+ await radioGroupTester.triggerRadio({radio: radios[0]});
+ expect(radioGroupTester.selectedRadio).toBe(radios[0]);
+
+ await radioGroupTester.triggerRadio({radio: radios[1]});
+ expect(radioGroupTester.selectedRadio).toBe(radios[1]);
+});
+```
+
+(
const itemStyles = tv({
extend: focusRing,
- base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-y dark:border-y-neutral-700 border-transparent first:border-t-0 last:border-b-0 first:rounded-t-lg last:rounded-b-lg -mb-px last:mb-0 -outline-offset-2',
+ base: 'relative flex gap-3 cursor-default select-none py-2 px-3 text-sm text-neutral-900 dark:text-neutral-200 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 first:rounded-t-lg last:rounded-b-lg last:mb-0 -outline-offset-2',
variants: {
isSelected: {
false: 'hover:bg-neutral-100 dark:hover:bg-neutral-700/60',
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index a1455d41cca..3abae4b4e7d 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -106,7 +106,7 @@ export function TableBody(props: TableBodyProps) {
const rowStyles = tv({
extend: focusRing,
- base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40'
+ base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40 last:rounded-b-lg'
});
export function Row(
@@ -135,7 +135,7 @@ export function Row(
const cellStyles = tv({
extend: focusRing,
- base: 'box-border border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
+ base: 'box-border border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg'
});
export function Cell(props: CellProps) {
diff --git a/starters/tailwind/src/Tree.tsx b/starters/tailwind/src/Tree.tsx
index bd821a6036a..67bf9bb338d 100644
--- a/starters/tailwind/src/Tree.tsx
+++ b/starters/tailwind/src/Tree.tsx
@@ -16,7 +16,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
const itemStyles = tv({
extend: focusRing,
- base: 'relative font-sans w-48 flex group gap-3 cursor-default select-none py-1 px-3 text-sm text-neutral-900 dark:text-neutral-200 bg-white dark:bg-neutral-900 border-y dark:border-y-neutral-700 border-transparent first:border-t-0 last:border-b-0 -mb-px last:mb-0 -outline-offset-2',
+ base: 'relative font-sans w-48 flex group gap-3 cursor-default select-none py-1 px-3 text-sm text-neutral-900 dark:text-neutral-200 bg-white dark:bg-neutral-900 border-t dark:border-t-neutral-700 border-transparent first:border-t-0 -outline-offset-2 first:rounded-t-lg last:rounded-b-lg',
variants: {
isSelected: {
false: 'hover:bg-neutral-100 dark:hover:bg-neutral-800',
The backgroundColor property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.
+
+
+ The color property supports the following values, in addition to the semantic and global colors. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.
+
+
+ The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
+
+
+ The backgroundColor property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.
-
-
- The color property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.
-
-
- The following values are available across all color properties. Prefer to use semantic colors over global colors when they represent a specific meaning.
-
-
- The following values are available across all color properties.
-
-
- The following values are available across all color properties.
+
+
+ baseColors consists of the following values below:,
+ body: (
+ <>
+ '50%', '100vw', '50vh'
},
@@ -731,26 +776,6 @@ const styleMacroTypeLinks = {
}
};
-interface StyleMacroTypePopoverProps {
- typeName: string,
- description: ReactNode,
- body?: ReactNode,
- link?: string
-}
-
-function StyleMacroTypePopover({typeName, description, body}: StyleMacroTypePopoverProps) {
- return (
- - {description} -
- {body} - -
+ {propDef.description}
+
+ )}
+