` 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 e7f3454f23c..b29394ffcc8 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tooltip.mdx
@@ -155,12 +155,14 @@ const CustomTrigger = React.forwardRef((props, ref) => (
### Tooltip
-
-
-
+
### 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..ebaa21fad39 100644
--- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx
@@ -377,20 +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 068cea9a390..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,10 +11,11 @@ interface StateTableProps {
links?: any,
showOptional?: boolean,
hideSelector?: boolean,
- defaultClassName?: string
+ cssVariables?: {[name: string]: string},
+ style?: CSSProperties
}
-export function StateTable({properties, links, showOptional, hideSelector, defaultClassName}: StateTableProps) {
+export function StateTable({properties, links, showOptional, hideSelector, cssVariables, style: styleProp}: StateTableProps) {
if (links) {
setLinks(links);
}
@@ -26,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
@@ -56,23 +57,36 @@ export function StateTable({properties, links, showOptional, hideSelector, defau
);
- if (defaultClassName) {
+ if (cssVariables) {
table = (
<>
-
{table}
+
+
+
+ CSS Variable
+
+
+
+ {Object.entries(cssVariables).map(([name, description]) => (
+
+
+
+
+ {name}
+
+
+
+
+ {renderHTMLfromMarkdown(description, {forceInline: true})}
+
+
+ ))}
+
+
);
}
return table;
}
-
-export function DefaultClassName({defaultClassName}: {defaultClassName: string}) {
- return (
-
- Default className:
- {defaultClassName}
-
- );
-}
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
}
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