Merge branch 'update-eslint-plugin-react-hooks-followup' into update-eslint-plugin-react-hooks-immutability

Author: snowystinger

.cursor/rules/add-subheadings.mdc

@@ -0,0 +1,22 @@
+---
+alwaysApply: false
+---
+
+# Step 3: Add sub-headings
+
+Within the Enhancements, Fixes, and Under Construction categories, group commits by UI component under sub-headings.
+
+### Sub-heading rules:
+- Use sub-headings ONLY for:
+  - Enhancements
+  - Fixes
+  - Under Construction
+- Do NOT create sub-headings for:
+  - Documentation
+  - To Be Categorized
+  - S2
+- Sub-headings should be in alphabetical order
+- Use "Miscellaneous" as a sub-heading for commits that do not belong to a specific component
+- Each category can have its own Miscellaneous sub-heading
+- Write sub-headings and commits as unordered lists using a hyphen (-)
+- Do NOT bold the sub-heading text

.cursor/rules/categorize-commits.mdc

@@ -0,0 +1,36 @@
+---
+alwaysApply: false
+---
+
+# Step 1: Categorize commits 
+
+Sort ALL commit messages into one of six main categories. The main categories are the following:
+- Enhancements
+- Fixes
+- Documentation
+- Under Construction
+- To Be Categorized
+- S2
+
+Before categorizing commits into other groups, check whether each commit should be classified as “Under Construction.”
+- Follow the steps below in order:
+  1. Identify pre-release packages
+    - Use a command such as grep to scan the repository for package versions that include prerelease identifiers (e.g., alpha, beta, rc)
+  2. Extract component keywords from commit messages
+    - Parse each commit message to identify possible component names
+    - Normalize these keywords (e.g., lowercase, remove punctuation) for easier comparison.
+  3. Compare extracted keywords with pre-release packages
+    - If any keyword matches a package in the list, mark the commit as Under Construction.
+  4. Check for explicit prerelease keywords in commit text
+    - If the commit message directly includes alpha, beta, or rc, classify it as Under Construction, regardless of package matches.
+
+Next, categorize the remaining commits not categorized as "Under Construction". Use the following keywords to determine the category:
+| Keyword                    | Category |
+|----------------------------|----------|
+| feat                       | Enhancements|
+| fix                        | Fixes |
+| docs                       | Documentation |
+| chore, revert, bump, build | To Be Categorized |
+| S2                         | S2 |
+
+Do not duplicate commits. In terms of priority, it should be Under Construction > S2 > To Be Categorized > Enhancements > Fixes > Documentation

.cursor/rules/rewrite-commit-message.mdc

@@ -0,0 +1,27 @@
+---
+alwaysApply: false
+---
+
+You are a expert technical writer for front-end development.
+
+# Step 2: Rewrite commit messages
+
+Original format: Type (Scope): Summary of changes - [@username](link to username) - [PR](link to PR)
+New Format: Summary of changes - [@username](link to username) - [PR](link to PR)
+
+### General Guidelines:
+- Keep the summary as a single, grammatically correct sentence
+- Verbs should be first person present tense but do NOT include the subject (e.g. I)
+- The message should be concise and easy to read
+- Wrap any camelCase or code-like terms (e.g. onClick, onAction, isDisabled) in backticks (``)
+  - Do NOT use backticks for component names
+- Replace specific terms:
+  - RAC -> React Aria
+  - V3 -> React Spectrum
+- ALWAYS capitalize UI component names
+  - Example:
+    - toast -> Toast
+    - inline alert -> InlineAlert
+
+### Component Names to Capitalize:
+Accordion, Autocomplete, Badge, Breadcrumbs, Buttons, Calendar, Checkbox, CheckboxGroup, Collections, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, ComboBox, Date and Time, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, Drag and Drop, DropZone, FileTrigger, Form, InlineAlert, Link, Listbox, ListView, Menu, Meter, Modal, NotificationBadge, NumberField, Picker, ProgressBar, ProgressCircle, RadioGroup, RangeCalendar, SearchField, Select, Slider, StatusLight, Switch, Table, Tabs, TagGroup, TextArea, TextField, TimeField, Toast, ToggleButton, ToggleButtonGroup, Tooltip, Tree, Virtualizer.

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, FocusableElement, FocusEvents, KeyboardEvents, Node, RefObject, ValueBase} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -92,7 +92,6 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
   let queuedActiveDescendant = useRef<string | null>(null);
-  let lastCollectionNode = useRef<HTMLElement>(null);
 
   // For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
   // moving focus back to the subtriggers
@@ -106,7 +105,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     return () => clearTimeout(timeout.current);
   }, []);
 
-  let updateActiveDescendant = useCallback((e: Event) => {
+  let updateActiveDescendantEvent = useEffectEvent((e: Event) => {
     // Ensure input is focused if the user clicks on the collection directly.
     if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
       inputRef.current.focus();
@@ -138,29 +137,33 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     }
 
     delayNextActiveDescendant.current = false;
-  }, [shouldUseVirtualFocus, inputRef, collectionRef, state]);
+  });
 
-  let callbackRef = useCallback((collectionNode) => {
-    if (collectionNode != null) {
-      // When typing forward, we want to delay the setting of active descendant to not interrupt the native screen reader announcement
-      // of the letter you just typed. If we recieve another focus event then we clear the queued update
-      // We track lastCollectionNode to do proper cleanup since callbackRefs just pass null when unmounting. This also handles
-      // React 19's extra call of the callback ref in strict mode
-      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
-      lastCollectionNode.current = collectionNode;
-      collectionNode.addEventListener('focusin', updateActiveDescendant);
+  let [collectionNode, setCollectionNode] = useState<HTMLElement | null>(null);
+  let callbackRef = useCallback((node) => {
+    setCollectionNode(node);
+    if (node != null) {
       // If useSelectableCollection isn't passed shouldUseVirtualFocus even when useAutocomplete provides it
       // that means the collection doesn't support it (e.g. Table). If that is the case, we need to disable it here regardless
       // of what the user's provided so that the input doesn't recieve the onKeyDown and autocomplete props.
-      if (collectionNode.getAttribute('tabindex') != null) {
+      if (node.getAttribute('tabindex') != null) {
         setShouldUseVirtualFocus(false);
       }
       setHasCollection(true);
     } else {
-      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
       setHasCollection(false);
     }
-  }, [updateActiveDescendant]);
+  }, []);
+  useLayoutEffect(() => {
+    if (collectionNode != null) {
+      // When typing forward, we want to delay the setting of active descendant to not interrupt the native screen reader announcement
+      // of the letter you just typed. If we recieve another focus event then we clear the queued update
+      collectionNode.addEventListener('focusin', updateActiveDescendantEvent);
+    }
+    return () => {
+      collectionNode?.removeEventListener('focusin', updateActiveDescendantEvent);
+    };
+  }, [collectionNode]);
 
   // Make sure to memo so that React doesn't keep registering a new event listeners on every rerender of the wrapped collection
   let mergedCollectionRef = useObjectRef(useMemo(() => mergeRefs(collectionRef, callbackRef), [collectionRef, callbackRef]));

packages/@react-aria/disclosure/src/useDisclosure.ts

@@ -73,7 +73,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
     if (raf.current) {
       cancelAnimationFrame(raf.current);
     }
-    if (ref.current && !isDisabled && !isSSR) {
+    if (ref.current && !isSSR) {
       let panel = ref.current;
 
       if (isExpandedRef.current == null || typeof panel.getAnimations !== 'function') {
@@ -155,7 +155,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       role: 'group',
       'aria-labelledby': triggerId,
       'aria-hidden': !state.isExpanded,
-      hidden: !state.isExpanded || undefined
+      hidden: isSSR ? !state.isExpanded : undefined
     }
   };
 }

packages/@react-aria/disclosure/test/useDisclosure.test.ts

@@ -91,7 +91,7 @@ describe('useDisclosure', () => {
   });
 
   it('should keep panel hidden when toggling disabled state', () => {
-    let {result, rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
+    let {rerender} = renderHook(({isDisabled}: {isDisabled: boolean}) => {
       let state = useDisclosureState({});
       return useDisclosure({isDisabled}, state, ref);
     }, {initialProps: {isDisabled: false}});
@@ -100,13 +100,13 @@ describe('useDisclosure', () => {
       rerender({isDisabled: true});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
 
     act(() => {
       rerender({isDisabled: false});
     });
 
-    expect(result.current.panelProps.hidden).toBe(true);
+    expect(ref.current.hidden).toBe(true);
   });
 
   it('should set correct IDs for accessibility', () => {

packages/@react-aria/dnd/src/DropTargetKeyboardNavigation.ts

@@ -100,19 +100,25 @@ function nextDropTarget(
       }
       case 'after': {
         // If this is the last sibling in a level, traverse to the parent.
-        let targetNode = collection.getItem(target.key);        
-        if (targetNode && targetNode.nextKey == null && targetNode.parentKey != null) {
+        let targetNode = collection.getItem(target.key);
+        let nextItemInSameLevel = targetNode?.nextKey != null ? collection.getItem(targetNode.nextKey) : null;
+        while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
+          nextItemInSameLevel = nextItemInSameLevel.nextKey != null ? collection.getItem(nextItemInSameLevel.nextKey) : null;
+        }
+        
+        if (targetNode && nextItemInSameLevel == null && targetNode.parentKey != null) {
           // If the parent item has an item after it, use the "before" position.
           let parentNode = collection.getItem(targetNode.parentKey);
-          if (parentNode?.nextKey != null) {
+          const nextNode = parentNode?.nextKey != null ? collection.getItem(parentNode.nextKey) : null;
+          if (nextNode?.type === 'item') {
             return {
               type: 'item',
-              key: parentNode.nextKey,
+              key: nextNode.key,
               dropPosition: 'before'
             };
           }
 
-          if (parentNode) {
+          if (parentNode?.type === 'item') {
             return {
               type: 'item',
               key: parentNode.key,
@@ -121,10 +127,10 @@ function nextDropTarget(
           }
         }
 
-        if (targetNode?.nextKey != null) {
+        if (nextItemInSameLevel) {
           return {
             type: 'item',
-            key: targetNode.nextKey,
+            key: nextItemInSameLevel.key,
             dropPosition: 'on'
           };
         }
@@ -154,8 +160,11 @@ function previousDropTarget(
     let prevKey: Key | null = null;
     let lastKey = keyboardDelegate.getLastKey?.();
     while (lastKey != null) {
-      prevKey = lastKey;
       let node = collection.getItem(lastKey);
+      if (node?.type !== 'item') {
+        break;
+      }
+      prevKey = lastKey;
       lastKey = node?.parentKey;
     }