Skip to content

Commit a530335

Browse files
snowystingerdevongovett
snowystinger
and
devongovett
authored
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 <[email protected]> --------- Co-authored-by: Devon Govett <[email protected]>
1 parent c6bd2cb commit a530335

File tree

14 files changed

+57
-35
lines changed

14 files changed

+57
-35
lines changed

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

-1
Original file line numberDiff line numberDiff line change
@@ -692,7 +692,6 @@ function useRestoreFocus(scopeRef: RefObject<Element[] | null>, restoreFocus?: b
692692
restoreFocus
693693
&& nodeToRestore
694694
&& (
695-
// eslint-disable-next-line react-hooks/exhaustive-deps
696695
((ownerDocument.activeElement && isElementInChildScope(ownerDocument.activeElement, scopeRef)) || (ownerDocument.activeElement === ownerDocument.body && shouldRestoreFocus(scopeRef)))
697696
)
698697
) {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212

1313
import {classNames} from '@react-spectrum/utils';
1414
import {Color} from '@react-types/color';
15-
import {Context} from '@react-spectrum/provider';
1615
import {DOMProps, RefObject} from '@react-types/shared';
1716
import {Overlay} from '@react-spectrum/overlays';
18-
import React, {CSSProperties, ReactElement, useContext, useRef, useState} from 'react';
17+
import React, {CSSProperties, ReactElement, useRef, useState} from 'react';
1918
import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
2019
import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
2120
import {useId, useLayoutEffect} from '@react-aria/utils';
21+
import {useProvider} from '@react-spectrum/provider';
2222

2323
interface ColorThumbProps extends DOMProps {
2424
value: Color,
@@ -36,7 +36,7 @@ function ColorThumb(props: ColorThumbProps) {
3636

3737
let valueCSS = value.toString('css');
3838
let loupeRef = useRef<HTMLElement | null>(null);
39-
let provider = useContext(Context);
39+
let provider = useProvider();
4040

4141
return (
4242
<div className={classNames(stylesHandle, 'spectrum-ColorHandle', {'is-focused': isFocused, 'is-disabled': isDisabled}) + ' ' + className} style={style} {...otherProps}>

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

+6-10
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,8 @@
1212

1313
import {ColorArea} from '../';
1414
import {composeStories} from '@storybook/react';
15-
import {defaultTheme} from '@adobe/react-spectrum';
16-
import {fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
15+
import {fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
1716
import {parseColor} from '@react-stately/color';
18-
import {Provider} from '@react-spectrum/provider';
1917
import React from 'react';
2018
import * as stories from '../stories/ColorArea.stories';
2119
import userEvent from '@testing-library/user-event';
@@ -207,13 +205,11 @@ describe('ColorArea', () => {
207205
${'home/end'} | ${{defaultValue: parseColor('#f000f0')}} | ${{forward: (elem) => pressKey(elem, {key: 'End'}), backward: (elem) => pressKey(elem, {key: 'Home'})}} | ${parseColor('#df00f0')}
208206
`('$Name RTL', async ({props, actions: {forward, backward}, result}) => {
209207
let {getAllByRole} = render(
210-
<Provider locale="ar-AE" theme={defaultTheme}>
211-
<Component
212-
{...props}
213-
onChange={onChangeSpy}
214-
onChangeEnd={onChangeEndSpy} />
215-
</Provider>
216-
);
208+
<Component
209+
{...props}
210+
onChange={onChangeSpy}
211+
onChangeEnd={onChangeEndSpy} />
212+
, undefined, {locale: 'ar-AE'});
217213
let [xSlider, ySlider] = getAllByRole('slider', {hidden: true});
218214

219215
expect(xSlider.getAttribute('aria-valuetext')).toBe([

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, pointerMap, render, within} from '@react-spectrum/test-utils-internal';
13+
import {act, pointerMap, renderv3 as render, within} from '@react-spectrum/test-utils-internal';
1414
import {ColorEditor, ColorPicker} from '../src';
1515
import {Provider} from '@react-spectrum/provider';
1616
import React from 'react';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
13+
import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
1414
import {ColorSlider} from '../';
1515
import {parseColor} from '@react-stately/color';
1616
import React from 'react';

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
13+
import {act, fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
1414
import {ColorWheel} from '../';
1515
import {ControlledHSL} from '../stories/ColorWheel.stories';
1616
import {parseColor} from '@react-stately/color';
@@ -297,7 +297,7 @@ describe('ColorWheel', () => {
297297
let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} />);
298298
let slider = getByRole('slider');
299299
let thumb = slider.parentElement;
300-
let container = _container?.firstChild?.firstChild as HTMLElement;
300+
let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
301301
container.getBoundingClientRect = getBoundingClientRect;
302302

303303
expect(document.activeElement).not.toBe(slider);
@@ -320,7 +320,7 @@ describe('ColorWheel', () => {
320320
let defaultColor = parseColor('hsl(0, 100%, 50%)');
321321
let {container: _container, getByRole} = render(<ColorWheel defaultValue={defaultColor} onChange={onChangeSpy} isDisabled />);
322322
let slider = getByRole('slider');
323-
let container = _container?.firstChild?.firstChild as HTMLElement;
323+
let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
324324
container.getBoundingClientRect = getBoundingClientRect;
325325

326326
expect(document.activeElement).not.toBe(slider);
@@ -341,7 +341,7 @@ describe('ColorWheel', () => {
341341
let defaultColor = parseColor('hsl(0, 100%, 50%)');
342342
let {container: _container, getByRole} = render(<ControlledHSL defaultValue={defaultColor} onChange={onChangeSpy} onChangeEnd={onChangeEndSpy} />);
343343
let slider = getByRole('slider');
344-
let container = _container?.firstChild?.firstChild?.firstChild as HTMLElement;
344+
let container = _container?.firstChild?.firstChild?.firstChild?.firstChild as HTMLElement;
345345
container.getBoundingClientRect = getBoundingClientRect;
346346

347347
expect(document.activeElement).not.toBe(slider);
@@ -372,7 +372,7 @@ describe('ColorWheel', () => {
372372
...
373373
input.spectrum-ColorWheel-slider
374374
*/
375-
let handleColorElement = _container?.firstChild?.firstChild?.nextSibling?.firstChild as HTMLElement;
375+
let handleColorElement = _container?.firstChild?.firstChild?.firstChild?.nextSibling?.firstChild as HTMLElement;
376376
let thumbColor = parseColor(handleColorElement.style.backgroundColor);
377377
expect(defaultColor.getChannelValue('alpha')).toEqual(0.5);
378378
expect(thumbColor.getChannelValue('alpha')).toEqual(1);

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

+10-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-types/shared';
1414
import {baseStyleProps, classNames, StyleHandlers, useSlotProps, useStyleProps} from '@react-spectrum/utils';
15-
import {Context} from '@react-spectrum/provider';
1615
import {filterDOMProps} from '@react-aria/utils';
17-
import React, {ReactElement, useContext} from 'react';
16+
import {ProviderContext, useProvider} from '@react-spectrum/provider';
17+
import React, {ReactElement} from 'react';
1818
import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
1919

2020
export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -70,9 +70,15 @@ export function Icon(props: IconProps) {
7070
} = props;
7171
let {styleProps} = useStyleProps(otherProps, iconStyleProps);
7272

73-
let provider = useContext(Context);
73+
let provider: undefined | ProviderContext;
74+
try {
75+
// eslint-disable-next-line react-hooks/rules-of-hooks
76+
provider = useProvider();
77+
} catch {
78+
// ignore
79+
}
7480
let scale = 'M';
75-
if (provider !== null) {
81+
if (provider != null) {
7682
scale = provider.scale === 'large' ? 'L' : 'M';
7783
}
7884
if (!ariaHidden) {

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

+10-4
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
1414
import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
15-
import {Context} from '@react-spectrum/provider';
1615
import {filterDOMProps} from '@react-aria/utils';
17-
import React, {ReactElement, useContext} from 'react';
16+
import {ProviderContext, useProvider} from '@react-spectrum/provider';
17+
import React, {ReactElement} from 'react';
1818
import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
1919

2020
export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -38,9 +38,15 @@ export function UIIcon(props: UIIconProps) {
3838
} = props;
3939

4040
let {styleProps} = useStyleProps(otherProps);
41-
let provider = useContext(Context);
41+
let provider: undefined | ProviderContext;
42+
try {
43+
// eslint-disable-next-line react-hooks/rules-of-hooks
44+
provider = useProvider();
45+
} catch {
46+
// ignore
47+
}
4248
let scale = 'M';
43-
if (provider !== null) {
49+
if (provider != null) {
4450
scale = provider.scale === 'large' ? 'L' : 'M';
4551
}
4652

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

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

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

-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,5 @@
1313
/// <reference types="css-module-types" />
1414

1515
export {Provider, useProvider, useProviderProps} from './Provider';
16-
export {Context} from './context';
1716
export type {ProviderContext} from '@react-types/provider';
1817
export type {ProviderProps} from '@react-types/provider';

‎packages/@spectrum-icons/ui/scripts/generateIcons.cjs

+8-3
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,20 @@ function template(iconName) {
3838
return (
3939
`import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';
4040
import {UIIcon, UIIconPropsWithoutChildren} from '@react-spectrum/icon';
41-
import {Context} from '@react-spectrum/provider';
42-
import React, {useContext} from 'react';
41+
import {useProvider} from '@react-spectrum/provider';
42+
import React from 'react';
4343
4444
${jsx}
4545
4646
ExpressIcon.displayName = IconComponent.displayName;
4747
4848
export default function ${iconName}(props: UIIconPropsWithoutChildren) {
49-
let provider = useContext(Context);
49+
let provider;
50+
try {
51+
provider = useProvider();
52+
} catch {
53+
// ignore
54+
}
5055
return <UIIcon {...props}>{provider?.theme?.global?.express ? <ExpressIcon /> : <IconComponent />}</UIIcon>;
5156
}
5257
`

‎packages/dev/test-utils/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"dependencies": {
2323
"@react-aria/ssr": "^3.0.0",
2424
"@react-spectrum/test-utils": "1.0.0-alpha.2",
25+
"@react-spectrum/theme-default": "^3.5.13",
2526
"@swc/helpers": "^0.5.0",
2627
"@testing-library/dom": "^10.1.0",
2728
"@testing-library/jest-dom": "^5.16.4",
@@ -31,6 +32,7 @@
3132
"resolve": "^1.17.0"
3233
},
3334
"peerDependencies": {
35+
"@react-spectrum/provider": "^3.9.12",
3436
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
3537
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
3638
},

‎packages/dev/test-utils/src/renderOverride.js

+7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13+
import {Provider} from '@react-spectrum/provider';
14+
import React from 'react';
1315
import {render} from '@testing-library/react';
1416
import {StrictModeWrapper} from './StrictModeWrapper';
17+
import {theme} from '@react-spectrum/theme-default';
1518

1619
let reactTestingLibrary = require('@testing-library/react');
1720

@@ -34,3 +37,7 @@ function customRender(ui, options) {
3437

3538
// override render method with
3639
export {customRender as render};
40+
41+
export function renderv3(ui, options, providerProps) {
42+
return render(ui, {wrapper: (props) => <Provider theme={theme} {...providerProps}><StrictModeWrapper {...props} /></Provider>, ...options});
43+
}

‎yarn.lock

+2
Original file line numberDiff line numberDiff line change
@@ -8073,6 +8073,7 @@ __metadata:
80738073
"@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
80748074
"@react-aria/ssr": "npm:^3.0.0"
80758075
"@react-spectrum/test-utils": "npm:1.0.0-alpha.2"
8076+
"@react-spectrum/theme-default": "npm:^3.5.13"
80768077
"@swc/helpers": "npm:^0.5.0"
80778078
"@testing-library/dom": "npm:^10.1.0"
80788079
"@testing-library/jest-dom": "npm:^5.16.4"
@@ -8081,6 +8082,7 @@ __metadata:
80818082
jest: "npm:^29.5.0"
80828083
resolve: "npm:^1.17.0"
80838084
peerDependencies:
8085+
"@react-spectrum/provider": ^3.9.12
80848086
react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
80858087
react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
80868088
languageName: unknown

0 commit comments

Comments
 (0)