feat(TextInput): swapped onChange params

packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

@@ -310,7 +310,7 @@ export const CalendarMonth = ({
               aria-label={yearInputAriaLabel}
               type="number"
               value={yearFormatted}
-              onChange={(year: string, ev: React.FormEvent<HTMLInputElement>) => {
+              onChange={(ev: React.FormEvent<HTMLInputElement>, year: string) => {
                 const newDate = new Date(focusedDate);
                 newDate.setFullYear(+year);
                 setFocusedDate(newDate);

packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -136,7 +136,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
     }));
   };
 
-  updateText = (text: string | number, event: React.FormEvent) => {
+  updateText = (event: React.FormEvent, text: string | number) => {
     this.setState({ text });
     this.props.onChange(event, text);
   };
@@ -265,7 +265,7 @@ export class ClipboardCopy extends React.Component<ClipboardCopyProps, Clipboard
                     isReadOnly={isReadOnly}
                     isCode={isCode}
                     id={`content-${id}`}
-                    onChange={(event, text) => this.updateText(text, event)}
+                    onChange={this.updateText}
                   >
                     {this.state.text}
                   </ClipboardCopyExpanded>

packages/react-core/src/components/DatePicker/DatePicker.tsx

@@ -140,7 +140,7 @@ const DatePickerBase = (
     setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
-  const onTextInput = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+  const onTextInput = (event: React.FormEvent<HTMLInputElement>, value: string) => {
     setValue(value);
     setErrorText('');
     const newValueDate = dateParse(value);

packages/react-core/src/components/Form/examples/FormBasic.tsx

@@ -19,15 +19,15 @@ export const FormBasic: React.FunctionComponent = () => {
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
 
-  const handleNameChange = (name: string) => {
+  const handleNameChange = (_event, name: string) => {
     setName(name);
   };
 
-  const handleEmailChange = (email: string) => {
+  const handleEmailChange = (_event, email: string) => {
     setEmail(email);
   };
 
-  const handlePhoneChange = (phone: string) => {
+  const handlePhoneChange = (_event, phone: string) => {
     setPhone(phone);
   };
 

packages/react-core/src/components/Form/examples/FormFieldGroups.tsx

@@ -38,7 +38,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
 
   const [inputValues, setInputValues] = React.useState(initialValues);
 
-  const handleChange = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+  const handleChange = (event, value: string) => {
     const { name } = event.currentTarget;
     setInputValues({ ...inputValues, [name]: value });
   };

packages/react-core/src/components/Form/examples/FormGrid.tsx

@@ -15,15 +15,15 @@ export const FormGrid: React.FunctionComponent = () => {
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
 
-  const handleNameChange = (name: string) => {
+  const handleNameChange = (_event, name: string) => {
     setName(name);
   };
 
-  const handleEmailChange = (email: string) => {
+  const handleEmailChange = (_event, email: string) => {
     setEmail(email);
   };
 
-  const handlePhoneChange = (phone: string) => {
+  const handlePhoneChange = (_event, phone: string) => {
     setPhone(phone);
   };
 

packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx

@@ -13,7 +13,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
 
-  const handleNameChange = (name: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleNameChange = (_event, name: string) => {
     setName(name);
   };
 

packages/react-core/src/components/Form/examples/FormHorizontal.tsx

@@ -21,11 +21,11 @@ export const FormHorizontal: React.FunctionComponent = () => {
   const [experience, setExperience] = React.useState('');
   const [option, setOption] = React.useState('please choose');
 
-  const handleNameChange = (name: string) => {
+  const handleNameChange = (_event, name: string) => {
     setName(name);
   };
 
-  const handleEmailChange = (email: string) => {
+  const handleEmailChange = (_event, email: string) => {
     setEmail(email);
   };
 

packages/react-core/src/components/Form/examples/FormInvalid.tsx

@@ -8,7 +8,7 @@ export const FormInvalid: React.FunctionComponent = () => {
   const [age, setAge] = React.useState('Five');
   const [validated, setValidated] = React.useState<validate>('error');
 
-  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleAgeChange = (_event, age: string) => {
     setAge(age);
     if (age === '') {
       setValidated('default');

packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx

@@ -17,7 +17,7 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
   const [age, setAge] = React.useState('Five');
   const [validated, setValidated] = React.useState<validate>('error');
 
-  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleAgeChange = (_event, age: string) => {
     setAge(age);
     if (age === '') {
       setValidated('default');

packages/react-core/src/components/Form/examples/FormLimitWidth.tsx

@@ -19,15 +19,15 @@ export const FormLimitWidth: React.FunctionComponent = () => {
   const [email, setEmail] = React.useState('');
   const [phone, setPhone] = React.useState('');
 
-  const handleNameChange = (name: string) => {
+  const handleNameChange = (_event, name: string) => {
     setName(name);
   };
 
-  const handleEmailChange = (email: string) => {
+  const handleEmailChange = (_event, email: string) => {
     setEmail(email);
   };
 
-  const handlePhoneChange = (phone: string) => {
+  const handlePhoneChange = (_event, phone: string) => {
     setPhone(phone);
   };
 

packages/react-core/src/components/Form/examples/FormSections.tsx

@@ -5,11 +5,11 @@ export const FormSections: React.FunctionComponent = () => {
   const [input1, setInput1] = React.useState('');
   const [input2, setInput2] = React.useState('');
 
-  const handleInputChange1 = (input1: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange1 = (_event, input1: string) => {
     setInput1(input1);
   };
 
-  const handleInputChange2 = (input2: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleInputChange2 = (_event, input2: string) => {
     setInput2(input2);
   };
 

packages/react-core/src/components/Form/examples/FormState.tsx

@@ -31,7 +31,7 @@ export const FormState = () => {
           <FormGroup label="Input value" fieldId="input-id" isRequired>
             <TextInput
               id="input-id"
-              onChange={(value) => {
+              onChange={(_event, value) => {
                 setValue('input-id', value);
                 setError('input-id', undefined);
               }}

packages/react-core/src/components/Form/examples/FormValidated.tsx

@@ -9,7 +9,7 @@ export const FormValidated: React.FunctionComponent = () => {
   const [validated, setValidated] = React.useState<validate>('default');
   const [helperText, setHelperText] = React.useState('Enter your age to continue');
 
-  const handleAgeChange = (age: string, _event: React.FormEvent<HTMLInputElement>) => {
+  const handleAgeChange = (_event, age: string) => {
     setAge(age);
     setValidated('default');
     setHelperText('Validating...');

packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -276,7 +276,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
               id="create-label-form-label-text"
               name="create-label-form-label-text"
               value={labelText}
-              onChange={setLabelText}
+              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setLabelText(value)}
               ref={labelInputRef}
             />
           </FormGroup>

packages/react-core/src/components/LoginPage/LoginForm.tsx

@@ -91,7 +91,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       name="pf-login-password-id"
       validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
       value={passwordValue}
-      onChange={onChangePassword}
+      onChange={(event, value) => onChangePassword(value, event)}
     />
   );
 
@@ -115,7 +115,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           type="text"
           name="pf-login-username-id"
           value={usernameValue}
-          onChange={onChangeUsername}
+          onChange={(event, value) => onChangeUsername(value, event)}
         />
       </FormGroup>
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">

packages/react-core/src/components/Modal/examples/ModalWithForm.tsx

@@ -12,14 +12,14 @@ export const ModalWithForm: React.FunctionComponent = () => {
     setModalOpen(!isModalOpen);
   };
 
-  const handleNameInputChange = (value: string) => {
+  const handleNameInputChange = (_event, value: string) => {
     setNameValue(value);
   };
 
-  const handleEmailInputChange = (value: string) => {
+  const handleEmailInputChange = (_event, value: string) => {
     setEmailValue(value);
   };
-  const handleAddressInputChange = (value: string) => {
+  const handleAddressInputChange = (_event, value: string) => {
     setAddressValue(value);
   };
 

packages/react-core/src/components/NumberInput/NumberInput.tsx

@@ -134,7 +134,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           name={inputName}
           aria-label={inputAriaLabel}
           {...(isDisabled && { isDisabled })}
-          {...(onChange && { onChange: (value, event) => onChange(event) })}
+          {...(onChange && { onChange: (event, _value) => onChange(event) })}
           onBlur={handleBlur}
           {...(!onChange && { isReadOnly: true })}
           onKeyDown={keyDownHandler}

packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -172,7 +172,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
               type="text"
               id={`${queryAttr}_${index}`}
               value={getValue(queryAttr)}
-              onChange={(value, evt) => handleValueChange(queryAttr, value, evt)}
+              onChange={(evt, value) => handleValueChange(queryAttr, value, evt)}
             />
           </FormGroup>
         );
@@ -183,7 +183,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
               type="text"
               id={`${queryAttr}_${index}`}
               value={getValue(queryAttr)}
-              onChange={(value, evt) => handleValueChange(queryAttr, value, evt)}
+              onChange={(evt, value) => handleValueChange(queryAttr, value, evt)}
             />
           </FormGroup>
         );
@@ -197,7 +197,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
               type="text"
               id={randomId}
               value={getValue('haswords')}
-              onChange={(value, evt) => handleValueChange('haswords', value, evt)}
+              onChange={(evt, value) => handleValueChange('haswords', value, evt)}
             />
           </FormGroup>
         )}

packages/react-core/src/components/Slider/Slider.tsx

@@ -131,7 +131,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const widthChars = React.useMemo(() => localInputValue.toString().length, [localInputValue]);
   const inputStyle = { '--pf-c-slider__value--c-form-control--width-chars': widthChars } as React.CSSProperties;
 
-  const onChangeHandler = (value: string) => {
+  const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setLocalInputValue(Number(value));
   };
 

packages/react-core/src/components/TextInput/TextInput.tsx

@@ -25,6 +25,7 @@ export enum TextInputReadOnlyVariant {
   plain = 'plain'
 }
 
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
@@ -43,7 +44,7 @@ export interface TextInputProps
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
   /** A callback for when the text input value changes. */
-  onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Type that the text input accepts. */
   type?:
     | 'text'
@@ -118,7 +119,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
-      this.props.onChange(event.currentTarget.value, event);
+      this.props.onChange(event, event.currentTarget.value);
     }
   };
 

packages/react-core/src/components/TextInput/__tests__/TextInput.test.tsx

@@ -18,7 +18,7 @@ describe('TextInput', () => {
     render(<TextInputBase {...props} value="" aria-label="test input" />);
 
     await user.type(screen.getByLabelText('test input'), 'a');
-    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+    expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), 'a');
   });
 
   test('simple text input', () => {

packages/react-core/src/components/TextInput/examples/TextInputBasic.tsx

@@ -3,5 +3,5 @@ import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  return <TextInput value={value} type="text" onChange={value => setValue(value)} aria-label="text input example" />;
+  return <TextInput value={value} type="text" onChange={(_event, value) => setValue(value)} aria-label="text input example" />;
 };

packages/react-core/src/components/TextInput/examples/TextInputIcon.tsx

@@ -12,7 +12,7 @@ export const TextInputIcon: React.FunctionComponent = () => {
         value={calendar}
         type="text"
         iconVariant="calendar"
-        onChange={value => setCalendar(value)}
+        onChange={(_event, value) => setCalendar(value)}
         aria-label="text input example"
       />
       <br />
@@ -21,7 +21,7 @@ export const TextInputIcon: React.FunctionComponent = () => {
         value={clock}
         type="text"
         iconVariant="clock"
-        onChange={value => setClock(value)}
+        onChange={(_event, value) => setClock(value)}
         aria-label="text input example"
       />
       <br />
@@ -31,7 +31,7 @@ export const TextInputIcon: React.FunctionComponent = () => {
         type="text"
         customIconDimensions="24px 24px"
         customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
-        onChange={value => setCustom(value)}
+        onChange={(_event, value) => setCustom(value)}
         aria-label="text input example"
       />
     </>

packages/react-core/src/components/TextInput/examples/TextInputIconSprite.tsx

@@ -15,7 +15,7 @@ export const TextInputIconSprite: React.FunctionComponent = () => {
         validated={'success'}
         isIconSprite
         type="text"
-        onChange={value => setSuccess(value)}
+        onChange={(_event, value) => setSuccess(value)}
         aria-label="success icon sprite text input example"
       />
       <br />
@@ -25,7 +25,7 @@ export const TextInputIconSprite: React.FunctionComponent = () => {
         validated={'warning'}
         isIconSprite
         type="text"
-        onChange={value => setWarning(value)}
+        onChange={(_event, value) => setWarning(value)}
         aria-label="warning icon sprite text input example"
       />
       <br />
@@ -35,7 +35,7 @@ export const TextInputIconSprite: React.FunctionComponent = () => {
         validated={'error'}
         isIconSprite
         type="text"
-        onChange={value => setError(value)}
+        onChange={(_event, value) => setError(value)}
         aria-label="error icon sprite text input example"
       />
       <br />
@@ -45,7 +45,7 @@ export const TextInputIconSprite: React.FunctionComponent = () => {
         isIconSprite
         type="text"
         iconVariant="calendar"
-        onChange={value => setCalendar(value)}
+        onChange={(_event, value) => setCalendar(value)}
         aria-label="calendar icon sprite text input example"
       />
       <br />
@@ -55,7 +55,7 @@ export const TextInputIconSprite: React.FunctionComponent = () => {
         isIconSprite
         type="text"
         iconVariant="clock"
-        onChange={value => setClock(value)}
+        onChange={(_event, value) => setClock(value)}
         aria-label="clock icon sprite text input example"
       />
     </>

packages/react-core/src/components/TextInput/examples/TextInputInvalid.tsx

@@ -6,7 +6,7 @@ export const TextInputInvalid: React.FunctionComponent = () => {
   return (
     <TextInput
       value={value}
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       isRequired
       validated={ValidatedOptions.error}
       type="text"

packages/react-core/src/components/TextInput/examples/TextInputLeftTruncated.tsx

@@ -10,7 +10,7 @@ export const LeftTruncatedTextInput: React.FunctionComponent = () => {
       isLeftTruncated
       value={value}
       type="text"
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       aria-label="left-truncated text input example"
     />
   );