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

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

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

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/ToggleGroup/ToggleGroupItem.tsx

@@ -19,7 +19,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
   /** Optional id for the button within the toggle group item */
   buttonId?: string;
   /** A callback for when the toggle group item selection changes. */
-  onChange?: (selected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => void;
+  onChange?: (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, selected: boolean) => void;
 }
 
 export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
@@ -34,7 +34,7 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
   ...props
 }: ToggleGroupItemProps) => {
   const handleChange = (event: any): void => {
-    onChange(!isSelected, event);
+    onChange(event, !isSelected);
   };
 
   if (!ariaLabel && icon && !text) {

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

@@ -48,7 +48,7 @@ describe('ToggleGroup', () => {
     );
 
     await user.click(screen.getByRole('button'));
-    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), true);
   });
 
   test('isCompact', () => {

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -6,7 +6,7 @@ export const ToggleGroupCompact: React.FunctionComponent = () => {
     'toggle-group-compact-1': false,
     'toggle-group-compact-2': false
   });
-  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
   };

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -7,7 +7,7 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
     'toggle-group-multiple-2': false
   });
   const [disableAll, setDisableAll] = React.useState(false);
-  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
   };

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -3,7 +3,7 @@ import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
   const [isSelected, setIsSelected] = React.useState('');
-  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(id);
   };

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -10,7 +10,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     'toggle-group-icons-2': false,
     'toggle-group-icons-3': true
   });
-  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
   };

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -10,7 +10,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     'text-icons-2': false,
     'text-icons-3': true
   });
-  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
   };

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>

package/src/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -12,7 +12,7 @@ interface SampleFormProps {
 const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
   const validated = isValid ? 'default' : 'error';
 
-  const handleTextInputChange = (value: string) => {
+  const handleTextInputChange = (_event, value: string) => {
     const isValid = /^\d+$/.test(value);
 
     setValue(value);

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -115,7 +115,7 @@ interface SampleFormProps {
 const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {
   const validated = isValid ? 'default' : 'error';
 
-  const handleTextInputChange = (value: string) => {
+  const handleTextInputChange = (_event, value: string) => {
     const isValid = /^\d+$/.test(value);
 
     setValue(value);

package/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx

@@ -25,7 +25,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
 
-  const handleToggleSwitch = (selected: boolean, e: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+  const handleToggleSwitch = (e, _selected: boolean) => {
     setToggleSelected(e.currentTarget.id);
   };
 

package/src/demos/PasswordGenerator.md

@@ -54,7 +54,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
     };
   }, [isAutocompleteOpen, searchInputRef.current]);
 
-  const onChange = (newValue: string) => {
+  const onChange = (_event: React.FormEvent<HTMLInputElement>, newValue: string) => {
     if (searchInputRef && searchInputRef.current && searchInputRef.current.contains(document.activeElement)) {
       setIsAutocompleteOpen(true);
     } else {

package/src/demos/examples/DashboardWrapper.js

@@ -114,7 +114,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         notificationDrawer={notificationDrawer}
         isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        onPageResize={(event) => onPageResize(event)}
+        {...(typeof onPageResize === 'function' && { onPageResize: (event) => onPageResize(event) })}
         {...pageProps}
       >
         {hasPageTemplateTitle && PageTemplateTitle}

package/src/demos/examples/HelperText/HelperTextDynamicVariantStaticText.tsx

@@ -36,7 +36,7 @@ export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () =
     setInputValidation({ ruleLength: lengthStatus, ruleCharacterTypes: typeStatus });
   }, [value, ruleLength, ruleCharacterTypes]);
 
-  const handleInputChange = (inputValue: string) => {
+  const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
   };
 

package/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx

@@ -5,7 +5,7 @@ export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () =>
   const [value, setValue] = React.useState('');
   const [inputValidation, setInputValidation] = React.useState('default');
 
-  const handleInputChange = (inputValue: string) => {
+  const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
   };
 

package/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx

@@ -4,7 +4,7 @@ import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem
 export const HelperTextStaticVariantStaticText: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
 
-  const handleInputChange = (inputValue: string) => {
+  const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);
   };
 

package/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx

@@ -16,7 +16,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
   const [value, setValue] = React.useState(props.formValue);
   const [isValid, setIsValid] = React.useState(props.isFormValid);
 
-  const handleTextInputChange = (value: string) => {
+  const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
     setValue(value);
     setIsValid(valid);

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -86,7 +86,7 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
   const [value, setValue] = React.useState(props.formValue);
   const [isValid, setIsValid] = React.useState(props.isFormValid);
 
-  const handleTextInputChange = (value: string) => {
+  const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
     setValue(value);
     setIsValid(valid);