@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.11

package/src/demos/PrimaryDetail.md

@@ -116,7 +116,7 @@ class PrimaryDetailFullPage extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -137,7 +137,7 @@ class PrimaryDetailFullPage extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -576,7 +576,7 @@ class PrimaryDetailContentPadding extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -597,7 +597,7 @@ class PrimaryDetailContentPadding extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });
@@ -1033,7 +1033,7 @@ class PrimaryDetailCardView extends React.Component {
       activeItem: 0
     };
 
-    this.onToolbarDropdownToggle = isLowerToolbarDropdownOpen => {
+    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
       this.setState(prevState => ({
         isLowerToolbarDropdownOpen
       }));
@@ -1045,7 +1045,7 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownToggle = isLowerToolbarKebabDropdownOpen => {
+    this.onToolbarKebabDropdownToggle = (_event, isLowerToolbarKebabDropdownOpen) => {
       this.setState({
         isLowerToolbarKebabDropdownOpen
       });
@@ -1227,7 +1227,7 @@ class PrimaryDetailCardView extends React.Component {
       }));
     };
 
-    this.onSplitButtonToggle = isOpen => {
+    this.onSplitButtonToggle = (_event, isOpen) => {
       this.setState({
         splitButtonDropdownIsOpen: isOpen
       });
@@ -1475,7 +1475,7 @@ class PrimaryDetailCardView extends React.Component {
                   onSelect={e => this.onCardKebabDropdownSelect(key, e)}
                   toggle={
                     <KebabToggle
-                      onToggle={(isCardKebabDropdownOpen, event) =>
+                      onToggle={(event, isCardKebabDropdownOpen) =>
                         this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
                       }
                     />
@@ -1777,7 +1777,7 @@ class PrimaryDetailDataListInCard extends React.Component {
       isExpanded: false
     };
 
-    this.onDropdownToggle = isOpen => {
+    this.onDropdownToggle = (_event, isOpen) => {
       this.setState({
         isDropdownOpen: isOpen
       });
@@ -2060,7 +2060,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       this.setState({ inputValue: newValue });
     };
 
-    this.onStatusToggle = isExpanded => {
+    this.onStatusToggle = (_event, isExpanded) => {
       this.setState({
         statusIsExpanded: isExpanded
       });
@@ -2081,7 +2081,7 @@ class PrimaryDetailInlineModifier extends React.Component {
       });
     };
 
-    this.onRiskToggle = isExpanded => {
+    this.onRiskToggle = (_event, isExpanded) => {
       this.setState({
         riskIsExpanded: isExpanded
       });

package/src/demos/Toolbar.md

@@ -80,13 +80,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView: window.innerWidth >= 1450 ? false : true
     };
 
-    this.onContainerToggle = isExpanded => {
+    this.onContainerToggle = (_event, isExpanded) => {
       this.setState({
         containerExpanded: isExpanded
       });
     };
 
-    this.onContainerToggleMobile = isExpanded => {
+    this.onContainerToggleMobile = (_event, isExpanded) => {
       this.setState({
         containerExpandedMobile: isExpanded
       });
@@ -106,13 +106,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionToggle = isExpanded => {
+    this.onOptionToggle = (_event, isExpanded) => {
       this.setState({
         optionExpanded: isExpanded
       });
     };
 
-    this.onOptionToggleMobile = isExpanded => {
+    this.onOptionToggleMobile = (_event, isExpanded) => {
       this.setState({
         optionExpandedMobile: isExpanded
       });
@@ -130,13 +130,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onExternalToggle = isExpanded => {
+    this.onExternalToggle = (_event, isExpanded) => {
       this.setState({
         externalExpanded: isExpanded
       });
     };
 
-    this.onExternalToggleMobile = isExpanded => {
+    this.onExternalToggleMobile = (_event, isExpanded) => {
       this.setState({
         externalExpandedMobile: isExpanded
       });
@@ -154,13 +154,13 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onDownloadToggle = isExpanded => {
+    this.onDownloadToggle = (_event, isExpanded) => {
       this.setState({
         downloadExpanded: isExpanded
       });
     };
 
-    this.onDownloadToggleMobile = isExpanded => {
+    this.onDownloadToggleMobile = (_event, isExpanded) => {
       this.setState({
         downloadExpandedMobile: isExpanded
       });
@@ -415,7 +415,12 @@ class ConsoleLogViewerToolbar extends React.Component {
           <Tooltip position="top" content={<div>Options</div>}>
             <Dropdown
               toggle={
-                <DropdownToggle aria-label="Options" id="option-toggle-mobile" onToggle={this.onOptionToggleMobile} icon={<CogIcon />} />
+                <DropdownToggle
+                  aria-label="Options"
+                  id="option-toggle-mobile"
+                  onToggle={this.onOptionToggleMobile}
+                  icon={<CogIcon />}
+                />
               }
               isOpen={optionExpandedMobile}
               dropdownItems={optionDropdownItems}
@@ -525,8 +530,8 @@ class ConsoleLogViewerToolbar extends React.Component {
 
     const items = (
       <React.Fragment>
-        <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-        <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
       </React.Fragment>
     );
 

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -237,7 +237,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           onSelect={onDropdownSelect}
           toggle={
             <KebabToggle
-              onToggle={isActive => onDropdownToggle('dropdown-toggle-id-0', isActive)}
+              onToggle={(_event: any, isActive: boolean) => onDropdownToggle('dropdown-toggle-id-0', isActive)}
               id="dropdown-toggle-id-0"
             />
           }
@@ -262,7 +262,12 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                   <Dropdown
                     position={DropdownPosition.right}
                     onSelect={onDropdownSelect}
-                    toggle={<KebabToggle onToggle={isActive => onDropdownToggle(key, isActive)} id={key.toString()} />}
+                    toggle={
+                      <KebabToggle
+                        onToggle={(_event: any, isActive: boolean) => onDropdownToggle(key, isActive)}
+                        id={key.toString()}
+                      />
+                    }
                     isOpen={openDropdownKey === key}
                     isPlain
                     dropdownItems={notificationDrawerDropdownItems(key)}

package/src/demos/examples/DashboardHeader.js

@@ -42,7 +42,7 @@ export default class DashboardHeader extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -54,7 +54,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -66,7 +66,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onFullKebabToggle = isFullKebabDropdownOpen => {
+    this.onFullKebabToggle = (_event, isFullKebabDropdownOpen) => {
       this.setState({
         isFullKebabDropdownOpen
       });
@@ -78,7 +78,7 @@ export default class DashboardHeader extends React.Component {
       });
     };
 
-    this.onAppLauncherToggle = isAppLauncherOpen => {
+    this.onAppLauncherToggle = (_event, isAppLauncherOpen) => {
       this.setState({
         isAppLauncherOpen
       });
@@ -145,7 +145,7 @@ export default class DashboardHeader extends React.Component {
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"
-            alignment={{ default: 'alignRight' }}
+            align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             {notificationBadge ? (

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -27,7 +27,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
     setIsTimeOpen(false);
   };
 
-  const onToggleTime = (_value: boolean, _event: any) => {
+  const onToggleTime = (_event: any, _value: boolean) => {
     setIsTimeOpen(!isTimeOpen);
     setIsCalendarOpen(false);
   };

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -64,7 +64,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -64,7 +64,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -64,7 +64,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -72,7 +72,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -80,7 +80,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -88,7 +88,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -157,7 +157,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -66,7 +66,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -74,7 +74,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -82,7 +82,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -90,7 +90,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 
@@ -148,7 +148,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupUsingPageHeader.tsx

@@ -57,7 +57,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
   };
 
-  const onDropdownToggle = (isOpen: boolean) => {
+  const onDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
   };
 
@@ -65,7 +65,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const onKebabDropdownToggle = (isOpen: boolean) => {
+  const onKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsKebabDropdownOpen(isOpen);
   };
 
@@ -73,7 +73,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
-  const onFullKebabDropdownToggle = (isOpen: boolean) => {
+  const onFullKebabDropdownToggle = (_event: any, isOpen: boolean) => {
     setIsFullKebabDropdownOpen(isOpen);
   };
 
@@ -81,7 +81,7 @@ export const PageStickySectionGroupUsingPageHeader: React.FunctionComponent = ()
     setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
   };
 
-  const onAppLauncherToggle = (isOpen: boolean) => {
+  const onAppLauncherToggle = (_event: any, isOpen: boolean) => {
     setIsAppLauncherOpen(isOpen);
   };
 

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -140,7 +140,7 @@ export const TablesAndTabs = () => {
   const customActionsToggle = (props: CustomActionsToggleProps) => (
     <KebabToggle
       isDisabled={props.isDisabled}
-      onToggle={(value, event) => {
+      onToggle={(event: any, value: boolean) => {
         props.onToggle(value);
         event.stopPropagation();
       }}

package/src/helpers/__mocks__/util.ts

@@ -0,0 +1 @@
+export const getUniqueId = () => 'unique_id_mock';