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

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 import {
-  Dropdown as DropdownDeprecated,
-  DropdownToggle,
-  DropdownItem as DropdownItemDeprecated
-} from '@patternfly/react-core/deprecated';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+  Modal,
+  ModalVariant,
+  Button,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
+} from '@patternfly/react-core';
 
 export const ModalWithDropdown: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -16,8 +19,8 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     setIsDropdownOpen(false);
   };
 
-  const handleDropdownToggle = (_event: any, isDropdownOpen: boolean) => {
-    setIsDropdownOpen(isDropdownOpen);
+  const handleDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
   };
 
   const onSelect = () => {
@@ -39,19 +42,6 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     }
   };
 
-  const dropdownItems = [
-    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button">
-      Action
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled link" isDisabled>
-      Disabled Link
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
-      Disabled Action
-    </DropdownItemDeprecated>
-  ];
-
   return (
     <React.Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -80,21 +70,37 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
         </div>
         <br />
         <div>
-          <DropdownDeprecated
+          <Dropdown
+            isOpen={isDropdownOpen}
             onSelect={onSelect}
-            toggle={
-              <DropdownToggle
-                id="modal-dropdown-toggle"
-                onToggle={handleDropdownToggle}
-                toggleIndicator={CaretDownIcon}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
+                Dropdown
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>
+              <DropdownItem itemId={0} key="action">
+                Action
+              </DropdownItem>
+              <DropdownItem
+                itemId={1}
+                key="link"
+                to="#default-link2"
+                // Prevent the default onClick functionality for example purposes
+                onClick={(ev: any) => ev.preventDefault()}
               >
-                Dropdown with a menu that can break out
-              </DropdownToggle>
-            }
-            isOpen={isDropdownOpen}
-            dropdownItems={dropdownItems}
-            menuAppendTo="parent"
-          />
+                Link
+              </DropdownItem>
+              <DropdownItem itemId={2} isDisabled key="disabled action">
+                Disabled Action
+              </DropdownItem>
+              <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+                Disabled Link
+              </DropdownItem>
+            </DropdownList>
+          </Dropdown>
         </div>
       </Modal>
     </React.Fragment>

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/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -16,15 +16,8 @@ propComponents:
   ]
 ---
 
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownPosition,
-DropdownDirection,
-DropdownSeparator,
-KebabToggle
-} from '@patternfly/react-core/deprecated';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples