chore: revert export provider context (#7416)

* chore: revert exporting provider context * fix circular dependency * fix all the things * Update packages/@react-aria/focus/src/FocusScope.tsx Co-authored-by: Devon Govett <devongovett@gmail.com> --------- Co-authored-by: Devon Govett <devongovett@gmail.com>
adobe · Nov 21, 2024 · a530335 · a530335 · rspbot · Nov 21, 2024
1 parent c6bd2cb
commit a530335
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 35 deletions.
diff --git a/packages/@react-aria/focus/src/FocusScope.tsx b/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)))
         )
       ) {

diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/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}>

diff --git a/packages/@react-spectrum/color/test/ColorArea.test.tsx b/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([

diff --git a/packages/@react-spectrum/color/test/ColorPicker.test.js b/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';

diff --git a/packages/@react-spectrum/color/test/ColorSlider.test.tsx b/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';

diff --git a/packages/@react-spectrum/color/test/ColorWheel.test.tsx b/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);

diff --git a/packages/@react-spectrum/icon/src/Icon.tsx b/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) {

diff --git a/packages/@react-spectrum/icon/src/UIIcon.tsx b/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';
   }
 

diff --git a/packages/@react-spectrum/provider/src/Provider.tsx b/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(

diff --git a/packages/@react-spectrum/provider/src/index.ts b/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';
diff --git a/packages/@spectrum-icons/ui/scripts/generateIcons.cjs b/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
@@ -38,15 +38,20 @@ function template(iconName) {
     return (
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';
 import {UIIcon, UIIconPropsWithoutChildren} from '@react-spectrum/icon';
-import {Context} from '@react-spectrum/provider';
-import React, {useContext} from 'react';
+import {useProvider} from '@react-spectrum/provider';
+import React from 'react';
 
 ${jsx}
 
 ExpressIcon.displayName = IconComponent.displayName;
 
 export default function ${iconName}(props: UIIconPropsWithoutChildren) {
-  let provider = useContext(Context);
+  let provider;
+  try {
+    provider = useProvider();
+  } catch {
+    // ignore
+  }
   return <UIIcon {...props}>{provider?.theme?.global?.express ? <ExpressIcon /> : <IconComponent />}</UIIcon>;
 }
 `

diff --git a/packages/dev/test-utils/package.json b/packages/dev/test-utils/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@react-aria/ssr": "^3.0.0",
     "@react-spectrum/test-utils": "1.0.0-alpha.2",
+    "@react-spectrum/theme-default": "^3.5.13",
     "@swc/helpers": "^0.5.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -31,6 +32,7 @@
     "resolve": "^1.17.0"
   },
   "peerDependencies": {
+    "@react-spectrum/provider": "^3.9.12",
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
     "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },

diff --git a/packages/dev/test-utils/src/renderOverride.js b/packages/dev/test-utils/src/renderOverride.js
@@ -10,8 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
+import {Provider} from '@react-spectrum/provider';
+import React from 'react';
 import {render} from '@testing-library/react';
 import {StrictModeWrapper} from './StrictModeWrapper';
+import {theme} from '@react-spectrum/theme-default';
 
 let reactTestingLibrary = require('@testing-library/react');
 
@@ -34,3 +37,7 @@ function customRender(ui, options) {
 
 // override render method with
 export {customRender as render};
+
+export function renderv3(ui, options, providerProps) {
+  return render(ui, {wrapper: (props) => <Provider theme={theme} {...providerProps}><StrictModeWrapper {...props} /></Provider>, ...options});
+}
diff --git a/yarn.lock b/yarn.lock
@@ -8073,6 +8073,7 @@ __metadata:
     "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
     "@react-aria/ssr": "npm:^3.0.0"
     "@react-spectrum/test-utils": "npm:1.0.0-alpha.2"
+    "@react-spectrum/theme-default": "npm:^3.5.13"
     "@swc/helpers": "npm:^0.5.0"
     "@testing-library/dom": "npm:^10.1.0"
     "@testing-library/jest-dom": "npm:^5.16.4"
@@ -8081,6 +8082,7 @@ __metadata:
     jest: "npm:^29.5.0"
     resolve: "npm:^1.17.0"
   peerDependencies:
+    "@react-spectrum/provider": ^3.9.12
     react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
     react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
   languageName: unknown