Skip to content

Commit be90742

Browse files
snowystingersnowystinger
committed
turn on globals and fix errors
1 parent a5803c0 commit be90742

File tree

9 files changed

+95
-55
lines changed

9 files changed

+95
-55
lines changed

‎eslint.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,9 +234,9 @@ export default [{
234234
'react-hooks/error-boundaries': ERROR,
235235
'react-hooks/component-hook-factories': ERROR,
236236
'react-hooks/gating': ERROR,
237-
// 'react-hooks/globals': ERROR,
237+
'react-hooks/globals': ERROR,
238238
// 'react-hooks/immutability': ERROR,
239-
// 'react-hooks/preserve-manual-memoization': ERROR,
239+
// 'react-hooks/preserve-manual-memoization': ERROR, // No idea how to turn this one on yet
240240
'react-hooks/purity': ERROR,
241241
// 'react-hooks/refs': ERROR, // can't turn on until https://github.com/facebook/react/issues/34775 is fixed
242242
'react-hooks/set-state-in-effect': ERROR,

‎packages/@react-aria/dnd/test/dnd.test.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {CUSTOM_DRAG_TYPE} from '../src/constants';
1717
import {DataTransfer, DataTransferItem, DragEvent, FileSystemDirectoryEntry, FileSystemFileEntry} from './mocks';
1818
import {Draggable, Droppable} from './examples';
1919
import {DragTypes} from '../src/utils';
20-
import React from 'react';
20+
import React, {useEffect} from 'react';
2121
import userEvent from '@testing-library/user-event';
2222

2323
function pointerEvent(type, opts) {
@@ -195,13 +195,13 @@ describe('useDrag and useDrop', function () {
195195
let draggable = tree.getByText('Drag me');
196196
let droppable = tree.getByText('Drop here');
197197
expect(droppable).toHaveAttribute('data-droptarget', 'false');
198-
198+
199199
let dataTransfer = new DataTransfer();
200200
fireEvent(draggable, new DragEvent('dragstart', {dataTransfer, clientX: 0, clientY: 0}));
201201
act(() => jest.runAllTimers());
202202
expect(draggable).toHaveAttribute('data-dragging', 'true');
203203
expect(droppable).toHaveAttribute('data-droptarget', 'false');
204-
204+
205205
expect(onDragStart).toHaveBeenCalledTimes(1);
206206
expect(onDragMove).not.toHaveBeenCalled();
207207
expect(onDragEnd).not.toHaveBeenCalled();
@@ -2574,7 +2574,9 @@ describe('useDrag and useDrop', function () {
25742574
let setShowTarget2;
25752575
let Test = () => {
25762576
let [showTarget2, _setShowTarget2] = React.useState(false);
2577-
setShowTarget2 = _setShowTarget2;
2577+
useEffect(() => {
2578+
setShowTarget2 = _setShowTarget2;
2579+
}, [_setShowTarget2]);
25782580
return (<>
25792581
<Draggable />
25802582
<Droppable />
@@ -2635,7 +2637,9 @@ describe('useDrag and useDrop', function () {
26352637
let setShowTarget2;
26362638
let Test = () => {
26372639
let [showTarget2, _setShowTarget2] = React.useState(true);
2638-
setShowTarget2 = _setShowTarget2;
2640+
useEffect(() => {
2641+
setShowTarget2 = _setShowTarget2;
2642+
}, [_setShowTarget2]);
26392643
return (<>
26402644
<Draggable />
26412645
<Droppable />

‎packages/@react-aria/utils/test/mergeRefs.test.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {mergeRefs} from '../';
14-
import React, {useCallback, useRef} from 'react';
14+
import React, {useCallback, useEffect, useRef} from 'react';
1515
import {render} from '@react-spectrum/test-utils-internal';
1616

1717
describe('mergeRefs', () => {
@@ -20,16 +20,21 @@ describe('mergeRefs', () => {
2020
let ref2;
2121

2222
const TextField = (props) => {
23-
ref1 = useRef(null);
24-
ref2 = useRef(null);
23+
let internalRef1 = useRef(null);
24+
let internalRef2 = useRef(null);
25+
useEffect(() => {
26+
ref1 = internalRef1;
27+
ref2 = internalRef2;
28+
}, [internalRef1, internalRef2]);
2529

26-
const ref = mergeRefs(ref1, ref2);
30+
const ref = mergeRefs(internalRef1, internalRef2);
2731
return <input {...props} ref={ref} />;
2832
};
2933

3034
render(<TextField foo="foo" />);
3135

3236
expect(ref1.current).toBe(ref2.current);
37+
expect(ref1.current).not.toBeNull();
3338
});
3439

3540
if (parseInt(React.version.split('.')[0], 10) >= 19) {
@@ -40,14 +45,18 @@ describe('mergeRefs', () => {
4045
let target = null;
4146

4247
const TextField = (props) => {
43-
ref1 = useRef(null);
44-
ref2 = useRef(null);
48+
let internalRef1 = useRef(null);
49+
let internalRef2 = useRef(null);
50+
useEffect(() => {
51+
ref1 = internalRef1;
52+
ref2 = internalRef2;
53+
}, [internalRef1, internalRef2]);
4554
let ref3 = useCallback((node) => {
4655
target = node;
4756
return cleanUp;
4857
}, []);
4958

50-
const ref = mergeRefs(ref1, ref2, ref3);
59+
const ref = mergeRefs(internalRef1, internalRef2, ref3);
5160
return <input {...props} ref={ref} />;
5261
};
5362

‎packages/@react-spectrum/breadcrumbs/test/Breadcrumbs.test.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {act, pointerMap, render, within} from '@react-spectrum/test-utils-intern
1414
import {Breadcrumbs} from '../';
1515
import {Item} from '@react-stately/collections';
1616
import {Provider} from '@react-spectrum/provider';
17-
import React, {useRef} from 'react';
17+
import React, {createRef, forwardRef} from 'react';
1818
import {theme} from '@react-spectrum/theme-default';
1919
import userEvent from '@testing-library/user-event';
2020

@@ -93,16 +93,15 @@ describe('Breadcrumbs', function () {
9393
});
9494

9595
it('Should handle forward ref', function () {
96-
let ref;
97-
let Component = () => {
98-
ref = useRef();
96+
let ref = createRef();
97+
let Component = forwardRef((props, forwardedRef) => {
9998
return (
100-
<Breadcrumbs ref={ref} aria-label="breadcrumbs-test">
99+
<Breadcrumbs ref={forwardedRef} aria-label="breadcrumbs-test">
101100
<Item>Folder 1</Item>
102101
</Breadcrumbs>
103102
);
104-
};
105-
let {getByLabelText} = render(<Component />);
103+
});
104+
let {getByLabelText} = render(<Component ref={ref} />);
106105
let breadcrumb = getByLabelText('breadcrumbs-test');
107106
expect(breadcrumb).toBe(ref.current.UNSAFE_getDOMNode());
108107
});

‎packages/@react-spectrum/utils/test/Slots.test.js‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
import {ClearSlots, SlotProvider, useSlotProps} from '../';
1414
import {pointerMap, render} from '@react-spectrum/test-utils-internal';
15-
import React, {StrictMode, useRef} from 'react';
15+
import React, {StrictMode, useEffect, useRef} from 'react';
1616
import {useId, useSlotId} from '@react-aria/utils';
1717
import {usePress} from '@react-aria/interactions';
1818
import userEvent from '@testing-library/user-event';
@@ -25,11 +25,13 @@ describe('Slots', function () {
2525
});
2626

2727
function Component(props) {
28-
results = useSlotProps(props, 'slotname');
29-
props = results;
28+
let internalResults = useSlotProps(props, 'slotname');
29+
useEffect(() => {
30+
results = internalResults;
31+
}, [internalResults]);
3032
let ref = useRef();
31-
let {pressProps} = usePress({onPress: props.onPress, ref});
32-
let id = useId(props.id);
33+
let {pressProps} = usePress({onPress: internalResults.onPress, ref});
34+
let id = useId(internalResults.id);
3335
return <button id={id} {...pressProps} ref={ref}>push me</button>;
3436
}
3537

@@ -174,7 +176,10 @@ describe('Slots', function () {
174176
function SlotsUseSlotId() {
175177
let id1 = useId();
176178
let id2 = useId();
177-
id = useRef(id2).current;
179+
let id3 = useRef(id2);
180+
useEffect(() => {
181+
id = id3.current;
182+
}, [id3]);
178183

179184
return (
180185
<>
@@ -228,12 +233,12 @@ describe('Slots', function () {
228233
);
229234

230235
let renderCountBeforeRerender = renderCount;
231-
236+
232237
// Trigger a rerender with the same stable props
233238
rerender(
234239
<FullComponentTree slots={slots} />
235240
);
236-
241+
237242
expect(renderCount).toEqual(renderCountBeforeRerender);
238243
});
239244

@@ -277,12 +282,12 @@ describe('Slots', function () {
277282
);
278283

279284
let renderCountBeforeRerender = renderCount;
280-
285+
281286
// Trigger a rerender with the same stable props
282287
rerender(
283288
<FullComponentTree slots={slots} />
284289
);
285-
290+
286291
expect(renderCount).toEqual(renderCountBeforeRerender);
287292
});
288293
});

‎packages/@react-spectrum/well/test/Well.test.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,19 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import React, {useRef} from 'react';
13+
import React, {useEffect, useRef} from 'react';
1414
import {render} from '@react-spectrum/test-utils-internal';
1515
import {Well} from '../';
1616

1717
let refExists = (ComponentToCheck, children, props) => {
1818
let ref;
1919
let dataTestId = props['data-testid'] || 'refTestId';
2020
let Component = () => {
21-
ref = useRef();
22-
return (<ComponentToCheck ref={ref} {...props} data-testid={dataTestId}>{children}</ComponentToCheck>);
21+
let internalRef = useRef();
22+
useEffect(() => {
23+
ref = internalRef;
24+
}, [internalRef]);
25+
return (<ComponentToCheck ref={internalRef} {...props} data-testid={dataTestId}>{children}</ComponentToCheck>);
2326
};
2427

2528
let {getByText, getByTestId} = render(<Component />);

‎packages/@react-stately/checkbox/test/useCheckboxGroupState.test.tsx‎

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*/
1212

1313
import {act, render} from '@react-spectrum/test-utils-internal';
14-
import React from 'react';
14+
import React, {useEffect} from 'react';
1515
import {useCheckboxGroupState} from '../';
1616

1717
describe('useCheckboxGroupState', () => {
@@ -107,7 +107,9 @@ describe('useCheckboxGroupState', () => {
107107
let setValue: (value: string[]) => void;
108108
function Test() {
109109
const state = useCheckboxGroupState({defaultValue: ['foo']});
110-
setValue = state.setValue;
110+
useEffect(() => {
111+
setValue = state.setValue;
112+
}, [state]);
111113
return <>{state.value.join(', ')}</>;
112114
}
113115
const {container} = render(<Test />);
@@ -128,7 +130,9 @@ describe('useCheckboxGroupState', () => {
128130

129131
function Test() {
130132
const state = useCheckboxGroupState({defaultValue: ['foo'], onChange: onChangeSpy});
131-
setValue = state.setValue;
133+
useEffect(() => {
134+
setValue = state.setValue;
135+
}, [state]);
132136
return <>{state.value.join(', ')}</>;
133137
}
134138

@@ -145,7 +149,9 @@ describe('useCheckboxGroupState', () => {
145149
let addValue: (value: string) => void;
146150
function Test() {
147151
const state = useCheckboxGroupState({defaultValue: ['foo']});
148-
addValue = state.addValue;
152+
useEffect(() => {
153+
addValue = state.addValue;
154+
}, [state]);
149155
return <>{state.value.join(', ')}</>;
150156
}
151157
const {container} = render(<Test />);
@@ -161,7 +167,9 @@ describe('useCheckboxGroupState', () => {
161167
let addValue: (value: string) => void;
162168
function Test() {
163169
const state = useCheckboxGroupState({defaultValue: ['foo']});
164-
addValue = state.addValue;
170+
useEffect(() => {
171+
addValue = state.addValue;
172+
}, [state]);
165173
return <>{state.value.join(', ')}</>;
166174
}
167175
const {container} = render(<Test />);
@@ -180,7 +188,9 @@ describe('useCheckboxGroupState', () => {
180188
let removeValue: (value: string) => void;
181189
function Test() {
182190
const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
183-
removeValue = state.removeValue;
191+
useEffect(() => {
192+
removeValue = state.removeValue;
193+
}, [state]);
184194
return <>{state.value.join(', ')}</>;
185195
}
186196
const {container} = render(<Test />);
@@ -196,7 +206,9 @@ describe('useCheckboxGroupState', () => {
196206
let toggleValue: (value: string) => void;
197207
function Test() {
198208
const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
199-
toggleValue = state.toggleValue;
209+
useEffect(() => {
210+
toggleValue = state.toggleValue;
211+
}, [state]);
200212
return <>{state.value.join(', ')}</>;
201213
}
202214
const {container} = render(<Test />);
@@ -218,7 +230,10 @@ describe('useCheckboxGroupState', () => {
218230
let toggleValue: (value: string) => void;
219231
function Test() {
220232
const state = useCheckboxGroupState({defaultValue: ['foo', 'qwe']});
221-
toggleValue = state.toggleValue;
233+
useEffect(() => {
234+
toggleValue = state.toggleValue;
235+
}, [state]);
236+
222237
return <>{state.value.join(', ')}</>;
223238
}
224239
const {container} = render(<Test />);
@@ -239,10 +254,12 @@ describe('useCheckboxGroupState', () => {
239254

240255
function Test() {
241256
const state = useCheckboxGroupState({isReadOnly: true, defaultValue: ['test']});
242-
addValue = state.addValue;
243-
removeValue = state.removeValue;
244-
toggleValue = state.toggleValue;
245-
setValue = state.setValue;
257+
useEffect(() => {
258+
addValue = state.addValue;
259+
removeValue = state.removeValue;
260+
toggleValue = state.toggleValue;
261+
setValue = state.setValue;
262+
}, [state]);
246263

247264
return <>{state.value.join(', ')}</>;
248265
}
@@ -284,10 +301,12 @@ describe('useCheckboxGroupState', () => {
284301

285302
function Test() {
286303
const state = useCheckboxGroupState({isDisabled: true, defaultValue: ['test']});
287-
addValue = state.addValue;
288-
removeValue = state.removeValue;
289-
toggleValue = state.toggleValue;
290-
setValue = state.setValue;
304+
useEffect(() => {
305+
addValue = state.addValue;
306+
removeValue = state.removeValue;
307+
toggleValue = state.toggleValue;
308+
setValue = state.setValue;
309+
}, [state]);
291310

292311
return <>{state.value.join(', ')}</>;
293312
}

‎packages/react-aria-components/src/utils.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,6 @@ export function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, s
182182

183183
export function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E> | undefined, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
184184
let ctx = useSlottedContext(context, props.slot) || {};
185-
// @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
186185
let {ref: contextRef, ...contextProps} = ctx as any;
187186
let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
188187
let mergedProps = mergeProps(contextProps, props) as unknown as T;

‎packages/react-aria-components/test/ListBox.test.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
Virtualizer
3030
} from '../';
3131
import {ListBoxLoadMoreItem} from '../src/ListBox';
32-
import React, {useState} from 'react';
32+
import React, {useEffect, useState} from 'react';
3333
import {User} from '@react-aria/test-utils';
3434
import userEvent from '@testing-library/user-event';
3535

@@ -312,9 +312,11 @@ describe('ListBox', () => {
312312
let setItemText;
313313
function Child() {
314314
let [showTwo, _setShowTwo] = useState(false);
315-
setShowTwo = _setShowTwo;
316315
let [itemText, _setItemText] = useState('One');
317-
setItemText = _setItemText;
316+
useEffect(() => {
317+
setItemText = _setItemText;
318+
setShowTwo = _setShowTwo;
319+
}, [_setItemText, _setShowTwo]);
318320
return (
319321
<>
320322
<ListBoxItem id={1}>{itemText}</ListBoxItem>
@@ -1771,7 +1773,7 @@ describe('ListBox', () => {
17711773
let {getByRole} = renderListbox({}, {onAction, onPressStart, onPressEnd, onPress, onClick});
17721774
let listBoxTester = testUtilUser.createTester('ListBox', {root: getByRole('listbox')});
17731775
await listBoxTester.triggerOptionAction({option: 1, interactionType});
1774-
1776+
17751777
expect(onAction).toHaveBeenCalledTimes(1);
17761778
expect(onPressStart).toHaveBeenCalledTimes(1);
17771779
expect(onPressEnd).toHaveBeenCalledTimes(1);

0 commit comments

Comments
 (0)