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 df6d6ad7bcc..920078102c1 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 e7fa524286a..8771d9e64e4 100644
--- a/packages/@react-spectrum/ai/src/MessageSuggestion.tsx
+++ b/packages/@react-spectrum/ai/src/MessageSuggestion.tsx
@@ -110,6 +110,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/package.json b/packages/@react-spectrum/s2/package.json
index 9f8feec2d49..8dd38987a70 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -1,6 +1,6 @@
{
"name": "@react-spectrum/s2",
- "version": "1.5.0",
+ "version": "1.5.1",
"description": "Spectrum 2 UI components in React",
"license": "Apache-2.0",
"repository": {
diff --git a/packages/@react-spectrum/s2/src/ActionBar.tsx b/packages/@react-spectrum/s2/src/ActionBar.tsx
index 323cab27972..e7b65502b36 100644
--- a/packages/@react-spectrum/s2/src/ActionBar.tsx
+++ b/packages/@react-spectrum/s2/src/ActionBar.tsx
@@ -167,12 +167,9 @@ const ActionBarInner = forwardRef(function ActionBarInner(
});
let {keyboardProps} = useKeyboard({
- onKeyDown(e) {
- if (e.key === 'Escape') {
- e.preventDefault();
+ shortcuts: {
+ Escape: () => {
onClearSelection?.();
- } else {
- e.continuePropagation();
}
}
});
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 b3c28d46eb3..061a671d755 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -391,6 +391,7 @@ export function usePendingState(isPending: boolean) {
setIsProgressVisible(true);
}, 1000);
} else {
+ // oxlint-disable-next-line react/react-compiler
setIsProgressVisible(false);
}
return () => {
@@ -409,6 +410,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');
@@ -418,6 +420,7 @@ export const Button = forwardRef(function Button(
let {isProgressVisible} = usePendingState(isPending);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
/**
@@ -531,12 +535,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-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx
index 7bc4d1abfa7..1f475278d0c 100644
--- a/packages/@react-spectrum/s2/src/ClearButton.tsx
+++ b/packages/@react-spectrum/s2/src/ClearButton.tsx
@@ -65,6 +65,7 @@ export const ClearButton = forwardRef(function ClearButton(
) {
let {size = 'M', isStaticColor = false, ...rest} = props;
let domRef = useFocusableRef(ref);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index 42890714038..c2a4ebe5cf4 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -107,10 +107,12 @@ export const CloseButton = forwardRef(function CloseButton(
props: CloseButtonProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
let {UNSAFE_style, UNSAFE_className = ''} = props;
let domRef = useFocusableRef(ref);
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
index b6137f81286..c14078e815d 100644
--- a/packages/@react-spectrum/s2/src/CoachMark.tsx
+++ b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -401,7 +401,9 @@ export function CoachMarkTrigger(props: CoachMarkTriggerProps): ReactNode {
// 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-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index e819c353c40..c528bbba097 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/packages/@react-spectrum/s2/src/ColorField.tsx
@@ -68,6 +68,7 @@ export const ColorField = forwardRef(function ColorField(
props: ColorFieldProps,
ref: Ref
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 7238ba886ec..b1031a87424 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -53,6 +53,7 @@ export const ColorSlider = forwardRef(function ColorSlider(
props: ColorSliderProps,
ref: DOMRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
let {UNSAFE_className = '', UNSAFE_style, styles} = props;
let containerRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
index 5f917a49209..d2037d9a49e 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
@@ -126,6 +126,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
// ColorSwatchPicker needs to wrap the swatch in a ListBoxItem.
if (ctx) {
+ // oxlint-disable-next-line react/react-compiler
return ctx.useWrapper(swatch, color, rounding);
}
diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
index b4b730d4e87..cf96d46c72d 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
@@ -90,6 +90,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
getAllowedOverrides()
)({density}, props.styles)
}>
+ {/* oxlint-disable-next-line react/react-compiler */}
{props.children}
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 3fb5cde15ac..231664bc8ed 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -470,6 +470,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
let ref = useRef(null);
let isLink = props.href != null;
let {size} = useContext(InternalComboboxContext);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
export interface ComboBoxSectionProps extends Omit<
@@ -635,6 +637,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(
}
} else if (!isLoadingOrFiltering) {
// If loading is no longer happening, clear any timers and hide the loading circle
+ // oxlint-disable-next-line react/react-compiler
setShowLoading(false);
if (timeout.current) {
clearTimeout(timeout.current);
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 12da8a4c411..6db9e3e1012 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -185,6 +185,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(
// then ContextualHelp variant
let labelProps = useLabels(props);
let label = stringFormatter.format(`contextualhelp.${variant}`);
+ // oxlint-disable-next-line react/react-compiler
labelProps['aria-label'] = labelProps['aria-label']
? labelProps['aria-label'] + ' ' + label
: label;
diff --git a/packages/@react-spectrum/s2/src/DatePicker.tsx b/packages/@react-spectrum/s2/src/DatePicker.tsx
index b55f237fbc6..7b457036761 100644
--- a/packages/@react-spectrum/s2/src/DatePicker.tsx
+++ b/packages/@react-spectrum/s2/src/DatePicker.tsx
@@ -320,6 +320,7 @@ export function CalendarButton(props: {
}): ReactElement {
let buttonRef = useRef(null);
let {isOpen, size, setButtonHasFocus} = props;
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index 08eb8a00315..d080e637af4 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -132,6 +132,7 @@ export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(
ref: DOMRef
) {
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
let {size = 'M'} = props;
let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index 327a423204c..9c10c0b776f 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/packages/@react-spectrum/s2/src/Form.tsx
@@ -53,6 +53,7 @@ export function useFormProps(props: T): T {
// This is a subset of mergeProps. We just need to merge non-undefined values.
for (let key in ctx) {
if (result[key] === undefined) {
+ // oxlint-disable-next-line react/react-compiler
result[key] = ctx[key];
}
}
@@ -60,6 +61,7 @@ export function useFormProps(props: T): T {
// Skeleton always wins over local props.
if (isSkeleton) {
+ // oxlint-disable-next-line react/react-compiler
result.isDisabled = true;
}
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 0925c4bea93..0da365c6017 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -590,6 +590,7 @@ export function MenuItem(props: MenuItemProps): ReactNode {
let isUnavailable = useContext(UnavailableContext);
let infoIconId = useId();
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
/**
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index f7d189c44fb..73f83f1d088 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -77,6 +77,7 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef {
+ // oxlint-disable-next-line react/react-compiler
(domRef as MutableRefObject).current = el;
if (el) {
el.lang = locale;
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 212f9611206..79fba8077a1 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -177,6 +177,7 @@ export const NumberField = forwardRef(function NumberField(
props: NumberFieldProps,
ref: Ref
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
props = useFormProps(props);
let {
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index eaaf72afc10..a4feceb71f9 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -789,6 +789,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
let ref = useRef(null);
let isLink = props.href != null;
let {size} = useContext(InternalPickerContext);
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
// A Context.Provider that only sets a value if not inside SelectValue.
diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
index 426888f88d4..df63a5f5f84 100644
--- a/packages/@react-spectrum/s2/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -176,6 +176,7 @@ export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(
props: ProgressBarProps,
ref: DOMRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
let {
label,
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index 2a6a001b6e3..1378ab32ced 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -166,6 +166,7 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(
props: ProgressCircleProps,
ref: DOMRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ProgressCircleContext);
let {size = 'M', staticColor, UNSAFE_style, UNSAFE_className = ''} = props;
let domRef = useDOMRef(ref);
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index 8a81d45062f..73b521784d8 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -86,6 +86,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(
props: RadioGroupProps,
ref: DOMRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index 5734f39e7fc..c0040e6540f 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -62,6 +62,7 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(
ref: FocusableRef
) {
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 5fa82e9fc66..9c3bd8b953c 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -60,6 +60,7 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(
props: SearchFieldProps,
ref: Ref
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index d406e18f598..95a2ba2b04a 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -209,6 +209,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
// default select the first available item
let register = useCallback((value: Key) => {
+ // oxlint-disable-next-line react/react-compiler
if (state && !isRegistered.current) {
isRegistered.current = true;
state.toggleKey(value);
diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
index f6c02bcde55..6dc0d794f69 100644
--- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx
@@ -337,6 +337,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
const ref = useRef(null);
let {isFocusVisible} = useFocusVisible();
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
/**
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 002595f522a..c4f6926e472 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -361,6 +361,7 @@ export function SliderBase(
props: SliderBaseProps & {sliderRef: RefObject}
): ReactNode {
let formContext = useContext(FormContext);
+ // oxlint-disable-next-line react/react-compiler
props = useFormProps(props);
let {
label,
@@ -372,6 +373,7 @@ export function SliderBase(
} = props;
let {direction} = useLocale();
+ // oxlint-disable react/react-compiler
return (
(
}}
);
+ // oxlint-enable react/react-compiler
}
/**
@@ -451,6 +454,7 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(
props: SliderProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, SliderContext);
let formContext = useContext(FormContext);
props = useFormProps(props);
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index 5b7e055b43f..dad0d2129d2 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -215,6 +215,7 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(
props: SwitchProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
let {children, UNSAFE_className = '', UNSAFE_style} = props;
let inputRef = useRef(null);
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index eda05d02397..1737a6c5549 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -452,12 +452,14 @@ export const TableView = forwardRef(function TableView(
} = props;
if (dragAndDropHooks && dragAndDropHooks.renderDragPreview == null) {
+ // oxlint-disable-next-line react/react-compiler
dragAndDropHooks.renderDragPreview = items => (
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, TabsContext);
let {
density = 'regular',
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 21498dd74dc..6f366ac294f 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -343,6 +343,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
let ref = useRef(null);
let isLink = props.href != null;
const size = 'M';
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
}
// A Context.Provider that only sets a value if not inside SelectValue.
function DefaultProvider({
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index 8e5a578e9cb..d0d1064bdff 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -137,6 +137,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(
let inputRef = useRef(null);
let domRef = useRef(null);
let formContext = useContext(FormContext);
+ // oxlint-disable-next-line react/react-compiler
props = useFormProps(props);
let {
label,
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index b9bc5bfaf2f..cb8b897f33e 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/src/ToggleButton.tsx
@@ -73,6 +73,7 @@ export const ToggleButton = forwardRef(function ToggleButton(
props: ToggleButtonProps,
ref: FocusableRef
) {
+ // oxlint-disable-next-line react/react-compiler
[props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
props = useFormProps(props as any);
let domRef = useFocusableRef(ref);
@@ -91,6 +92,7 @@ export const ToggleButton = forwardRef(function ToggleButton(
let {holdAffordance} = props as ToggleButtonContextProps;
let {direction} = useLocale();
+ // oxlint-disable react/react-compiler
return (
);
+ // oxlint-enable react/react-compiler
});
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index de82bf14c9a..0032b2eb7f5 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -185,6 +185,7 @@ export const Tooltip = forwardRef(function Tooltip(
// TODO: should we pass through lang and dir props in RAC?
let tooltipRef = useCallback(
(el: HTMLDivElement) => {
+ // oxlint-disable-next-line react/react-compiler
(domRef as MutableRefObject).current = el;
if (el) {
el.lang = locale;
diff --git a/packages/@react-spectrum/s2/stories/CardView.stories.tsx b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
index 2f00aba5d14..e5946a5dd5e 100644
--- a/packages/@react-spectrum/s2/stories/CardView.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/CardView.stories.tsx
@@ -181,12 +181,14 @@ export const ExampleRender = (args: CardViewProps & {interactive?: React.Re
{() => (
) => {
{() => (
| {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/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index 033578409df..466abed159f 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -40,26 +40,26 @@ describe('style-macro', () => {
"@layer _.a, _.b, _.c;
@layer _.b {
- .Jbs15:first-child {
+ .Jbs151:first-child {
margin-top: 0.25rem;
}
}
@layer _.c.p {
@media (min-width: 64rem) {
- .Jbpv15:first-child {
+ .Jbpv151:first-child {
margin-top: 0.5rem;
}
}
}
-.-macro-static-wxfyDb {
- --macro-data-wxfyDb: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
+.-macro-static-OZFeNe {
+ --macro-data-OZFeNe: {"style":{"marginTop":{":first-child":{"default":4,"lg":8}}},"loc":"undefined:undefined:undefined"};
}
"
`);
- expect(js).toMatchInlineSnapshot(`" Jbs15 Jbpv15 -macro-static-wxfyDb"`);
+ expect(js).toMatchInlineSnapshot(`" Jbs151 Jbpv151 -macro-static-OZFeNe"`);
});
it('should support self references', () => {
@@ -73,60 +73,60 @@ describe('style-macro', () => {
"@layer _.a;
@layer _.a {
- ._kc15 {
+ ._kc151 {
border-top-width: 2px;
}
- .hc15 {
+ .hc151 {
border-bottom-width: 2px;
}
- .mCPFGYc15 {
+ .mCPFGYc151 {
border-inline-start-width: var(--m);
}
- .lc15 {
+ .lc151 {
border-inline-end-width: 2px;
}
- .SMBFGYc15 {
+ .SMBFGYc151 {
padding-inline-start: var(--S);
}
- .Rv15 {
+ .Rv151 {
padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
}
- .ZjUQgKd15 {
+ .ZjUQgKd151 {
width: calc(200px - var(--m) - var(--S));
}
- .-m_-mc15 {
+ .-m_-mc151 {
--m: 2px;
}
- .-S_-Sv15 {
+ .-S_-Sv151 {
--S: calc(var(--F, var(--M)) * 3 / 8);
}
}
-.-macro-static-vBpT2 {
- --macro-data-vBpT2: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
+.-macro-static-6DrPJb {
+ --macro-data-6DrPJb: {"style":{"borderWidth":2,"paddingX":"edge-to-text","width":"calc(200px - self(borderStartWidth) - self(paddingStart))"},"loc":"undefined:undefined:undefined"};
}
"
`);
expect(js).toMatchInlineSnapshot(
- `" _kc15 hc15 mCPFGYc15 lc15 SMBFGYc15 Rv15 ZjUQgKd15 -m_-mc15 -S_-Sv15 -macro-static-vBpT2"`
+ `" _kc151 hc151 mCPFGYc151 lc151 SMBFGYc151 Rv151 ZjUQgKd151 -m_-mc151 -S_-Sv151 -macro-static-6DrPJb"`
);
});
@@ -144,9 +144,9 @@ describe('style-macro', () => {
color: 'green-400'
});
- expect(js()).toMatchInlineSnapshot(`" gw15 pg15 -macro-dynamic-16fgbv4"`);
- expect(overrides).toMatchInlineSnapshot(`" g8tmWqb15 pHJ3AUd15 -macro-static-4cOIRb"`);
- expect(js({}, overrides)).toMatchInlineSnapshot(`" g8tmWqb15 pg15 -macro-dynamic-1vflel8"`);
+ expect(js()).toMatchInlineSnapshot(`" gw151 pg151 -macro-dynamic-ksiu6q"`);
+ expect(overrides).toMatchInlineSnapshot(`" g8tmWqb151 pHJ3AUd151 -macro-static-4DCFgd"`);
+ expect(js({}, overrides)).toMatchInlineSnapshot(`" g8tmWqb151 pg151 -macro-dynamic-197x9i6"`);
});
it('should support allowed overrides for properties that expand into multiple', () => {
@@ -161,10 +161,10 @@ describe('style-macro', () => {
translateX: 40
});
- expect(js()).toMatchInlineSnapshot(`" -_7PloMd-B15 __Ya15 -macro-dynamic-2u33z5"`);
- expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D15 __Ya15 -macro-static-poioi"`);
+ expect(js()).toMatchInlineSnapshot(`" -_7PloMd-B151 __Ya151 -macro-dynamic-clboub"`);
+ expect(overrides).toMatchInlineSnapshot(`" -_7PloMd-D151 __Ya151 -macro-static-pdFIDc"`);
expect(js({}, overrides)).toMatchInlineSnapshot(
- `" -_7PloMd-D15 __Ya15 -macro-dynamic-13fqmar"`
+ `" -_7PloMd-D151 __Ya151 -macro-dynamic-n9a5xh"`
);
});
@@ -180,10 +180,10 @@ describe('style-macro', () => {
padding: 40
});
- expect(js()).toMatchInlineSnapshot(`" Tk15 Qk15 Sk15 Rk15 -macro-dynamic-2rom7x"`);
- expect(overrides).toMatchInlineSnapshot(`" Tm15 Qm15 Sm15 Rm15 -macro-static-FXaHv"`);
+ expect(js()).toMatchInlineSnapshot(`" Tk151 Qk151 Sk151 Rk151 -macro-dynamic-1esad0h"`);
+ expect(overrides).toMatchInlineSnapshot(`" Tm151 Qm151 Sm151 Rm151 -macro-static-Nfrh6d"`);
expect(js({}, overrides)).toMatchInlineSnapshot(
- `" Tm15 Qm15 Sm15 Rm15 -macro-dynamic-16os9ol"`
+ `" Tm151 Qm151 Sm151 Rm151 -macro-dynamic-7axbah"`
);
});
@@ -199,9 +199,11 @@ describe('style-macro', () => {
fontSize: 'ui-xs'
});
- expect(js()).toMatchInlineSnapshot(`" -_6BNtrc-woabcc15 vx15 -macro-dynamic-qs6tc"`);
- expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a15 vx15 -macro-static-yXDXz"`);
- expect(js({}, overrides)).toMatchInlineSnapshot(`" -_6BNtrc-a15 vx15 -macro-dynamic-1nd81ma"`);
+ expect(js()).toMatchInlineSnapshot(`" -_6BNtrc-woabcc151 vx151 -macro-dynamic-xhgg6a"`);
+ expect(overrides).toMatchInlineSnapshot(`" -_6BNtrc-a151 vx151 -macro-static-grInxd"`);
+ expect(js({}, overrides)).toMatchInlineSnapshot(
+ `" -_6BNtrc-a151 vx151 -macro-dynamic-hitxxw"`
+ );
});
it("should support allowed overrides for values that aren't defined", () => {
@@ -216,9 +218,9 @@ describe('style-macro', () => {
minWidth: 32
});
- expect(js()).toMatchInlineSnapshot(`" gE15 -macro-dynamic-11gtfdt"`);
- expect(overrides).toMatchInlineSnapshot(`" Nk15 -macro-static-Io0zY"`);
- expect(js({}, overrides)).toMatchInlineSnapshot(`" Nk15 gE15 -macro-dynamic-14t819c"`);
+ expect(js()).toMatchInlineSnapshot(`" gE151 -macro-dynamic-wd489e"`);
+ expect(overrides).toMatchInlineSnapshot(`" Nk151 -macro-static-f34NMd"`);
+ expect(js({}, overrides)).toMatchInlineSnapshot(`" Nk151 gE151 -macro-dynamic-1qncav6"`);
});
it('should support runtime conditions', () => {
@@ -239,32 +241,32 @@ describe('style-macro', () => {
"@layer _.a;
@layer _.a {
- .gH15 {
+ .gH151 {
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
}
- .gF15 {
+ .gF151 {
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
}
- .gE15 {
+ .gE151 {
background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
}
- .pt15 {
+ .pt151 {
color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
}
- .po15 {
+ .po151 {
color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
}
- .pm15 {
+ .pm151 {
color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
}
}
@@ -272,9 +274,9 @@ describe('style-macro', () => {
"
`);
- expect(js({})).toMatchInlineSnapshot(`" gH15 pt15 -macro-dynamic-10n1jv2"`);
- expect(js({isHovered: true})).toMatchInlineSnapshot(`" gF15 po15 -macro-dynamic-boma93"`);
- expect(js({isPressed: true})).toMatchInlineSnapshot(`" gE15 pm15 -macro-dynamic-1cs8qp0"`);
+ expect(js({})).toMatchInlineSnapshot(`" gH151 pt151 -macro-dynamic-13m9l9s"`);
+ expect(js({isHovered: true})).toMatchInlineSnapshot(`" gF151 po151 -macro-dynamic-1e5szmx"`);
+ expect(js({isPressed: true})).toMatchInlineSnapshot(`" gE151 pm151 -macro-dynamic-1ltkejq"`);
});
it('should support nested runtime conditions', () => {
@@ -293,33 +295,33 @@ describe('style-macro', () => {
"@layer _.a;
@layer _.a {
- .gH15 {
+ .gH151 {
background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
}
- .gF15 {
+ .gF151 {
background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
}
- .g_h15 {
+ .g_h151 {
background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
}
- .g315 {
+ .g3151 {
background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
}
}
"
`);
- expect(js({})).toMatchInlineSnapshot(`" gH15 -macro-dynamic-1etdqys"`);
- expect(js({isHovered: true})).toMatchInlineSnapshot(`" gF15 -macro-dynamic-1tldjwi"`);
- expect(js({isSelected: true})).toMatchInlineSnapshot(`" g_h15 -macro-dynamic-d1dps3"`);
+ expect(js({})).toMatchInlineSnapshot(`" gH151 -macro-dynamic-1ap2imt"`);
+ expect(js({isHovered: true})).toMatchInlineSnapshot(`" gF151 -macro-dynamic-1153npv"`);
+ expect(js({isSelected: true})).toMatchInlineSnapshot(`" g_h151 -macro-dynamic-7jyd2s"`);
expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
- `" g315 -macro-dynamic-sejjv3"`
+ `" g3151 -macro-dynamic-heik00"`
);
});
@@ -334,9 +336,9 @@ describe('style-macro', () => {
}
});
- expect(js({variant: 'accent'})).toMatchInlineSnapshot(`" gY15 -macro-dynamic-vr3hyt"`);
- expect(js({variant: 'primary'})).toMatchInlineSnapshot(`" gjQquMe15 -macro-dynamic-vcucj3"`);
- expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`" gw15 -macro-dynamic-n6ilub"`);
+ expect(js({variant: 'accent'})).toMatchInlineSnapshot(`" gY151 -macro-dynamic-1kvorfq"`);
+ expect(js({variant: 'primary'})).toMatchInlineSnapshot(`" gjQquMe151 -macro-dynamic-17tas0w"`);
+ expect(js({variant: 'secondary'})).toMatchInlineSnapshot(`" gw151 -macro-dynamic-1m4zj7o"`);
});
it('supports runtime conditions nested inside css conditions', () => {
@@ -354,14 +356,14 @@ describe('style-macro', () => {
@layer _.b.l {
@media (forced-colors: active) {
- .plb15 {
+ .plb151 {
color: ButtonText;
}
}
@media (forced-colors: active) {
- .ple15 {
+ .ple151 {
color: HighlightText;
}
}
@@ -370,8 +372,8 @@ describe('style-macro', () => {
"
`);
- expect(js({})).toMatchInlineSnapshot(`" plb15 -macro-dynamic-1ap32yb"`);
- expect(js({isSelected: true})).toMatchInlineSnapshot(`" ple15 -macro-dynamic-1o1neja"`);
+ expect(js({})).toMatchInlineSnapshot(`" plb151 -macro-dynamic-1gtim5g"`);
+ expect(js({isSelected: true})).toMatchInlineSnapshot(`" ple151 -macro-dynamic-1v5gwiv"`);
});
it('inherits parent default when nested branch has no default key', () => {
@@ -387,9 +389,9 @@ describe('style-macro', () => {
});
// forcedColors.default should apply when variant=highlight but !isSelected
expect(css).toContain('ButtonText');
- expect(js({variant: 'highlight'})).toMatchInlineSnapshot(`" plb15 -macro-dynamic-1ap32yb"`);
+ expect(js({variant: 'highlight'})).toMatchInlineSnapshot(`" plb151 -macro-dynamic-1gtim5g"`);
expect(js({variant: 'highlight', isSelected: true})).toMatchInlineSnapshot(
- `" ple15 -macro-dynamic-1o1neja"`
+ `" ple151 -macro-dynamic-1v5gwiv"`
);
});
@@ -398,33 +400,33 @@ describe('style-macro', () => {
padding: 24
});
- expect(js).toMatchInlineSnapshot(`" Th15 Qh15 Sh15 Rh15 -macro-static-PaKDid"`);
+ expect(js).toMatchInlineSnapshot(`" Th151 Qh151 Sh151 Rh151 -macro-static-dvFMTb"`);
expect(css).toMatchInlineSnapshot(`
"@layer _.a;
@layer _.a {
- .Th15 {
+ .Th151 {
padding-top: 24px;
}
- .Qh15 {
+ .Qh151 {
padding-bottom: 24px;
}
- .Sh15 {
+ .Sh151 {
padding-inline-start: 24px;
}
- .Rh15 {
+ .Rh151 {
padding-inline-end: 24px;
}
}
-.-macro-static-PaKDid {
- --macro-data-PaKDid: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
+.-macro-static-dvFMTb {
+ --macro-data-dvFMTb: {"style":{"padding":24},"loc":"undefined:undefined:undefined"};
}
"
@@ -440,13 +442,13 @@ describe('style-macro', () => {
"@layer _.a;
@layer _.a {
- .gpQzfVb15 {
+ .gpQzfVb151 {
background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
}
}
-.-macro-static-3vO7o {
- --macro-data-3vO7o: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
+.-macro-static-GJJsFd {
+ --macro-data-GJJsFd: {"style":{"backgroundColor":"blue-1000/50"},"loc":"undefined:undefined:undefined"};
}
"
@@ -465,13 +467,13 @@ describe('style-macro', () => {
"@layer _.a;
@layer _.a {
- .-FUeYm-gE15 {
+ .-FUeYm-gE151 {
--foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
}
}
-.-macro-static-z8Uxye {
- --macro-data-z8Uxye: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
+.-macro-static-QA93Ie {
+ --macro-data-QA93Ie: {"style":{"--foo":{"type":"backgroundColor","value":"gray-300"}},"loc":"undefined:undefined:undefined"};
}
"
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/codemods/package.json b/packages/dev/codemods/package.json
index 684650ac1c8..c26e987a956 100644
--- a/packages/dev/codemods/package.json
+++ b/packages/dev/codemods/package.json
@@ -25,7 +25,7 @@
"@babel/parser": "^7.24.5",
"@babel/traverse": "^7.24.5",
"@babel/types": "^7.24.5",
- "@react-spectrum/s2": "1.5.0",
+ "@react-spectrum/s2": "1.5.1",
"@react-types/shared": "^3.34.0",
"@types/node": "^24",
"boxen": "^5.1.2",
diff --git a/packages/dev/docs/pages/react-aria/home.global.css b/packages/dev/docs/pages/react-aria/home.global.css
index a7d519dd97e..3fe1450a52d 100644
--- a/packages/dev/docs/pages/react-aria/home.global.css
+++ b/packages/dev/docs/pages/react-aria/home.global.css
@@ -15,7 +15,7 @@
@source "home/*.tsx";
@source "../../../../../starters/tailwind/**/*.{ts,tsx}";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import 'tw-animate-css';
@import './home/home.css';
@font-face {
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/pages/react-aria/DropZone.mdx b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
index 9cd66179f7e..ec09bbb9f1f 100644
--- a/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/DropZone.mdx
@@ -92,6 +92,71 @@ export const description = 'An area into which one or multiple objects can be dr
```
+## FileTrigger
+
+To allow the selection of files from the user's device, pass `FileTrigger` as a child of `DropZone`.
+
+```tsx render type="vanilla"
+"use client";
+import {DropZone, Text} from 'vanilla-starter/DropZone';
+import {FileTrigger} from 'react-aria-components';
+import {Button} from 'vanilla-starter/Button';
+import {useState} from 'react';
+import React from 'react';
+
+function Example() {
+ let [content, setContent] = useState(null);
+
+ async function handleFiles(files: FileList | null) {
+ let file = files && [...files].find(f => f.type.startsWith('image/'));
+ if (file) {
+ let url = URL.createObjectURL(file);
+ setContent(
);
+ }
+ }
+
+ return (
+ (
+ ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t))
+ ? 'copy'
+ : 'cancel'
+ )}
+ onDrop={async (event) => {
+ let item = event.items.find(item => (
+ (item.kind === 'text' && item.types.has('text/plain')) ||
+ (item.kind === 'file' && item.type.startsWith('image/'))
+ ));
+
+ if (item?.kind === 'text') {
+ let text = await item.getText('text/plain');
+ setContent(text);
+ } else if (item?.kind === 'file') {
+ let file = await item.getFile();
+ let url = URL.createObjectURL(file);
+ setContent()
+ }
+ }}>
+
+ );
+}
+```
+
+If a `DropZone` is rendered in a positioned scroll container, focusing the visually hidden drop
+button may cause the container to scroll. The `dropButtonStyle` prop can be used to adjust the
+position of this internal button wrapper, for example `dropButtonStyle={{position: 'fixed', top: 0,
+left: 0}}`.
+
## Examples
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/CodeSandbox.tsx b/packages/dev/s2-docs/src/CodeSandbox.tsx
index 0325b748dd0..3e1432672cc 100644
--- a/packages/dev/s2-docs/src/CodeSandbox.tsx
+++ b/packages/dev/s2-docs/src/CodeSandbox.tsx
@@ -57,7 +57,7 @@ const devDependencies = {
'@tailwindcss/postcss': '^4',
postcss: '^8',
'tailwindcss-react-aria-components': '^2',
- 'tailwindcss-animate': '^1'
+ 'tw-animate-css': '^1'
},
s2: {
'@types/react': '^19',
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})}>
);
+ // 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 (
0 && (
);
+ // oxlint-enable react/react-compiler
}
// Submenus/subdialogs are mounted into the root popover's container.
+ // 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 (
);
+ // oxlint-enable react/react-compiler
});
const collection = style({
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index dd8ef2d9f1d..071c1f6ac0e 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -74,6 +74,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(
props: CheckboxGroupProps,
ref: DOMRef{props.children}
+
+ {content || "Drop files here, or click Browse"}
+
+ {/*- begin highlight -*/}
+
+
+
+ {/*- end highlight -*/}
+
+ {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 (
{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
- Extends:{' '}
+ Extends: {/* oxlint-disable-next-line react/react-compiler */}
{JoinList({elements: type.extends, joiner: ', '})}
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/dev/s2-docs/tailwind/tailwind.css b/packages/dev/s2-docs/tailwind/tailwind.css
index a98b938047f..4e2b25b5df9 100644
--- a/packages/dev/s2-docs/tailwind/tailwind.css
+++ b/packages/dev/s2-docs/tailwind/tailwind.css
@@ -6,7 +6,7 @@
@source "../pages/react-aria/examples/plants/*.tsx";
@source "../pages/react-aria/examples/Tab*.tsx";
@plugin 'tailwindcss-react-aria-components';
-@plugin 'tailwindcss-animate';
+@import 'tw-animate-css';
@source "../../docs/pages/react-aria/home/*.tsx";
@import '../../docs/pages/react-aria/home/home.css';
@source "../src/SearchMenuWrapper.tsx";
diff --git a/packages/react-aria-components/docs/examples/account-menu.mdx b/packages/react-aria-components/docs/examples/account-menu.mdx
index ef859bb10d6..2863ee2b437 100644
--- a/packages/react-aria-components/docs/examples/account-menu.mdx
+++ b/packages/react-aria-components/docs/examples/account-menu.mdx
@@ -96,14 +96,14 @@ function MySwitch(props: SwitchProps) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/action-menu.mdx b/packages/react-aria-components/docs/examples/action-menu.mdx
index 2646a8773dc..6e03cb0401b 100644
--- a/packages/react-aria-components/docs/examples/action-menu.mdx
+++ b/packages/react-aria-components/docs/examples/action-menu.mdx
@@ -72,14 +72,14 @@ function ActionItem(props: MenuItemProps) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/command-palette.mdx b/packages/react-aria-components/docs/examples/command-palette.mdx
index 7f737fda4f4..8a9ef0e3a61 100644
--- a/packages/react-aria-components/docs/examples/command-palette.mdx
+++ b/packages/react-aria-components/docs/examples/command-palette.mdx
@@ -158,14 +158,14 @@ function CommandItem(props) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/datepicker.mdx b/packages/react-aria-components/docs/examples/datepicker.mdx
index b6749b5162e..2d362973642 100644
--- a/packages/react-aria-components/docs/examples/datepicker.mdx
+++ b/packages/react-aria-components/docs/examples/datepicker.mdx
@@ -104,14 +104,14 @@ function MyPopover(props: PopoverProps) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index af2ca11b8bc..6fa3b7d5a2d 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -93,14 +93,14 @@ function DialogButton({className, ...props}) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/notifications-popover.mdx b/packages/react-aria-components/docs/examples/notifications-popover.mdx
index 777b9e4deea..647582d2749 100644
--- a/packages/react-aria-components/docs/examples/notifications-popover.mdx
+++ b/packages/react-aria-components/docs/examples/notifications-popover.mdx
@@ -98,14 +98,14 @@ function Notification({avatar, name, time, text}) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/searchable-select.mdx b/packages/react-aria-components/docs/examples/searchable-select.mdx
index e06a20a8f04..77f7dce7242 100644
--- a/packages/react-aria-components/docs/examples/searchable-select.mdx
+++ b/packages/react-aria-components/docs/examples/searchable-select.mdx
@@ -144,14 +144,14 @@ function SelectItem(props: ListBoxItemProps & {children: string}) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/status-select.mdx b/packages/react-aria-components/docs/examples/status-select.mdx
index 30710f6bf12..14a9f47ff02 100644
--- a/packages/react-aria-components/docs/examples/status-select.mdx
+++ b/packages/react-aria-components/docs/examples/status-select.mdx
@@ -107,14 +107,14 @@ function Status({className}: {className: string}) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/examples/tailwind.global.css b/packages/react-aria-components/docs/examples/tailwind.global.css
index d900ee639da..c1c7ac2fbf8 100644
--- a/packages/react-aria-components/docs/examples/tailwind.global.css
+++ b/packages/react-aria-components/docs/examples/tailwind.global.css
@@ -3,5 +3,5 @@
@import 'tailwindcss/utilities.css' layer(utilities) source(none);
@source "*.mdx";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import 'tw-animate-css';
@variant dark (&:where([style*="color-scheme: dark"] *));
diff --git a/packages/react-aria-components/docs/examples/user-combobox.mdx b/packages/react-aria-components/docs/examples/user-combobox.mdx
index 0841269a85f..14a21797253 100644
--- a/packages/react-aria-components/docs/examples/user-combobox.mdx
+++ b/packages/react-aria-components/docs/examples/user-combobox.mdx
@@ -145,14 +145,14 @@ function UserItem(props: ListBoxItemProps & {children: React.ReactNode}) {
This example uses the following plugins:
* [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
When using Tailwind v4, add them to your CSS:
```css render=false
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
```
diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx
index b78753b7043..167b94caafd 100644
--- a/packages/react-aria-components/docs/styling.mdx
+++ b/packages/react-aria-components/docs/styling.mdx
@@ -340,7 +340,7 @@ Note that unlike CSS transitions, keyframe animations are not interruptible. If
### Tailwind CSS
-If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) plugin. This includes utilities for building common animations such as fading, sliding, and zooming.
+If you are using Tailwind CSS v4, we recommend using the [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) library. This includes utilities for building common animations such as fading, sliding, and zooming. (For Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) instead.)
```jsx
diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json
index 5b29a072db1..0c7576f5ea5 100644
--- a/packages/react-aria-components/package.json
+++ b/packages/react-aria-components/package.json
@@ -3,10 +3,27 @@
"version": "1.19.0",
"description": "A library of styleable components built using React Aria",
"license": "Apache-2.0",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/adobe/react-spectrum"
+ },
+ "source": "exports/index.ts",
+ "files": [
+ "*",
+ "!docs/**",
+ "!example/**",
+ "!exports/**",
+ "!intl/**",
+ "!src/**",
+ "!stories/**",
+ "!test/**"
+ ],
+ "sideEffects": [
+ "*.css"
+ ],
"main": "./dist/exports/index.cjs",
"module": "./dist/exports/index.js",
"types": "./dist/types/exports/index.d.ts",
- "source": "exports/index.ts",
"exports": {
".": {
"source": "./exports/index.ts",
@@ -33,40 +50,24 @@
},
"./private/*": null
},
- "files": [
- "*",
- "!docs/**",
- "!example/**",
- "!exports/**",
- "!intl/**",
- "!src/**",
- "!stories/**",
- "!test/**"
- ],
- "sideEffects": [
- "*.css"
- ],
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/react-spectrum"
+ "publishConfig": {
+ "access": "public"
},
"dependencies": {
"@internationalized/date": "^3.12.2",
+ "@internationalized/string": "^3.2.9",
"@react-types/shared": "^3.36.0",
"@swc/helpers": "^0.5.0",
"client-only": "^0.0.1",
"react-aria": "3.50.0",
"react-stately": "3.48.0"
},
- "peerDependencies": {
+ "devDependencies": {
+ "@tailwindcss/postcss": "^4.0.0",
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
- "publishConfig": {
- "access": "public"
- },
- "devDependencies": {
- "@tailwindcss/postcss": "^4.0.0",
+ "peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
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..869d76f25ad 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -115,7 +115,10 @@ export interface ComboBoxProps
* @default 'react-aria-ComboBox'
*/
className?: ClassNameOrFunction;
- /** The filter function used to determine if a option should be included in the combo box list. */
+ /**
+ * The filter function used to determine if an option should be included in the combo box list.
+ * By default, a language-sensitive "contains" filter from `useFilter` is used.
+ */
defaultFilter?: (textValue: string, inputValue: string) => boolean;
/**
* Whether the text or key of the selected item is submitted as part of an HTML form. When
@@ -255,6 +258,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..8cc4ed1cbe4 100644
--- a/packages/react-aria-components/src/DropZone.tsx
+++ b/packages/react-aria-components/src/DropZone.tsx
@@ -27,7 +27,7 @@ import {getEventTarget, nodeContains} from 'react-aria/private/utils/shadowdom/D
import intlMessages from '../intl/*.json';
import {isFocusable} from 'react-aria/private/utils/isFocusable';
import {mergeProps} from 'react-aria/mergeProps';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {createContext, CSSProperties, ForwardedRef, forwardRef, useRef} from 'react';
import {TextContext} from './Text';
import {useButton} from 'react-aria/useButton';
import {useClipboard} from 'react-aria/useClipboard';
@@ -87,6 +87,11 @@ export interface DropZoneProps
* @default 'react-aria-DropZone'
*/
className?: ClassNameOrFunction;
+ /**
+ * The inline style for the visually hidden drop button used for keyboard and screen reader drop
+ * interactions.
+ */
+ dropButtonStyle?: CSSProperties;
}
export const DropZoneContext = createContext>(null);
@@ -99,7 +104,9 @@ 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 {dropButtonStyle} = props;
let dropzoneRef = useObjectRef(ref);
let buttonRef = useRef(null);
let {dropProps, dropButtonProps, isDropTarget} = useDrop({
@@ -162,7 +169,7 @@ export const DropZone = forwardRef(function DropZone(
data-focus-visible={isFocusVisible || undefined}
data-drop-target={isDropTarget || undefined}
data-disabled={isDisabled || undefined}>
-
+