code · pull · Jun 25, 2026 · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -6,10 +6,6 @@
     {
       "name": "monorepo",
       "specifier": "@jdb8/eslint-plugin-monorepo"
-    },
-    {
-      "name": "react-hooks-js",
-      "specifier": "eslint-plugin-react-hooks"
     }
   ],
   "categories": {
@@ -169,19 +165,7 @@
     "react/rules-of-hooks": "error",
     "react/exhaustive-deps": "warn",
 
-    // React Compiler rules
-    "react-hooks-js/config": "error",
-    "react-hooks-js/error-boundaries": "error",
-    "react-hooks-js/component-hook-factories": "error",
-    "react-hooks-js/gating": "error",
-    "react-hooks-js/globals": "error",
-    "react-hooks-js/purity": "error",
-    "react-hooks-js/set-state-in-effect": "warn",
-    "react-hooks-js/set-state-in-render": "error",
-    "react-hooks-js/static-components": "error",
-    "react-hooks-js/unsupported-syntax": "warn",
-    "react-hooks-js/use-memo": "error",
-    "react-hooks-js/incompatible-library": "warn",
+    "react/react-compiler": "error",
 
     "rsp-rules/no-react-key": ["error"],
     "rsp-rules/sort-imports": ["error"],

diff --git a/examples/rac-spectrum-tailwind/.yarn/install-state.gz b/examples/rac-spectrum-tailwind/.yarn/install-state.gz
diff --git a/examples/rac-spectrum-tailwind/package.json b/examples/rac-spectrum-tailwind/package.json
@@ -19,7 +19,7 @@
     "react-dom": "^18.2.0",
     "react-stately": "latest",
     "tailwindcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.5"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "process": "^0.11.10"

diff --git a/examples/rac-spectrum-tailwind/src/spectrum-preset.js b/examples/rac-spectrum-tailwind/src/spectrum-preset.js
@@ -547,5 +547,5 @@ module.exports = {
       4: 'var(--spectrum-global-color-opacity-4)'
     }
   },
-  plugins: [require('tailwindcss-animate')]
+  plugins: []
 };
diff --git a/examples/rac-spectrum-tailwind/src/style.css b/examples/rac-spectrum-tailwind/src/style.css
@@ -1,6 +1,7 @@
 @import 'tailwindcss' source('./');
 
 @config '../tailwind.config.js';
+@import 'tw-animate-css';
 
 * {
   -webkit-tap-highlight-color: transparent;

diff --git a/examples/rac-spectrum-tailwind/yarn.lock b/examples/rac-spectrum-tailwind/yarn.lock
@@ -6065,7 +6065,7 @@ __metadata:
     react-dom: "npm:^18.2.0"
     react-stately: "npm:latest"
     tailwindcss: "npm:^4.0.0"
-    tailwindcss-animate: "npm:^1.0.5"
+    tw-animate-css: "npm:^1.4.0"
   languageName: unknown
   linkType: soft
 
@@ -6410,15 +6410,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss-animate@npm:^1.0.5":
-  version: 1.0.7
-  resolution: "tailwindcss-animate@npm:1.0.7"
-  peerDependencies:
-    tailwindcss: "*"
-  checksum: 10c0/ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
-  languageName: node
-  linkType: hard
-
 "tailwindcss@npm:4.1.13, tailwindcss@npm:^4.0.0":
   version: 4.1.13
   resolution: "tailwindcss@npm:4.1.13"
@@ -6479,6 +6470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tw-animate-css@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "tw-animate-css@npm:1.4.0"
+  checksum: 10c0/6cfbc19ccc73883ec80ef1f9147f43e736cb01ee99c8172968b37eb81b720523d30e38b1a96aef92db3c586d864204db5510b51744ddacbbf0ad8e3c7fb56ec7
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.20.2":
   version: 0.20.2
   resolution: "type-fest@npm:0.20.2"

diff --git a/package.json b/package.json
@@ -153,7 +153,6 @@
     "diff": "^5.1.0",
     "eslint-import-resolver-node": "^0.3.10",
     "eslint-plugin-jest": "29.15.2",
-    "eslint-plugin-react-hooks": "^7.0.0",
     "exceljs": "^4.4.0",
     "fast-check": "^2.19.0",
     "fast-glob": "^3.1.0",
@@ -175,7 +174,7 @@
     "motion": "^12.23.6",
     "npm-cli-login": "^1.0.0",
     "oxfmt": "^0.48.0",
-    "oxlint": "^1.63.0",
+    "oxlint": "^1.71.0",
     "parcel": "^2.16.3",
     "parcel-optimizer-strict-mode": "workspace:^",
     "patch-package": "^6.2.0",
@@ -199,8 +198,8 @@
     "storybook-react-parcel": "workspace:^",
     "tailwind-variants": "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch",
     "tailwindcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.2",
     "unplugin-parcel-macros": "^0.1.1",
     "verdaccio": "^6.0.0",

diff --git a/packages/@adobe/react-spectrum/chromatic/provider/Provider.stories.tsx b/packages/@adobe/react-spectrum/chromatic/provider/Provider.stories.tsx
@@ -127,6 +127,7 @@ const ResponsiveStyleTemplate = (props: ProviderProps): JSX.Element => (
 
 const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
+    // oxlint-disable-next-line react/react-compiler
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {
@@ -149,13 +150,15 @@ const CustomResponsivStylePropsTemplate = (props: ProviderProps): JSX.Element =>
   };
   return (
     <Provider breakpoints={{S: 480, M: 640, L: 1024}} UNSAFE_style={{padding: 50}} {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <Breakpoint />
     </Provider>
   );
 };
 
 const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   let Breakpoint = () => {
+    // oxlint-disable-next-line react/react-compiler
     let {matchedBreakpoints} = useBreakpoint()!;
     let breakpoint = matchedBreakpoints[0];
     let width = {base: 'size-1600', S: 'size-2400', L: 'size-3400'};
@@ -170,6 +173,7 @@ const BreakpointOmittedTemplate = (props: ProviderProps): JSX.Element => {
   };
   return (
     <Provider UNSAFE_style={{padding: 50}} {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <Breakpoint />
     </Provider>
   );

diff --git a/packages/@adobe/react-spectrum/src/actionbar/ActionBar.tsx b/packages/@adobe/react-spectrum/src/actionbar/ActionBar.tsx
@@ -110,9 +110,8 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: Ref<HTMLDivElemen
   }
 
   let {keyboardProps} = useKeyboard({
-    onKeyDown(e) {
-      if (e.key === 'Escape') {
-        e.preventDefault();
+    shortcuts: {
+      Escape: () => {
         onClearSelection();
       }
     }

diff --git a/packages/@adobe/react-spectrum/src/actiongroup/ActionGroup.tsx b/packages/@adobe/react-spectrum/src/actiongroup/ActionGroup.tsx
@@ -260,6 +260,7 @@ export const ActionGroup = forwardRef(function ActionGroup<T extends object>(
         return wrapperRef.current?.parentElement;
       }
     }),
+    // oxlint-disable-next-line react/react-compiler
     [wrapperRef]
   );
   useResizeObserver({
@@ -484,8 +485,11 @@ function ActionGroupMenu<T>({
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/actiongroup');
 
   // The menu button shouldn't act like an actual action group item.
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps.onPress;
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps.role;
+  // oxlint-disable-next-line react/react-compiler
   delete buttonProps['aria-checked'];
 
   let {hoverProps, isHovered} = useHover({isDisabled});

diff --git a/packages/@adobe/react-spectrum/src/autocomplete/MobileSearchAutocomplete.tsx b/packages/@adobe/react-spectrum/src/autocomplete/MobileSearchAutocomplete.tsx
@@ -63,6 +63,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(
   props: SpectrumSearchAutocompleteProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
 
   let {
@@ -117,6 +118,7 @@ function ForwardMobileSearchAutocomplete<T extends object>(
   });
 
   // Focus the button and show focus ring when clicking on the label
+  // oxlint-disable-next-line react/react-compiler
   labelProps.onClick = () => {
     if (!props.isDisabled && buttonRef.current) {
       buttonRef.current.focus();
@@ -417,8 +419,11 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
   // VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than
   // "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
   // open the virtual keyboard rather than closing the tray.
+  // oxlint-disable-next-line react/react-compiler
   inputProps.role = 'searchbox';
+  // oxlint-disable-next-line react/react-compiler
   inputProps['aria-haspopup'] = 'listbox';
+  // oxlint-disable-next-line react/react-compiler
   delete inputProps.onTouchEnd;
 
   let clearButton = (
@@ -486,6 +491,7 @@ function SearchAutocompleteTray<T>(props: SearchAutocompleteTrayProps<T>) {
       }
     } else if (loadingState !== 'filtering') {
       // 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 !== null) {
         clearTimeout(timeout.current);

diff --git a/packages/@adobe/react-spectrum/src/autocomplete/SearchAutocomplete.tsx b/packages/@adobe/react-spectrum/src/autocomplete/SearchAutocomplete.tsx
@@ -120,6 +120,7 @@ function SearchAutocomplete<T extends object>(
   props: SpectrumSearchAutocompleteProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
   props = useFormProps(props);
 

diff --git a/packages/@adobe/react-spectrum/src/button/Button.tsx b/packages/@adobe/react-spectrum/src/button/Button.tsx
@@ -120,6 +120,7 @@ export const Button = React.forwardRef(function Button<T extends ElementType = '
       }, 1000);
     } else {
       // Exit loading state when isPending is set to false. */
+      // oxlint-disable-next-line react/react-compiler
       setIsProgressVisible(false);
     }
     return () => {

diff --git a/packages/@adobe/react-spectrum/src/button/ClearButton.tsx b/packages/@adobe/react-spectrum/src/button/ClearButton.tsx
@@ -56,6 +56,7 @@ export const ClearButton = React.forwardRef(function ClearButton(
   // iOS 14 with VoiceOver doesn't focus the button and hide the keyboard when
   // moving the cursor over the clear button.
   if (preventFocus) {
+    // oxlint-disable-next-line react/react-compiler
     delete buttonProps.tabIndex;
   }
 

diff --git a/packages/@adobe/react-spectrum/src/buttongroup/ButtonGroup.tsx b/packages/@adobe/react-spectrum/src/buttongroup/ButtonGroup.tsx
@@ -60,6 +60,7 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup(
   let domRef = useDOMRef(ref);
   let [hasOverflow, setHasOverflow] = useValueEffect(false);
 
+  // oxlint-disable react/react-compiler, react-hooks/exhaustive-deps
   let checkForOverflow = useCallback(() => {
     let computeHasOverflow = () => {
       if (domRef.current && orientation === 'horizontal') {
@@ -86,8 +87,8 @@ export const ButtonGroup = React.forwardRef(function ButtonGroup(
         yield computeHasOverflow();
       });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [domRef, orientation, scale, 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)
@@ -97,12 +98,13 @@ export const ButtonGroup = React.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<HTMLElement>(undefined);
+  // 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});
 
   return (

diff --git a/packages/@adobe/react-spectrum/src/card/CardBase.tsx b/packages/@adobe/react-spectrum/src/card/CardBase.tsx
@@ -111,6 +111,7 @@ export const CardBase = React.forwardRef(function CardBase<T extends object>(
         UNSAFE_className: classNames(styles, 'spectrum-Card-image'),
         objectFit: orientation === 'horizontal' ? 'cover' : 'contain',
         alt: '',
+        // oxlint-disable-next-line react/react-compiler
         ...aspectRatioEnforce
       },
       illustration: {

diff --git a/packages/@adobe/react-spectrum/src/card/CardView.tsx b/packages/@adobe/react-spectrum/src/card/CardView.tsx
@@ -100,7 +100,9 @@ export const CardView = React.forwardRef(function CardView<T extends object>(
     focusMode: 'cell'
   });
 
+  // oxlint-disable-next-line react/react-compiler
   cardViewLayout.collection = gridCollection;
+  // oxlint-disable-next-line react/react-compiler
   cardViewLayout.disabledKeys = state.disabledKeys;
 
   let {gridProps} = useGrid(
@@ -263,6 +265,7 @@ function InternalCard(props) {
   // We don't want to focus the checkbox (or any other focusable elements) within the Card
   // when pressing the arrow keys so we delete the key down handler here. Arrow key navigation between
   // the cards in the CardView is handled by useGrid => useSelectableCollection instead.
+  // oxlint-disable-next-line react/react-compiler
   delete gridCellProps.onKeyDownCapture;
   return (
     <div {...rowProps} ref={rowRef} className={classNames(styles, 'spectrum-CardView-row')}>

diff --git 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
@@ -59,6 +59,7 @@ export const ColorField = React.forwardRef(function ColorField(
   props: SpectrumColorFieldProps,
   ref: Ref<TextFieldRef>
 ) {
+  // 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
@@ -56,6 +56,7 @@ export const ColorPicker = React.forwardRef(function ColorPicker(
   let labelId = useId();
   return (
     <AriaColorPicker {...props}>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <DialogTrigger type="popover" mobileType="tray" targetRef={unwrapDOMRef(swatchRef)}>
         <Button
           ref={domRef}

diff --git a/packages/@adobe/react-spectrum/src/color/ColorSwatch.tsx b/packages/@adobe/react-spectrum/src/color/ColorSwatch.tsx
@@ -111,6 +111,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/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx b/packages/@adobe/react-spectrum/src/color/ColorSwatchPicker.tsx
@@ -77,6 +77,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
           }
         })({density})
       }>
+      {/* oxlint-disable-next-line react/react-compiler */}
       <SpectrumColorSwatchContext.Provider value={{useWrapper, size, rounding}}>
         {props.children}
       </SpectrumColorSwatchContext.Provider>

diff --git a/packages/@adobe/react-spectrum/src/color/ColorWheel.tsx b/packages/@adobe/react-spectrum/src/color/ColorWheel.tsx
@@ -54,6 +54,7 @@ export const ColorWheel = React.forwardRef(function ColorWheel(
   let [wheelRadius, setWheelRadius] = useState<number>(0);
   let [wheelThickness, setWheelThickness] = useState(WHEEL_THICKNESS);
 
+  // oxlint-disable-next-line react/react-compiler
   let resizeHandler = useCallback(() => {
     if (containerRef.current) {
       setWheelRadius(containerRef.current.offsetWidth / 2);

diff --git a/packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx b/packages/@adobe/react-spectrum/src/combobox/ComboBox.tsx
@@ -141,6 +141,7 @@ export const ComboBox = React.forwardRef(function ComboBox<T extends object>(
   props: SpectrumComboBoxProps<T>,
   ref: FocusableRef<HTMLElement>
 ) {
+  // oxlint-disable-next-line react/react-compiler
   props = useProviderProps(props);
   props = useFormProps(props);