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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.92",
+  "version": "5.0.0-alpha.93",
   "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": "b0075afbde3a8f5bb474179578d432291dc3109e"
 }

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

@@ -29,7 +29,7 @@ export const FormHorizontal: React.FunctionComponent = () => {
     setEmail(email);
   };
 
-  const handleExperienceChange = (experience: string) => {
+  const handleExperienceChange = (_event, experience: string) => {
     setExperience(experience);
   };
 

package/src/components/Form/examples/FormState.tsx

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

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