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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.3",
+  "version": "5.0.0-prerelease.5",
   "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": "bcd6b047c179f99420d3ce2c67508c0aa119cc61"
 }

package/src/components/Drawer/examples/Drawer.md

@@ -106,7 +106,7 @@ section: components
 ```ts file="DrawerResizableOnInline.tsx"
 ```
 
-### Panel with light-200 background
+### Panel with secondary background
 
-```ts file="DrawerLightGray.tsx"
+```ts file="DrawerSecondaryBackground.tsx"
 ```

package/src/components/Drawer/examples/{DrawerLightGray.tsx → DrawerSecondaryBackground.tsx}

@@ -13,13 +13,13 @@ import {
   DrawerColorVariant
 } from '@patternfly/react-core';
 
-export const DrawerLightGray: React.FunctionComponent = () => {
+export const DrawerSecondaryBackground: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const [panelGray, setPanelGray] = React.useState(true);
-  const [contentGray, setContentGray] = React.useState(false);
-  const [sectionGray, setSectionGray] = React.useState(false);
+  const [panelSecondary, setPanelSecondary] = React.useState(true);
+  const [contentSecondary, setContentSecondary] = React.useState(false);
+  const [sectionSecondary, setSectionSecondary] = React.useState(false);
 
-  const drawerRef = React.useRef<HTMLDivElement>();
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -33,20 +33,20 @@ export const DrawerLightGray: React.FunctionComponent = () => {
     setIsExpanded(false);
   };
 
-  const togglePanelGray = (checked: boolean) => {
-    setPanelGray(checked);
+  const togglePanelSecondary = (checked: boolean) => {
+    setPanelSecondary(checked);
   };
 
-  const toggleSectionGray = (checked: boolean) => {
-    setSectionGray(checked);
+  const toggleSectionSecondary = (checked: boolean) => {
+    setSectionSecondary(checked);
   };
 
-  const toggleContentGray = (checked: boolean) => {
-    setContentGray(checked);
+  const toggleContentSecondary = (checked: boolean) => {
+    setContentSecondary(checked);
   };
 
   const panelContent = (
-    <DrawerPanelContent colorVariant={panelGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+    <DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
       <DrawerHead>
         <span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}>
           drawer-panel
@@ -64,39 +64,39 @@ export const DrawerLightGray: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Checkbox
-        label="Gray panel"
-        isChecked={panelGray}
-        onChange={(_event, checked) => togglePanelGray(checked)}
-        aria-label="Gray panel checkbox"
-        id="toggle-gray-panel"
-        name="toggle-gray-panel"
+        label="Secondary panel"
+        isChecked={panelSecondary}
+        onChange={(_event, checked) => togglePanelSecondary(checked)}
+        aria-label="Secondary panel checkbox"
+        id="toggle-secondary-panel"
+        name="toggle-secondary-panel"
       />
       <Checkbox
-        label="Gray content"
-        isChecked={contentGray}
-        onChange={(_event, checked) => toggleContentGray(checked)}
-        aria-label="Gray content checkbox"
-        id="toggle-gray-content"
-        name="toggle-gray-content"
+        label="Secondary content"
+        isChecked={contentSecondary}
+        onChange={(_event, checked) => toggleContentSecondary(checked)}
+        aria-label="Secondary content checkbox"
+        id="toggle-secondary-content"
+        name="toggle-secondary-content"
       />
       <Checkbox
-        label="Gray section"
-        isChecked={sectionGray}
-        onChange={(_event, checked) => toggleSectionGray(checked)}
-        aria-label="Gray section checkbox"
-        id="toggle-gray-section"
-        name="toggle-gray-section"
+        label="Secondary section"
+        isChecked={sectionSecondary}
+        onChange={(_event, checked) => toggleSectionSecondary(checked)}
+        aria-label="Secondary section checkbox"
+        id="toggle-secondary-section"
+        name="toggle-secondary-section"
       />
       <br />
       <Button aria-expanded={isExpanded} onClick={onClick}>
         Toggle drawer
       </Button>
       <Drawer isExpanded={isExpanded} onExpand={onExpand}>
-        <DrawerSection colorVariant={sectionGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
+        <DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}>
           drawer-section
         </DrawerSection>
         <DrawerContent
-          colorVariant={contentGray ? DrawerColorVariant.light200 : DrawerColorVariant.default}
+          colorVariant={contentSecondary ? DrawerColorVariant.light200 : DrawerColorVariant.default}
           panelContent={panelContent}
         >
           <DrawerContentBody>{drawerContent}</DrawerContentBody>

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 }));
     }
   };