diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx index 7c83151522b..490b37962d1 100644 --- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx @@ -71,6 +71,7 @@ function Example() { Set the `value` or `defaultValue` to an array of numbers to render multiple thumbs. Each thumb should have an `aria-label` to describe it for assistive technologies (provided via `thumbLabels` here). ```tsx render +"use client"; import {Slider} from 'vanilla-starter/Slider'; llms.txt file contains a list of all the markdown pages available in the React Aria documentation. \ No newline at end of file diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx index 7a2f436cdf3..44c83341302 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx @@ -51,6 +51,7 @@ Number fields can be used to represent many different types of numeric values, e We use the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API built into browsers to handle all of these formatting requirements across all locales. Our number field component supports most of the formatting options that the Intl API supports, which ensures that it is international friendly and supports many common formatting options out of the box. The browser currently only provides formatting support, however, not parsing support, so we built a custom number parser using information from the formatter. We'll discuss how this works in detail later in the post. ```tsx render +"use client"; import {NumberField} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx index 90a363736d9..1c925bd5e4d 100644 --- a/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/s2/Breadcrumbs.mdx @@ -12,6 +12,7 @@ export const description = 'Display a hierarchy of links to the current page or {docs.exports.Breadcrumbs.description} ```tsx render docs={docs.exports.Breadcrumbs} links={docs.links} props={['size', 'isDisabled']} initialProps={{}} type="s2" +"use client"; import {Breadcrumbs, Breadcrumb} from '@react-spectrum/s2'; @@ -74,7 +75,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; padding: 16, boxSizing: 'border-box', borderWidth: 1, - borderStyle: 'solid', + borderStyle: 'solid', borderColor: 'gray-300', borderRadius: 'default', resize: 'horizontal', diff --git a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx index 4540881d585..ca2066c9636 100644 --- a/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/ButtonGroup.mdx @@ -12,6 +12,7 @@ export const description = 'A grouping of buttons whose actions are related to e {docs.exports.ButtonGroup.description} ```tsx render docs={docs.exports.ButtonGroup} links={docs.links} props={['orientation', 'align', 'size', 'isDisabled']} type="s2" +"use client"; import {ButtonGroup, Button} from '@react-spectrum/s2'; @@ -37,7 +38,7 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; padding: 16, boxSizing: 'border-box', borderWidth: 1, - borderStyle: 'solid', + borderStyle: 'solid', borderColor: 'gray-300', borderRadius: 'default', resize: 'horizontal', diff --git a/packages/dev/s2-docs/pages/s2/Card.mdx b/packages/dev/s2-docs/pages/s2/Card.mdx index da8e7ff398a..8313f4554dd 100644 --- a/packages/dev/s2-docs/pages/s2/Card.mdx +++ b/packages/dev/s2-docs/pages/s2/Card.mdx @@ -236,6 +236,7 @@ import Select from '@react-spectrum/s2/icons/Select'; Wrap a card in a [Skeleton](Skeleton) to display a loading state. Placeholder text content and images are displayed in a skeleton style. ```tsx render docs={docs.exports.Skeleton} links={docs.links} props={['isLoading']} initialProps={{isLoading: true}} type="s2" wide +"use client"; import {Skeleton, Card, CardPreview, Image, Content, Text} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx index cab2905c377..014e40a17ee 100644 --- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx @@ -15,6 +15,7 @@ export const description = 'Allows a user to select one or more items in a list {docs.exports.CheckboxGroup.description} ```tsx render docs={docs.exports.CheckboxGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite sports'}} type="s2" +"use client"; import {CheckboxGroup, Checkbox} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx index 7c9ad5d75b3..61dfb4f0daa 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx @@ -15,6 +15,7 @@ export const description = 'Combines a text input with a listbox, and allows a u {docs.exports.ComboBox.description} ```tsx render docs={docs.exports.ComboBox} links={docs.links} props={['label', 'placeholder', 'size', 'labelPosition', 'description', 'contextualHelp', 'isDisabled']} initialProps={{label: 'Ice cream flavor', placeholder: 'Select a flavor'}} type="s2" +"use client"; import {ComboBox, ComboBoxItem} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx index b9c0100c4e0..4c71e5901e9 100644 --- a/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx +++ b/packages/dev/s2-docs/pages/s2/ContextualHelp.mdx @@ -12,6 +12,7 @@ export const description = 'Shows extra information about an adjacent component. {docs.exports.ContextualHelp.description} ```tsx render docs={docs.exports.ContextualHelp} links={docs.links} props={['variant', 'size', 'placement']} initialProps={{variant: 'help'}} type="s2" +"use client"; import {ContextualHelp, Heading, Content, Footer, Link} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/Form.mdx b/packages/dev/s2-docs/pages/s2/Form.mdx index 5b4cb93ab15..640f3d1c4a1 100644 --- a/packages/dev/s2-docs/pages/s2/Form.mdx +++ b/packages/dev/s2-docs/pages/s2/Form.mdx @@ -13,6 +13,7 @@ export const description = 'Provides layout and alignment for a grouping of fiel ```tsx render docs={docs.exports.Form} links={docs.links} props={['size', 'labelPosition', 'labelAlign', 'necessityIndicator', 'isRequired', 'isDisabled', 'isEmphasized']} type="s2" +"use client"; import {Form, TextField, Checkbox, ButtonGroup, Button} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx index 9c753d2f71b..f97556c364d 100644 --- a/packages/dev/s2-docs/pages/s2/Picker.mdx +++ b/packages/dev/s2-docs/pages/s2/Picker.mdx @@ -15,6 +15,7 @@ export const description = 'Displays a collapsible list of options, and allows a {docs.exports.Picker.description} ```tsx render docs={docs.exports.Picker} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'description', 'contextualHelp', 'isQuiet', 'isDisabled']} initialProps={{label: 'Ice cream flavor'}} type="s2" +"use client"; import {Picker, PickerItem} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx index 70fc70de365..bcb472c63f6 100644 --- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx @@ -15,6 +15,7 @@ export const description = 'Allows a user to select a single item from a list of {docs.exports.RadioGroup.description} ```tsx render docs={docs.exports.RadioGroup} links={docs.links} props={['label', 'size', 'orientation', 'labelPosition', 'description', 'contextualHelp', 'isEmphasized', 'isDisabled']} initialProps={{label: 'Favorite pet'}} type="s2" +"use client"; import {RadioGroup, Radio} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx index bc1a77929c9..08cfcba3d56 100644 --- a/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx +++ b/packages/dev/s2-docs/pages/s2/SegmentedControl.mdx @@ -12,6 +12,7 @@ export const description = 'A mutually exclusive group of buttons used for view {docs.exports.SegmentedControl.description} ```tsx render docs={docs.exports.SegmentedControl} links={docs.links} props={['isJustified', 'isDisabled']} initialProps={{'aria-label': 'Time granularity'}} type="s2" wide +"use client"; import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx index ee62a5b06c3..e788adce27a 100644 --- a/packages/dev/s2-docs/pages/s2/TableView.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView.mdx @@ -15,6 +15,7 @@ export const description = 'Displays data in rows and columns, with row selectio {docs.exports.TableView.description} ```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple'}} type="s2" +"use client"; import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; diff --git a/packages/dev/s2-docs/pages/s2/TagGroup.mdx b/packages/dev/s2-docs/pages/s2/TagGroup.mdx index 9009d062de4..346b1ec8568 100644 --- a/packages/dev/s2-docs/pages/s2/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/TagGroup.mdx @@ -11,6 +11,7 @@ export const description = 'Displays a list of items, with support for keyboard {docs.exports.TagGroup.description} ```tsx render docs={docs.exports.TagGroup} links={docs.links} props={['label', 'selectionMode', 'size', 'labelPosition', 'maxRows', 'description', 'contextualHelp', 'isEmphasized']} initialProps={{label: 'Ice cream flavors', selectionMode: 'multiple', maxRows: 2}} controlOptions={{maxRows: {minValue: 1}}} type="s2" +"use client"; import {TagGroup, Tag} from '@react-spectrum/s2'; diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx index e21a7afcc50..6bab6e3ac6a 100644 --- a/packages/dev/s2-docs/pages/s2/TreeView.mdx +++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx @@ -15,6 +15,7 @@ export const description = 'Displays hierarchical data with selection and collap {docs.exports.TreeView.description} ```tsx render docs={docs.exports.TreeView} links={docs.links} props={['selectionMode']} initialProps={{selectionMode: 'multiple'}} type="s2" wide +"use client"; import {TreeView, TreeViewItem, TreeViewItemContent} from '@react-spectrum/s2'; llms.txt file contains a list of all the markdown pages available in the React Spectrum documentation. diff --git a/packages/dev/s2-docs/pages/s2/forms.mdx b/packages/dev/s2-docs/pages/s2/forms.mdx index 1da75e033d1..378c4f629bc 100644 --- a/packages/dev/s2-docs/pages/s2/forms.mdx +++ b/packages/dev/s2-docs/pages/s2/forms.mdx @@ -17,6 +17,7 @@ export const description = 'How to build accessible forms with validation.'; Accessible forms start with clear, descriptive labels for each field. Use the `label` prop to add a visible label to any field. Additional help text can also be added via the `description` prop. The label and help text are announced by screen readers when the field is focused. ```tsx render +"use client"; import {TextField} from '@react-spectrum/s2'; - + @@ -50,8 +50,6 @@ export const hideFromSearch = true; } )}} /> - - - - + + diff --git a/packages/dev/s2-docs/pages/s2/migrating.mdx b/packages/dev/s2-docs/pages/s2/migrating.mdx index 44b3db59074..2aa45260848 100644 --- a/packages/dev/s2-docs/pages/s2/migrating.mdx +++ b/packages/dev/s2-docs/pages/s2/migrating.mdx @@ -241,7 +241,6 @@ No updates needed. - If within `Breadcrumbs`: Update `Item` to be a `Breadcrumb` - If within `Picker`: Update `Item` to be a `PickerItem` - If within `ComboBox`: Update `Item` to be a `ComboBoxItem` -- If within `ListBox`: Update `Item` to be a `ListBoxItem` - If within `TabList`: Update `Item` to be a `Tab` - If within `TabPanels`: Update `Item` to be a `TabPanel` and remove surrounding `TabPanels` - Update `key` to be `id` (and keep `key` if rendered inside `array.map`) @@ -251,10 +250,6 @@ No updates needed. - Change `variant="overBackground"` to `staticColor="white"` - If `a` was used inside `Link` (legacy API), remove the `a` and apply props (i.e `href`) directly to `Link` -### ListBox - -- Update `Item` to be a `ListBoxItem` - ### Menu - Update `Item` to be a `MenuItem` diff --git a/packages/dev/s2-docs/pages/s2/selection.mdx b/packages/dev/s2-docs/pages/s2/selection.mdx index 7dbb5d1636a..37949a6ebf1 100644 --- a/packages/dev/s2-docs/pages/s2/selection.mdx +++ b/packages/dev/s2-docs/pages/s2/selection.mdx @@ -1186,6 +1186,7 @@ import AlertNotice from '@react-spectrum/s2/illustrations/linear/AlertNotice'; ``` ```tsx render wide type="s2" +"use client"; import {TableView, TableHeader, Column, Row, TableBody, Cell} from '@react-spectrum/s2'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; diff --git a/packages/dev/s2-docs/src/SettingsProvider.tsx b/packages/dev/s2-docs/src/SettingsProvider.tsx index 2eaf68b6219..b7a89b1a1dc 100644 --- a/packages/dev/s2-docs/src/SettingsProvider.tsx +++ b/packages/dev/s2-docs/src/SettingsProvider.tsx @@ -2,11 +2,13 @@ import {type ColorScheme, SettingsContext} from './SettingsContext'; import {Provider} from '@react-spectrum/s2'; -import React, {ReactNode, useCallback, useSyncExternalStore} from 'react'; +import React, {JSX, ReactNode, useCallback, useSyncExternalStore} from 'react'; import {useLocalStorage} from './useLocalStorage'; interface SettingsProviderProps { - children: ReactNode + children: ReactNode, + elementType?: keyof JSX.IntrinsicElements, + locale?: string } function subscribeToColorScheme(callback: () => void) { @@ -53,7 +55,7 @@ export function useSettingsState() { }; } -export function SettingsContextProvider({children}: SettingsProviderProps) { +export function SettingsContextProvider({children, elementType, locale}: SettingsProviderProps) { let {colorScheme, toggleColorScheme, systemColorScheme, providerColorScheme} = useSettingsState(); return ( @@ -63,7 +65,7 @@ export function SettingsContextProvider({children}: SettingsProviderProps) { toggleColorScheme, systemColorScheme }}> - + {children} diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx index de7f7bdc4e1..992f9d623bc 100644 --- a/packages/react-aria-components/docs/Tree.mdx +++ b/packages/react-aria-components/docs/Tree.mdx @@ -282,6 +282,7 @@ A Tree consists of a container element, with items containing data inside. The i If the tree supports item selection, each item can optionally include a selection checkbox. ```tsx render=false +"use client"; import {Tree, TreeItem, TreeItemContent, Button, Checkbox, SelectionIndicator} from 'react-aria-components'; diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx index 501379df2de..e8b58b79dd5 100644 --- a/packages/react-aria-components/src/utils.tsx +++ b/packages/react-aria-components/src/utils.tsx @@ -20,7 +20,7 @@ interface SlottedValue { slots?: Record } -export type SlottedContextValue = (SlottedValue & T) | null | undefined; +export type SlottedContextValue = SlottedValue | T | null | undefined; export type ContextValue = SlottedContextValue>; type ProviderValue = [Context, T]; diff --git a/starters/docs/src/RangeCalendar.css b/starters/docs/src/RangeCalendar.css index 8aac1390a1b..5312b7d4be3 100644 --- a/starters/docs/src/RangeCalendar.css +++ b/starters/docs/src/RangeCalendar.css @@ -35,6 +35,7 @@ padding: 0 calc(var(--gap) / 2); position: relative; z-index: 1; + outline: none; span { display: flex; diff --git a/starters/docs/src/theme.css b/starters/docs/src/theme.css index 3453b27cc6a..99ba536c990 100644 --- a/starters/docs/src/theme.css +++ b/starters/docs/src/theme.css @@ -156,7 +156,7 @@ --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h); --highlight-foreground: white; --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%); - --invalid-color: oklch(from var(--red) var(--lightness-900) c h); + --invalid-color: oklch(from var(--red) var(--lightness-1000) c h); --field-background: var(--gray-50); }