From 1b142187f0a8e309674e913ca265b79c4fd2da44 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 3 Oct 2025 09:42:34 -0700 Subject: [PATCH 1/3] docs: Add docs for component CSS variables --- .../s2-docs/pages/react-aria/Disclosure.mdx | 8 ++++- .../dev/s2-docs/pages/react-aria/Modal.mdx | 8 ++++- .../dev/s2-docs/pages/react-aria/Popover.mdx | 8 ++++- .../dev/s2-docs/pages/react-aria/Tooltip.mdx | 7 +++- .../dev/s2-docs/pages/react-aria/Tree.mdx | 7 +++- packages/dev/s2-docs/src/StateTable.tsx | 36 +++++++++++++++++-- 6 files changed, 67 insertions(+), 7 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx index 976330b2e80..b6aae5177a1 100644 --- a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx @@ -103,4 +103,10 @@ import {Settings} from 'lucide-react'; - + diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index ebe154987ff..78cdda09576 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -188,7 +188,13 @@ const CustomTrigger = React.forwardRef((props, ref) => ( - +` element. Useful for sizing the modal backdrop.' + }} /> ### Dialog diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index 3a1e936c328..8e22b45dfe1 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -152,7 +152,13 @@ function Example() { - + ### OverlayArrow diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index e7f3454f23c..4b4391ac7ec 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -157,7 +157,12 @@ const CustomTrigger = React.forwardRef((props, ref) => ( - + ### OverlayArrow diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 0d267d93b39..e4da3322d7a 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -383,7 +383,12 @@ function Example() { - + ### TreeItemContent diff --git a/packages/dev/s2-docs/src/StateTable.tsx b/packages/dev/s2-docs/src/StateTable.tsx index 068cea9a390..da551bbd3a5 100644 --- a/packages/dev/s2-docs/src/StateTable.tsx +++ b/packages/dev/s2-docs/src/StateTable.tsx @@ -11,10 +11,11 @@ interface StateTableProps { links?: any, showOptional?: boolean, hideSelector?: boolean, - defaultClassName?: string + defaultClassName?: string, + cssVariables?: {[name: string]: string} } -export function StateTable({properties, links, showOptional, hideSelector, defaultClassName}: StateTableProps) { +export function StateTable({properties, links, showOptional, hideSelector, defaultClassName, cssVariables}: StateTableProps) { if (links) { setLinks(links); } @@ -65,6 +66,37 @@ export function StateTable({properties, links, showOptional, hideSelector, defau ); } + if (cssVariables) { + table = ( + <> + {table} + + + + CSS Variable + + + + {Object.entries(cssVariables).map(([name, description]) => ( + + + + + {name} + + + + + {renderHTMLfromMarkdown(description, {forceInline: true})} + + + ))} + +
+ + ); + } + return table; } From e20b5554a7fc9c2f17a22f2c8921a1f9d10deb70 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 3 Oct 2025 12:01:42 -0700 Subject: [PATCH 2/3] Automatically generate default class name and render props table --- .../s2-docs/pages/react-aria/Breadcrumbs.mdx | 2 - .../dev/s2-docs/pages/react-aria/Button.mdx | 2 - .../dev/s2-docs/pages/react-aria/Calendar.mdx | 12 --- .../dev/s2-docs/pages/react-aria/Checkbox.mdx | 2 - .../pages/react-aria/CheckboxGroup.mdx | 2 - .../s2-docs/pages/react-aria/ColorArea.mdx | 4 - .../s2-docs/pages/react-aria/ColorPicker.mdx | 2 - .../s2-docs/pages/react-aria/ColorSlider.mdx | 4 - .../s2-docs/pages/react-aria/ColorWheel.mdx | 6 -- .../dev/s2-docs/pages/react-aria/ComboBox.mdx | 2 - .../s2-docs/pages/react-aria/DateField.mdx | 6 -- .../s2-docs/pages/react-aria/DatePicker.mdx | 2 - .../pages/react-aria/DateRangePicker.mdx | 2 - .../s2-docs/pages/react-aria/Disclosure.mdx | 11 +-- .../pages/react-aria/DisclosureGroup.mdx | 2 - .../dev/s2-docs/pages/react-aria/DropZone.mdx | 2 - .../dev/s2-docs/pages/react-aria/GridList.mdx | 6 -- .../dev/s2-docs/pages/react-aria/Group.mdx | 2 - .../dev/s2-docs/pages/react-aria/Link.mdx | 2 - .../dev/s2-docs/pages/react-aria/ListBox.mdx | 8 -- .../dev/s2-docs/pages/react-aria/Menu.mdx | 6 -- .../dev/s2-docs/pages/react-aria/Meter.mdx | 2 - .../dev/s2-docs/pages/react-aria/Modal.mdx | 13 +-- .../s2-docs/pages/react-aria/NumberField.mdx | 2 - .../dev/s2-docs/pages/react-aria/Popover.mdx | 11 +-- .../s2-docs/pages/react-aria/ProgressBar.mdx | 2 - .../s2-docs/pages/react-aria/RadioGroup.mdx | 4 - .../pages/react-aria/RangeCalendar.mdx | 12 --- .../s2-docs/pages/react-aria/SearchField.mdx | 2 - .../dev/s2-docs/pages/react-aria/Select.mdx | 4 - .../dev/s2-docs/pages/react-aria/Slider.mdx | 8 -- .../dev/s2-docs/pages/react-aria/Switch.mdx | 2 - .../dev/s2-docs/pages/react-aria/Table.mdx | 16 ---- .../dev/s2-docs/pages/react-aria/Tabs.mdx | 8 -- .../dev/s2-docs/pages/react-aria/TagGroup.mdx | 4 - .../s2-docs/pages/react-aria/TextField.mdx | 2 - .../s2-docs/pages/react-aria/TimeField.mdx | 6 -- .../s2-docs/pages/react-aria/ToggleButton.mdx | 2 - .../pages/react-aria/ToggleButtonGroup.mdx | 2 - .../dev/s2-docs/pages/react-aria/Toolbar.mdx | 2 - .../dev/s2-docs/pages/react-aria/Tooltip.mdx | 11 +-- .../dev/s2-docs/pages/react-aria/Tree.mdx | 23 ++--- packages/dev/s2-docs/pages/react-aria/dnd.mdx | 2 - .../s2-docs/pages/react-aria/selection.mdx | 2 +- packages/dev/s2-docs/src/PropTable.tsx | 50 +++++++++- packages/dev/s2-docs/src/StateTable.tsx | 28 +----- .../react-aria-components/src/Breadcrumbs.tsx | 21 +++- packages/react-aria-components/src/Button.tsx | 6 ++ .../react-aria-components/src/Calendar.tsx | 53 ++++++++++- .../react-aria-components/src/Checkbox.tsx | 27 +++++- .../react-aria-components/src/ColorArea.tsx | 17 +++- .../react-aria-components/src/ColorField.tsx | 17 +++- .../react-aria-components/src/ColorPicker.tsx | 7 +- .../react-aria-components/src/ColorSlider.tsx | 18 +++- .../react-aria-components/src/ColorSwatch.tsx | 17 +++- .../src/ColorSwatchPicker.tsx | 19 +++- .../react-aria-components/src/ColorThumb.tsx | 10 +- .../react-aria-components/src/ColorWheel.tsx | 27 +++++- .../react-aria-components/src/ComboBox.tsx | 19 +++- .../react-aria-components/src/DateField.tsx | 41 +++++++- .../react-aria-components/src/DatePicker.tsx | 30 +++++- packages/react-aria-components/src/Dialog.tsx | 5 + .../react-aria-components/src/Disclosure.tsx | 29 +++++- .../react-aria-components/src/DragAndDrop.tsx | 10 +- .../react-aria-components/src/DropZone.tsx | 18 +++- .../react-aria-components/src/FieldError.tsx | 10 +- packages/react-aria-components/src/Form.tsx | 5 + .../react-aria-components/src/GridList.tsx | 36 ++++++- packages/react-aria-components/src/Group.tsx | 42 +++++--- packages/react-aria-components/src/Input.tsx | 23 +++-- packages/react-aria-components/src/Link.tsx | 17 +++- .../react-aria-components/src/ListBox.tsx | 37 +++++++- packages/react-aria-components/src/Menu.tsx | 32 ++++++- packages/react-aria-components/src/Meter.tsx | 18 +++- packages/react-aria-components/src/Modal.tsx | 20 +++- .../react-aria-components/src/NumberField.tsx | 22 ++++- .../src/OverlayArrow.tsx | 16 +++- .../react-aria-components/src/Popover.tsx | 14 ++- .../react-aria-components/src/ProgressBar.tsx | 18 +++- .../react-aria-components/src/RadioGroup.tsx | 27 +++++- .../react-aria-components/src/SearchField.tsx | 22 ++++- packages/react-aria-components/src/Select.tsx | 27 +++++- .../src/SelectionIndicator.tsx | 10 +- .../react-aria-components/src/Separator.tsx | 8 +- packages/react-aria-components/src/Slider.tsx | 38 +++++++- packages/react-aria-components/src/Switch.tsx | 23 ++++- packages/react-aria-components/src/Table.tsx | 59 +++++++++++- packages/react-aria-components/src/Tabs.tsx | 38 +++++++- .../react-aria-components/src/TagGroup.tsx | 31 +++++- .../react-aria-components/src/TextArea.tsx | 16 +++- .../react-aria-components/src/TextField.tsx | 20 +++- packages/react-aria-components/src/Toast.tsx | 24 ++++- .../src/ToggleButton.tsx | 14 ++- .../src/ToggleButtonGroup.tsx | 17 +++- .../react-aria-components/src/Toolbar.tsx | 14 ++- .../react-aria-components/src/Tooltip.tsx | 14 ++- packages/react-aria-components/src/Tree.tsx | 95 ++++++++++++------- packages/react-aria-components/src/utils.tsx | 2 +- 98 files changed, 1138 insertions(+), 369 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx index 996252b0426..db4c779ced7 100644 --- a/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx @@ -93,5 +93,3 @@ function Example() { ### Breadcrumb - - diff --git a/packages/dev/s2-docs/pages/react-aria/Button.mdx b/packages/dev/s2-docs/pages/react-aria/Button.mdx index 5a33d2e962e..b70de8be5ab 100644 --- a/packages/dev/s2-docs/pages/react-aria/Button.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Button.mdx @@ -122,5 +122,3 @@ import {Link} from 'react-aria-components'; ## API - - diff --git a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx index 53dd5510e35..ab0bc35b03b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Calendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Calendar.mdx @@ -312,34 +312,22 @@ import {Button} from 'vanilla-starter/Button'; - - ### CalendarGrid -{/* */} - ### CalendarGridHeader -{/* */} - ### CalendarHeaderCell -{/* */} - ### CalendarGridBody -{/* */} - ### CalendarCell - - diff --git a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx index a2bf72b8e6a..19ba646d98d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Checkbox.mdx @@ -96,5 +96,3 @@ import {Form} from 'react-aria-components'; ### Checkbox - - diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx index 9897e078944..553cd6a3d0b 100644 --- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx @@ -120,5 +120,3 @@ import {Form} from 'react-aria-components'; ### CheckboxGroup - - diff --git a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx index a8ec4c4095d..8776af22c20 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorArea.mdx @@ -83,10 +83,6 @@ function Example() { - - ### ColorThumb - - diff --git a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx index 60d981ff4fb..7aea3768b19 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorPicker.mdx @@ -189,5 +189,3 @@ import {ColorSwatchPicker, ColorSwatchPickerItem} from 'vanilla-starter/ColorSwa ## API - - diff --git a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx index 36fea4f04b5..2a22e999e04 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorSlider.mdx @@ -87,10 +87,6 @@ function Example() { - - ### ColorThumb - - diff --git a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx index c77b5ff8521..af673192930 100644 --- a/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ColorWheel.mdx @@ -80,16 +80,10 @@ function Example() { - - ### ColorWheelTrack - - ### ColorThumb - - diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 31a6ba4092b..c6091720d43 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -343,5 +343,3 @@ import {ComboBox, ComboBoxItem} from 'vanilla-starter/ComboBox'; ### ComboBox - - diff --git a/packages/dev/s2-docs/pages/react-aria/DateField.mdx b/packages/dev/s2-docs/pages/react-aria/DateField.mdx index 9cfb715efb9..ec72926a3d2 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateField.mdx @@ -133,16 +133,10 @@ import {Form} from 'react-aria-components'; - - ### DateInput - - ### DateSegment - - diff --git a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx index 76392bbe1b8..e5de0824a4e 100644 --- a/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DatePicker.mdx @@ -157,5 +157,3 @@ function Example() { ### DatePicker - - diff --git a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx index 594284c0a39..1fe107c4d0f 100644 --- a/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx @@ -174,5 +174,3 @@ function Example(props) { ### DateRangePicker - - diff --git a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx index b6aae5177a1..8ba5acedbb4 100644 --- a/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Disclosure.mdx @@ -97,15 +97,12 @@ import {Settings} from 'lucide-react'; - - ### DisclosurePanel - - - - - diff --git a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx index 6935cc9f37f..18c749f4618 100644 --- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx +++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx @@ -100,5 +100,3 @@ export const tags = ['file', 'drag', 'dnd', 'upload']; ### DropZone - - diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 79a2074fe6b..d03c53afdd6 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -279,16 +279,10 @@ function Example() { - - ### GridListItem - - ### GridListLoadMoreItem - -{/* */} diff --git a/packages/dev/s2-docs/pages/react-aria/Group.mdx b/packages/dev/s2-docs/pages/react-aria/Group.mdx index 50e6a310257..fbc59e4f60b 100644 --- a/packages/dev/s2-docs/pages/react-aria/Group.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Group.mdx @@ -40,5 +40,3 @@ import {Input} from 'react-aria-components'; ## API - - diff --git a/packages/dev/s2-docs/pages/react-aria/Link.mdx b/packages/dev/s2-docs/pages/react-aria/Link.mdx index e3036dfe068..f66e0ea2a5a 100644 --- a/packages/dev/s2-docs/pages/react-aria/Link.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Link.mdx @@ -46,5 +46,3 @@ import {Link} from 'vanilla-starter/Link'; ## API - - diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index b78a4def22b..3e1c7218b4e 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -393,22 +393,14 @@ function Example() { - - ### ListBoxItem - - ### ListBoxSection -{/* */} - ### ListBoxLoadMoreItem - -{/* */} diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index f417dfe3fea..d2738a00ee0 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -506,20 +506,14 @@ import {MenuTrigger, Menu, MenuItem, Button, Popover} from 'react-aria-component -{/* */} - ### MenuItem - - ### MenuSection -{/* */} - ### SubmenuTrigger diff --git a/packages/dev/s2-docs/pages/react-aria/Meter.mdx b/packages/dev/s2-docs/pages/react-aria/Meter.mdx index e78fe80d2d9..b63416e706e 100644 --- a/packages/dev/s2-docs/pages/react-aria/Meter.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Meter.mdx @@ -68,5 +68,3 @@ By default, the `value` prop is a percentage between 0 and 100. Use the `minValu ### Meter - - diff --git a/packages/dev/s2-docs/pages/react-aria/Modal.mdx b/packages/dev/s2-docs/pages/react-aria/Modal.mdx index 78cdda09576..60dfc6d683f 100644 --- a/packages/dev/s2-docs/pages/react-aria/Modal.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Modal.mdx @@ -182,15 +182,12 @@ const CustomTrigger = React.forwardRef((props, ref) => ( - - ### ModalOverlay - - -` element. Useful for sizing the modal backdrop.' @@ -199,5 +196,3 @@ const CustomTrigger = React.forwardRef((props, ref) => ( ### Dialog - - diff --git a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx index 24d328e12ba..c5370d5e72c 100644 --- a/packages/dev/s2-docs/pages/react-aria/NumberField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/NumberField.mdx @@ -144,5 +144,3 @@ import {Form} from 'react-aria-components'; ### NumberField - - diff --git a/packages/dev/s2-docs/pages/react-aria/Popover.mdx b/packages/dev/s2-docs/pages/react-aria/Popover.mdx index 8e22b45dfe1..7276072f117 100644 --- a/packages/dev/s2-docs/pages/react-aria/Popover.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Popover.mdx @@ -150,11 +150,10 @@ function Example() { ### Popover - - - - - diff --git a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx index de08ee662b8..5acb1cbbfe0 100644 --- a/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ProgressBar.mdx @@ -80,5 +80,3 @@ Use SVG within a `` to build a circular progress indicator or spinn ### ProgressBar - - diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index 06a1c84703a..67de917d92d 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -110,10 +110,6 @@ import {Form} from 'react-aria-components'; - - ### Radio - - diff --git a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx index 7c48c7d51c0..8e5d2edfcfb 100644 --- a/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RangeCalendar.mdx @@ -330,34 +330,22 @@ import {Button} from 'vanilla-starter/Button'; - - ### CalendarGrid -{/* */} - ### CalendarGridHeader -{/* */} - ### CalendarHeaderCell -{/* */} - ### CalendarGridBody -{/* */} - ### CalendarCell - - diff --git a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx index e20c652fda2..951c041678d 100644 --- a/packages/dev/s2-docs/pages/react-aria/SearchField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/SearchField.mdx @@ -108,5 +108,3 @@ function Example(props) { ### SearchField - - diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index c0aca087ceb..de2d08e1ebe 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -224,10 +224,6 @@ import {Form} from 'react-aria-components'; - - ### SelectValue - - diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx index 7814628066d..14200dd2841 100644 --- a/packages/dev/s2-docs/pages/react-aria/Slider.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Slider.mdx @@ -115,22 +115,14 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`, - - ### SliderOutput - - ### SliderTrack - - ### SliderThumb - - diff --git a/packages/dev/s2-docs/pages/react-aria/Switch.mdx b/packages/dev/s2-docs/pages/react-aria/Switch.mdx index 561f6448efe..8d0add22ee0 100644 --- a/packages/dev/s2-docs/pages/react-aria/Switch.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Switch.mdx @@ -90,5 +90,3 @@ import {Form} from 'react-aria-components'; ### Switch - - diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 79cdd6207e5..d1edbdb9d86 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -687,38 +687,26 @@ function ReorderableTable() { - - ### TableHeader -{/* */} - ### Column - - ### TableBody -{/* */} - ### Row - - ### Cell - - ### ResizableTableContainer @@ -727,10 +715,6 @@ function ReorderableTable() { - - ### TableLoadMoreItem - -{/* */} diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx index 39c808d326b..afb9dd8ccea 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx @@ -255,22 +255,14 @@ function Example() { - - ### TabList - - ### Tab - - ### TabPanel - - diff --git a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx index f601d910e9b..053f1780ec3 100644 --- a/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TagGroup.mdx @@ -155,10 +155,6 @@ function Example(props) { - - ### Tag - - diff --git a/packages/dev/s2-docs/pages/react-aria/TextField.mdx b/packages/dev/s2-docs/pages/react-aria/TextField.mdx index 9d80ded4d70..55deb3f373b 100644 --- a/packages/dev/s2-docs/pages/react-aria/TextField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TextField.mdx @@ -116,5 +116,3 @@ import {TextField, Label, TextArea} from 'react-aria-components'; ### TextField - - diff --git a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx index 19a0a1d25c3..a9a78292c97 100644 --- a/packages/dev/s2-docs/pages/react-aria/TimeField.mdx +++ b/packages/dev/s2-docs/pages/react-aria/TimeField.mdx @@ -118,16 +118,10 @@ import {Form} from 'react-aria-components'; - - ### DateInput - - ### DateSegment - - diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx index 18fc796135c..5fe76ff3379 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButton.mdx @@ -65,5 +65,3 @@ function Example(props) { ## API - - diff --git a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx index 604764f1cf6..9a983a54e4b 100644 --- a/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx @@ -127,5 +127,3 @@ function SegmentedControlItem(props: ToggleButtonProps) { ### ToggleButtonGroup - - diff --git a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx index 00645e48778..7cae69228ee 100644 --- a/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Toolbar.mdx @@ -118,5 +118,3 @@ export const tags = ['group']; ### Toolbar - - diff --git a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx index 4b4391ac7ec..b29394ffcc8 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx @@ -155,11 +155,10 @@ const CustomTrigger = React.forwardRef((props, ref) => ( ### Tooltip - - - @@ -167,5 +166,3 @@ const CustomTrigger = React.forwardRef((props, ref) => ( ### OverlayArrow - - diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index e4da3322d7a..ebaa21fad39 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -377,25 +377,26 @@ function Example() { - - ### TreeItem - - - ### TreeItemContent - + ### TreeLoadMoreItem - - -{/* */} + diff --git a/packages/dev/s2-docs/pages/react-aria/dnd.mdx b/packages/dev/s2-docs/pages/react-aria/dnd.mdx index 1be21288f34..ef95686aefd 100644 --- a/packages/dev/s2-docs/pages/react-aria/dnd.mdx +++ b/packages/dev/s2-docs/pages/react-aria/dnd.mdx @@ -942,5 +942,3 @@ Note that because mouse and touch drag and drop interactions utilize the native ### DropIndicator - - diff --git a/packages/dev/s2-docs/pages/react-aria/selection.mdx b/packages/dev/s2-docs/pages/react-aria/selection.mdx index 78a12a33e7e..44ee6a777f8 100644 --- a/packages/dev/s2-docs/pages/react-aria/selection.mdx +++ b/packages/dev/s2-docs/pages/react-aria/selection.mdx @@ -528,7 +528,7 @@ function SelectableItem({id, children}) { ``` - + ## Item actions diff --git a/packages/dev/s2-docs/src/PropTable.tsx b/packages/dev/s2-docs/src/PropTable.tsx index 000bab077b4..fc9e19b2282 100644 --- a/packages/dev/s2-docs/src/PropTable.tsx +++ b/packages/dev/s2-docs/src/PropTable.tsx @@ -1,7 +1,8 @@ import {Code, styles as codeStyles} from './Code'; import {DisclosureRow} from './DisclosureRow'; import React from 'react'; -import {renderHTMLfromMarkdown, setLinks, TComponent, TInterface, Type} from './types'; +import {renderHTMLfromMarkdown, setLinks, TComponent, TInterface, TType, Type} from './types'; +import {StateTable} from './StateTable'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table'; @@ -55,15 +56,40 @@ const codeStyle = style({font: {default: 'code-xs', lg: 'code-sm'}}); interface PropTableProps { component: TComponent, links: any, - showDescription?: boolean + showDescription?: boolean, + hideRenderProps?: boolean, + showOptionalRenderProps?: boolean, + hideSelector?: boolean, + cssVariables?: {[name: string]: string} } -export function PropTable({component, links, showDescription}: PropTableProps) { +export function PropTable({component, links, showDescription, hideRenderProps, showOptionalRenderProps, hideSelector, cssVariables}: PropTableProps) { let properties = component?.props?.type === 'interface' ? component.props.properties : null; if (!properties) { return null; } + let defaultClassName = properties.className?.default?.slice(1, -1); + let renderProps: TType | null = null; + let renderPropProperty = properties.className || properties.children; + if (!hideRenderProps && renderPropProperty?.type === 'property') { + if (renderPropProperty.value.type === 'union') { + let func = renderPropProperty.value.elements.find(e => e.type === 'function'); + if (func) { + renderProps = func.parameters[0]?.value; + } + } else if (renderPropProperty.value.type === 'application') { + let application = renderPropProperty.value; + if (application.base.type === 'link' && /ClassNameOrFunction|ChildrenOrFunction/.test(links[application.base.id]?.name)) { + renderProps = application.typeParameters[0]; + } + } + + if (renderProps?.type === 'link') { + renderProps = links[renderProps.id]; + } + } + return ( <> {component.description && showDescription &&
{renderHTMLfromMarkdown(component.description, {forceInline: false, forceBlock: true})}
} @@ -72,6 +98,15 @@ export function PropTable({component, links, showDescription}: PropTableProps) { links={links} propGroups={GROUPS} defaultExpanded={DEFAULT_EXPANDED} /> + {defaultClassName ? : null} + {renderProps && renderProps.type === 'interface' ? ( + + ) : null} ); } @@ -216,3 +251,12 @@ function groupProps( return [props, groups]; } + +function DefaultClassName({defaultClassName}: {defaultClassName: string}) { + return ( +

+ Default className: + {defaultClassName} +

+ ); +} diff --git a/packages/dev/s2-docs/src/StateTable.tsx b/packages/dev/s2-docs/src/StateTable.tsx index da551bbd3a5..59a9370bb77 100644 --- a/packages/dev/s2-docs/src/StateTable.tsx +++ b/packages/dev/s2-docs/src/StateTable.tsx @@ -1,5 +1,5 @@ import {Code, styles as codeStyles} from './Code'; -import {Fragment} from 'react'; +import {CSSProperties, Fragment} from 'react'; import {renderHTMLfromMarkdown, setLinks, TInterface} from './types'; import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from './Table'; @@ -11,11 +11,11 @@ interface StateTableProps { links?: any, showOptional?: boolean, hideSelector?: boolean, - defaultClassName?: string, - cssVariables?: {[name: string]: string} + cssVariables?: {[name: string]: string}, + style?: CSSProperties } -export function StateTable({properties, links, showOptional, hideSelector, defaultClassName, cssVariables}: StateTableProps) { +export function StateTable({properties, links, showOptional, hideSelector, cssVariables, style: styleProp}: StateTableProps) { if (links) { setLinks(links); } @@ -27,7 +27,7 @@ export function StateTable({properties, links, showOptional, hideSelector, defau let showSelector = !hideSelector && props.some(prop => prop.type === 'property' && prop.selector); let table = ( - +
Render Prop @@ -57,15 +57,6 @@ export function StateTable({properties, links, showOptional, hideSelector, defau
); - if (defaultClassName) { - table = ( - <> - - {table} - - ); - } - if (cssVariables) { table = ( <> @@ -99,12 +90,3 @@ export function StateTable({properties, links, showOptional, hideSelector, defau return table; } - -export function DefaultClassName({defaultClassName}: {defaultClassName: string}) { - return ( -

- Default className: - {defaultClassName} -

- ); -} diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx index 41e7a5e6b8c..21a0929ace6 100644 --- a/packages/react-aria-components/src/Breadcrumbs.tsx +++ b/packages/react-aria-components/src/Breadcrumbs.tsx @@ -10,9 +10,18 @@ * governing permissions and limitations under the License. */ import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + StyleProps, + useContextProps, + useRenderProps, + useSlottedContext +} from './utils'; import {Collection, CollectionBuilder, CollectionNode, createLeafComponent} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext} from './Collection'; -import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared'; import {LinkContext} from './Link'; @@ -20,6 +29,11 @@ import {Node} from 'react-stately'; import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react'; export interface BreadcrumbsProps extends Omit, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-Breadcrumbs' + */ + className?: string, /** Whether the breadcrumbs are disabled. */ isDisabled?: boolean, /** Handler that is called when a breadcrumb is clicked. */ @@ -69,6 +83,11 @@ export interface BreadcrumbRenderProps { } export interface BreadcrumbProps extends RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Breadcrumb' + */ + className?: ClassNameOrFunction, /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */ id?: Key } diff --git a/packages/react-aria-components/src/Button.tsx b/packages/react-aria-components/src/Button.tsx index 1b1f0ad06bf..ffbba12ab59 100644 --- a/packages/react-aria-components/src/Button.tsx +++ b/packages/react-aria-components/src/Button.tsx @@ -21,6 +21,7 @@ import { useId } from 'react-aria'; import { + ClassNameOrFunction, ContextValue, RenderProps, SlotProps, @@ -67,6 +68,11 @@ export interface ButtonRenderProps { } export interface ButtonProps extends Omit, HoverEvents, SlotProps, RenderProps, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Button' + */ + className?: ClassNameOrFunction, /** * Whether the button is in a pending state. This disables press and hover events * while retaining focusability, and announces the pending state to screen readers. diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx index 4867ae9ce80..9949dbb9145 100644 --- a/packages/react-aria-components/src/Calendar.tsx +++ b/packages/react-aria-components/src/Calendar.tsx @@ -26,7 +26,18 @@ import { import {ButtonContext} from './Button'; import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth, isToday} from '@internationalized/date'; import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately'; -import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + DOMProps, + Provider, + RenderProps, + SlotProps, + StyleProps, + useContextProps, + useRenderProps, + useSlottedContext +} from './utils'; import {DOMAttributes, FocusableElement, forwardRefType, GlobalDOMAttributes, HoverEvents} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {HeadingContext} from './RSPContexts'; @@ -58,12 +69,16 @@ export interface RangeCalendarRenderProps extends Omit extends Omit, 'errorMessage' | 'validationState'>, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Calendar' + */ + className?: ClassNameOrFunction, /** * The amount of days that will be displayed at once. This affects how pagination works. * @default {months: 1} */ visibleDuration?: DateDuration, - /** * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) * object for a given calendar identifier. If not provided, the `createCalendar` function @@ -73,12 +88,16 @@ export interface CalendarProps extends Omit extends Omit, 'errorMessage' | 'validationState'>, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-RangeCalendar' + */ + className?: ClassNameOrFunction, /** * The amount of days that will be displayed at once. This affects how pagination works. * @default {months: 1} */ visibleDuration?: DateDuration, - /** * A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) * object for a given calendar identifier. If not provided, the `createCalendar` function @@ -326,6 +345,11 @@ export interface CalendarCellRenderProps { } export interface CalendarGridProps extends StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-CalendarGrid' + */ + className?: string, /** * Either a function to render calendar cells for each date in the month, * or children containing a ``` and `` @@ -406,6 +430,11 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio }); export interface CalendarGridHeaderProps extends StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-CalendarGridHeader' + */ + className?: string, /** A function to render a `` for a weekday name. */ children: (day: string) => ReactElement } @@ -434,7 +463,13 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef {} +export interface CalendarHeaderCellProps extends DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-CalendarHeaderCell' + */ + className?: string +} function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef) { let {children, style, className} = props; @@ -457,6 +492,11 @@ const CalendarHeaderCellForwardRef = forwardRef(CalendarHeaderCell); export {CalendarHeaderCellForwardRef as CalendarHeaderCell}; export interface CalendarGridBodyProps extends StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-CalendarGridBody' + */ + className?: string, /** A function to render a `` for a given date. */ children: (date: CalendarDate) => ReactElement } @@ -495,6 +535,11 @@ const CalendarGridBodyForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)( export {CalendarGridBodyForwardRef as CalendarGridBody}; export interface CalendarCellProps extends RenderProps, HoverEvents, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-CalendarCell' + */ + className?: ClassNameOrFunction, /** The date to render in the cell. */ date: CalendarDate } diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx index 678584e2fb5..c32c6428e1d 100644 --- a/packages/react-aria-components/src/Checkbox.tsx +++ b/packages/react-aria-components/src/Checkbox.tsx @@ -12,7 +12,19 @@ import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria'; import {CheckboxContext} from './RSPContexts'; import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {FieldErrorContext} from './FieldError'; import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils'; import {FormContext} from './Form'; @@ -21,8 +33,19 @@ import {LabelContext} from './Label'; import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react'; import {TextContext} from './Text'; -export interface CheckboxGroupProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface CheckboxGroupProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-CheckboxGroup' + */ + className?: ClassNameOrFunction +} export interface CheckboxProps extends Omit, HoverEvents, RACValidation, RenderProps, SlotProps, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Checkbox' + */ + className?: ClassNameOrFunction, /** * A ref for the HTML input element. */ diff --git a/packages/react-aria-components/src/ColorArea.tsx b/packages/react-aria-components/src/ColorArea.tsx index 5a9af7fc5b8..4106818da5b 100644 --- a/packages/react-aria-components/src/ColorArea.tsx +++ b/packages/react-aria-components/src/ColorArea.tsx @@ -1,10 +1,17 @@ import {AriaColorAreaProps, useColorArea} from 'react-aria'; +import { + ClassNameOrFunction, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {ColorAreaContext} from './RSPContexts'; import {ColorAreaState, useColorAreaState} from 'react-stately'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import {InternalColorThumbContext} from './ColorThumb'; -import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react'; export interface ColorAreaRenderProps { @@ -19,7 +26,13 @@ export interface ColorAreaRenderProps { state: ColorAreaState } -export interface ColorAreaProps extends AriaColorAreaProps, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface ColorAreaProps extends AriaColorAreaProps, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorArea' + */ + className?: ClassNameOrFunction +} export const ColorAreaStateContext = createContext(null); diff --git a/packages/react-aria-components/src/ColorField.tsx b/packages/react-aria-components/src/ColorField.tsx index f820e8a2b4d..6bfbe0a7249 100644 --- a/packages/react-aria-components/src/ColorField.tsx +++ b/packages/react-aria-components/src/ColorField.tsx @@ -11,6 +11,17 @@ */ import {AriaColorFieldProps, useColorChannelField, useColorField, useLocale} from 'react-aria'; +import { + ClassNameOrFunction, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, useColorFieldState} from 'react-stately'; import {ColorFieldContext} from './RSPContexts'; import {FieldErrorContext} from './FieldError'; @@ -19,7 +30,6 @@ import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types import {GroupContext} from './Group'; import {InputContext} from './Input'; import {LabelContext} from './Label'; -import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils'; import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react'; import {TextContext} from './Text'; @@ -46,6 +56,11 @@ export interface ColorFieldRenderProps { } export interface ColorFieldProps extends Omit, RACValidation, InputDOMProps, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorField' + */ + className?: ClassNameOrFunction, /** * The color channel that this field edits. If not provided, * the color is edited as a hex value. diff --git a/packages/react-aria-components/src/ColorPicker.tsx b/packages/react-aria-components/src/ColorPicker.tsx index 68a187c6427..602f19e3662 100644 --- a/packages/react-aria-components/src/ColorPicker.tsx +++ b/packages/react-aria-components/src/ColorPicker.tsx @@ -10,12 +10,12 @@ * governing permissions and limitations under the License. */ +import {ChildrenOrFunction, Provider, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils'; import {Color, ColorPickerState, ColorPickerProps as StatelyColorPickerProps, useColorPickerState} from 'react-stately'; import {ColorAreaContext, ColorFieldContext, ColorSliderContext, ColorWheelContext} from './RSPContexts'; import {ColorSwatchContext} from './ColorSwatch'; import {ColorSwatchPickerContext} from './ColorSwatchPicker'; import {mergeProps} from 'react-aria'; -import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils'; import React, {createContext, JSX} from 'react'; export interface ColorPickerRenderProps { @@ -23,7 +23,10 @@ export interface ColorPickerRenderProps { color: Color } -export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps, Pick, 'children'> {} +export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps { + /** The children of the component. A function may be provided to alter the children based on component state. */ + children: ChildrenOrFunction +} export const ColorPickerContext = createContext>(null); export const ColorPickerStateContext = createContext(null); diff --git a/packages/react-aria-components/src/ColorSlider.tsx b/packages/react-aria-components/src/ColorSlider.tsx index d545a55680a..f2e32673d60 100644 --- a/packages/react-aria-components/src/ColorSlider.tsx +++ b/packages/react-aria-components/src/ColorSlider.tsx @@ -1,11 +1,19 @@ import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'react-aria'; +import { + ClassNameOrFunction, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {ColorSliderContext} from './RSPContexts'; import {ColorSliderState, useColorSliderState} from 'react-stately'; import {filterDOMProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import {InternalColorThumbContext} from './ColorThumb'; import {LabelContext} from './Label'; -import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider'; @@ -26,7 +34,13 @@ export interface ColorSliderRenderProps { state: ColorSliderState } -export interface ColorSliderProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface ColorSliderProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorSlider' + */ + className?: ClassNameOrFunction +} export const ColorSliderStateContext = createContext(null); diff --git a/packages/react-aria-components/src/ColorSwatch.tsx b/packages/react-aria-components/src/ColorSwatch.tsx index e27204c86ed..d57ae32bbb2 100644 --- a/packages/react-aria-components/src/ColorSwatch.tsx +++ b/packages/react-aria-components/src/ColorSwatch.tsx @@ -1,6 +1,13 @@ import {AriaColorSwatchProps, useColorSwatch} from 'react-aria'; +import { + ClassNameOrFunction, + ContextValue, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {Color} from 'react-stately'; -import {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; @@ -10,7 +17,13 @@ export interface ColorSwatchRenderProps { color: Color } -export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps, SlotProps, GlobalDOMAttributes {} +export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorSwatch' + */ + className?: ClassNameOrFunction +} export const ColorSwatchContext = createContext>(null); diff --git a/packages/react-aria-components/src/ColorSwatchPicker.tsx b/packages/react-aria-components/src/ColorSwatchPicker.tsx index b6fd7fefc30..7be59e946ea 100644 --- a/packages/react-aria-components/src/ColorSwatchPicker.tsx +++ b/packages/react-aria-components/src/ColorSwatchPicker.tsx @@ -1,7 +1,14 @@ import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, PressEvents, ValueBase} from '@react-types/shared'; +import { + ClassNameOrFunction, + composeRenderProps, + ContextValue, + RenderProps, + StyleRenderProps, + useContextProps +} from './utils'; import {Color, parseColor, useColorPickerState} from 'react-stately'; import {ColorSwatchContext} from './ColorSwatch'; -import {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils'; import {filterDOMProps} from '@react-aria/utils'; // @ts-ignore import intlMessages from '../intl/*.json'; @@ -11,6 +18,11 @@ import {useLocale, useLocalizedStringFormatter} from 'react-aria'; export interface ColorSwatchPickerRenderProps extends Omit {} export interface ColorSwatchPickerProps extends ValueBase, AriaLabelingProps, StyleRenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorSwatchPicker' + */ + className?: ClassNameOrFunction, /** The children of the ColorSwatchPicker. */ children?: ReactNode, /** @@ -62,6 +74,11 @@ export interface ColorSwatchPickerItemRenderProps extends Omit, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorSwatchPickerItem' + */ + className?: ClassNameOrFunction, /** The color of the swatch. */ color: string | Color, /** Whether the color swatch is disabled. */ diff --git a/packages/react-aria-components/src/ColorThumb.tsx b/packages/react-aria-components/src/ColorThumb.tsx index 41fa7b8f4e3..c96561afec3 100644 --- a/packages/react-aria-components/src/ColorThumb.tsx +++ b/packages/react-aria-components/src/ColorThumb.tsx @@ -1,9 +1,9 @@ +import {ClassNameOrFunction, RenderProps, useRenderProps} from './utils'; import {Color} from 'react-stately'; import {filterDOMProps} from '@react-aria/utils'; import {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared'; import {mergeProps, useFocusRing, useHover} from 'react-aria'; import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react'; -import {RenderProps, useRenderProps} from './utils'; interface ColorState { getDisplayColor(): Color, @@ -54,7 +54,13 @@ export interface ColorThumbRenderProps { isDisabled: boolean } -export interface ColorThumbProps extends HoverEvents, RenderProps, GlobalDOMAttributes {} +export interface ColorThumbProps extends HoverEvents, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorThumb' + */ + className?: ClassNameOrFunction +} /** * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value. diff --git a/packages/react-aria-components/src/ColorWheel.tsx b/packages/react-aria-components/src/ColorWheel.tsx index 991a865b9b8..62975d56abf 100644 --- a/packages/react-aria-components/src/ColorWheel.tsx +++ b/packages/react-aria-components/src/ColorWheel.tsx @@ -1,7 +1,16 @@ import {AriaColorWheelOptions, useColorWheel} from 'react-aria'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {ColorWheelContext} from './RSPContexts'; import {ColorWheelState, useColorWheelState} from 'react-stately'; -import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; import {filterDOMProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import {InternalColorThumbContext} from './ColorThumb'; @@ -19,7 +28,13 @@ export interface ColorWheelRenderProps { state: ColorWheelState } -export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorWheel' + */ + className?: ClassNameOrFunction +} export const ColorWheelStateContext = createContext(null); @@ -67,7 +82,13 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, }); export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {} -export interface ColorWheelTrackProps extends StyleRenderProps, GlobalDOMAttributes {} +export interface ColorWheelTrackProps extends StyleRenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColorWheelTrack' + */ + className?: ClassNameOrFunction +} interface ColorWheelTrackContextValue extends Omit, 'children' | 'className' | 'style'>, StyleRenderProps {} export const ColorWheelTrackContext = createContext>(null); diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx index f21145a2b8b..538b381b32a 100644 --- a/packages/react-aria-components/src/ComboBox.tsx +++ b/packages/react-aria-components/src/ComboBox.tsx @@ -11,9 +11,21 @@ */ import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria'; import {ButtonContext} from './Button'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately'; import {CollectionBuilder} from '@react-aria/collections'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; import {FieldErrorContext} from './FieldError'; import {filterDOMProps, useResizeObserver} from '@react-aria/utils'; import {FormContext} from './Form'; @@ -51,6 +63,11 @@ export interface ComboBoxRenderProps { } export interface ComboBoxProps extends Omit, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ComboBox' + */ + className?: ClassNameOrFunction, /** The filter function used to determine if a option should be included in the combo box list. */ defaultFilter?: (textValue: string, inputValue: string) => boolean, /** diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx index 3d144a1dc5b..f08a593ce85 100644 --- a/packages/react-aria-components/src/DateField.tsx +++ b/packages/react-aria-components/src/DateField.tsx @@ -10,7 +10,20 @@ * governing permissions and limitations under the License. */ import {AriaDateFieldProps, AriaTimeFieldProps, DateValue, HoverEvents, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {createCalendar} from '@internationalized/date'; import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately'; import {FieldErrorContext} from './FieldError'; @@ -45,8 +58,20 @@ export interface DateFieldRenderProps { */ isReadOnly: boolean } -export interface DateFieldProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} -export interface TimeFieldProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface DateFieldProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DateField' + */ + className?: ClassNameOrFunction +} +export interface TimeFieldProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TimeField' + */ + className?: ClassNameOrFunction +} export const DateFieldContext = createContext, HTMLDivElement>>(null); export const TimeFieldContext = createContext, HTMLDivElement>>(null); @@ -225,6 +250,11 @@ export interface DateInputRenderProps { } export interface DateInputProps extends SlotProps, StyleRenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DateInput' + */ + className?: ClassNameOrFunction, children: (segment: IDateSegment) => ReactElement } @@ -332,6 +362,11 @@ export interface DateSegmentRenderProps extends Omit } export interface DateSegmentProps extends RenderProps, HoverEvents, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DateSegment' + */ + className?: ClassNameOrFunction, segment: IDateSegment } diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx index ba214b10d07..fe02d5e2b17 100644 --- a/packages/react-aria-components/src/DatePicker.tsx +++ b/packages/react-aria-components/src/DatePicker.tsx @@ -12,7 +12,19 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria'; import {ButtonContext} from './Button'; import {CalendarContext, RangeCalendarContext} from './Calendar'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {DateFieldContext} from './DateField'; import {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately'; import {DialogContext, OverlayTriggerStateContext} from './Dialog'; @@ -70,8 +82,20 @@ export interface DateRangePickerRenderProps extends Omit extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick, 'shouldCloseOnSelect'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} -export interface DateRangePickerProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick, 'shouldCloseOnSelect'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface DatePickerProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick, 'shouldCloseOnSelect'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DatePicker' + */ + className?: ClassNameOrFunction +} +export interface DateRangePickerProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick, 'shouldCloseOnSelect'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DateRangePicker' + */ + className?: ClassNameOrFunction +} export const DatePickerContext = createContext, HTMLDivElement>>(null); export const DateRangePickerContext = createContext, HTMLDivElement>>(null); diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx index f1881c8940e..5fc9a33cbe6 100644 --- a/packages/react-aria-components/src/Dialog.tsx +++ b/packages/react-aria-components/src/Dialog.tsx @@ -30,6 +30,11 @@ export interface DialogRenderProps { } export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-Dialog' + */ + className?: string, /** Children of the dialog. A function may be provided to access a function to close the dialog. */ children?: ReactNode | ((opts: DialogRenderProps) => ReactNode) } diff --git a/packages/react-aria-components/src/Disclosure.tsx b/packages/react-aria-components/src/Disclosure.tsx index 060340338d6..c4bb05d10aa 100644 --- a/packages/react-aria-components/src/Disclosure.tsx +++ b/packages/react-aria-components/src/Disclosure.tsx @@ -12,13 +12,28 @@ import {AriaDisclosureProps, useDisclosure, useFocusRing} from 'react-aria'; import {ButtonContext} from './Button'; -import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from 'react-stately'; import {DOMProps, forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared'; import {filterDOMProps, mergeProps, mergeRefs, useId} from '@react-aria/utils'; import React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react'; -export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps, DOMProps, GlobalDOMAttributes {} +export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps, DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DisclosureGroup' + */ + className?: ClassNameOrFunction +} export interface DisclosureGroupRenderProps { /** @@ -66,6 +81,11 @@ export const DisclosureGroup = forwardRef(function DisclosureGroup(props: Disclo }); export interface DisclosureProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Disclosure' + */ + className?: ClassNameOrFunction, /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */ id?: Key } @@ -187,6 +207,11 @@ export interface DisclosurePanelRenderProps { } export interface DisclosurePanelProps extends RenderProps, DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DisclosurePanel' + */ + className?: ClassNameOrFunction, /** * The accessibility role for the disclosure's panel. * @default 'group' diff --git a/packages/react-aria-components/src/DragAndDrop.tsx b/packages/react-aria-components/src/DragAndDrop.tsx index 2e1e0beadad..08726a78251 100644 --- a/packages/react-aria-components/src/DragAndDrop.tsx +++ b/packages/react-aria-components/src/DragAndDrop.tsx @@ -10,10 +10,10 @@ * governing permissions and limitations under the License. */ import type {DropIndicatorProps as AriaDropIndicatorProps, ItemDropTarget, Key} from 'react-aria'; +import type {ClassNameOrFunction, RenderProps} from './utils'; import type {DragAndDropHooks} from './useDragAndDrop'; import type {DraggableCollectionState, DroppableCollectionState, MultipleSelectionManager} from 'react-stately'; import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useMemo} from 'react'; -import type {RenderProps} from './utils'; export interface DragAndDropContextValue { dragAndDropHooks?: DragAndDropHooks, @@ -32,7 +32,13 @@ export interface DropIndicatorRenderProps { isDropTarget: boolean } -export interface DropIndicatorProps extends Omit, RenderProps { } +export interface DropIndicatorProps extends Omit, RenderProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DropIndicator' + */ + className?: ClassNameOrFunction +} interface DropIndicatorContextValue { render: (props: DropIndicatorProps, ref: ForwardedRef) => ReactNode } diff --git a/packages/react-aria-components/src/DropZone.tsx b/packages/react-aria-components/src/DropZone.tsx index ebb32507584..1138dd248c0 100644 --- a/packages/react-aria-components/src/DropZone.tsx +++ b/packages/react-aria-components/src/DropZone.tsx @@ -11,7 +11,15 @@ */ import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents} from '@react-types/shared'; -import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria'; import {filterDOMProps, isFocusable, useLabels, useObjectRef, useSlotId} from '@react-aria/utils'; // @ts-ignore @@ -47,7 +55,13 @@ export interface DropZoneRenderProps { isDisabled: boolean } -export interface DropZoneProps extends Omit, HoverEvents, RenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes {} +export interface DropZoneProps extends Omit, HoverEvents, RenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-DropZone' + */ + className?: ClassNameOrFunction +} export const DropZoneContext = createContext>(null); diff --git a/packages/react-aria-components/src/FieldError.tsx b/packages/react-aria-components/src/FieldError.tsx index 6022d9dba61..ca8331db63b 100644 --- a/packages/react-aria-components/src/FieldError.tsx +++ b/packages/react-aria-components/src/FieldError.tsx @@ -10,16 +10,22 @@ * governing permissions and limitations under the License. */ +import {ClassNameOrFunction, RenderProps, useRenderProps} from './utils'; import {DOMProps, GlobalDOMAttributes, ValidationResult} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react'; -import {RenderProps, useRenderProps} from './utils'; import {Text} from './Text'; export const FieldErrorContext = createContext(null); export interface FieldErrorRenderProps extends ValidationResult {} -export interface FieldErrorProps extends RenderProps, DOMProps, GlobalDOMAttributes {} +export interface FieldErrorProps extends RenderProps, DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-FieldError' + */ + className?: ClassNameOrFunction +} /** * A FieldError displays validation errors for a form field. diff --git a/packages/react-aria-components/src/Form.tsx b/packages/react-aria-components/src/Form.tsx index f255ea382ae..09b8d8f7ef6 100644 --- a/packages/react-aria-components/src/Form.tsx +++ b/packages/react-aria-components/src/Form.tsx @@ -17,6 +17,11 @@ import React, {createContext, ForwardedRef, forwardRef} from 'react'; import {FormProps as SharedFormProps} from '@react-types/form'; export interface FormProps extends SharedFormProps, DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-Form' + */ + className?: string, /** * Whether to use native HTML form validation to prevent form submission * when a field value is missing or invalid, or mark fields as required diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx index 6c087d25295..ec837fabffe 100644 --- a/packages/react-aria-components/src/GridList.tsx +++ b/packages/react-aria-components/src/GridList.tsx @@ -12,9 +12,20 @@ import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useGridList, useGridListItem, useGridListSection, useGridListSelectionCheckbox, useHover, useLocale, useVisuallyHidden} from 'react-aria'; import {ButtonContext} from './Button'; import {CheckboxContext, FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + SlotProps, + StyleProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent, HeaderNode, ItemNode, LoaderNode, SectionNode} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, SectionProps} from './Collection'; -import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop'; import {DragAndDropHooks} from './useDragAndDrop'; import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately'; @@ -59,6 +70,11 @@ export interface GridListRenderProps { } export interface GridListProps extends Omit, 'children'>, CollectionProps, StyleRenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-GridList' + */ + className?: ClassNameOrFunction, /** * Whether typeahead navigation is disabled. * @default false @@ -272,6 +288,11 @@ function GridListInner({props, collection, gridListRef: ref}: export interface GridListItemRenderProps extends ItemRenderProps {} export interface GridListItemProps extends RenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-GridListItem' + */ + className?: ClassNameOrFunction, /** The unique id of the item. */ id?: Key, /** The object value that this item represents. When using dynamic collections, this is set automatically. */ @@ -514,6 +535,11 @@ function RootDropIndicator() { } export interface GridListLoadMoreItemProps extends Omit, StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-GridListLoadMoreItem' + */ + className?: string, /** * The load more spinner to render when loading additional items. */ @@ -573,7 +599,13 @@ export const GridListLoadMoreItem = createLeafComponent(LoaderNode, function Gri ); }); -export interface GridListSectionProps extends SectionProps {} +export interface GridListSectionProps extends SectionProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-GridListSection' + */ + className?: string +} /** * A GridListSection represents a section within a GridList. diff --git a/packages/react-aria-components/src/Group.tsx b/packages/react-aria-components/src/Group.tsx index 03f398f5728..2e4e5acae38 100644 --- a/packages/react-aria-components/src/Group.tsx +++ b/packages/react-aria-components/src/Group.tsx @@ -11,7 +11,14 @@ */ import {AriaLabelingProps, DOMProps, forwardRefType} from '@react-types/shared'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {HoverProps, mergeProps, useFocusRing, useHover} from 'react-aria'; import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react'; @@ -44,20 +51,25 @@ export interface GroupRenderProps { } export interface GroupProps extends AriaLabelingProps, Omit, 'children' | 'className' | 'style' | 'role' | 'slot'>, DOMProps, HoverProps, RenderProps, SlotProps { - /** Whether the group is disabled. */ - isDisabled?: boolean, - /** Whether the group is invalid. */ - isInvalid?: boolean, - /** Whether the group is read only. */ - isReadOnly?: boolean, - /** - * An accessibility role for the group. By default, this is set to `'group'`. - * Use `'region'` when the contents of the group is important enough to be - * included in the page table of contents. Use `'presentation'` if the group - * is visual only and does not represent a semantic grouping of controls. - * @default 'group' - */ - role?: 'group' | 'region' | 'presentation' + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Group' + */ + className?: ClassNameOrFunction, + /** Whether the group is disabled. */ + isDisabled?: boolean, + /** Whether the group is invalid. */ + isInvalid?: boolean, + /** Whether the group is read only. */ + isReadOnly?: boolean, + /** + * An accessibility role for the group. By default, this is set to `'group'`. + * Use `'region'` when the contents of the group is important enough to be + * included in the page table of contents. Use `'presentation'` if the group + * is visual only and does not represent a semantic grouping of controls. + * @default 'group' + */ + role?: 'group' | 'region' | 'presentation' } export const GroupContext = createContext>({}); diff --git a/packages/react-aria-components/src/Input.tsx b/packages/react-aria-components/src/Input.tsx index c3f4b00a862..09bf47eb63b 100644 --- a/packages/react-aria-components/src/Input.tsx +++ b/packages/react-aria-components/src/Input.tsx @@ -10,7 +10,13 @@ * governing permissions and limitations under the License. */ -import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {createHideableComponent} from '@react-aria/collections'; import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria'; import React, {createContext, ForwardedRef, InputHTMLAttributes} from 'react'; @@ -44,11 +50,16 @@ export interface InputRenderProps { } export interface InputProps extends Omit, 'className' | 'style'>, HoverEvents, StyleRenderProps { - /** - * Temporary text that occupies the text input when it is empty. - * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). - */ - placeholder?: string + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Input' + */ + className?: ClassNameOrFunction, + /** + * Temporary text that occupies the text input when it is empty. + * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder). + */ + placeholder?: string } export const InputContext = createContext>({}); diff --git a/packages/react-aria-components/src/Link.tsx b/packages/react-aria-components/src/Link.tsx index e91b170700c..08678bdb195 100644 --- a/packages/react-aria-components/src/Link.tsx +++ b/packages/react-aria-components/src/Link.tsx @@ -11,12 +11,25 @@ */ import {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared'; import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react'; -export interface LinkProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> {} +export interface LinkProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Link' + */ + className?: ClassNameOrFunction +} export interface LinkRenderProps { /** diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx index 36464a35bd5..a728276303c 100644 --- a/packages/react-aria-components/src/ListBox.tsx +++ b/packages/react-aria-components/src/ListBox.tsx @@ -11,9 +11,21 @@ */ import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + SlotProps, + StyleProps, + StyleRenderProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent, ItemNode, LoaderNode, SectionNode} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection'; -import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils'; import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop'; import {DragAndDropHooks} from './useDragAndDrop'; import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately'; @@ -60,6 +72,11 @@ export interface ListBoxRenderProps { } export interface ListBoxProps extends Omit, 'children' | 'label'>, CollectionProps, StyleRenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ListBox' + */ + className?: ClassNameOrFunction, /** * How multiple selection should behave in the collection. * @default "toggle" @@ -271,7 +288,13 @@ function ListBoxInner({state: inputState, props, listBoxRef}: ); } -export interface ListBoxSectionProps extends SectionProps {} +export interface ListBoxSectionProps extends SectionProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-ListBoxSection' + */ + className?: string +} function ListBoxSectionInner(props: ListBoxSectionProps, ref: ForwardedRef, section: Node, className = 'react-aria-ListBoxSection') { let state = useContext(ListStateContext)!; @@ -314,6 +337,11 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent(SectionNode, L export interface ListBoxItemRenderProps extends ItemRenderProps {} export interface ListBoxItemProps extends RenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ListBoxItem' + */ + className?: ClassNameOrFunction, /** The unique id of the item. */ id?: Key, /** The object value that this item represents. When using dynamic collections, this is set automatically. */ @@ -475,6 +503,11 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe const ListBoxDropIndicatorForwardRef = forwardRef(ListBoxDropIndicator); export interface ListBoxLoadMoreItemProps extends Omit, StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-ListBoxLoadMoreItem' + */ + className?: string, /** * The load more spinner to render when loading additional items. */ diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx index 635e9ed3ac5..292b1815132 100644 --- a/packages/react-aria-components/src/Menu.tsx +++ b/packages/react-aria-components/src/Menu.tsx @@ -13,8 +13,20 @@ import {AriaMenuProps, FocusScope, mergeProps, useHover, useMenu, useMenuItem, useMenuSection, useMenuTrigger, useSubmenuTrigger} from 'react-aria'; import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, ItemNode, SectionNode} from '@react-aria/collections'; import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, RootMenuTriggerState, TreeState, useMenuTriggerState, useSubmenuTriggerState, useTreeState} from 'react-stately'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection'; -import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; import {FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts'; import {filterDOMProps, useObjectRef, useResizeObserver} from '@react-aria/utils'; import {FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents} from '@react-types/shared'; @@ -176,6 +188,11 @@ export interface MenuRenderProps { } export interface MenuProps extends Omit, 'children'>, CollectionProps, StyleRenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Menu' + */ + className?: ClassNameOrFunction, /** Provides content to display when there are no items in the list. */ renderEmptyState?: () => ReactNode } @@ -272,7 +289,13 @@ function MenuInner({props, collection, menuRef: ref}: MenuInne ); } -export interface MenuSectionProps extends SectionProps, MultipleSelection {} +export interface MenuSectionProps extends SectionProps, MultipleSelection { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-MenuSection' + */ + className?: string +} // A subclass of SelectionManager that forwards focus-related properties to the parent, // but has its own local selection state. @@ -363,6 +386,11 @@ export interface MenuItemRenderProps extends ItemRenderProps { } export interface MenuItemProps extends RenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-MenuItem' + */ + className?: ClassNameOrFunction, /** The unique id of the item. */ id?: Key, /** The object value that this item represents. When using dynamic collections, this is set automatically. */ diff --git a/packages/react-aria-components/src/Meter.tsx b/packages/react-aria-components/src/Meter.tsx index bf33dc43a60..0f8fbecee7b 100644 --- a/packages/react-aria-components/src/Meter.tsx +++ b/packages/react-aria-components/src/Meter.tsx @@ -12,13 +12,27 @@ import {AriaMeterProps, useMeter} from 'react-aria'; import {clamp} from '@react-stately/utils'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared'; import {LabelContext} from './Label'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; -export interface MeterProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface MeterProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Meter' + */ + className?: ClassNameOrFunction +} export interface MeterRenderProps { /** diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx index 90454456369..5aeccea36a5 100644 --- a/packages/react-aria-components/src/Modal.tsx +++ b/packages/react-aria-components/src/Modal.tsx @@ -11,7 +11,15 @@ */ import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria'; -import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils'; import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately'; @@ -19,6 +27,11 @@ import {OverlayTriggerStateContext} from './Dialog'; import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react'; export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ModalOverlay' + */ + className?: ClassNameOrFunction, /** * Whether the modal is currently performing an entry animation. */ @@ -207,6 +220,11 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn } interface ModalContentProps extends RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ModalContent' + */ + className?: ClassNameOrFunction, modalRef: ForwardedRef } diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx index 79899a5a2b7..61b5329c4a3 100644 --- a/packages/react-aria-components/src/NumberField.tsx +++ b/packages/react-aria-components/src/NumberField.tsx @@ -12,7 +12,19 @@ import {AriaNumberFieldProps, useLocale, useNumberField} from 'react-aria'; import {ButtonContext} from './Button'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {FieldErrorContext} from './FieldError'; import {filterDOMProps} from '@react-aria/utils'; import {FormContext} from './Form'; @@ -46,7 +58,13 @@ export interface NumberFieldRenderProps { state: NumberFieldState } -export interface NumberFieldProps extends Omit, RACValidation, InputDOMProps, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface NumberFieldProps extends Omit, RACValidation, InputDOMProps, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-NumberField' + */ + className?: ClassNameOrFunction +} export const NumberFieldContext = createContext>(null); export const NumberFieldStateContext = createContext(null); diff --git a/packages/react-aria-components/src/OverlayArrow.tsx b/packages/react-aria-components/src/OverlayArrow.tsx index a99c5c446a5..f39405498a2 100644 --- a/packages/react-aria-components/src/OverlayArrow.tsx +++ b/packages/react-aria-components/src/OverlayArrow.tsx @@ -10,7 +10,13 @@ * governing permissions and limitations under the License. */ -import {ContextValue, RenderProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + useContextProps, + useRenderProps +} from './utils'; import {DOMProps, forwardRefType} from '@react-types/shared'; import {filterDOMProps} from '@react-aria/utils'; import {PlacementAxis} from 'react-aria'; @@ -24,7 +30,13 @@ export const OverlayArrowContext = createContext, 'className' | 'style' | 'children'>, RenderProps, DOMProps {} +export interface OverlayArrowProps extends Omit, 'className' | 'style' | 'children'>, RenderProps, DOMProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-OverlayArrow' + */ + className?: ClassNameOrFunction +} export interface OverlayArrowRenderProps { /** diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx index 58651c7317b..95d32ba8fbd 100644 --- a/packages/react-aria-components/src/Popover.tsx +++ b/packages/react-aria-components/src/Popover.tsx @@ -12,7 +12,14 @@ import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils'; import {focusSafely} from '@react-aria/interactions'; import {OverlayArrowContext} from './OverlayArrow'; @@ -22,6 +29,11 @@ import React, {Context, createContext, ForwardedRef, forwardRef, useContext, use import {useIsHidden} from '@react-aria/collections'; export interface PopoverProps extends Omit, Omit, OverlayTriggerProps, RenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Popover' + */ + className?: ClassNameOrFunction, /** * The name of the component that triggered the popover. This is reflected on the element * as the `data-trigger` attribute, and can be used to provide specific diff --git a/packages/react-aria-components/src/ProgressBar.tsx b/packages/react-aria-components/src/ProgressBar.tsx index a11bdd580f3..758c593eac1 100644 --- a/packages/react-aria-components/src/ProgressBar.tsx +++ b/packages/react-aria-components/src/ProgressBar.tsx @@ -12,13 +12,27 @@ import {AriaProgressBarProps, useProgressBar} from 'react-aria'; import {clamp} from '@react-stately/utils'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import {LabelContext} from './Label'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; -export interface ProgressBarProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface ProgressBarProps extends Omit, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ProgressBar' + */ + className?: ClassNameOrFunction +} export interface ProgressBarRenderProps { /** diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx index f09d39debad..eca6629f434 100644 --- a/packages/react-aria-components/src/RadioGroup.tsx +++ b/packages/react-aria-components/src/RadioGroup.tsx @@ -11,7 +11,19 @@ */ import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {FieldErrorContext} from './FieldError'; import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils'; import {FormContext} from './Form'; @@ -23,8 +35,19 @@ import {SelectionIndicatorContext} from './SelectionIndicator'; import {SharedElementTransition} from './SharedElementTransition'; import {TextContext} from './Text'; -export interface RadioGroupProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface RadioGroupProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-RadioGroup' + */ + className?: ClassNameOrFunction +} export interface RadioProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Radio' + */ + className?: ClassNameOrFunction, /** * A ref for the HTML input element. */ diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx index 43c708c2575..7bfdc703008 100644 --- a/packages/react-aria-components/src/SearchField.tsx +++ b/packages/react-aria-components/src/SearchField.tsx @@ -12,7 +12,19 @@ import {AriaSearchFieldProps, useSearchField} from 'react-aria'; import {ButtonContext} from './Button'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {createHideableComponent} from '@react-aria/collections'; import {FieldErrorContext} from './FieldError'; import {FieldInputContext} from './RSPContexts'; @@ -48,7 +60,13 @@ export interface SearchFieldRenderProps { state: SearchFieldState } -export interface SearchFieldProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface SearchFieldProps extends Omit, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SearchField' + */ + className?: ClassNameOrFunction +} export const SearchFieldContext = createContext>(null); diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx index 30740522b99..b2efd1e15c9 100644 --- a/packages/react-aria-components/src/Select.tsx +++ b/packages/react-aria-components/src/Select.tsx @@ -12,9 +12,21 @@ import {AriaSelectProps, HiddenSelect, useFocusRing, useListFormatter, useLocalizedStringFormatter, useSelect} from 'react-aria'; import {ButtonContext} from './Button'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {Collection, Node, SelectState, useSelectState} from 'react-stately'; import {CollectionBuilder, createHideableComponent} from '@react-aria/collections'; -import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; import {FieldErrorContext} from './FieldError'; import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils'; import {FormContext} from './Form'; @@ -65,6 +77,11 @@ export interface SelectRenderProps { } export interface SelectProps extends Omit, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Select' + */ + className?: ClassNameOrFunction, /** * Temporary text that occupies the select when it is empty. * @default 'Select an item' (localized) @@ -243,7 +260,13 @@ export interface SelectValueRenderProps { state: SelectState } -export interface SelectValueProps extends Omit, keyof RenderProps>, RenderProps> {} +export interface SelectValueProps extends Omit, keyof RenderProps>, RenderProps> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SelectValue' + */ + className?: ClassNameOrFunction> +} export const SelectValueContext = createContext, HTMLSpanElement>>(null); diff --git a/packages/react-aria-components/src/SelectionIndicator.tsx b/packages/react-aria-components/src/SelectionIndicator.tsx index 606c24d8643..7c86c936123 100644 --- a/packages/react-aria-components/src/SelectionIndicator.tsx +++ b/packages/react-aria-components/src/SelectionIndicator.tsx @@ -10,11 +10,17 @@ * governing permissions and limitations under the License. */ -import {ContextValue, useContextProps} from './utils'; +import {ClassNameOrFunction, ContextValue, useContextProps} from './utils'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; -import {SharedElement, SharedElementPropsBase} from './SharedElementTransition'; +import {SharedElement, SharedElementPropsBase, SharedElementRenderProps} from './SharedElementTransition'; export interface SelectionIndicatorProps extends SharedElementPropsBase { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SelectionIndicator' + */ + className?: ClassNameOrFunction, + /** Whether the SelectionIndicator is visible. This is usually set automatically by the parent component. */ isSelected?: boolean } diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx index 876e5669f0f..7a6da74022d 100644 --- a/packages/react-aria-components/src/Separator.tsx +++ b/packages/react-aria-components/src/Separator.tsx @@ -17,7 +17,13 @@ import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {GlobalDOMAttributes} from '@react-types/shared'; import React, {createContext, ElementType, ForwardedRef} from 'react'; -export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, GlobalDOMAttributes {} +export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-Separator' + */ + className?: string +} export const SeparatorContext = createContext>({}); diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx index c982f5b12f8..653edc59983 100644 --- a/packages/react-aria-components/src/Slider.tsx +++ b/packages/react-aria-components/src/Slider.tsx @@ -11,7 +11,17 @@ */ import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria'; -import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {filterDOMProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; import {LabelContext} from './Label'; @@ -19,6 +29,11 @@ import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHT import {SliderState, useSliderState} from 'react-stately'; export interface SliderProps extends Omit, 'label'>, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Slider' + */ + className?: ClassNameOrFunction, /** * The display format of the value label. */ @@ -96,7 +111,13 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid ); }); -export interface SliderOutputProps extends RenderProps, GlobalDOMAttributes {} +export interface SliderOutputProps extends RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SliderOutput' + */ + className?: ClassNameOrFunction +} interface SliderOutputContextValue extends Omit, 'children' | 'className' | 'style'>, SliderOutputProps {} /** @@ -137,7 +158,13 @@ export interface SliderTrackRenderProps extends SliderRenderProps { isHovered: boolean } -export interface SliderTrackProps extends HoverEvents, RenderProps, GlobalDOMAttributes {} +export interface SliderTrackProps extends HoverEvents, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SliderTrack' + */ + className?: ClassNameOrFunction +} interface SliderTrackContextValue extends Omit, 'children' | 'className' | 'style'>, SliderTrackProps {} /** @@ -203,6 +230,11 @@ export interface SliderThumbRenderProps { } export interface SliderThumbProps extends Omit, HoverEvents, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-SliderThumb' + */ + className?: ClassNameOrFunction, /** * A ref for the HTML input element. */ diff --git a/packages/react-aria-components/src/Switch.tsx b/packages/react-aria-components/src/Switch.tsx index cb844929efa..6f1e20c71f9 100644 --- a/packages/react-aria-components/src/Switch.tsx +++ b/packages/react-aria-components/src/Switch.tsx @@ -11,17 +11,30 @@ */ import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria'; -import {ContextValue, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; import {ToggleState, useToggleState} from 'react-stately'; export interface SwitchProps extends Omit, HoverEvents, RenderProps, SlotProps, Omit, 'onClick'> { - /** - * A ref for the HTML input element. - */ - inputRef?: RefObject + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Switch' + */ + className?: ClassNameOrFunction, + /** + * A ref for the HTML input element. + */ + inputRef?: RefObject } export interface SwitchRenderProps { diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx index 9d97a2bf3c7..03bbb3395a0 100644 --- a/packages/react-aria-components/src/Table.tsx +++ b/packages/react-aria-components/src/Table.tsx @@ -3,9 +3,21 @@ import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBra import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table'; import {ButtonContext} from './Button'; import {CheckboxContext, FieldInputContext, SelectableCollectionContext, SelectableCollectionContextValue} from './RSPContexts'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + DOMProps, + Provider, + RenderProps, + SlotProps, + StyleProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection'; import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table'; -import {ContextValue, DEFAULT_SLOT, DOMProps, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, UNSTABLE_useFilteredTableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately'; import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop'; import {DragAndDropHooks} from './useDragAndDrop'; @@ -207,6 +219,11 @@ interface ResizableTableContainerContextValue { const ResizableTableContainerContext = createContext(null); export interface ResizableTableContainerProps extends DOMProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-ResizableTableContainer' + */ + className?: string, /** * Handler that is called when a user starts a column resize. */ @@ -306,6 +323,11 @@ export interface TableRenderProps { } export interface TableProps extends Omit, 'children'>, StyleRenderProps, SlotProps, AriaLabelingProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Table' + */ + className?: ClassNameOrFunction, /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */ children?: ReactNode, /** @@ -545,6 +567,11 @@ export interface TableHeaderRenderProps { } export interface TableHeaderProps extends StyleRenderProps, HoverEvents, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TableHeader' + */ + className?: ClassNameOrFunction, /** A list of table columns. */ columns?: Iterable, /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */ @@ -676,6 +703,11 @@ export interface ColumnRenderProps { } export interface ColumnProps extends RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Column' + */ + className?: ClassNameOrFunction, /** The unique id of the column. */ id?: Key, /** Whether the column allows sorting. */ @@ -814,6 +846,11 @@ export interface ColumnResizerRenderProps { } export interface ColumnResizerProps extends HoverEvents, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ColumnResizer' + */ + className?: ClassNameOrFunction, /** A custom accessibility label for the resizer. */ 'aria-label'?: string } @@ -930,6 +967,11 @@ export interface TableBodyRenderProps { } export interface TableBodyProps extends Omit, 'disabledKeys'>, StyleRenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TableBody' + */ + className?: ClassNameOrFunction, /** Provides content to display when there are no rows in the table. */ renderEmptyState?: (props: TableBodyRenderProps) => ReactNode } @@ -1018,6 +1060,11 @@ export interface RowRenderProps extends ItemRenderProps { } export interface RowProps extends StyleRenderProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Row' + */ + className?: ClassNameOrFunction, /** A list of columns used when dynamically rendering cells. */ columns?: Iterable, /** The cells within the row. Supports static items or a function for dynamic rendering. */ @@ -1233,6 +1280,11 @@ export interface CellRenderProps { } export interface CellProps extends RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Cell' + */ + className?: ClassNameOrFunction, /** The unique id of the cell. */ id?: Key, /** A string representation of the cell's contents, used for features like typeahead. */ @@ -1393,6 +1445,11 @@ function RootDropIndicator() { } export interface TableLoadMoreItemProps extends Omit, StyleProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-TableLoadMoreItem' + */ + className?: string, /** * The load more spinner to render when loading additional items. */ diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx index 412a1553128..0fc5bd2b798 100644 --- a/packages/react-aria-components/src/Tabs.tsx +++ b/packages/react-aria-components/src/Tabs.tsx @@ -12,16 +12,32 @@ import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps, + useSlottedContext +} from './utils'; import {Collection, CollectionBuilder, CollectionNode, createHideableComponent, createLeafComponent} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection'; -import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils'; import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately'; import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react'; import {SelectionIndicatorContext} from './SelectionIndicator'; import {SharedElementTransition} from './SharedElementTransition'; -export interface TabsProps extends Omit, 'items' | 'children'>, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface TabsProps extends Omit, 'items' | 'children'>, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Tabs' + */ + className?: ClassNameOrFunction +} export interface TabsRenderProps { /** @@ -31,7 +47,13 @@ export interface TabsRenderProps { orientation: Orientation } -export interface TabListProps extends StyleRenderProps, AriaLabelingProps, Omit, 'disabledKeys'>, GlobalDOMAttributes {} +export interface TabListProps extends StyleRenderProps, AriaLabelingProps, Omit, 'disabledKeys'>, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TabList' + */ + className?: ClassNameOrFunction +} export interface TabListRenderProps { /** @@ -46,6 +68,11 @@ export interface TabListRenderProps { } export interface TabProps extends RenderProps, AriaLabelingProps, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Tab' + */ + className?: ClassNameOrFunction, /** The unique id of the tab. */ id?: Key, /** Whether the tab is disabled. */ @@ -86,6 +113,11 @@ export interface TabRenderProps { } export interface TabPanelProps extends AriaTabPanelProps, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TabPanel' + */ + className?: ClassNameOrFunction, /** * Whether to mount the tab panel in the DOM even when it is not currently selected. * Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually. diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx index 03d5857224f..0e63c0184f7 100644 --- a/packages/react-aria-components/src/TagGroup.tsx +++ b/packages/react-aria-components/src/TagGroup.tsx @@ -12,9 +12,20 @@ import {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria'; import {ButtonContext} from './Button'; +import { + ClassNameOrFunction, + ContextValue, + DOMProps, + Provider, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps, + useSlot +} from './utils'; import {Collection, CollectionBuilder, createLeafComponent, ItemNode} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection'; -import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils'; import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, PressEvents, RefObject} from '@react-types/shared'; import {LabelContext} from './Label'; @@ -26,7 +37,13 @@ import {SelectionIndicatorContext} from './SelectionIndicator'; import {SharedElementTransition} from './SharedElementTransition'; import {TextContext} from './Text'; -export interface TagGroupProps extends Omit, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes {} +export interface TagGroupProps extends Omit, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. + * @default 'react-aria-TagGroup' + */ + className?: string +} export interface TagListRenderProps { /** @@ -51,6 +68,11 @@ export interface TagListRenderProps { } export interface TagListProps extends Omit, 'disabledKeys'>, StyleRenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TagList' + */ + className?: ClassNameOrFunction, /** Provides content to display when there are no items in the tag list. */ renderEmptyState?: (props: TagListRenderProps) => ReactNode } @@ -198,6 +220,11 @@ export interface TagRenderProps extends Omit, LinkDOMProps, HoverEvents, PressEvents, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Tag' + */ + className?: ClassNameOrFunction, /** A unique id for the tag. */ id?: Key, /** diff --git a/packages/react-aria-components/src/TextArea.tsx b/packages/react-aria-components/src/TextArea.tsx index ae811bf7954..58dc97ff8df 100644 --- a/packages/react-aria-components/src/TextArea.tsx +++ b/packages/react-aria-components/src/TextArea.tsx @@ -1,9 +1,21 @@ -import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria'; import {InputRenderProps} from './Input'; import React, {createContext, ForwardedRef, forwardRef, TextareaHTMLAttributes} from 'react'; -export interface TextAreaProps extends Omit, 'className' | 'style'>, HoverEvents, StyleRenderProps {} +export interface TextAreaProps extends Omit, 'className' | 'style'>, HoverEvents, StyleRenderProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TextArea' + */ + className?: ClassNameOrFunction +} export const TextAreaContext = createContext>({}); diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx index 5be86cef6d3..f99b95040ce 100644 --- a/packages/react-aria-components/src/TextField.tsx +++ b/packages/react-aria-components/src/TextField.tsx @@ -11,7 +11,20 @@ */ import {AriaTextFieldProps, useTextField} from 'react-aria'; -import {ContextValue, DOMProps, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + DOMProps, + Provider, + RACValidation, + removeDataAttributes, + RenderProps, + SlotProps, + useContextProps, + useRenderProps, + useSlot, + useSlottedContext +} from './utils'; import {createHideableComponent} from '@react-aria/collections'; import {FieldErrorContext} from './FieldError'; import {FieldInputContext} from './RSPContexts'; @@ -49,6 +62,11 @@ export interface TextFieldRenderProps { } export interface TextFieldProps extends Omit, RACValidation, Omit, SlotProps, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TextField' + */ + className?: ClassNameOrFunction, /** Whether the value is invalid. */ isInvalid?: boolean } diff --git a/packages/react-aria-components/src/Toast.tsx b/packages/react-aria-components/src/Toast.tsx index d738af57396..8ba2e724dfe 100644 --- a/packages/react-aria-components/src/Toast.tsx +++ b/packages/react-aria-components/src/Toast.tsx @@ -12,7 +12,16 @@ import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useHover, useLocale, useToast, useToastRegion} from 'react-aria'; import {ButtonContext} from './Button'; -import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {createPortal} from 'react-dom'; import {filterDOMProps, useObjectRef} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared'; @@ -45,6 +54,11 @@ export interface ToastRegionRenderProps { } export interface ToastRegionProps extends AriaToastRegionProps, StyleRenderProps>, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ToastRegion' + */ + className?: ClassNameOrFunction>, /** The queue of toasts to display. */ queue: ToastQueue, /** A function to render each toast, or children containing a ``. */ @@ -153,7 +167,13 @@ export interface ToastRenderProps { isFocusVisible: boolean } -export interface ToastProps extends AriaToastProps, RenderProps>, GlobalDOMAttributes {} +export interface ToastProps extends AriaToastProps, RenderProps>, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Toast' + */ + className?: ClassNameOrFunction> +} /** * A Toast displays a brief, temporary notification of actions, errors, or other events in an application. diff --git a/packages/react-aria-components/src/ToggleButton.tsx b/packages/react-aria-components/src/ToggleButton.tsx index 846c95797eb..45db0a25e4a 100644 --- a/packages/react-aria-components/src/ToggleButton.tsx +++ b/packages/react-aria-components/src/ToggleButton.tsx @@ -12,7 +12,14 @@ import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton, useToggleButtonGroupItem} from 'react-aria'; import {ButtonRenderProps} from './Button'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react'; @@ -33,6 +40,11 @@ export interface ToggleButtonRenderProps extends Omit, HoverEvents, SlotProps, RenderProps, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ToggleButton' + */ + className?: ClassNameOrFunction, /** When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. */ id?: Key } diff --git a/packages/react-aria-components/src/ToggleButtonGroup.tsx b/packages/react-aria-components/src/ToggleButtonGroup.tsx index 5a84cf46ca3..b2800af9843 100644 --- a/packages/react-aria-components/src/ToggleButtonGroup.tsx +++ b/packages/react-aria-components/src/ToggleButtonGroup.tsx @@ -10,7 +10,14 @@ * governing permissions and limitations under the License. */ import {AriaToggleButtonGroupProps, useToggleButtonGroup} from 'react-aria'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; @@ -29,7 +36,13 @@ export interface ToggleButtonGroupRenderProps { state: ToggleGroupState } -export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps, SlotProps, GlobalDOMAttributes {} +export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps, SlotProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-ToggleButtonGroup' + */ + className?: ClassNameOrFunction +} export const ToggleButtonGroupContext = createContext>({}); export const ToggleGroupStateContext = createContext(null); diff --git a/packages/react-aria-components/src/Toolbar.tsx b/packages/react-aria-components/src/Toolbar.tsx index 11d0afdf602..533afcbe9f9 100644 --- a/packages/react-aria-components/src/Toolbar.tsx +++ b/packages/react-aria-components/src/Toolbar.tsx @@ -11,7 +11,14 @@ */ import {AriaToolbarProps, useToolbar} from '@react-aria/toolbar'; -import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + RenderProps, + SlotProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps, mergeProps} from '@react-aria/utils'; import {forwardRefType, GlobalDOMAttributes, Orientation} from '@react-types/shared'; import React, {createContext, ForwardedRef, forwardRef} from 'react'; @@ -25,6 +32,11 @@ export interface ToolbarRenderProps { } export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Toolbar' + */ + className?: ClassNameOrFunction } export const ToolbarContext = createContext>({}); diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx index 0be1d79de4e..937d99f10f2 100644 --- a/packages/react-aria-components/src/Tooltip.tsx +++ b/packages/react-aria-components/src/Tooltip.tsx @@ -12,7 +12,14 @@ import {AriaLabelingProps, FocusableElement, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared'; import {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria'; -import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils'; +import { + ClassNameOrFunction, + ContextValue, + Provider, + RenderProps, + useContextProps, + useRenderProps +} from './utils'; import {filterDOMProps, useEnterAnimation, useExitAnimation} from '@react-aria/utils'; import {FocusableProvider} from '@react-aria/focus'; import {OverlayArrowContext} from './OverlayArrow'; @@ -24,6 +31,11 @@ export interface TooltipTriggerComponentProps extends TooltipTriggerProps { } export interface TooltipProps extends PositionProps, Pick, OverlayTriggerProps, AriaLabelingProps, RenderProps, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Tooltip' + */ + className?: ClassNameOrFunction, /** * The ref for the element which the tooltip positions itself with respect to. * diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx index 26ae321e74e..6eeac03c73e 100644 --- a/packages/react-aria-components/src/Tree.tsx +++ b/packages/react-aria-components/src/Tree.tsx @@ -13,7 +13,18 @@ import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useGridListSelectionCheckbox, useHover, useId, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria'; import {ButtonContext} from './Button'; import {CheckboxContext} from './RSPContexts'; -import {ChildrenOrFunction, ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils'; +import { + ChildrenOrFunction, + ClassNameOrFunction, + ContextValue, + DEFAULT_SLOT, + Provider, + RenderProps, + SlotProps, + StyleRenderProps, + useContextProps, + useRenderProps +} from './utils'; import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, LoaderNode, useCachedChildren} from '@react-aria/collections'; import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection'; import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents, RefObject, SelectionMode} from '@react-types/shared'; @@ -137,6 +148,11 @@ export interface TreeRenderProps { export interface TreeEmptyStateRenderProps extends Omit {} export interface TreeProps extends Omit, 'children'>, MultipleSelection, CollectionProps, StyleRenderProps, SlotProps, Expandable, GlobalDOMAttributes { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-Tree' + */ + className?: ClassNameOrFunction, /** * How multiple selection should behave in the tree. * @default "toggle" @@ -450,7 +466,10 @@ export interface TreeItemContentRenderProps extends TreeItemRenderProps {} // The TreeItemContent is the one that accepts RenderProps because we would get much more complicated logic in TreeItem otherwise since we'd // need to do a bunch of check to figure out what is the Content and what are the actual collection elements (aka child rows) of the TreeItem -export interface TreeItemContentProps extends Pick, 'children'> {} +export interface TreeItemContentProps { + /** The children of the component. A function may be provided to alter the children based on component state. */ + children: ChildrenOrFunction +} class TreeContentNode extends CollectionNode { static readonly type = 'content'; @@ -472,6 +491,11 @@ export const TreeItemContent = /*#__PURE__*/ createLeafComponent(TreeContentNode export const TreeItemContentContext = createContext(null); export interface TreeItemProps extends StyleRenderProps, LinkDOMProps, HoverEvents, PressEvents, Pick, Omit, 'onClick'> { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TreeItem' + */ + className?: ClassNameOrFunction, /** The unique id of the tree row. */ id?: Key, /** The object value that this tree item represents. When using dynamic collections, this is set automatically. */ @@ -628,39 +652,39 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent(TreeItemNode, {dropIndicator && !dropIndicator.isHidden && ( -
-
-
- {rowProps['aria-expanded'] != null ? ( - // Button to allow touch screen reader users to expand the item while dragging. -
- ) : null} -
+
+
+
+ {rowProps['aria-expanded'] != null ? ( + // Button to allow touch screen reader users to expand the item while dragging. +
+ ) : null}
- )} +
+ )}
{children} @@ -722,6 +746,11 @@ export interface TreeLoadMoreItemRenderProps { } export interface TreeLoadMoreItemProps extends Omit, RenderProps { + /** + * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. + * @default 'react-aria-TreeLoadMoreItem' + */ + className?: ClassNameOrFunction, /** * The load more spinner to render when loading additional items. */ diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx index f0bad80ae4d..f75ec2dde13 100644 --- a/packages/react-aria-components/src/utils.tsx +++ b/packages/react-aria-components/src/utils.tsx @@ -63,7 +63,7 @@ export interface DOMProps extends StyleProps, SharedDOMProps { children?: ReactNode } -type ClassNameOrFunction = string | ((values: T & {defaultClassName: string | undefined}) => string); +export type ClassNameOrFunction = string | ((values: T & {defaultClassName: string | undefined}) => string); type StyleOrFunction = CSSProperties | ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined); export interface StyleRenderProps { From 0048449daf432b43efd9065ad32178364c6e9d27 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Fri, 3 Oct 2025 12:08:43 -0700 Subject: [PATCH 3/3] Fix type --- packages/react-aria-components/docs/ColorPicker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-aria-components/docs/ColorPicker.mdx b/packages/react-aria-components/docs/ColorPicker.mdx index 00c28833908..4871573c1f8 100644 --- a/packages/react-aria-components/docs/ColorPicker.mdx +++ b/packages/react-aria-components/docs/ColorPicker.mdx @@ -213,7 +213,7 @@ import {MyColorArea} from './ColorArea'; import {MyColorSlider} from './ColorSlider'; import {MyColorField} from './ColorField'; -interface MyColorPickerProps extends ColorPickerProps { +interface MyColorPickerProps extends Omit { label?: string, children?: React.ReactNode }