@patternfly/react-core 5.0.0-prerelease.3 → 5.0.0-prerelease.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.3",
+  "version": "5.0.0-prerelease.4",
   "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": "ce988fd96079daf7b381f38cf23f587957a38ec3"
+  "gitHead": "14db577993040ea7eeb32e24e728429661beeb90"
 }

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

@@ -49,7 +49,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
-  const [activeMenu, setActiveMenu] = React.useState('rootMenu');
+  const [activeMenu, setActiveMenu] = React.useState('nav-drilldown-rootMenu');
 
   const onDrillIn = (
     _event: React.KeyboardEvent | React.MouseEvent,
@@ -57,20 +57,23 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
     toItemId: string,
     itemId: string
   ) => {
-    setMenuDrilledIn(prevMenuDrilledIn => [...prevMenuDrilledIn, fromItemId]);
-    setDrilldownPath(prevDrilldownPath => [...prevDrilldownPath, itemId]);
+    setMenuDrilledIn((prevMenuDrilledIn) => [...prevMenuDrilledIn, fromItemId]);
+    setDrilldownPath((prevDrilldownPath) => [...prevDrilldownPath, itemId]);
     setActiveMenu(toItemId);
   };
 
   const onDrillOut = (_event: React.KeyboardEvent | React.MouseEvent, toItemId: string, _itemId: string) => {
-    setMenuDrilledIn(prevMenuDrilledIn => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
-    setDrilldownPath(prevDrilldownPath => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
+    setMenuDrilledIn((prevMenuDrilledIn) => prevMenuDrilledIn.slice(0, prevMenuDrilledIn.length - 1));
+    setDrilldownPath((prevDrilldownPath) => prevDrilldownPath.slice(0, prevDrilldownPath.length - 1));
     setActiveMenu(toItemId);
   };
 
   const onGetMenuHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId] && menuId !== 'rootMenu') {
-      setMenuHeights(prevMenuHeights => ({ ...prevMenuHeights, [menuId]: height }));
+    if (
+      (menuHeights[menuId] !== height && menuId !== 'nav-drilldown-rootMenu') ||
+      (!menuHeights[menuId] && menuId === 'nav-drilldown-rootMenu')
+    ) {
+      setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));
     }
   };
 
@@ -86,7 +89,7 @@ export const NavigationDrilldown: React.FunctionComponent = () => {
         onDrillOut={onDrillOut}
         onGetMenuHeight={onGetMenuHeight}
       >
-        <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
+        <MenuContent menuHeight={menuHeights[activeMenu] ? `${menuHeights[activeMenu]}px` : undefined}>
           <MenuList>
             <MenuItem itemId="nav-drilldown-item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
               Item 1

package/src/components/Popover/Popover.tsx

@@ -233,7 +233,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   alertSeverityVariant,
   alertSeverityScreenReaderText,
   footerContent = null,
-  appendTo = 'inline',
+  appendTo = () => document.body,
   hideOnOutsideClick = true,
   onHide = (): void => null,
   onHidden = (): void => null,

package/src/components/Popover/examples/Popover.md

@@ -14,10 +14,7 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 
 ## Examples
 
-By default, the `appendTo` prop of the popover will append it to the parent element. However, in some cases, the popover might be too big for the parent and not fully visible. To solve this issue, users have two options:
-
-1. Add the prop `appendTo={() => document.body}` to append the popover to the document body instead of the parent element.
-2. Increase the z-index of the parent element to be higher than the z-index of the element that is hiding the popover.
+By default, the `appendTo` prop of the popover will append to the document body in order to avoid the popover content not being fully visible. Another option is to increase the z-index of the element the popover is appended to to be higher than the z-index of the element that is hiding the popover.
 
 ### Basic
 

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -89,7 +89,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
   };
 
   const onGetMenuHeight = (menuId: string, height: number) => {
-    if (!menuHeights[menuId] && menuId !== 'rootMenu') {
+    if ((menuHeights[menuId] !== height && menuId !== 'rootMenu') || (!menuHeights[menuId] && menuId === 'rootMenu')) {
       setMenuHeights((prevMenuHeights) => ({ ...prevMenuHeights, [menuId]: height }));
     }
   };