@patternfly/react-core 5.0.0-alpha.93 → 5.0.0-alpha.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.93",
+  "version": "5.0.0-alpha.94",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "b0075afbde3a8f5bb474179578d432291dc3109e"
+  "gitHead": "4f593bd8942e59802d2d8e04b776a112c51d2304"
 }

package/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);

package/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>

package/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);
@@ -222,7 +222,7 @@ const DatePickerBase = (
         }
         showClose={false}
         isVisible={popoverOpen}
-        shouldClose={(_1, event) => {
+        shouldClose={(event, _fn) => {
           event = event as KeyboardEvent;
           if (event.key === KeyTypes.Escape && selectOpen) {
             event.stopPropagation();

package/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);
   };
 

package/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 });
   };

package/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);
   };
 

package/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);
   };
 

package/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);
   };
 

package/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');

package/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');

package/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);
   };
 

package/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);
   };
 

package/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);
               }}

package/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...');

package/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>

package/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">

package/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);
   };
 

package/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}

package/src/components/Popover/Popover.tsx

@@ -158,7 +158,7 @@ export interface PopoverProps {
   /**
    * Lifecycle function invoked when the popover begins to transition out.
    */
-  onHide?: () => void;
+  onHide?: (event: MouseEvent | KeyboardEvent) => void;
   /**
    * Lifecycle function invoked when the popover has been mounted to the DOM.
    */
@@ -166,7 +166,7 @@ export interface PopoverProps {
   /**
    * Lifecycle function invoked when the popover begins to transition in.
    */
-  onShow?: () => void;
+  onShow?: (event: MouseEvent | KeyboardEvent) => void;
   /**
    * Lifecycle function invoked when the popover has fully transitioned in.
    */
@@ -195,12 +195,12 @@ export interface PopoverProps {
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * popover close button is clicked, the enter key was used on it, or the escape key is used.
    */
-  shouldClose?: (hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
+  shouldClose?: (event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void;
   /**
    * Callback function that is only invoked when isVisible is also controlled. Called when the
    * enter key is used on the focused trigger.
    */
-  shouldOpen?: (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void;
+  shouldOpen?: (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void;
   /** Flag indicating whether the close button should be shown. */
   showClose?: boolean;
   /** Whether to trap focus in the popover. */
@@ -292,8 +292,9 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       }
     }
   }, [isVisible, triggerManually]);
-  const show = (withFocusTrap?: boolean) => {
-    onShow();
+  const show = (event?: MouseEvent | KeyboardEvent, withFocusTrap?: boolean) => {
+    event && onShow(event);
+
     if (transitionTimerRef.current) {
       clearTimeout(transitionTimerRef.current);
     }
@@ -307,8 +308,8 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       onShown();
     }, 0);
   };
-  const hide = () => {
-    onHide();
+  const hide = (event?: MouseEvent | KeyboardEvent) => {
+    event && onHide(event);
     if (showTimerRef.current) {
       clearTimeout(showTimerRef.current);
     }
@@ -340,9 +341,9 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (event.key === KeyTypes.Escape && visible) {
       if (triggerManually) {
-        shouldClose(hide, event);
+        shouldClose(event, hide);
       } else {
-        hide();
+        hide(event);
       }
     }
   };
@@ -355,24 +356,24 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         return;
       }
       if (triggerManually) {
-        shouldClose(hide, event);
+        shouldClose(event, hide);
       } else {
-        hide();
+        hide(event);
       }
     }
   };
   const onTriggerClick = (event: MouseEvent) => {
     if (triggerManually) {
       if (visible) {
-        shouldClose(hide, event);
+        shouldClose(event, hide);
       } else {
-        shouldOpen(show, event);
+        shouldOpen(event, show);
       }
     } else {
       if (visible) {
-        hide();
+        hide(event);
       } else {
-        show(true);
+        show(event, true);
       }
     }
   };
@@ -381,12 +382,12 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
       setFocusTrapActive(false);
     }
   };
-  const closePopover = (event: any) => {
+  const closePopover = (event: MouseEvent) => {
     event.stopPropagation();
     if (triggerManually) {
-      shouldClose(hide, event);
+      shouldClose(event, hide);
     } else {
-      hide();
+      hide(event);
     }
   };
   const content = (

package/src/components/Popover/examples/PopoverAdvanced.tsx

@@ -14,11 +14,11 @@ export const PopoverAdvanced: React.FunctionComponent = () => {
     setShow(checked);
   };
 
-  const shouldClose = () => {
+  const shouldClose = (_event, _fn) => {
     setShow(false);
   };
 
-  const shouldOpen = () => {
+  const shouldOpen = (_event, _fn) => {
     setShow(true);
   };
 

package/src/components/Popover/examples/PopoverCloseControlled.tsx

@@ -9,8 +9,8 @@ export const PopoverCloseControlled: React.FunctionComponent = () => {
       <Popover
         aria-label="Popover with button in the body that can close it"
         isVisible={isVisible}
-        shouldOpen={() => setIsVisible(true)}
-        shouldClose={() => setIsVisible(false)}
+        shouldOpen={(_event, _fn) => setIsVisible(true)}
+        shouldClose={(_event, _fn) => setIsVisible(false)}
         headerContent={<div>Popover header</div>}
         bodyContent={
           <div>

package/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>
         )}

package/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-v5-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));
   };
 

package/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);
     }
   };
 

package/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', () => {

package/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" />;
 };

package/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"
       />
     </>

package/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"
       />
     </>

package/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"

package/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"
     />
   );

package/src/components/TextInput/examples/TextInputSelectUsingRef.tsx

@@ -9,7 +9,7 @@ export const TextInputSelectUsingRef: React.FunctionComponent = () => {
       ref={ref}
       value={value}
       onFocus={() => ref?.current?.select()}
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       aria-label="select-all"
     />
   );

package/src/components/TimePicker/TimePicker.tsx

@@ -406,7 +406,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
-      this.onInputChange(time, e);
+      this.onInputChange(e, time);
     }
 
     this.inputRef.current.focus();
@@ -424,7 +424,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     e.stopPropagation();
   };
 
-  onInputChange = (newTime: string, event: React.FormEvent<HTMLInputElement>) => {
+  onInputChange = (event: React.FormEvent<HTMLInputElement>, newTime: string) => {
     const { onChange } = this.props;
     const { timeRegex } = this.state;
     if (onChange) {

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -149,21 +149,21 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <TextInput
             value={entryDelayInput}
             type="number"
-            onChange={val => setEntryDelayInput(Number(val))}
+            onChange={(_event, val) => setEntryDelayInput(Number(val))}
             aria-label="entry delay"
           />
           Exit delay (ms){' '}
           <TextInput
             value={exitDelayInput}
             type="number"
-            onChange={val => setExitDelayInput(Number(val))}
+            onChange={(_event, val) => setExitDelayInput(Number(val))}
             aria-label="exit delay"
           />
           Animation duration (ms){' '}
           <TextInput
             value={animationDuration}
             type="number"
-            onChange={val => setAnimationDuration(Number(val))}
+            onChange={(_event, val) => setAnimationDuration(Number(val))}
             aria-label="animation duration"
           />
         </div>