Skip to content

Commit 38727b6

Browse files
kmcfaulkmcfaul
authored
feat(templates): allow react 19 (#12046)
1 parent 299d9d2 commit 38727b6

File tree

14 files changed

+94
-56
lines changed

14 files changed

+94
-56
lines changed

‎packages/react-templates/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"tslib": "^2.8.1"
4141
},
4242
"peerDependencies": {
43-
"react": "^17 || ^18",
44-
"react-dom": "^17 || ^18"
43+
"react": "^17 || ^18 || ^19",
44+
"react-dom": "^17 || ^18 || ^19"
4545
}
4646
}

‎packages/react-templates/src/components/Dropdown/SimpleDropdown.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { forwardRef, useState } from 'react';
1+
import { forwardRef, useState, FunctionComponent, Ref, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
22
import {
33
Dropdown,
44
DropdownItem,
@@ -54,7 +54,7 @@ export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle' | 'onT
5454
toggleProps?: MenuToggleProps;
5555
}
5656

57-
const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
57+
const SimpleDropdownBase: FunctionComponent<SimpleDropdownProps> = ({
5858
innerRef,
5959
initialItems,
6060
onSelect: onSelectProp,
@@ -71,7 +71,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
7171
}: SimpleDropdownProps) => {
7272
const [isOpen, setIsOpen] = useState(false);
7373

74-
const onSelect = (event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
74+
const onSelect = (event: ReactMouseEvent<Element, MouseEvent>, value: string | number) => {
7575
onSelectProp && onSelectProp(event, value);
7676
onToggleProp && onToggleProp(false);
7777
setIsOpen(false);
@@ -82,7 +82,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
8282
setIsOpen(!isOpen);
8383
};
8484

85-
const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
85+
const dropdownToggle = (toggleRef: Ref<MenuToggleElement>) => (
8686
<MenuToggle
8787
ref={toggleRef}
8888
onClick={onToggle}
@@ -94,7 +94,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
9494
style={
9595
{
9696
width: toggleWidth
97-
} as React.CSSProperties
97+
} as CSSProperties
9898
}
9999
{...toggleProps}
100100
>
@@ -132,7 +132,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
132132
);
133133
};
134134

135-
export const SimpleDropdown = forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
135+
export const SimpleDropdown = forwardRef((props: SimpleDropdownProps, ref: Ref<any>) => (
136136
<SimpleDropdownBase {...props} innerRef={ref} />
137137
));
138138

‎packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Note: Templates live in their own package at [@patternfly/react-templates](https
1111

1212
For custom use cases, please see the dropdown component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
1313

14-
import { Fragment, useState } from 'react';
14+
import { Fragment, useState, FunctionComponent } from 'react';
1515
import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
1616
import { SimpleDropdown } from '@patternfly/react-templates';
1717
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

‎packages/react-templates/src/components/Dropdown/examples/SimpleDropdownExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Fragment, useState } from 'react';
1+
import { Fragment, useState, FunctionComponent } from 'react';
22
import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
33
import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
44
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
55

6-
export const SimpleDropdownExample: React.FunctionComponent = () => {
6+
export const SimpleDropdownExample: FunctionComponent = () => {
77
const [isDisabled, setIsDisabled] = useState(false);
88

99
const items: SimpleDropdownItem[] = [

‎packages/react-templates/src/components/Select/CheckboxSelect.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { forwardRef, useEffect, useState } from 'react';
1+
import {
2+
forwardRef,
3+
useEffect,
4+
useState,
5+
FunctionComponent,
6+
Ref,
7+
MouseEvent as ReactMouseEvent,
8+
CSSProperties
9+
} from 'react';
210
import { Badge } from '@patternfly/react-core/dist/esm/components/Badge';
311
import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
412
import {
@@ -35,7 +43,7 @@ export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle' | 'onTog
3543
toggleProps?: MenuToggleProps;
3644
}
3745

38-
const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
46+
const CheckboxSelectBase: FunctionComponent<CheckboxSelectProps> = ({
3947
innerRef,
4048
initialOptions,
4149
isDisabled,
@@ -69,7 +77,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
6977
setIsOpen(!isOpen);
7078
};
7179

72-
const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
80+
const onSelect = (event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
7381
const valueString = `${value}`;
7482
if (selected.includes(valueString)) {
7583
setSelected((prevSelected) => prevSelected.filter((item) => item !== valueString));
@@ -86,7 +94,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
8694
</>
8795
);
8896

89-
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
97+
const toggle = (toggleRef: Ref<MenuToggleElement>) => (
9098
<MenuToggle
9199
ref={toggleRef}
92100
onClick={onToggleClick}
@@ -95,7 +103,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
95103
style={
96104
{
97105
width: toggleWidth
98-
} as React.CSSProperties
106+
} as CSSProperties
99107
}
100108
{...toggleProps}
101109
>
@@ -122,6 +130,6 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
122130
);
123131
};
124132

125-
export const CheckboxSelect = forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
133+
export const CheckboxSelect = forwardRef((props: CheckboxSelectProps, ref: Ref<any>) => (
126134
<CheckboxSelectBase {...props} innerRef={ref} />
127135
));

‎packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
import { forwardRef, useEffect, useRef, useState } from 'react';
1+
import {
2+
forwardRef,
3+
useEffect,
4+
useState,
5+
useRef,
6+
FunctionComponent,
7+
Ref,
8+
MouseEvent as ReactMouseEvent,
9+
KeyboardEvent as ReactKeyboardEvent,
10+
FormEvent as ReactFormEvent,
11+
CSSProperties
12+
} from 'react';
213
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
314
import { Label, LabelGroup, LabelProps } from '@patternfly/react-core/dist/esm/components/Label';
415
import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
@@ -57,7 +68,7 @@ export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' |
5768
initialInputValue?: string;
5869
}
5970

60-
export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
71+
export const MultiTypeaheadSelectBase: FunctionComponent<MultiTypeaheadSelectProps> = ({
6172
innerRef,
6273
initialOptions,
6374
onSelectionChange,
@@ -145,7 +156,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
145156
};
146157

147158
const selectOption = (
148-
_event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
159+
_event: ReactMouseEvent<Element, MouseEvent> | ReactKeyboardEvent<HTMLInputElement> | undefined,
149160
option: string | number
150161
) => {
151162
const selections = selected.includes(option) ? selected.filter((o) => option !== o) : [...selected, option];
@@ -155,21 +166,21 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
155166
};
156167

157168
const clearOption = (
158-
_event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
169+
_event: ReactMouseEvent<Element, MouseEvent> | ReactKeyboardEvent<HTMLInputElement> | undefined,
159170
option: string | number
160171
) => {
161172
const selections = selected.filter((o) => option !== o);
162173
onSelectionChange && onSelectionChange(_event, selections);
163174
setSelected(selections);
164175
};
165176

166-
const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
177+
const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
167178
if (value && value !== NO_RESULTS) {
168179
selectOption(_event, value);
169180
}
170181
};
171182

172-
const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
183+
const onTextInputChange = (_event: ReactFormEvent<HTMLInputElement>, value: string) => {
173184
setInputValue(value);
174185
onInputChange && onInputChange(value);
175186

@@ -228,7 +239,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
228239
setActiveAndFocusedItem(indexToFocus);
229240
};
230241

231-
const defaultOnInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
242+
const defaultOnInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
232243
const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
233244

234245
switch (event.key) {
@@ -252,7 +263,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
252263
}
253264
};
254265

255-
const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
266+
const onInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
256267
if (onInputKeyDownProp) {
257268
onInputKeyDownProp(event);
258269
} else {
@@ -266,15 +277,15 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
266277
textInputRef?.current?.focus();
267278
};
268279

269-
const onClearButtonClick = (ev: React.MouseEvent) => {
280+
const onClearButtonClick = (ev: ReactMouseEvent) => {
270281
setSelected([]);
271282
onInputChange && onInputChange('');
272283
resetActiveAndFocusedItem();
273284
textInputRef?.current?.focus();
274285
onSelectionChange && onSelectionChange(ev, []);
275286
};
276287

277-
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
288+
const toggle = (toggleRef: Ref<MenuToggleElement>) => (
278289
<MenuToggle
279290
ref={toggleRef}
280291
variant="typeahead"
@@ -286,7 +297,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
286297
style={
287298
{
288299
width: toggleWidth
289-
} as React.CSSProperties
300+
} as CSSProperties
290301
}
291302
{...toggleProps}
292303
>
@@ -359,7 +370,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
359370

360371
MultiTypeaheadSelectBase.displayName = 'MultiTypeaheadSelectBase';
361372

362-
export const MultiTypeaheadSelect = forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
373+
export const MultiTypeaheadSelect = forwardRef((props: MultiTypeaheadSelectProps, ref: Ref<any>) => (
363374
<MultiTypeaheadSelectBase {...props} innerRef={ref} />
364375
));
365376

‎packages/react-templates/src/components/Select/SimpleSelect.tsx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
import { forwardRef, useEffect, useState } from 'react';
1+
import {
2+
forwardRef,
3+
useEffect,
4+
useState,
5+
FunctionComponent,
6+
Ref,
7+
MouseEvent as ReactMouseEvent,
8+
CSSProperties
9+
} from 'react';
210
import {
311
Select,
412
SelectList,
@@ -36,7 +44,7 @@ export interface SimpleSelectProps extends Omit<SelectProps, 'toggle' | 'onToggl
3644
toggleProps?: MenuToggleProps;
3745
}
3846

39-
const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
47+
const SimpleSelectBase: FunctionComponent<SimpleSelectProps> = ({
4048
innerRef,
4149
initialOptions,
4250
isDisabled,
@@ -71,14 +79,14 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
7179
setIsOpen(!isOpen);
7280
};
7381

74-
const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
82+
const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
7583
onSelect && onSelect(_event, value);
7684
setSelected(initialOptions.find((o) => o.value === value));
7785
onToggle && onToggle(true);
7886
setIsOpen(false);
7987
};
8088

81-
const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
89+
const toggle = (toggleRef: Ref<MenuToggleElement>) => (
8290
<MenuToggle
8391
ref={toggleRef}
8492
onClick={onToggleClick}
@@ -87,7 +95,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
8795
style={
8896
{
8997
width: toggleWidth
90-
} as React.CSSProperties
98+
} as CSSProperties
9199
}
92100
{...toggleProps}
93101
>
@@ -114,7 +122,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
114122
);
115123
};
116124

117-
export const SimpleSelect = forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
125+
export const SimpleSelect = forwardRef((props: SimpleSelectProps, ref: Ref<any>) => (
118126
<SimpleSelectBase {...props} innerRef={ref} />
119127
));
120128

0 commit comments

Comments
 (0)