Merge remote-tracking branch 'origin/main' into input-otp

Author: reidbarber

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -338,7 +338,13 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
         // outside the original pressed element.
         // (JSDOM does not support this)
         if ('releasePointerCapture' in e.target) {
-          e.target.releasePointerCapture(e.pointerId);
+          if ('hasPointerCapture' in e.target) {
+            if (e.target.hasPointerCapture(e.pointerId)) {
+              e.target.releasePointerCapture(e.pointerId);
+            }
+          } else {
+            e.target.releasePointerCapture(e.pointerId);
+          }
         }
       },
       onContextMenu(e) {

packages/@react-aria/i18n/src/useFilter.ts

@@ -15,11 +15,11 @@ import {useCollator} from './useCollator';
 
 export interface Filter {
   /** Returns whether a string starts with a given substring. */
-  startsWith(string: string, substring: string): boolean,
+  startsWith: (string: string, substring: string) => boolean,
   /** Returns whether a string ends with a given substring. */
-  endsWith(string: string, substring: string): boolean,
+  endsWith: (string: string, substring: string) => boolean,
   /** Returns whether a string contains a given substring. */
-  contains(string: string, substring: string): boolean
+  contains: (string: string, substring: string) => boolean
 }
 
 /**

packages/@react-aria/interactions/src/usePress.ts

@@ -596,7 +596,13 @@ export function usePress(props: PressHookProps): PressResult {
           // This enables onPointerLeave and onPointerEnter to fire.
           let target = getEventTarget(e.nativeEvent);
           if ('releasePointerCapture' in target) {
-            target.releasePointerCapture(e.pointerId);
+            if ('hasPointerCapture' in target) {
+              if (target.hasPointerCapture(e.pointerId)) {
+                target.releasePointerCapture(e.pointerId);
+              }
+            } else {
+              (target as Element).releasePointerCapture(e.pointerId);
+            }
           }
         }
 

packages/@react-aria/interactions/test/usePress.test.js

@@ -420,8 +420,10 @@ describe('usePress', function () {
 
       let el = res.getByText('test');
       el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(true);
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
-      expect(el.releasePointerCapture).toHaveBeenCalled();
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).toHaveBeenCalledWith(1);
       // react listens for pointerout and pointerover instead of pointerleave and pointerenter...
       fireEvent(el, pointerEvent('pointerout', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
       fireEvent(document, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
@@ -560,6 +562,16 @@ describe('usePress', function () {
       ]);
     });
 
+    it('should not call releasePointerCapture when hasPointerCapture returns false', function () {
+      let res = render(<Example />);
+      let el = res.getByText('test');
+      el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(false);
+      fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).not.toHaveBeenCalled();
+    });
+
     it('should handle pointer cancel events', function () {
       let events = [];
       let addEvent = (e) => events.push(e);
@@ -4011,8 +4023,10 @@ describe('usePress', function () {
 
       const el = shadowRoot.getElementById('testElement');
       el.releasePointerCapture = jest.fn();
+      el.hasPointerCapture = jest.fn().mockReturnValue(true);
       fireEvent(el, pointerEvent('pointerdown', {pointerId: 1, pointerType: 'mouse', clientX: 0, clientY: 0}));
-      expect(el.releasePointerCapture).toHaveBeenCalled();
+      expect(el.hasPointerCapture).toHaveBeenCalledWith(1);
+      expect(el.releasePointerCapture).toHaveBeenCalledWith(1);
       // react listens for pointerout and pointerover instead of pointerleave and pointerenter...
       fireEvent(el, pointerEvent('pointerout', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));
       fireEvent(document, pointerEvent('pointerup', {pointerId: 1, pointerType: 'mouse', clientX: 100, clientY: 100}));

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -147,7 +147,12 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
 
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
-      if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
+      if (
+        change.target.isConnected &&
+        ![...visibleNodes, ...hiddenNodes].some((node) =>
+          node.contains(change.target)
+        )
+      ) {
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&

packages/@react-aria/overlays/test/ariaHideOutside.test.js

@@ -12,7 +12,7 @@
 
 import {act, render, waitFor} from '@react-spectrum/test-utils-internal';
 import {ariaHideOutside} from '../src';
-import React, {useState} from 'react';
+import React, {useRef, useState} from 'react';
 
 describe('ariaHideOutside', function () {
   it('should hide everything except the provided element [button]', function () {
@@ -275,6 +275,76 @@ describe('ariaHideOutside', function () {
     expect(() => getByTestId('test')).not.toThrow();
   });
 
+  it('should handle when a new element is added and then reparented', async function () {
+
+    let Test = () => {
+      const ref = useRef(null);
+      const mutate = () => {
+        let parent = document.createElement('ul');
+        let child = document.createElement('li');
+        ref.current.append(parent);
+        parent.appendChild(child);
+        parent.remove(); // this results in a mutation record for a disconnected ul with a connected li (through the new ul parent) in `addedNodes`
+        let newParent = document.createElement('ul');
+        newParent.appendChild(child);
+        ref.current.append(newParent);
+      };
+
+      return (
+        <>
+          <div data-testid="test" ref={ref}>
+            <button onClick={mutate}>Mutate</button>
+          </div>
+        </>
+      );
+    };
+
+    let {queryByRole, getAllByRole, getByTestId} = render(<Test />);
+
+    ariaHideOutside([getByTestId('test')]);
+
+    queryByRole('button').click();
+    await Promise.resolve(); // Wait for mutation observer tick
+
+    expect(getAllByRole('listitem')).toHaveLength(1);
+  });
+
+  it('should handle when a new element is added and then reparented to a hidden container', async function () {
+
+    let Test = () => {
+      const ref = useRef(null);
+      const mutate = () => {
+        let parent = document.createElement('ul');
+        let child = document.createElement('li');
+        ref.current.append(parent);
+        parent.appendChild(child);
+        parent.remove(); // this results in a mutation record for a disconnected ul with a connected li (through the new ul parent) in `addedNodes`
+        let newParent = document.createElement('ul');
+        newParent.appendChild(child);
+        ref.current.append(newParent);
+      };
+
+      return (
+        <>
+          <div data-testid="test">
+            <button onClick={mutate}>Mutate</button>
+          </div>
+          <div data-testid="sibling" ref={ref} />
+        </>
+      );
+    };
+
+    let {queryByRole, queryAllByRole, getByTestId} = render(<Test />);
+
+    ariaHideOutside([getByTestId('test')]);
+
+    queryByRole('button').click();
+    await Promise.resolve(); // Wait for mutation observer tick
+
+    expect(queryAllByRole('listitem')).toHaveLength(0);
+  });
+
+
   it('work when called multiple times', function () {
     let {getByRole, getAllByRole} = render(
       <>

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -118,7 +118,6 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
     allowsTabNavigation = false,
-    isVirtualized,
     // If no scrollRef is provided, assume the collection ref is the scrollable region
     scrollRef = ref,
     linkBehavior = 'action'
@@ -328,7 +327,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Store the scroll position so we can restore it later.
   /// TODO: should this happen all the time??
   let scrollPos = useRef({top: 0, left: 0});
-  useEvent(scrollRef, 'scroll', isVirtualized ? undefined : () => {
+  useEvent(scrollRef, 'scroll', () => {
     scrollPos.current = {
       top: scrollRef.current?.scrollTop ?? 0,
       left: scrollRef.current?.scrollLeft ?? 0
@@ -369,7 +368,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       } else {
         navigateToKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
       }
-    } else if (!isVirtualized && scrollRef.current) {
+    } else if (scrollRef.current) {
       // Restore the scroll position to what it was before.
       scrollRef.current.scrollTop = scrollPos.current.top;
       scrollRef.current.scrollLeft = scrollPos.current.left;
@@ -581,7 +580,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // This will be marshalled to either the first or last item depending on where focus came from.
   let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
-    tabIndex = manager.focusedKey == null ? 0 : -1;
+    tabIndex = manager.isFocused ? -1 : 0;
   }
 
   let collectionId = useCollectionId(manager.collection);

packages/@react-aria/utils/src/useViewportSize.ts

@@ -26,20 +26,23 @@ export function useViewportSize(): ViewportSize {
   let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
 
   useEffect(() => {
+    let updateSize = (newSize: ViewportSize) => {
+      setSize(size => {
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+        return newSize;
+      });
+    };
+
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
       // Ignore updates when zoomed.
       if (visualViewport && visualViewport.scale > 1) {
         return;
       }
 
-      setSize(size => {
-        let newSize = getViewportSize();
-        if (newSize.width === size.width && newSize.height === size.height) {
-          return size;
-        }
-        return newSize;
-      });
+      updateSize(getViewportSize());
     };
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
@@ -54,18 +57,14 @@ export function useViewportSize(): ViewportSize {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
           if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
-            setSize(size => {
-              let newSize = {width: window.innerWidth, height: window.innerHeight};
-              if (newSize.width === size.width && newSize.height === size.height) {
-                return size;
-              }
-              return newSize;
-            });
+            updateSize({width: window.innerWidth, height: window.innerHeight});
           }
         });
       }
     };
 
+    updateSize(getViewportSize());
+
     window.addEventListener('blur', onBlur, true);
 
     if (!visualViewport) {

packages/@react-aria/utils/test/useViewportSize.ssr.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {testSSR} from '@react-spectrum/test-utils-internal';
+import {screen, testSSR} from '@react-spectrum/test-utils-internal';
 
 describe('useViewportSize SSR', () => {
   it('should render without errors', async () => {
@@ -25,4 +25,21 @@ describe('useViewportSize SSR', () => {
       <Viewport />
     `);
   });
+
+  it('should update dimensions after hydration', async () => {
+    await testSSR(__filename, `
+      import {useViewportSize} from '../src';
+
+      function Viewport() {
+        let size = useViewportSize();
+        return <div data-testid="viewport">{size.width}x{size.height}</div>;
+      }
+
+      <Viewport />
+    `, () => {
+      expect(screen.getByTestId('viewport')).toHaveTextContent('0x0');
+    });
+
+    expect(screen.getByTestId('viewport')).not.toHaveTextContent('0x0');
+  });
 });

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -79,7 +79,7 @@ export interface ComboboxStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 export interface ComboBoxProps<T extends object> extends
-  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | keyof GlobalDOMAttributes>,
+  Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection' | 'isTriggerUpWhenOpen' | keyof GlobalDOMAttributes>,
   ComboboxStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -354,6 +354,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   return (
     <AriaComboBox
       {...comboBoxProps}
+      isTriggerUpWhenOpen
       allowsEmptyCollection
       style={UNSAFE_style}
       className={UNSAFE_className + style(field(), getAllowedOverrides())({
@@ -643,9 +644,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           )}
           <Button
             ref={buttonRef}
-            // Prevent press scale from sticking while ComboBox is open.
-            // @ts-ignore
-            isPressed={false}
             style={renderProps => pressScale(buttonRef)(renderProps)}
             className={renderProps => inputButton({
               ...renderProps,