Skip to content

Commit 6e4a1d8

Browse files
snowystingersnowystinger
committed
fix all the types for the upgrade
1 parent 0774444 commit 6e4a1d8

35 files changed

+112
-66
lines changed

‎.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
diff --git a/buffer.d.ts b/buffer.d.ts
2+
index 5d6c97d6b5d47fd189f795498aefd6b8d7713b7d..b9a22c4634fa6308006ae17d3527ff3c518a789d 100644
3+
--- a/buffer.d.ts
4+
+++ b/buffer.d.ts
5+
@@ -629,7 +629,7 @@ declare module "buffer" {
6+
*/
7+
poolSize: number;
8+
}
9+
- interface Buffer extends Uint8Array {
10+
+ interface Buffer extends Uint8Array<ArrayBuffer> {
11+
/**
12+
* Writes `string` to `buf` at `offset` according to the character encoding in`encoding`. The `length` parameter is the number of bytes to write. If `buf` did
13+
* not contain enough space to fit the entire string, only part of `string` will be

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,10 @@
235235
"recast": "0.23.6",
236236
"ast-types": "0.16.1",
237237
"svgo": "^3",
238-
"@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
238+
"@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
239+
"@types/node@npm:*": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
240+
"@types/node@npm:^18.0.0": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
241+
"@types/node@npm:>= 8": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch"
239242
},
240243
"@parcel/transformer-css": {
241244
"cssModules": {

‎packages/@react-spectrum/calendar/stories/Calendar.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ const calendars = [
203203

204204
function Example(props) {
205205
let [locale, setLocale] = React.useState('');
206-
let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
206+
let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
207207
let {locale: defaultLocale} = useLocale();
208208

209209
let pref = preferences.find(p => p.locale === locale)!;

‎packages/@react-spectrum/datepicker/stories/DateField.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export const IsDateUnavailable: DateFieldStory = {
212212
...Default,
213213
args: {
214214
isDateUnavailable: (date) => {
215-
return date.compare(new CalendarDate(1980, 1, 1)) >= 0
215+
return date.compare(new CalendarDate(1980, 1, 1)) >= 0
216216
&& date.compare(new CalendarDate(1980, 1, 8)) <= 0;
217217
},
218218
errorMessage: 'Date unavailable.',
@@ -310,7 +310,7 @@ const calendars = [
310310

311311
function Example(props) {
312312
let [locale, setLocale] = React.useState('');
313-
let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
313+
let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
314314
let {locale: defaultLocale} = useLocale();
315315

316316
let pref = preferences.find(p => p.locale === locale);

‎packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ const calendars = [
332332

333333
function Example(props) {
334334
let [locale, setLocale] = React.useState('');
335-
let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
335+
let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
336336
let {locale: defaultLocale} = useLocale();
337337

338338
let pref = preferences.find(p => p.locale === locale);

‎packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ const calendars = [
235235

236236
function Example(props) {
237237
let [locale, setLocale] = React.useState('');
238-
let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
238+
let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
239239
let {locale: defaultLocale} = useLocale();
240240

241241
let pref = preferences.find(p => p.locale === locale);

‎packages/@react-spectrum/form/stories/Form.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -482,7 +482,7 @@ function FormWithControls(props: any = {}) {
482482
let [firstName, setFirstName] = useState('hello');
483483
let [isHunter, setIsHunter] = useState(true);
484484
let [favoritePet, setFavoritePet] = useState('cats');
485-
let [favoriteColor, setFavoriteColor] = useState('green' as Key);
485+
let [favoriteColor, setFavoriteColor] = useState<Key | null>('green');
486486
let [howIFeel, setHowIFeel] = useState('I feel good, o I feel so good!');
487487
let [birthday, setBirthday] = useState<CalendarDate | null>(new CalendarDate(1732, 2, 22));
488488
let [money, setMoney] = useState(50);

‎packages/@react-spectrum/s2/src/Breadcrumbs.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
DefaultCollectionRenderer,
2121
HeadingContext,
2222
Link,
23+
LinkRenderProps,
2324
Provider,
2425
Breadcrumbs as RACBreadcrumbs
2526
} from 'react-aria-components';
@@ -97,7 +98,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
9798

9899
const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
99100

100-
/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
101+
/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
101102
export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
102103
[props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
103104
let domRef = useDOMRef(ref);
@@ -200,7 +201,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
200201
);
201202
};
202203

203-
const breadcrumbStyles = style({
204+
const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurrent?: boolean}>({
204205
display: 'flex',
205206
alignItems: 'center',
206207
justifyContent: 'start',
@@ -245,7 +246,7 @@ const chevronStyles = style({
245246
}
246247
});
247248

248-
const linkStyles = style({
249+
const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
249250
...focusRing(),
250251
borderRadius: 'sm',
251252
font: 'control',
@@ -255,7 +256,8 @@ const linkStyles = style({
255256
isCurrent: 'neutral',
256257
forcedColors: {
257258
default: 'LinkText',
258-
isDisabled: 'GrayText'
259+
isDisabled: 'GrayText',
260+
isCurrent: 'GrayText'
259261
}
260262
},
261263
transition: 'default',
@@ -337,7 +339,7 @@ export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
337339
ping={ping}
338340
referrerPolicy={referrerPolicy}
339341
isDisabled={isDisabled || isCurrent}
340-
className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>
342+
className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed, isCurrent})}>
341343
{children}
342344
</Link>
343345
<ChevronIcon

‎packages/@react-spectrum/s2/src/CloseButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const hoverBackground = {
3939
isStaticColor: 'transparent-overlay-200'
4040
} as const;
4141

42-
const styles = style({
42+
const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({
4343
...focusRing(),
4444
...staticColor(),
4545
display: 'flex',

‎packages/@react-spectrum/s2/src/ComboBox.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ListBoxSection as AriaListBoxSection,
1717
PopoverProps as AriaPopoverProps,
1818
Button,
19+
ButtonRenderProps,
1920
ContextValue,
2021
InputContext,
2122
ListBox,
@@ -95,7 +96,7 @@ export interface ComboBoxProps<T extends object> extends
9596

9697
export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
9798

98-
const inputButton = style({
99+
const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
99100
display: 'flex',
100101
outlineStyle: 'none',
101102
textAlign: 'center',

‎packages/@react-spectrum/s2/src/Menu.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
SubmenuTriggerProps as AriaSubmenuTriggerProps,
2424
ContextValue,
2525
DEFAULT_SLOT,
26+
MenuItemRenderProps,
2627
Provider,
2728
Separator,
2829
SeparatorProps
@@ -146,7 +147,7 @@ export let sectionHeading = style({
146147
margin: 0
147148
});
148149

149-
export let menuitem = style({
150+
export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({
150151
...focusRing(),
151152
boxSizing: 'border-box',
152153
borderRadius: 'control',
@@ -293,7 +294,7 @@ let value = style({
293294
marginStart: 8
294295
});
295296

296-
let keyboard = style({
297+
let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
297298
gridArea: 'keyboard',
298299
marginStart: 8,
299300
font: 'ui',
@@ -305,7 +306,7 @@ let keyboard = style({
305306
isDisabled: 'GrayText'
306307
}
307308
},
308-
background: 'gray-25',
309+
backgroundColor: 'gray-25',
309310
unicodeBidi: 'plaintext'
310311
});
311312

‎packages/@react-spectrum/s2/src/NumberField.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
NumberField as AriaNumberField,
1717
NumberFieldProps as AriaNumberFieldProps,
1818
ButtonContext,
19+
ButtonRenderProps,
1920
ContextValue,
2021
InputContext,
2122
Text,
@@ -56,7 +57,7 @@ export interface NumberFieldProps extends
5657

5758
export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
5859

59-
const inputButton = style({
60+
const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
6061
display: 'flex',
6162
outlineStyle: 'none',
6263
textAlign: 'center',
@@ -71,7 +72,7 @@ const inputButton = style({
7172
}
7273
},
7374
type: {
74-
decrementStep: 'none'
75+
decrement: 'none'
7576
}
7677
},
7778
borderBottomRadius: {
@@ -84,7 +85,7 @@ const inputButton = style({
8485
}
8586
},
8687
type: {
87-
incrementStep: 'none'
88+
increment: 'none'
8889
}
8990
},
9091
alignItems: 'center',

‎packages/@react-spectrum/s2/src/SegmentedControl.tsx

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

1313
import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
1414
import {centerBaseline} from './CenterBaseline';
15-
import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';
15+
import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
1616
import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
1717
import {focusRing, space, style} from '../style' with {type: 'macro'};
1818
import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -62,7 +62,7 @@ const segmentedControl = style({
6262
width: 'fit'
6363
}, getAllowedOverrides());
6464

65-
const controlItem = style({
65+
const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
6666
...focusRing(),
6767
position: 'relative',
6868
display: 'flex',
@@ -107,7 +107,7 @@ const controlItem = style({
107107
}
108108
}, getAllowedOverrides());
109109

110-
const slider = style({
110+
const slider = style<{isDisabled: boolean}>({
111111
backgroundColor: {
112112
default: 'gray-25',
113113
forcedColors: {

‎packages/@react-spectrum/s2/src/Slider.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
ContextValue,
1717
SliderOutput,
1818
SliderThumb,
19+
SliderThumbRenderProps,
1920
SliderTrack
2021
} from 'react-aria-components';
2122
import {clamp} from '@react-aria/utils';
@@ -199,7 +200,7 @@ export let thumbHitArea = style({
199200
}
200201
});
201202

202-
export let thumb = style({
203+
export let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL', thumbStyle: 'default' | 'precise'}>({
203204
...focusRing(),
204205
display: 'inline-block',
205206
boxSizing: 'border-box',
@@ -271,7 +272,7 @@ const trackStyling = {
271272
}
272273
} as const;
273274

274-
export let upperTrack = style({
275+
export let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({
275276
...trackStyling,
276277
position: 'absolute',
277278
backgroundColor: {
@@ -292,7 +293,7 @@ export let upperTrack = style({
292293
}
293294
});
294295

295-
export let filledTrack = style({
296+
export let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, trackStyle: 'thin' | 'thick'}>({
296297
...trackStyling,
297298
position: 'absolute',
298299
backgroundColor: {

‎packages/@react-spectrum/s2/src/TableView.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -642,14 +642,13 @@ const resizerHandleContainer = style({
642642
}
643643
});
644644

645-
const resizerHandle = style({
645+
const resizerHandle = style<{isFocusVisible: boolean, isResizing: boolean}>({
646646
backgroundColor: {
647647
default: 'gray-300',
648648
isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version
649649
isResizing: lightDark('informative-900', 'informative-700'),
650650
forcedColors: {
651651
default: 'Background',
652-
isHovered: 'ButtonBorder',
653652
isFocusVisible: 'Highlight',
654653
isResizing: 'Highlight'
655654
}
@@ -787,7 +786,7 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
787786
<ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
788787
{({isFocusVisible, isResizing}) => (
789788
<>
790-
<ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
789+
<ResizerIndicator isFocusVisible={isFocusVisible} isResizing={isResizing} />
791790
{(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
792791
</>
793792
)}
@@ -797,9 +796,9 @@ function ResizableColumnContents(props: ResizableColumnContentProps) {
797796
);
798797
}
799798

800-
function ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {
799+
function ResizerIndicator({isFocusVisible, isResizing}) {
801800
return (
802-
<div className={resizerHandle({isFocusVisible, isInResizeMode, isResizing})} />
801+
<div className={resizerHandle({isFocusVisible, isResizing})} />
803802
);
804803
}
805804

‎packages/@react-spectrum/s2/src/Tabs.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
Tab as RACTab,
2323
TabList as RACTabList,
2424
Tabs as RACTabs,
25-
TabListStateContext
25+
TabListStateContext,
26+
TabRenderProps
2627
} from 'react-aria-components';
2728
import {centerBaseline} from './CenterBaseline';
2829
import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
@@ -232,7 +233,7 @@ interface TabLineProps {
232233
density?: 'compact' | 'regular'
233234
}
234235

235-
const selectedIndicator = style({
236+
const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
236237
position: 'absolute',
237238
backgroundColor: {
238239
default: 'neutral',
@@ -319,7 +320,7 @@ function TabLine(props: TabLineProps) {
319320
);
320321
}
321322

322-
const tab = style({
323+
const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({
323324
...focusRing(),
324325
display: 'flex',
325326
color: {
@@ -519,7 +520,12 @@ let HiddenTabs = function (props: {
519520

520521
let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
521522
let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
522-
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
523+
let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
524+
let onSelectionChange = useCallback((key: Key | null) => {
525+
if (key != null) {
526+
_onSelectionChange?.(key);
527+
}
528+
}, [_onSelectionChange]);
523529
let state = useContext(TabListStateContext);
524530
let allKeysDisabled = useMemo(() => {
525531
return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());

‎packages/@react-spectrum/s2/src/TabsPicker.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,7 @@ let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
281281
export {_Picker as Picker};
282282

283283

284-
const selectedIndicator = style({
284+
const selectedIndicator = style<{isDisabled?: boolean}>({
285285
backgroundColor: {
286286
default: 'neutral',
287287
isDisabled: 'disabled',
@@ -297,7 +297,7 @@ const selectedIndicator = style({
297297
transitionDuration: 130,
298298
transitionTimingFunction: 'in-out'
299299
});
300-
function TabLine(props) {
300+
function TabLine(props: {isDisabled?: boolean}) {
301301
return <div className={selectedIndicator(props)} />;
302302
}
303303

0 commit comments

Comments
 (0)