@patternfly/react-core 5.0.0-alpha.88 → 5.0.0-alpha.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.88",
+  "version": "5.0.0-alpha.89",
   "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": "fa04a788c5bb89c0a92a4a6a1733710ba48a404a"
+  "gitHead": "c59e3d3977ad2737446477d391eab7c0daf25406"
 }

package/src/components/Nav/Nav.tsx

@@ -4,12 +4,11 @@ import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export type NavSelectClickHandler = (
-  e: React.FormEvent<HTMLInputElement>,
+  event: React.FormEvent<HTMLInputElement>,
   itemId: number | string,
   groupId: number | string,
   to: string
 ) => void;
-
 export interface NavProps
   extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
     OUIAProps {
@@ -18,18 +17,22 @@ export interface NavProps
   /** Additional classes added to the container */
   className?: string;
   /** Callback for updating when item selection changes */
-  onSelect?: (selectedItem: {
-    groupId: number | string;
-    itemId: number | string;
-    to: string;
-    event: React.FormEvent<HTMLInputElement>;
-  }) => void;
+  onSelect?: (
+    event: React.FormEvent<HTMLInputElement>,
+    selectedItem: {
+      groupId: number | string;
+      itemId: number | string;
+      to: string;
+    }
+  ) => void;
   /** Callback for when a list is expanded or collapsed */
-  onToggle?: (toggledItem: {
-    groupId: number | string;
-    isExpanded: boolean;
-    event: React.MouseEvent<HTMLButtonElement>;
-  }) => void;
+  onToggle?: (
+    event: React.MouseEvent<HTMLButtonElement>,
+    toggledItem: {
+      groupId: number | string;
+      isExpanded: boolean;
+    }
+  ) => void;
   /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
   /** Indicates which theme color to use */
@@ -49,12 +52,7 @@ export interface NavContextProps {
     itemId: number | string,
     to: string,
     preventDefault: boolean,
-    onClick: (
-      e: React.FormEvent<HTMLInputElement>,
-      itemId: number | string,
-      groupId: number | string,
-      to: string
-    ) => void
+    onClick: NavSelectClickHandler
   ) => void;
   onToggle?: (event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, expanded: boolean) => void;
   updateIsScrollable?: (isScrollable: boolean) => void;
@@ -99,7 +97,7 @@ export class Nav extends React.Component<
       event.preventDefault();
     }
 
-    this.props.onSelect({ groupId, itemId, event, to });
+    this.props.onSelect(event, { groupId, itemId, to });
 
     if (onClick) {
       onClick(event, itemId, groupId, to);
@@ -108,8 +106,7 @@ export class Nav extends React.Component<
 
   // Callback from NavExpandable
   onToggle(event: React.MouseEvent<HTMLButtonElement>, groupId: number | string, toggleValue: boolean) {
-    this.props.onToggle({
-      event,
+    this.props.onToggle(event, {
       groupId,
       isExpanded: toggleValue
     });
@@ -153,7 +150,7 @@ export class Nav extends React.Component<
           updateIsScrollable: (isScrollable: boolean) => this.setState({ isScrollable }),
           isHorizontal: ['horizontal', 'tertiary', 'horizontal-subnav'].includes(variant),
           flyoutRef: this.state.flyoutRef,
-          setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
+          setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
           navRef: this.navRef
         }}
       >

package/src/components/Nav/NavItem.tsx

@@ -49,7 +49,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   groupId = null as string,
   itemId = null as string,
   preventDefault = false,
-  onClick = null as NavSelectClickHandler,
+  onClick,
   component = 'a',
   flyout,
   onShowFlyout,

package/src/components/Nav/examples/Nav.md

@@ -13,6 +13,7 @@ import './nav.css';
 ### Default
 
 ```ts file="./NavDefault.tsx"
+
 ```
 
 ### Grouped
@@ -20,31 +21,37 @@ import './nav.css';
 The following example shows two navigation groups, each with a `title` prop passed into the nav group component. To keep nav groups accessible an `aria-label` must be passed in if the `title` prop is not passed in.
 
 ```ts file="./NavGrouped.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./NavExpandable.tsx"
+
 ```
 
 ### Expandable third level
 
 ```ts file="./NavExpandableThirdLevel.tsx"
+
 ```
 
 ### Mixed
 
 ```ts file="./NavMixed.tsx"
+
 ```
 
 ### Horizontal subnav
 
 ```ts file="./NavHorizontalSubNav.tsx"
+
 ```
 
 ### Legacy tertiary
 
 ```ts file="./NavLegacyTertiary.tsx"
+
 ```
 
 ### Flyout
@@ -52,9 +59,26 @@ The following example shows two navigation groups, each with a `title` prop pass
 A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.
 
 ```ts file="./NavFlyout.tsx" isBeta
+
 ```
 
 ### Drilldown
 
 ```ts isBeta file="./NavDrilldown.tsx"
+
+```
+
+## Types
+
+### NavSelectClickHandler
+
+The NavItem `onClick` prop accepts the `NavSelectClickHandler` type, which is made up of the following argument and return types:
+
+```noLive
+(
+  event: React.FormEvent<HTMLInputElement>,
+  itemId: number | string,
+  groupId: number | string,
+  to: string
+) => void;
 ```

package/src/components/Nav/examples/NavDefault.tsx

@@ -4,7 +4,7 @@ import { Nav, NavItem, NavList } from '@patternfly/react-core';
 export const NavDefault: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
-  const onSelect = (result: { itemId: number | string }) => {
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
   };
 

package/src/components/Nav/examples/NavExpandable.tsx

@@ -5,12 +5,18 @@ export const NavExpandableExample: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
   const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1');
 
-  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string }
+  ) => {
     setActiveGroup(result.groupId as string);
     setActiveItem(result.itemId as string);
   };
 
-  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
     // eslint-disable-next-line no-console
     console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
   };

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -5,12 +5,18 @@ export const NavExpandableThirdLevel: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
   const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
 
-  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string }
+  ) => {
     setActiveGroup(result.groupId as string);
     setActiveItem(result.itemId as string);
   };
 
-  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
     // eslint-disable-next-line no-console
     console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
   };

package/src/components/Nav/examples/NavFlyout.tsx

@@ -4,7 +4,7 @@ import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@p
 export const NavFlyout: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1');
 
-  const onSelect = (result: { itemId: number | string }) => {
+  const onSelect = (event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);
   };
 

package/src/components/Nav/examples/NavGrouped.tsx

@@ -4,7 +4,7 @@ import { Nav, NavItem, NavGroup } from '@patternfly/react-core';
 export const NavGrouped: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState('group-1_item-1');
 
-  const onSelect = (result: { itemId: number | string }) => {
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as string);
   };
 

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -4,14 +4,14 @@ import { Nav, NavItem, NavList } from '@patternfly/react-core';
 export const NavHorizontalSubNav: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
-  const onSelect = (result: { itemId: number | string }) => {
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
   };
 
   return (
     <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+        {Array.apply(0, Array(10)).map(function (_item, index: number) {
           const num = index + 1;
           return (
             <NavItem

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -4,14 +4,14 @@ import { Nav, NavItem, NavList } from '@patternfly/react-core';
 export const NavLegacyTertiary: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
 
-  const onSelect = (result: { itemId: number | string }) => {
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
     setActiveItem(result.itemId as number);
   };
 
   return (
     <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+        {Array.apply(0, Array(10)).map(function (_item, index: number) {
           const num = index + 1;
           return (
             <NavItem

package/src/components/Nav/examples/NavMixed.tsx

@@ -5,7 +5,10 @@ export const NavMixed: React.FunctionComponent = () => {
   const [activeGroup, setActiveGroup] = React.useState('');
   const [activeItem, setActiveItem] = React.useState('ungrouped_item-1');
 
-  const onSelect = (result: { itemId: number | string; groupId: number | string | null }) => {
+  const onSelect = (
+    _event: React.FormEvent<HTMLInputElement>,
+    result: { itemId: number | string; groupId: number | string | null }
+  ) => {
     setActiveGroup(result.groupId as string);
     setActiveItem(result.itemId as string);
   };

package/src/demos/Nav.md

@@ -53,7 +53,7 @@ class PageLayoutDefaultNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -156,7 +156,7 @@ class PageLayoutGroupsNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -272,7 +272,7 @@ class PageLayoutExpandableNav extends React.Component {
       activeItem: 'grp-1_itm-1'
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId,
         activeGroup: result.groupId
@@ -446,7 +446,7 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -640,13 +640,13 @@ class VerticalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = (result) => {
+    this.onSubNavSelect = (_event, result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -832,13 +832,13 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
     };
 
-    this.onSubNavSelect = (result) => {
+    this.onSubNavSelect = (_event, result) => {
       this.setState({
         activeSubNavItem: result.itemId
       });
@@ -1068,7 +1068,7 @@ class PageLayoutTertiaryNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1171,7 +1171,7 @@ class PageLayoutLightNav extends React.Component {
       activeItem: 0
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1325,7 +1325,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -1545,7 +1545,7 @@ class VerticalPage extends React.Component {
       isNavOpen: true,
       activeItem: 0
     };
-    this.onNavSelect = (e, result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -124,7 +124,7 @@ class BasicNotificationDrawer extends React.Component {
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });
@@ -739,7 +739,7 @@ class GroupedNotificationDrawer extends React.Component {
       });
     };
 
-    this.onNavSelect = (result) => {
+    this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
       });