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

Author: devongovett

packages/@adobe/spectrum-css-temp/components/tray/index.css

@@ -20,14 +20,13 @@
 
 .spectrum-Tray-wrapper {
   inset-inline-start: 0;
-  /* Positioned at the top of the window */
-  position: fixed;
+  position: absolute;
   top: 0;
 
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
 
   /* Don't catch clicks */
   pointer-events: none;
@@ -55,10 +54,12 @@
   max-height: calc(var(--spectrum-visual-viewport-height) - var(--spectrum-tray-margin-top));
   /* Add padding at the bottom to account for the rest of the viewport height behind the keyboard.
    * This is necessary so that there isn't a visible gap that appears while the keyboard is animating
-   * in and out. Fall back to the safe area inset to account for things like iOS home indicator. */
-  padding-bottom: max(calc(100vh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom));
+   * in and out. Fall back to the safe area inset to account for things like iOS home indicator.
+     We also add an additional 100vh of padding (offset by the bottom position below) so the tray 
+     extends behind Safari's address bar and keyboard in iOS 26. */
+  padding-bottom: calc(max(calc(100dvh - var(--spectrum-visual-viewport-height)), env(safe-area-inset-bottom)) + 100vh);
   position: absolute;
-  bottom: 0;
+  bottom: -100vh;
   outline: none;
   display: flex;
   flex-direction: column;

packages/@adobe/spectrum-css-temp/components/underlay/index.css

@@ -23,7 +23,8 @@ governing permissions and limitations under the License.
 .spectrum-Underlay {
   composes: spectrum-overlay;
 
-  position: fixed;
+  /* Use position: absolute instead of fixed to avoid being clipped to the "inner" viewport in iOS 26 */
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;

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/collections/src/Document.ts

@@ -461,16 +461,14 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
   }
 
   private removeNode(node: ElementNode<T>): void {
-    if (node.node == null) {
-      return;
-    }
-
     for (let child of node) {
       this.removeNode(child);
     }
 
-    let collection = this.getMutableCollection();
-    collection.removeNode(node.node.key);
+    if (node.node) {
+      let collection = this.getMutableCollection();
+      collection.removeNode(node.node.key);
+    }
   }
 
   /** Finalizes the collection update, updating all nodes and freezing the collection. */
@@ -508,12 +506,16 @@ export class Document<T, C extends BaseCollection<T> = BaseCollection<T>> extend
           this.addNode(element);
         }
 
+        if (element.node) {
+          this.dirtyNodes.delete(element);
+        }
+
         element.isMutated = false;
+      } else {
+        this.dirtyNodes.delete(element);
       }
     }
 
-    this.dirtyNodes.clear();
-
     // Finally, update the collection.
     if (this.nextCollection) {
       this.nextCollection.commit(this.firstVisibleChild?.node?.key ?? null, this.lastVisibleChild?.node?.key ?? null, this.isSSR);