Merge branch 'main' of github.com:adobe/react-spectrum into docs_fixes

Author: LFDanLu

packages/@internationalized/date/src/queries.ts

@@ -268,7 +268,9 @@ function getWeekStart(locale: string): number {
     }
     let region = getRegion(locale);
     if (locale.includes('-fw-')) {
-      let day = locale.split('-fw-')[1];
+      // pull the value for the attribute fw from strings such as en-US-u-ca-iso8601-fw-tue or en-US-u-ca-iso8601-fw-mon-nu-thai
+      // where the fw attribute could be followed by another unicode locale extension or not
+      let day = locale.split('-fw-')[1].split('-')[0];
       if (day === 'mon') {
         weekInfo = {firstDay: 1};
       } else if (day === 'tue') {
@@ -284,7 +286,7 @@ function getWeekStart(locale: string): number {
       } else {
         weekInfo = {firstDay: 0};
       }
-    } else if (locale.includes('u-ca-iso8601')) {
+    } else if (locale.includes('-ca-iso8601')) {
       weekInfo = {firstDay: 1};
     } else {
       weekInfo = {firstDay: region ? weekStartData[region] || 0 : 0};

packages/@internationalized/date/tests/queries.test.js

@@ -281,6 +281,11 @@ describe('queries', function () {
 
       // override first day of week
       expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-ca-iso8601-fw-tue')).toEqual(new CalendarDate(2021, 8, 3));
+
+      // override applied if extension appears in the middle of other extensions
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-nu-thai-ca-iso8601')).toEqual(new CalendarDate(2021, 8, 2));
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-nu-thai-ca-iso8601-fw-tue')).toEqual(new CalendarDate(2021, 8, 3));
+      expect(startOfWeek(new CalendarDate(2021, 8, 4), 'en-US-u-ca-iso8601-fw-tue-nu-thai')).toEqual(new CalendarDate(2021, 8, 3));
     });
   });
 

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, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, getOwnerWindow, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
 import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
@@ -106,6 +106,9 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     // 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();
+      if (inputRef.current instanceof getOwnerWindow(inputRef.current).HTMLInputElement) {
+        inputRef.current.select();
+      }
     }
 
     let target = e.target as Element | null;

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -85,10 +85,10 @@ function Checkbox(props) {
   let {children} = props;
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
 
   return (
-    <label style={{display: 'block'}}>
+    <label {...labelProps} style={{display: 'block'}}>
       <input {...inputProps} ref={ref} />
       {children}
     </label>
@@ -120,12 +120,12 @@ import {mergeProps} from '@react-aria/utils';
 function Checkbox(props) {
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let isSelected = state.isSelected && !props.isIndeterminate;
 
   return (
-    <label style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
+    <label {...labelProps} style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
       <VisuallyHidden>
         <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -127,13 +127,14 @@ function Checkbox(props) {
   let {children} = props;
   let state = React.useContext(CheckboxGroupContext);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckboxGroupItem(props, state, ref);
+  let {inputProps, labelProps} = useCheckboxGroupItem(props, state, ref);
 
   let isDisabled = state.isDisabled || props.isDisabled;
   let isSelected = state.isSelected(props.value);
 
   return (
     <label
+      {...labelProps}
       style={{
         display: 'block',
         color: (isDisabled && 'var(--gray)') || (isSelected && 'var(--blue)'),

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
-import {InputHTMLAttributes, LabelHTMLAttributes, useEffect} from 'react';
+import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject, ValidationResult} from '@react-types/shared';
@@ -69,17 +69,24 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     onPress() {
       // @ts-expect-error
       let {[privateValidationStateProp]: groupValidationState} = props;
-  
+
       let {commitValidation} = groupValidationState
       ? groupValidationState
       : validationState;
-      
+
       commitValidation();
     }
   });
 
   return {
-    labelProps: mergeProps(labelProps, pressProps),
+    labelProps: mergeProps(
+      labelProps,
+      pressProps,
+      useMemo(() => ({
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: e => e.preventDefault()
+      }), [])),
     inputProps: {
       ...inputProps,
       checked: isSelected,

packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {AriaCheckboxProps, useCheckbox} from '../';
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {useToggleState} from '@react-stately/toggle';
+
+export default {
+  title: 'useCheckbox'
+};
+
+export type CheckboxStory = StoryObj<typeof Checkbox>;
+
+function Checkbox(props: AriaCheckboxProps) {
+  let {children} = props;
+  let state = useToggleState(props);
+  let ref = React.useRef(null);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
+
+  return (
+    <>
+      <label {...labelProps} style={{display: 'block'}}>
+        {children}
+      </label>
+      <input {...inputProps} ref={ref} />
+    </>
+  );
+}
+
+export const Example: CheckboxStory = {
+  render: (args) => <Checkbox {...args}>Unsubscribe</Checkbox>,
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
+};

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

@@ -41,14 +41,13 @@ export interface DisclosureAria {
  * @param state - State for the disclosure, as returned by `useDisclosureState`.
  * @param ref - A ref for the disclosure panel.
  */
-export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref: RefObject<Element | null>): DisclosureAria {
+export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref: RefObject<HTMLElement | null>): DisclosureAria {
   let {
     isDisabled
   } = props;
   let triggerId = useId();
   let panelId = useId();
   let isSSR = useIsSSR();
-  let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
 
   let raf = useRef<number | null>(null);
 
@@ -66,22 +65,64 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
   }, [ref, state]);
 
   // @ts-ignore https://github.com/facebook/react/pull/24741
-  useEvent(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
+  useEvent(ref, 'beforematch', handleBeforeMatch);
 
+  let isExpandedRef = useRef<boolean | null>(null);
   useLayoutEffect(() => {
     // Cancel any pending RAF to prevent stale updates
     if (raf.current) {
       cancelAnimationFrame(raf.current);
     }
-    // Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
-    if (supportsBeforeMatch && ref.current && !isDisabled) {
-      if (state.isExpanded) {
-        ref.current.removeAttribute('hidden');
-      } else {
-        ref.current.setAttribute('hidden', 'until-found');
+    if (ref.current && !isDisabled && !isSSR) {
+      let panel = ref.current;
+
+      if (isExpandedRef.current == null || typeof panel.getAnimations !== 'function') {
+        // On initial render (and in tests), set attributes without animation.
+        if (state.isExpanded) {
+          panel.removeAttribute('hidden');
+          panel.style.setProperty('--disclosure-panel-width', 'auto');
+          panel.style.setProperty('--disclosure-panel-height', 'auto');
+        } else {
+          panel.setAttribute('hidden', 'until-found');
+          panel.style.setProperty('--disclosure-panel-width', '0px');
+          panel.style.setProperty('--disclosure-panel-height', '0px');
+        }
+      } else if (state.isExpanded !== isExpandedRef.current) {
+        if (state.isExpanded) {
+          panel.removeAttribute('hidden');
+
+          // Set the width and height as pixels so they can be animated.
+          panel.style.setProperty('--disclosure-panel-width', panel.scrollWidth + 'px');
+          panel.style.setProperty('--disclosure-panel-height', panel.scrollHeight + 'px');
+
+          Promise.all(panel.getAnimations().map(a => a.finished))
+            .then(() => {
+              // After the animations complete, switch back to auto so the content can resize.
+              panel.style.setProperty('--disclosure-panel-width', 'auto');
+              panel.style.setProperty('--disclosure-panel-height', 'auto');
+            })
+            .catch(() => {});
+        } else {
+          panel.style.setProperty('--disclosure-panel-width', panel.scrollWidth + 'px');
+          panel.style.setProperty('--disclosure-panel-height', panel.scrollHeight + 'px');
+
+          // Force style re-calculation to trigger animations.
+          window.getComputedStyle(panel).height;
+
+          // Animate to zero size.
+          panel.style.setProperty('--disclosure-panel-width', '0px');
+          panel.style.setProperty('--disclosure-panel-height', '0px');
+
+          // Wait for animations to apply the hidden attribute.
+          Promise.all(panel.getAnimations().map(a => a.finished))
+            .then(() => panel.setAttribute('hidden', 'until-found'))
+            .catch(() => {});
+        }
       }
+
+      isExpandedRef.current = state.isExpanded;
     }
-  }, [isDisabled, ref, state.isExpanded, supportsBeforeMatch]);
+  }, [isDisabled, ref, state.isExpanded, isSSR]);
 
   useEffect(() => {
     return () => {
@@ -114,7 +155,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       role: 'group',
       'aria-labelledby': triggerId,
       'aria-hidden': !state.isExpanded,
-      hidden: supportsBeforeMatch ? true : !state.isExpanded
+      hidden: isSSR ? !state.isExpanded : undefined
     }
   };
 }

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

@@ -31,7 +31,6 @@ describe('useDisclosure', () => {
     let {buttonProps, panelProps} = result.current;
 
     expect(buttonProps['aria-expanded']).toBe(false);
-    expect(panelProps.hidden).toBe(true);
     expect(panelProps['aria-hidden']).toBe(true);
   });
 
@@ -44,7 +43,7 @@ describe('useDisclosure', () => {
     let {buttonProps, panelProps} = result.current;
 
     expect(buttonProps['aria-expanded']).toBe(true);
-    expect(panelProps.hidden).toBe(false);
+    expect(panelProps['aria-hidden']).toBe(false);
   });
 
   it('should handle expanding on press event (with mouse)', () => {

packages/@react-aria/focus/src/FocusScope.tsx

@@ -15,6 +15,7 @@ import {
   getActiveElement,
   getEventTarget,
   getOwnerDocument,
+  getOwnerWindow,
   isAndroid,
   isChrome,
   isFocusable,
@@ -371,6 +372,10 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
         // restore focus to the previously focused node or the first tabbable element in the active scope.
         if (focusedNode.current) {
           focusedNode.current.focus();
+
+          if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+            focusedNode.current.select();
+          }
         } else if (activeScope && activeScope.current) {
           focusFirstInScope(activeScope.current);
         }
@@ -399,6 +404,9 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo
           if (target && target.isConnected) {
             focusedNode.current = target;
             focusedNode.current?.focus();
+            if (focusedNode.current instanceof getOwnerWindow(focusedNode.current).HTMLInputElement) {
+              focusedNode.current.select();
+            }
           } else if (activeScope.current) {
             focusFirstInScope(activeScope.current);
           }
@@ -486,6 +494,9 @@ function focusElement(element: FocusableElement | null, scroll = false) {
   } else if (element != null) {
     try {
       element.focus();
+      if (element instanceof getOwnerWindow(element).HTMLInputElement) {
+        element.select();
+      }
     } catch {
       // ignore
     }