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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.92",
+  "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",
@@ -62,7 +62,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^3.21.3",
+    "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.7.4"
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "887e5bc7e32dfb539c2006177eafcbafe12bb3d2"
+  "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/FileUpload/FileUploadField.tsx

@@ -169,7 +169,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
             name={id}
             aria-label={ariaLabel}
             value={value as string}
-            onChange={(value, event) => onTextAreaChange(event, value)}
+            onChange={onTextAreaChange}
             onClick={onTextAreaClick}
             onBlur={onTextAreaBlur}
             placeholder={textAreaPlaceholder}

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,15 +21,15 @@ 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);
   };
 
-  const handleExperienceChange = (experience: string) => {
+  const handleExperienceChange = (_event, experience: string) => {
     setExperience(experience);
   };
 

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);
               }}
@@ -53,7 +53,7 @@ export const FormState = () => {
           <TextArea
             id="textarea-id"
             aria-label="Form state TextArea"
-            onChange={(value) => setValue('textarea-id', value)}
+            onChange={(_event, value) => setValue('textarea-id', value)}
             value={getValue('textarea-id')}
           />
 

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/Tabs/Tabs.tsx

@@ -104,7 +104,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** Aria-label for the expandable toggle */
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
-  onToggle?: (isExpanded: boolean) => void;
+  onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
   /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -184,7 +184,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     ouiaSafe: true,
     variant: 'default',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onToggle: (isExpanded): void => undefined
+    onToggle: (_event: React.MouseEvent, _isExpanded: boolean): void => undefined
   };
 
   handleTabClick(
@@ -421,11 +421,11 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;
     /*  Uncontrolled expandable tabs */
-    const toggleTabs = (newValue: boolean) => {
+    const toggleTabs = (event: React.MouseEvent, newValue: boolean) => {
       if (isExpanded === undefined) {
         this.setState({ uncontrolledIsExpandedLocal: newValue });
       } else {
-        onToggle(newValue);
+        onToggle(event, newValue);
       }
     };
 
@@ -472,7 +472,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
                 <div className={css(styles.tabsToggle)}>
                   <div className={css(styles.tabsToggleButton)}>
                     <Button
-                      onClick={() => toggleTabs(!isExpandedLocal)}
+                      onClick={(event) => toggleTabs(event, !isExpandedLocal)}
                       variant="plain"
                       aria-label={toggleAriaLabel}
                       aria-expanded={isExpandedLocal}

package/src/components/Tabs/examples/TabsVerticalExpandable.tsx

@@ -12,7 +12,7 @@ export const TabsVerticalExpandable: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

package/src/components/TextArea/TextArea.tsx

@@ -39,7 +39,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** Value of the text area. */
   value?: string | number;
   /** A callback for when the text area value changes. */
-  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
@@ -99,7 +99,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       this.setAutoHeight(field);
     }
     if (this.props.onChange) {
-      this.props.onChange(field.value, event);
+      this.props.onChange(event, field.value);
     }
   };
 

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -17,7 +17,7 @@ test('Textarea input passes value and event to onChange handler', async () => {
 
   await user.type(screen.getByRole('textbox'), 'a');
 
-  expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+  expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), 'a');
 });
 
 test('Renders simple text input', () => {

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -6,7 +6,7 @@ export const TextAreaAutoResizing: React.FunctionComponent = () => {
   return (
     <TextArea
       value={value}
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       aria-label="auto resizing text area example"
       autoResize
     />

package/src/components/TextArea/examples/TextAreaBasic.tsx

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

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -6,7 +6,7 @@ export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
   return (
     <TextArea
       value={value}
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       resizeOrientation="horizontal"
       aria-label="text area horizontal resize example"
     />

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -12,7 +12,7 @@ export const TextAreaIconSprite: React.FunctionComponent = () => {
         validated={'success'}
         isIconSprite
         type="text"
-        onChange={value => setSuccess(value)}
+        onChange={(_event, value) => setSuccess(value)}
         value={success}
         aria-label="success icon sprite text area example"
       />
@@ -22,7 +22,7 @@ export const TextAreaIconSprite: React.FunctionComponent = () => {
         validated={'warning'}
         isIconSprite
         type="text"
-        onChange={value => setWarning(value)}
+        onChange={(_event, value) => setWarning(value)}
         value={warning}
         aria-label="warning icon sprite text area example"
       />
@@ -32,7 +32,7 @@ export const TextAreaIconSprite: React.FunctionComponent = () => {
         validated={'error'}
         isIconSprite
         type="text"
-        onChange={value => setError(value)}
+        onChange={(_event, value) => setError(value)}
         value={error}
         aria-label="error icon sprite text area example"
       />

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -6,7 +6,7 @@ export const TextAreaInvalid: React.FunctionComponent = () => {
   return (
     <TextArea
       value={value}
-      onChange={value => setValue(value)}
+      onChange={(_event, value) => setValue(value)}
       isRequired
       validated={'error'}
       aria-label="invalid text area example"

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -33,7 +33,7 @@ export const TextAreaValidated: React.FunctionComponent = () => {
       <FormGroup label="Comments:" type="string" fieldId="selection">
         <TextArea
           value={value}
-          onChange={(value) => handleTextAreaChange(value)}
+          onChange={(_event, value) => handleTextAreaChange(value)}
           isRequired
           validated={validated}
           aria-label="invalid text area example"