Merge branch 'main' into november24-v3-release-notes

Author: dannify

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

@@ -692,7 +692,6 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
         restoreFocus
         && nodeToRestore
         && (
-          // eslint-disable-next-line react-hooks/exhaustive-deps
           ((ownerDocument.activeElement && isElementInChildScope(ownerDocument.activeElement, scopeRef)) || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef)))
         )
       ) {

packages/@react-spectrum/accordion/docs/Accordion.mdx

@@ -29,7 +29,8 @@ import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-sp
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Accordion', 'Disclosure', 'DisclosureTitle', 'DisclosurePanel']} />
+  componentNames={['Accordion', 'Disclosure', 'DisclosureTitle', 'DisclosurePanel']}
+  since="3.38.0" />
 
 ## Example
 
@@ -67,7 +68,7 @@ import {Key} from "@react-types/shared";
 
 function ControlledExpansion() {
   let [expandedKeys, setExpandedKeys] = React.useState<Set<Key>>(new Set(['personal']))
-  
+
   return (
     <>
       <Accordion expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>

packages/@react-spectrum/accordion/docs/Disclosure.mdx

@@ -29,7 +29,8 @@ import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/acco
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Disclosure', 'DisclosureTitle', 'DisclosurePanel']} />
+  componentNames={['Disclosure', 'DisclosureTitle', 'DisclosurePanel']}
+  since="3.38.0" />
 
 ## Example
 
@@ -44,7 +45,7 @@ import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/acco
 
 ## Content
 
-Disclosure follows the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and consists of two children: `DisclosureTitle` and `DisclosurePanel`. The `DisclosureTitle` controls the expansion of the `DisclosurePanel` and the contents inside. 
+Disclosure follows the [ARIA Disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and consists of two children: `DisclosureTitle` and `DisclosurePanel`. The `DisclosureTitle` controls the expansion of the `DisclosurePanel` and the contents inside.
 
 Disclosure can be used as a standalone collapsible section of content. However, multiple discosures can be combined to form an [Accordion](Accordion.html).
 
@@ -59,7 +60,7 @@ Disclosure accepts an `onExpandedChange` prop which is triggered when it is expa
 ```tsx example
 function ControlledExpansion() {
   let [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-  
+
   return (
     <>
       <Disclosure isExpanded={isExpanded} onExpandedChange={setIsExpanded}>

packages/@react-spectrum/color/docs/ColorArea.mdx

@@ -37,7 +37,8 @@ keywords: [color area]
   componentNames={['ColorArea']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-area/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorField.mdx

@@ -33,7 +33,8 @@ keywords: [color field, input]
 <HeaderInfo
   packageData={packageData}
   componentNames={['ColorField']}
-  sourceData={[]} />
+  sourceData={[]}
+  since="3.35.0" />
 
 ## Example
 
@@ -44,7 +45,7 @@ keywords: [color field, input]
 ## Value
 
 A ColorField's `value` is empty by default, but an initial, uncontrolled, value can be provided using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` prop.  The value provided to either of these props should be a color string or <TypeLink links={colorTypes.links} type={colorTypes.exports.Color} /> object. 
+Alternatively, a controlled value can be provided using the `value` prop.  The value provided to either of these props should be a color string or <TypeLink links={colorTypes.links} type={colorTypes.exports.Color} /> object.
 
 In the example below, the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.parseColor} /> function is used to parse the initial color
 from a hex value, stored in state.

packages/@react-spectrum/color/docs/ColorPicker.mdx

@@ -32,7 +32,8 @@ keywords: [color picker]
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['ColorPicker', 'ColorEditor']} />
+  componentNames={['ColorPicker', 'ColorEditor']}
+  since="3.35.0" />
 
 ## Example
 
@@ -142,7 +143,7 @@ import {ColorWheel, ColorArea} from '@react-spectrum/color';
 
 <ColorPicker label="Fill" defaultValue="#08f">
   <ColorWheel />
-  <ColorArea 
+  <ColorArea
     colorSpace="hsb"
     xChannel="saturation"
     yChannel="brightness"

packages/@react-spectrum/color/docs/ColorSlider.mdx

@@ -35,7 +35,8 @@ keywords: [color slider]
   componentNames={['ColorSlider']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-slider/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorSwatch.mdx

@@ -35,7 +35,8 @@ keywords: [color swatch]
   componentNames={['ColorSwatch']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/swatch/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorSwatchPicker.mdx

@@ -34,7 +34,8 @@ keywords: [color swatch]
   componentNames={['ColorSwatchPicker']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/swatch-group/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/docs/ColorWheel.mdx

@@ -35,7 +35,8 @@ keywords: [color wheel, slider]
   componentNames={['ColorWheel']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/color-wheel/'}
-  ]} />
+  ]}
+  since="3.35.0" />
 
 ## Example
 

packages/@react-spectrum/color/src/ColorThumb.tsx

@@ -12,13 +12,13 @@
 
 import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
-import {Context} from '@react-spectrum/provider';
 import {DOMProps, RefObject} from '@react-types/shared';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, ReactElement, useContext, useRef, useState} from 'react';
+import React, {CSSProperties, ReactElement, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
 import {useId, useLayoutEffect} from '@react-aria/utils';
+import {useProvider} from '@react-spectrum/provider';
 
 interface ColorThumbProps extends DOMProps {
   value: Color,
@@ -36,7 +36,7 @@ function ColorThumb(props: ColorThumbProps) {
 
   let valueCSS = value.toString('css');
   let loupeRef = useRef<HTMLElement | null>(null);
-  let provider = useContext(Context);
+  let provider = useProvider();
 
   return (
     <div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>

packages/@react-spectrum/color/test/ColorArea.test.tsx

@@ -12,10 +12,8 @@
 
 import {ColorArea} from '../';
 import {composeStories} from '@storybook/react';
-import {defaultTheme} from '@adobe/react-spectrum';
-import {fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {parseColor} from '@react-stately/color';
-import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import * as stories from '../stories/ColorArea.stories';
 import userEvent from '@testing-library/user-event';
@@ -207,13 +205,11 @@ describe('ColorArea', () => {
           ${'home/end'}             | ${{defaultValue: parseColor('#f000f0')}} | ${{forward: (elem) => pressKey(elem, {key: 'End'}), backward: (elem) => pressKey(elem, {key: 'Home'})}}                                             | ${parseColor('#df00f0')}
         `('$Name RTL', async ({props, actions: {forward, backward}, result}) => {
           let {getAllByRole} = render(
-            <Provider locale="ar-AE" theme={defaultTheme}>
-              <Component
-                {...props}
-                onChange={onChangeSpy}
-                onChangeEnd={onChangeEndSpy} />
-            </Provider>
-          );
+            <Component
+              {...props}
+              onChange={onChangeSpy}
+              onChangeEnd={onChangeEndSpy} />
+          , undefined, {locale: 'ar-AE'});
           let [xSlider, ySlider] = getAllByRole('slider', {hidden: true});
 
           expect(xSlider.getAttribute('aria-valuetext')).toBe([

packages/@react-spectrum/color/test/ColorPicker.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
+import {act, pointerMap, renderv3 as render, within} from '@react-spectrum/test-utils-internal';
 import {ColorEditor, ColorPicker} from '../src';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';

packages/@react-spectrum/color/test/ColorSlider.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {ColorSlider} from '../';
 import {parseColor} from '@react-stately/color';
 import React from 'react';

packages/@react-spectrum/color/test/ColorWheel.test.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {ColorWheel} from '../';
 import {ControlledHSL} from '../stories/ColorWheel.stories';
 import {parseColor} from '@react-stately/color';
@@ -297,7 +297,7 @@ describe('ColorWheel', () => {
       let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
       let slider = getByRole('slider');
       let thumb = slider.parentElement;
-      let container = _container?.firstChild?.firstChild as HTMLElement;
+      let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
       container.getBoundingClientRect = getBoundingClientRect;
 
       expect(document.activeElement).not.toBe(slider);
@@ -320,7 +320,7 @@ describe('ColorWheel', () => {
       let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
       let slider = getByRole('slider');
-      let container = _container?.firstChild?.firstChild as HTMLElement;
+      let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
       container.getBoundingClientRect = getBoundingClientRect;
 
       expect(document.activeElement).not.toBe(slider);
@@ -341,7 +341,7 @@ describe('ColorWheel', () => {
       let defaultColor = parseColor('hsl(0, 100%, 50%)');
       let {container: _container, getByRole} = render(<ControlledHSL defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
       let slider = getByRole('slider');
-      let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
+      let container = _container?.firstChild?.firstChild?.firstChild?.firstChild as HTMLElement;
       container.getBoundingClientRect = getBoundingClientRect;
 
       expect(document.activeElement).not.toBe(slider);
@@ -372,7 +372,7 @@ describe('ColorWheel', () => {
                ...
              input.spectrum-ColorWheel-slider
     */
-    let handleColorElement = _container?.firstChild?.firstChild?.nextSibling?.firstChild as HTMLElement;
+    let handleColorElement = _container?.firstChild?.firstChild?.firstChild?.nextSibling?.firstChild as HTMLElement;
     let thumbColor = parseColor(handleColorElement.style.backgroundColor);
     expect(defaultColor.getChannelValue('alpha')).toEqual(0.5);
     expect(thumbColor.getChannelValue('alpha')).toEqual(1);

packages/@react-spectrum/dropzone/docs/DropZone.mdx

@@ -35,6 +35,7 @@ category: Drag and drop
 <HeaderInfo
   packageData={packageData}
   componentNames={['DropZone']}
+  since="3.35.0"
 />
 
 ## Example
@@ -340,7 +341,7 @@ function Example() {
 
 A DropZone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `'cancel'` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true. [Read more about getDropOperation.](../react-aria/useDrop.html#getdropoperation)
 
-In the below example, the drop zone only supports dropping JPEG images. If a JPEG is dragged over the drop zone, it will be highlighted and the operating system will display a copy cursor. If another type is dragged over the drop zone, then there is no visual feedback, indicating that a drop is not accepted. 
+In the below example, the drop zone only supports dropping JPEG images. If a JPEG is dragged over the drop zone, it will be highlighted and the operating system will display a copy cursor. If another type is dragged over the drop zone, then there is no visual feedback, indicating that a drop is not accepted.
 
 ```tsx example
 import {FileTrigger} from '@adobe/react-spectrum';

packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx

@@ -32,7 +32,8 @@ category: Buttons
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['FileTrigger']} />
+  componentNames={['FileTrigger']}
+  since="3.35.0" />
 
 ## Example
 
@@ -94,9 +95,9 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` proper
 
 ## Directory selection
 
-To enable selecting directories instead of files, use the `acceptDirectory` property. 
+To enable selecting directories instead of files, use the `acceptDirectory` property.
 
-This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser. 
+This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents. Please note that support for this feature varies from browser to browser.
 
 
 ```tsx example

packages/@react-spectrum/icon/docs/custom-icons.mdx

@@ -32,7 +32,8 @@ Custom icons can be used by wrapping them in an Icon component.
   componentNames={['Icon']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/iconography/'}
-  ]} />
+  ]}
+  since="3.0.0" />
 
 ## Example
 

packages/@react-spectrum/icon/src/Icon.tsx

@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
 import {baseStyleProps, classNames, StyleHandlers, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {Context} from '@react-spectrum/provider';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {ReactElement, useContext} from 'react';
+import {ProviderContext, useProvider} from '@react-spectrum/provider';
+import React, {ReactElement} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
 
 export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -70,9 +70,15 @@ export function Icon(props: IconProps) {
   } = props;
   let {styleProps} = useStyleProps(otherProps, iconStyleProps);
 
-  let provider = useContext(Context);
+  let provider: undefined | ProviderContext;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    provider = useProvider();
+  } catch {
+    // ignore
+  }
   let scale = 'M';
-  if (provider !== null) {
+  if (provider != null) {
     scale = provider.scale === 'large' ? 'L' : 'M';
   }
   if (!ariaHidden) {

packages/@react-spectrum/icon/src/UIIcon.tsx

@@ -12,9 +12,9 @@
 
 import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
-import {Context} from '@react-spectrum/provider';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {ReactElement, useContext} from 'react';
+import {ProviderContext, useProvider} from '@react-spectrum/provider';
+import React, {ReactElement} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
 
 export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -38,9 +38,15 @@ export function UIIcon(props: UIIconProps) {
   } = props;
 
   let {styleProps} = useStyleProps(otherProps);
-  let provider = useContext(Context);
+  let provider: undefined | ProviderContext;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    provider = useProvider();
+  } catch {
+    // ignore
+  }
   let scale = 'M';
-  if (provider !== null) {
+  if (provider != null) {
     scale = provider.scale === 'large' ? 'L' : 'M';
   }
 

packages/@react-spectrum/provider/src/Provider.tsx

@@ -23,7 +23,7 @@ import {DOMRef} from '@react-types/shared';
 import {filterDOMProps, RouterProvider} from '@react-aria/utils';
 import {I18nProvider, useLocale} from '@react-aria/i18n';
 import {ModalProvider, useModalProvider} from '@react-aria/overlays';
-import {ProviderProps} from '@react-types/provider';
+import {ProviderContext, ProviderProps} from '@react-types/provider';
 import React, {useContext, useEffect, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/page/vars.css';
 import typographyStyles from '@adobe/spectrum-css-temp/components/typography/index.css';
@@ -195,7 +195,7 @@ const ProviderWrapper = React.forwardRef(function ProviderWrapper(props: Provide
  * Returns the various settings and styles applied by the nearest parent Provider.
  * Properties explicitly set by the nearest parent Provider override those provided by preceeding Providers.
  */
-export function useProvider() {
+export function useProvider(): ProviderContext {
   let context = useContext(Context);
   if (!context) {
     throw new Error(

packages/@react-spectrum/provider/src/index.ts

@@ -13,6 +13,5 @@
 /// <reference types="css-module-types" />
 
 export {Provider, useProvider, useProviderProps} from './Provider';
-export {Context} from './context';
 export type {ProviderContext} from '@react-types/provider';
 export type {ProviderProps} from '@react-types/provider';