diff --git a/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx b/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
index a70606c6ede..ea22f408d1c 100644
--- a/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
+++ b/packages/@adobe/react-spectrum/src/checkbox/Checkbox.tsx
@@ -68,7 +68,7 @@ export const Checkbox = forwardRef(function Checkbox(
// but since the checkbox won't move in and out of a group, it should be safe.
let groupState = useContext(CheckboxGroupContext);
let {labelProps, inputProps, isInvalid, isDisabled} = groupState
- ? // eslint-disable-next-line react-hooks/rules-of-hooks
+ ? // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
useCheckboxGroupItem(
{
...props,
@@ -85,7 +85,7 @@ export const Checkbox = forwardRef(function Checkbox(
groupState,
inputRef
)
- : // eslint-disable-next-line react-hooks/rules-of-hooks
+ : // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
useCheckbox(props, useToggleState(props), inputRef);
let {hoverProps, isHovered} = useHover({isDisabled});
diff --git a/packages/@adobe/react-spectrum/src/color/ColorField.tsx b/packages/@adobe/react-spectrum/src/color/ColorField.tsx
index c67be312688..e83b1cf5ab6 100644
--- a/packages/@adobe/react-spectrum/src/color/ColorField.tsx
+++ b/packages/@adobe/react-spectrum/src/color/ColorField.tsx
@@ -59,6 +59,7 @@ export const ColorField = React.forwardRef(function ColorField(
props: SpectrumColorFieldProps,
ref: Ref
) {
+ // oxlint-disable-next-line react/react-compiler
props = useProviderProps(props);
props = useFormProps(props);
[props] = useContextProps(props, null, ColorFieldContext);
diff --git a/packages/@adobe/react-spectrum/src/color/ColorPicker.tsx b/packages/@adobe/react-spectrum/src/color/ColorPicker.tsx
index 515c24da863..032b980e4e9 100644
--- a/packages/@adobe/react-spectrum/src/color/ColorPicker.tsx
+++ b/packages/@adobe/react-spectrum/src/color/ColorPicker.tsx
@@ -56,6 +56,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker(
let labelId = useId();
return (
+ {/* oxlint-disable-next-line react/react-compiler */}
);
+ // oxlint-enable react/react-compiler
};
export interface AttachmentListProps
diff --git a/packages/@react-spectrum/ai/src/HorizontalCard.tsx b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
index 4135e44dbb3..b170d2a809c 100644
--- a/packages/@react-spectrum/ai/src/HorizontalCard.tsx
+++ b/packages/@react-spectrum/ai/src/HorizontalCard.tsx
@@ -516,6 +516,7 @@ const Card = forwardRef(function Card(
);
+ // oxlint-disable-next-line react/react-compiler
let press = pressScale(domRef);
if (ElementType === 'div' && !isSkeleton && props.href) {
// Standalone Card that has an href should be rendered as a Link.
@@ -676,6 +677,7 @@ export const CardPreview = forwardRef(function CardPreview(
let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} =
useContext(InternalCardContext);
let domRef = useDOMRef(ref);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
const collection = style({
diff --git a/packages/@react-spectrum/ai/src/MessageSuggestion.tsx b/packages/@react-spectrum/ai/src/MessageSuggestion.tsx
index 6c3fc377b8f..f88d158c9a7 100644
--- a/packages/@react-spectrum/ai/src/MessageSuggestion.tsx
+++ b/packages/@react-spectrum/ai/src/MessageSuggestion.tsx
@@ -107,6 +107,7 @@ export const MessageSuggestion = forwardRef(function MessageSuggestion(
let {groupSize} = useContext(MessageSuggestionContext);
size = groupSize ? groupSize : size;
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
export interface MessageSuggestionListProps extends DOMProps, AriaLabelingProps, SlotProps {
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 843a74be416..970dd19c044 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -331,6 +331,7 @@ export const ActionButton = forwardRef(function ActionButton(
props: ActionButtonProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
props = useFormProps(props as any);
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -352,6 +353,7 @@ export const ActionButton = forwardRef(function ActionButton(
let {isProgressVisible} = usePendingState(isPending);
let {direction} = useLocale();
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index f979225fbfe..c6b334ddfa0 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -381,6 +381,7 @@ export function usePendingState(isPending: boolean) {
setIsProgressVisible(true);
}, 1000);
} else {
+ // oxlint-disable-next-line react/react-compiler
setIsProgressVisible(false);
}
return () => {
@@ -399,6 +400,7 @@ export const Button = forwardRef(function Button(
props: ButtonProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ButtonContext);
props = useFormProps(props);
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -408,6 +410,7 @@ export const Button = forwardRef(function Button(
let {isProgressVisible} = usePendingState(isPending);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
/**
@@ -521,12 +525,14 @@ export const LinkButton = forwardRef(function LinkButton(
props: LinkButtonProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);
props = useFormProps(props);
let domRef = useFocusableRef(ref);
let overlayTriggerState = useContext(OverlayTriggerStateContext);
let {fillStyle = 'fill', size = 'M', variant = 'primary', staticColor, styles, children} = props;
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index caee5613a45..07e86094ce2 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
@@ -127,6 +127,7 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
let [hasOverflow, setHasOverflow] = useValueEffect(false);
+ // oxlint-disable react/react-compiler, react-hooks/exhaustive-deps
let checkForOverflow = useCallback(() => {
let computeHasOverflow = () => {
if (domRef.current && orientation === 'horizontal') {
@@ -153,8 +154,8 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
yield computeHasOverflow();
});
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [domRef, orientation, setHasOverflow, children]);
+ // oxlint-enable react/react-compiler, react-hooks/exhaustive-deps
// There are two main reasons we need to remeasure:
// 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)
@@ -164,12 +165,13 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
// 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure
let parent = useRef(null);
+ // oxlint-disable react/react-compiler, react-hooks/exhaustive-deps
useLayoutEffect(() => {
if (domRef.current) {
parent.current = domRef.current.parentElement as HTMLElement;
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
}, [domRef.current]);
+ // oxlint-enable react/react-compiler, react-hooks/exhaustive-deps
useResizeObserver({ref: parent, onResize: checkForOverflow});
if ((props as ButtonGroupContextValue).isHidden) {
diff --git a/packages/@react-spectrum/s2/src/Calendar.tsx b/packages/@react-spectrum/s2/src/Calendar.tsx
index 96d8f072b6d..7e4a61c417c 100644
--- a/packages/@react-spectrum/s2/src/Calendar.tsx
+++ b/packages/@react-spectrum/s2/src/Calendar.tsx
@@ -699,6 +699,7 @@ const CalendarCellInner = (
(isInvalid || !isUnavailable) &&
(isDateInRange(prevDay) || (nextDay.month === date.month && isDateInRange(nextDay)));
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
};
type DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index 1b11fc87821..9f9ac87b8b6 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -408,6 +408,7 @@ const actionButtonSize = {
* A Card summarizes an object that a user can select or navigate to.
*/
export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props] = useSpectrumContextProps(props, ref, CardContext);
let {ElementType, layout} = useContext(InternalCardViewContext);
let domRef = useDOMRef(ref);
@@ -459,6 +460,7 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef
);
+ // oxlint-disable-next-line react/react-compiler
let press = pressScale(domRef, UNSAFE_style);
if (ElementType === 'div' && !isSkeleton && props.href) {
// Standalone Card that has an href should be rendered as a Link.
@@ -599,6 +601,7 @@ export const CardPreview = forwardRef(function CardPreview(
useContext(InternalCardContext);
let {UNSAFE_className = '', UNSAFE_style} = props;
let domRef = useDOMRef(ref);
+ // oxlint-disable react/react-compiler
return (
{props.children}
{item.value.type} |
{item.value.date} |
+ {/* oxlint-disable-next-line react/react-compiler */}
{renderItem}
);
@@ -2477,6 +2478,7 @@ function ReorderableTableWithNested(props) {
{item.value.title} |
{item.value.type} |
{item.value.date} |
+ {/* oxlint-disable-next-line react/react-compiler */}
{renderItem}
);
diff --git a/packages/@react-spectrum/s2/test/TreeView.browser.test.tsx b/packages/@react-spectrum/s2/test/TreeView.browser.test.tsx
index fa3de611c1d..7822f0a34d4 100644
--- a/packages/@react-spectrum/s2/test/TreeView.browser.test.tsx
+++ b/packages/@react-spectrum/s2/test/TreeView.browser.test.tsx
@@ -57,6 +57,7 @@ function TreeViewExample() {
return (
{item.title}
+ {/* oxlint-disable-next-line react/react-compiler */}
{renderItem}
);
diff --git a/packages/dev/docs/pages/react-aria/home/Styles.tsx b/packages/dev/docs/pages/react-aria/home/Styles.tsx
index deb735846ef..77f6e84b7df 100644
--- a/packages/dev/docs/pages/react-aria/home/Styles.tsx
+++ b/packages/dev/docs/pages/react-aria/home/Styles.tsx
@@ -271,6 +271,7 @@ function AnimatedTabs({tabs}: {tabs: TabOptions[]}) {
}
}, [selectedKey]);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
const people = [
diff --git a/packages/dev/docs/src/types.js b/packages/dev/docs/src/types.js
index 7f67fc6c033..8ecae79d171 100644
--- a/packages/dev/docs/src/types.js
+++ b/packages/dev/docs/src/types.js
@@ -536,10 +536,12 @@ export function InterfaceType({
);
// Default to showing required indicators if some properties are optional but not all.
+ // oxlint-disable-next-line react/react-compiler
showRequired =
showRequired || (!properties.every(p => p.optional) && !properties.every(p => !p.optional));
// Show default values by default if any of the properties have one defined.
+ // oxlint-disable-next-line react/react-compiler
showDefault = showDefault || properties.some(p => !!p.default);
// Sort props so required ones are shown first.
diff --git a/packages/dev/s2-docs/src/CodePlatter.tsx b/packages/dev/s2-docs/src/CodePlatter.tsx
index f695fc96ebf..4fb858acf3b 100644
--- a/packages/dev/s2-docs/src/CodePlatter.tsx
+++ b/packages/dev/s2-docs/src/CodePlatter.tsx
@@ -105,6 +105,7 @@ export function CodePlatter({children, type, showCoachMark}: CodePlatterProps) {
let {library} = useContext(CodePlatterContext);
if (!type) {
if (library === 'react-aria') {
+ // oxlint-disable-next-line react/react-compiler
type = 'vanilla';
} else if (library === 'react-spectrum') {
type = 's2';
diff --git a/packages/dev/s2-docs/src/ColorSearchView.tsx b/packages/dev/s2-docs/src/ColorSearchView.tsx
index 357de59a318..1e3ef31f822 100644
--- a/packages/dev/s2-docs/src/ColorSearchView.tsx
+++ b/packages/dev/s2-docs/src/ColorSearchView.tsx
@@ -339,6 +339,7 @@ function ColorItem({
? textSwatches[item.name]
: backgroundSwatches[item.name] || scaleSwatches[item.name] || '';
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
diff --git a/packages/dev/s2-docs/src/DisclosureRow.tsx b/packages/dev/s2-docs/src/DisclosureRow.tsx
index eed98dc4642..48f8d6f98d4 100644
--- a/packages/dev/s2-docs/src/DisclosureRow.tsx
+++ b/packages/dev/s2-docs/src/DisclosureRow.tsx
@@ -69,6 +69,7 @@ export function DisclosureRow({title, children, defaultExpanded}) {
let state = useDisclosureState({defaultExpanded});
let ref = useRef(null);
let {buttonProps} = useDisclosure({}, state, ref);
+ // oxlint-disable-next-line react/react-compiler
delete buttonProps['aria-controls']; // there is no panel element in this implementation
return (
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index 7aba746f568..7a67cf94dab 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -80,6 +80,7 @@ function ColorSchemeToggle() {
let ref = useRef(null);
let isDark = colorScheme === 'dark';
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
export default function Header() {
@@ -215,6 +217,7 @@ export default function Header() {
libraryStyles({...renderProps})}>
{getButtonIcon(currentPage)}
diff --git a/packages/dev/s2-docs/src/IconPicker.tsx b/packages/dev/s2-docs/src/IconPicker.tsx
index ccc6fa42e75..78a1788836f 100644
--- a/packages/dev/s2-docs/src/IconPicker.tsx
+++ b/packages/dev/s2-docs/src/IconPicker.tsx
@@ -153,6 +153,7 @@ export function IconPicker({value, onChange, label, contextualHelp}: IconPickerP
function IconItem({item}) {
let Icon = item.icon;
let ref = useRef(null);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
diff --git a/packages/dev/s2-docs/src/IconSearchView.tsx b/packages/dev/s2-docs/src/IconSearchView.tsx
index f4743e87427..219ec1c8e31 100644
--- a/packages/dev/s2-docs/src/IconSearchView.tsx
+++ b/packages/dev/s2-docs/src/IconSearchView.tsx
@@ -182,6 +182,7 @@ export function IconSearchView({filteredItems, listBoxClassName}: IconSearchView
function IconItem({item, isCopied = false}: {item: (typeof iconList)[number]; isCopied?: boolean}) {
let Icon = item.icon;
let ref = useRef(null);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
export function SkeletonIconItem({item}: {item: {id: string}}) {
diff --git a/packages/dev/s2-docs/src/IllustrationCards.tsx b/packages/dev/s2-docs/src/IllustrationCards.tsx
index 6434fdc3e38..fb3fdfe7a3f 100644
--- a/packages/dev/s2-docs/src/IllustrationCards.tsx
+++ b/packages/dev/s2-docs/src/IllustrationCards.tsx
@@ -235,6 +235,7 @@ function IllustrationItem({
}) {
let Illustration = item.Component;
let ref = useRef(null);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
const cache = new Map();
diff --git a/packages/dev/s2-docs/src/Link.tsx b/packages/dev/s2-docs/src/Link.tsx
index dcb92610e77..5a93aa5cfc6 100644
--- a/packages/dev/s2-docs/src/Link.tsx
+++ b/packages/dev/s2-docs/src/Link.tsx
@@ -152,6 +152,7 @@ export function HeaderLink(
) {
let {staticColor, styles, ...otherProps} = props;
let ref = useRef(null);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
diff --git a/packages/dev/s2-docs/src/MobileHeader.tsx b/packages/dev/s2-docs/src/MobileHeader.tsx
index 6f5058e757f..c17e6e42c36 100644
--- a/packages/dev/s2-docs/src/MobileHeader.tsx
+++ b/packages/dev/s2-docs/src/MobileHeader.tsx
@@ -103,6 +103,7 @@ function ColorSchemeToggle() {
let ref = useRef(null);
let isDark = colorScheme === 'dark';
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
export function MobileHeader({toc}) {
@@ -264,6 +266,7 @@ export function MobileHeader({toc}) {
);
+ // oxlint-enable react/react-compiler
}
function useCurrentSection() {
diff --git a/packages/dev/s2-docs/src/TypographySearchView.tsx b/packages/dev/s2-docs/src/TypographySearchView.tsx
index f8614b044d4..c1460b38dec 100644
--- a/packages/dev/s2-docs/src/TypographySearchView.tsx
+++ b/packages/dev/s2-docs/src/TypographySearchView.tsx
@@ -241,6 +241,7 @@ export function TypographySearchView({searchValue = ''}: TypographySearchViewPro
};
// Find the currently selected key for the ListBox
+ // oxlint-disable-next-line react/react-compiler
const selectedKeys = useMemo(() => {
for (const section of sections) {
const item = section.items.find(item => item.name === selectedFont);
diff --git a/packages/dev/s2-docs/src/types.tsx b/packages/dev/s2-docs/src/types.tsx
index dcb9829ba37..00cbd893efb 100644
--- a/packages/dev/s2-docs/src/types.tsx
+++ b/packages/dev/s2-docs/src/types.tsx
@@ -190,56 +190,80 @@ export function Type({type}: {type: TType}) {
case 'void':
case 'unknown':
case 'never':
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'this':
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'symbol':
+ // oxlint-disable-next-line react/react-compiler
return Symbol();
case 'identifier':
+ // oxlint-disable-next-line react/react-compiler
return Identifier(type);
case 'string':
if ('value' in type && type.value != null) {
+ // oxlint-disable-next-line react/react-compiler
return StringLiteral(type);
}
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'number':
if ('value' in type && type.value != null) {
+ // oxlint-disable-next-line react/react-compiler
return NumberLiteral(type);
}
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'boolean':
if ('value' in type && type.value != null) {
+ // oxlint-disable-next-line react/react-compiler
return BooleanLiteral(type);
}
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'union':
+ // oxlint-disable-next-line react/react-compiler
return UnionType(type);
case 'intersection':
+ // oxlint-disable-next-line react/react-compiler
return IntersectionType(type);
case 'application':
+ // oxlint-disable-next-line react/react-compiler
return TypeApplication(type);
case 'typeOperator':
+ // oxlint-disable-next-line react/react-compiler
return TypeOperator(type);
case 'function':
+ // oxlint-disable-next-line react/react-compiler
return FunctionType(type);
case 'parameter':
+ // oxlint-disable-next-line react/react-compiler
return Parameter(type);
case 'link':
+ // oxlint-disable-next-line react/react-compiler
return LinkType(type);
case 'interface':
+ // oxlint-disable-next-line react/react-compiler
return InterfaceType(type);
case 'object':
if (type.properties) {
+ // oxlint-disable-next-line react/react-compiler
return ObjectType(type);
}
+ // oxlint-disable-next-line react/react-compiler
return Keyword(type);
case 'alias':
+ // oxlint-disable-next-line react/react-compiler
return {Type({type: type.value})};
case 'array':
+ // oxlint-disable-next-line react/react-compiler
return ArrayType(type);
case 'tuple':
+ // oxlint-disable-next-line react/react-compiler
return TupleType(type);
case 'typeParameter':
+ // oxlint-disable-next-line react/react-compiler
return TypeParameter(type);
case 'component': {
let props = type.props;
@@ -250,17 +274,22 @@ export function Type({type}: {type: TType}) {
props = LINKS[props.id];
}
if (props) {
+ // oxlint-disable-next-line react/react-compiler
return Type({type: {...props, description: type.description} as any});
}
return null;
}
case 'conditional':
+ // oxlint-disable-next-line react/react-compiler
return ConditionalType(type);
case 'indexedAccess':
+ // oxlint-disable-next-line react/react-compiler
return IndexedAccess(type);
case 'keyof':
+ // oxlint-disable-next-line react/react-compiler
return Keyof(type);
case 'template':
+ // oxlint-disable-next-line react/react-compiler
return TemplateLiteral(type);
default:
console.log('no render component for TYPE', type);
@@ -271,6 +300,7 @@ export function Type({type}: {type: TType}) {
function TypeOperator({operator, value}: TTypeOperator) {
return (
+ {/* oxlint-disable-next-line react/react-compiler */}
{operator} {Type({type: value})}
);
@@ -279,6 +309,7 @@ function TypeOperator({operator, value}: TTypeOperator) {
function IndexedAccess({objectType, indexType}: TIndexedAccess) {
return (
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: objectType})}[{Type({type: indexType})}]
);
@@ -303,6 +334,7 @@ function Symbol() {
function Keyof({keyof}: TKeyof) {
return (
+ {/* oxlint-disable-next-line react/react-compiler */}
{Keyword({type: 'keyof'})} {Type({type: keyof})}
);
@@ -392,18 +424,24 @@ export function Indent({
let openElement, closeElement;
if (params.length === 0) {
+ // oxlint-disable-next-line react/react-compiler
openElement = Punctuation(open);
+ // oxlint-disable-next-line react/react-compiler
closeElement = Punctuation(close);
} else if (params.length > 2 || alwaysIndent) {
// Always indent.
+ // oxlint-disable-next-line react/react-compiler
openElement = Punctuation(open.trimEnd() + '\n' + large + ' ');
+ // oxlint-disable-next-line react/react-compiler
closeElement = Punctuation('\n' + large + close.trimStart());
large += ' ';
// small += ' ';
} else {
// Indent on small screens. Don't indent on large screens.
+ // oxlint-disable-next-line react/react-compiler
openElement = <>{Punctuation(open)};
+ // oxlint-disable-next-line react/react-compiler
closeElement = <>{Punctuation(close)};
// small += ' ';
@@ -507,7 +545,9 @@ function IntersectionType({types}: TIntersection) {
function TypeApplication({base, typeParameters}: TApplication) {
return (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: base})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{TypeParameters({typeParameters})}
);
@@ -520,8 +560,11 @@ export function TypeParameters({typeParameters}: {typeParameters: TType[]}) {
return (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation('<')}
+ {/* oxlint-disable-next-line react/react-compiler */}
{JoinList({elements: typeParameters, joiner: ', ', neverIndent: true})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation('>')}
);
@@ -534,12 +577,15 @@ function TypeParameter({name, constraint, default: defaultType}: TTypeParameter)
{constraint && (
<>
{' '}
+ {/* oxlint-disable-next-line react/react-compiler */}
extends {Type({type: constraint})}
)}
{defaultType && (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(' = ')}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: defaultType})}
)}
@@ -551,14 +597,19 @@ function FunctionType({name, parameters, return: returnType, typeParameters}: TF
return (
<>
{name && {name}}
+ {/* oxlint-disable-next-line react/react-compiler */}
{TypeParameters({typeParameters})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Indent({
params: parameters,
open: '(',
close: ')',
+ // oxlint-disable-next-line react/react-compiler
children: JoinList({elements: parameters, joiner: ', '})
})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(name ? ': ' : ' => ')}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: returnType})}
);
@@ -567,17 +618,22 @@ function FunctionType({name, parameters, return: returnType, typeParameters}: TF
function Parameter({name, value, default: defaultValue, optional, rest}: TParameter) {
return (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{rest && Punctuation('...')}
{name}
+ {/* oxlint-disable-next-line react/react-compiler */}
{optional && Punctuation('?')}
{value && (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(': ')}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: value})}
)}
{defaultValue && (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(' = ')}
@@ -595,6 +651,7 @@ export function LinkType({id}: TLink) {
}
if (DOC_LINKS[type.name]) {
+ // oxlint-disable-next-line react/react-compiler
return Identifier({type: 'identifier', name: type.name});
}
@@ -617,14 +674,16 @@ export function TypeLink({type}: {type: Extract 0 && (
- Extends:{' '}
+ Extends: {/* oxlint-disable-next-line react/react-compiler */}
{JoinList({elements: type.extends, joiner: ', '})}
)}
{type.type === 'component' && Props
}
{type.type === 'interface' || type.type === 'alias' || type.type === 'component' ? (
+ // oxlint-disable-next-line react/react-compiler
Type({type})
) : (
+ // oxlint-disable-next-line react/react-compiler
{Type({type})}
)}
@@ -699,10 +758,12 @@ export function InterfaceType({
) as TMethod[];
// Default to showing required indicators if some properties are optional but not all.
+ // oxlint-disable-next-line react/react-compiler
showRequired =
showRequired || (!properties.every(p => p.optional) && !properties.every(p => !p.optional));
// Show default values by default if any of the properties have one defined.
+ // oxlint-disable-next-line react/react-compiler
showDefault = showDefault || properties.some(p => !!p.default);
// Sort props so required ones are shown first.
@@ -842,7 +903,9 @@ export function InterfaceType({
}
function ObjectType({properties}: TObject) {
+ // oxlint-disable-next-line react/react-compiler
const startObject = Punctuation('{');
+ // oxlint-disable-next-line react/react-compiler
const endObject = Punctuation('}');
return (
<>
@@ -881,7 +944,9 @@ function ObjectType({properties}: TObject) {
function ArrayType({elementType}: TArray) {
return (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: elementType})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation('[]')}
);
@@ -900,11 +965,17 @@ function TupleType({elements}: TTuple) {
function ConditionalType({checkType, extendsType, trueType, falseType}: TConditional) {
return (
<>
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: checkType})} extends{' '}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: extendsType})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(' ? ')}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: trueType})}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Punctuation(' :' + (falseType.type === 'conditional' ? '\n' : ' '))}
+ {/* oxlint-disable-next-line react/react-compiler */}
{Type({type: falseType})}
);
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index ffd57d704d9..45404c4eba8 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -448,9 +448,9 @@ function useCheckboxAria(
};
let aria = groupState
- ? // eslint-disable-next-line react-hooks/rules-of-hooks
+ ? // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
useCheckboxGroupItem(checkboxProps, groupState, inputRef)
- : // eslint-disable-next-line react-hooks/rules-of-hooks
+ : // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
useCheckbox(checkboxProps, useToggleState(props), inputRef);
return [aria, inputRef];
}
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index b834adb560d..7a2af4c127d 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -255,6 +255,7 @@ function ComboBoxInner({props, collection, comboBoxRef: ref}: ComboBoxInnerPr
return groupRef.current || inputRef.current;
}
}),
+ // oxlint-disable-next-line react/react-compiler
[groupRef, inputRef]
);
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 7baac685eeb..ef1a9d80c04 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -88,7 +88,9 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
// This is done in RAC instead of hooks because otherwise we cannot distinguish
// between context and props. Normally aria-labelledby overrides the title
// but when sent by context we want the title to win.
+ // oxlint-disable-next-line react/react-compiler
triggerProps.id = useId();
+ // oxlint-disable-next-line react/react-compiler
overlayProps['aria-labelledby'] = triggerProps.id;
return (
diff --git a/packages/react-aria-components/src/DragAndDrop.tsx b/packages/react-aria-components/src/DragAndDrop.tsx
index 548a72bf4fa..3f260186b4b 100644
--- a/packages/react-aria-components/src/DragAndDrop.tsx
+++ b/packages/react-aria-components/src/DragAndDrop.tsx
@@ -83,6 +83,7 @@ export function useRenderDropIndicator(
let fn = useCallback(
(target: ItemDropTarget) => {
// Only show drop indicators when virtual dragging or this is the current drop target.
+ // oxlint-disable-next-line react/react-compiler
if (isVirtualDragging || dropState?.isDropTarget(target)) {
return renderDropIndicator ? (
renderDropIndicator(target)
diff --git a/packages/react-aria-components/src/DropZone.tsx b/packages/react-aria-components/src/DropZone.tsx
index b30df656d0c..4ed078292fd 100644
--- a/packages/react-aria-components/src/DropZone.tsx
+++ b/packages/react-aria-components/src/DropZone.tsx
@@ -99,6 +99,7 @@ export const DropZone = forwardRef(function DropZone(
ref: ForwardedRef
) {
let {isDisabled = false} = props;
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useContextProps(props, ref, DropZoneContext);
let dropzoneRef = useObjectRef(ref);
let buttonRef = useRef(null);
diff --git a/packages/react-aria-components/src/GridLayout.ts b/packages/react-aria-components/src/GridLayout.ts
index 634412e00d6..9679a5ad8f9 100644
--- a/packages/react-aria-components/src/GridLayout.ts
+++ b/packages/react-aria-components/src/GridLayout.ts
@@ -21,8 +21,9 @@ export class GridLayout
{
// Automatically determine the layout direction from the current locale.
useLayoutOptions(): GridLayoutOptions {
- /* eslint-disable react-hooks/rules-of-hooks */
+ // oxlint-disable react/react-compiler, react-hooks/rules-of-hooks
let {direction} = useLocale();
return useMemo(() => ({direction}), [direction]);
+ // oxlint-enable react/react-compiler, react-hooks/rules-of-hooks
}
}
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index cc24494e875..db972650186 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -241,6 +241,7 @@ interface GridListInnerProps {
}
function GridListInner({props, collection, gridListRef: ref}: GridListInnerProps) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useContextProps(props, ref, SelectableCollectionContext);
let {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -269,6 +270,7 @@ function GridListInner({props, collection, gridListRef: ref}: GridListInnerPr
layoutDelegate
});
+ // oxlint-disable-next-line react/react-compiler
let filteredState = UNSTABLE_useFilteredListState(gridlistState as ListState, filter);
let collator = useCollator({usage: 'search', sensitivity: 'base'});
let {disabledBehavior, disabledKeys} = filteredState.selectionManager;
@@ -343,11 +345,13 @@ function GridListInner({props, collection, gridListRef: ref}: GridListInnerPr
let preview = useRef(null);
if (isListDraggable && dragAndDropHooks) {
+ // oxlint-disable-next-line react/react-compiler
dragState = dragAndDropHooks.useDraggableCollectionState!({
collection: filteredState.collection,
selectionManager,
preview: dragAndDropHooks.renderDragPreview ? preview : undefined
});
+ // oxlint-disable-next-line react/react-compiler
dragAndDropHooks.useDraggableCollection!({}, dragState, ref);
let DragPreview = dragAndDropHooks.DragPreview!;
@@ -357,6 +361,7 @@ function GridListInner({props, collection, gridListRef: ref}: GridListInnerPr
}
if (isListDroppable && dragAndDropHooks) {
+ // oxlint-disable-next-line react/react-compiler
dropState = dragAndDropHooks.useDroppableCollectionState!({
collection: filteredState.collection,
selectionManager
@@ -370,6 +375,7 @@ function GridListInner({props, collection, gridListRef: ref}: GridListInnerPr
direction,
orientation
});
+ // oxlint-disable-next-line react/react-compiler
droppableCollection = dragAndDropHooks.useDroppableCollection!(
{
keyboardDelegate,
@@ -715,6 +721,7 @@ function GridListDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedR
ref = useObjectRef(ref);
let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
let buttonRef = useRef(null);
+ // oxlint-disable-next-line react/react-compiler
let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
props,
dropState!,
@@ -773,6 +780,7 @@ const GridListDropIndicatorForwardRef = forwardRef(GridListDropIndicator);
function RootDropIndicator() {
let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
let ref = useRef(null);
+ // oxlint-disable-next-line react/react-compiler
let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!(
{
target: {type: 'root'}
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 7ba3542f5a0..1db8ee3c600 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -237,8 +237,10 @@ interface ListBoxInnerProps {
}
function ListBoxInner({state: inputState, props, listBoxRef}: ListBoxInnerProps) {
+ // oxlint-disable-next-line react/react-compiler
[props, listBoxRef] = useContextProps(props, listBoxRef, SelectableCollectionContext);
let {dragAndDropHooks, layout = 'stack', orientation = 'vertical', filter} = props;
+ // oxlint-disable-next-line react/react-compiler
let state = UNSTABLE_useFilteredListState(inputState, filter);
let {collection, selectionManager} = state;
let isListDraggable = !!dragAndDropHooks?.useDraggableCollectionState;
@@ -253,6 +255,7 @@ function ListBoxInner({state: inputState, props, listBoxRef}: ListBoxInnerPro
CollectionRoot
} = useContext(CollectionRendererContext);
let keyboardDelegate = useMemo(
+ // oxlint-disable-next-line react/react-compiler
() =>
props.keyboardDelegate ||
new ListKeyboardDelegate({
@@ -317,11 +320,13 @@ function ListBoxInner({state: inputState, props, listBoxRef}: ListBoxInnerPro
let preview = useRef(null);
if (isListDraggable && dragAndDropHooks) {
+ // oxlint-disable-next-line react/react-compiler
dragState = dragAndDropHooks.useDraggableCollectionState!({
collection,
selectionManager,
preview: dragAndDropHooks.renderDragPreview ? preview : undefined
});
+ // oxlint-disable-next-line react/react-compiler
dragAndDropHooks.useDraggableCollection!({}, dragState, listBoxRef);
let DragPreview = dragAndDropHooks.DragPreview!;
@@ -331,6 +336,7 @@ function ListBoxInner({state: inputState, props, listBoxRef}: ListBoxInnerPro
}
if (isListDroppable && dragAndDropHooks) {
+ // oxlint-disable-next-line react/react-compiler
dropState = dragAndDropHooks.useDroppableCollectionState!({
collection,
selectionManager
@@ -344,6 +350,7 @@ function ListBoxInner({state: inputState, props, listBoxRef}: ListBoxInnerPro
layout,
direction
});
+ // oxlint-disable-next-line react/react-compiler
droppableCollection = dragAndDropHooks.useDroppableCollection!(
{
keyboardDelegate,
@@ -655,6 +662,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent(ItemNode, function
function ListBoxDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef) {
ref = useObjectRef(ref);
let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
+ // oxlint-disable-next-line react/react-compiler
let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
props,
dropState!,
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 639d50da1ac..03bcaae1baf 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -379,7 +379,7 @@ function MenuInner({props, collection, menuRef: ref}: MenuInnerProps) {
[SelectionManagerContext, state.selectionManager],
/* Ensure root MenuTriggerState is defined, in case Menu is rendered outside a MenuTrigger. */
/* We assume the context can never change between defined and undefined. */
- /* eslint-disable-next-line react-hooks/rules-of-hooks */
+ // oxlint-disable-next-line react/react-compiler, react-hooks/rules-of-hooks
[RootMenuTriggerStateContext, triggerState ?? useMenuTriggerState({})]
]}>
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index ecde2ec2385..d8312073fd6 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -262,6 +262,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
'--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
};
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
interface ModalContentProps
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 8284bdaa844..3d1fa9fe874 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -234,13 +234,19 @@ function PopoverInner({
);
let ref = props.popoverRef as RefObject;
+ // oxlint-disable-next-line react/react-compiler
let isEntering = useEnterAnimation(ref, !!placement) || props.isEntering || false;
+ // oxlint-disable-next-line react/react-compiler
let renderProps = useRenderProps({
+ // oxlint-disable-next-line react/react-compiler
...props,
defaultClassName: 'react-aria-Popover',
+ // oxlint-disable-next-line react/react-compiler
values: {
+ // oxlint-disable-next-line react/react-compiler
trigger: props.trigger || null,
placement,
+ // oxlint-disable-next-line react/react-compiler
isEntering,
isExiting
}
@@ -248,6 +254,7 @@ function PopoverInner({
// Automatically render Popover with role=dialog except when isNonModal is true,
// or a dialog is already nested inside the popover.
+ // oxlint-disable-next-line react/react-compiler
let shouldBeDialog = !props.isNonModal || props.trigger === 'SubmenuTrigger';
let [isDialog, setDialog] = useState(false);
useLayoutEffect(() => {
@@ -258,6 +265,7 @@ function PopoverInner({
// Focus the popover itself on mount, unless a child element is already focused.
// Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
+ // oxlint-disable react/react-compiler
useEffect(() => {
if (
isDialog &&
@@ -268,6 +276,7 @@ function PopoverInner({
focusSafely(ref.current);
}
}, [isDialog, ref, props.trigger]);
+ // oxlint-enable react/react-compiler
let children = useMemo(() => {
let children = renderProps.children;
@@ -280,6 +289,7 @@ function PopoverInner({
}, [renderProps.children, clearContexts]);
let [triggerWidth, setTriggerWidth] = useState(null);
+ // oxlint-disable-next-line react/react-compiler
let onResize = useCallback(() => {
if (props.triggerRef.current) {
setTriggerWidth(props.triggerRef.current.getBoundingClientRect().width + 'px');
@@ -287,7 +297,9 @@ function PopoverInner({
}, [props.triggerRef]);
useLayoutEffect(onResize, [onResize]);
+ // oxlint-disable-next-line react/react-compiler
useResizeObserver({
+ // oxlint-disable-next-line react/react-compiler
ref: renderProps.style?.['--trigger-width'] ? undefined : props.triggerRef,
onResize: onResize
});
@@ -301,6 +313,7 @@ function PopoverInner({
'--trigger-width': renderProps.style?.['--trigger-width'] || triggerWidth
};
+ // oxlint-disable react/react-compiler
let overlay = (
+ {/* oxlint-disable-next-line react/react-compiler */}
{!props.isNonModal && }
{children}
@@ -324,15 +338,18 @@ function PopoverInner({
);
+ // oxlint-enable react/react-compiler
// If this is a root popover, render an extra div to act as the portal container for submenus/subdialogs.
if (!isSubPopover) {
+ // oxlint-disable react/react-compiler
return (
+ {/* oxlint-disable-next-line react/react-compiler */}
{!props.isNonModal && state.isOpen && (
)}
@@ -343,9 +360,11 @@ function PopoverInner({