revert some updates for build

Author: kmcfaul

packages/react-core/src/components/Nav/NavItem.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
   forwardRef,
-  useCallback
+  MutableRefObject
 } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
@@ -76,25 +76,13 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   innerRef,
   ...props
 }: NavItemProps) => {
-  const { flyoutRef: contextFlyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
+  const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
   const { isSidebarOpen } = useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = useState(null);
   const [isHovered, setIsHovered] = useState(false);
-  const flyoutRef = useRef<HTMLLIElement | null>(null);
-  const ref = useCallback(
-    (node: HTMLLIElement | null) => {
-      flyoutRef.current = node;
-      if (typeof innerRef === 'function') {
-        innerRef(node);
-      } else if (innerRef) {
-        (innerRef as React.MutableRefObject<HTMLLIElement | null>).current = node;
-      }
-    },
-    [innerRef]
-  );
-  const contextFlyoutRefCurrent =
-    typeof contextFlyoutRef === 'object' && contextFlyoutRef ? contextFlyoutRef.current : null;
-  const flyoutVisible = flyoutRef?.current === contextFlyoutRefCurrent;
+  const _ref = useRef<HTMLLIElement>(undefined);
+  const ref = (innerRef as MutableRefObject<HTMLLIElement>) || _ref;
+  const flyoutVisible = ref === flyoutRef;
   const popperRef = useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
   const Component = hasFlyout ? 'button' : (component as any);
@@ -105,48 +93,42 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
     console.error('NavItem cannot have both "to" and "flyout" props.');
   }
 
-  const showFlyout = useCallback(
-    (show: boolean, override?: boolean) => {
-      if ((!flyoutVisible || override) && show) {
-        setFlyoutRef(flyoutRef);
-      } else if ((flyoutVisible || override) && !show) {
-        setFlyoutRef(null);
-      }
+  const showFlyout = (show: boolean, override?: boolean) => {
+    if ((!flyoutVisible || override) && show) {
+      setFlyoutRef(ref);
+    } else if ((flyoutVisible || override) && !show) {
+      setFlyoutRef(null);
+    }
 
-      onShowFlyout && show && onShowFlyout();
-    },
-    [flyoutVisible, setFlyoutRef, flyoutRef, onShowFlyout]
-  );
+    onShowFlyout && show && onShowFlyout();
+  };
 
   const onMouseOver = (event: React.MouseEvent) => {
     const evtContainedInFlyout = (event.target as HTMLElement).closest(`.${styles.navItem}.pf-m-flyout`);
     if (hasFlyout && !flyoutVisible) {
       showFlyout(true);
-    } else if (contextFlyoutRef !== null && !evtContainedInFlyout) {
+    } else if (flyoutRef !== null && !evtContainedInFlyout) {
       setFlyoutRef(null);
     }
   };
 
-  const onFlyoutClick = useCallback(
-    (event: MouseEvent) => {
-      const target = event.target;
-      const closestItem = (target as HTMLElement).closest('.pf-m-flyout');
-      if (!closestItem) {
-        if (hasFlyout) {
-          showFlyout(false, true);
-        } else if (contextFlyoutRef !== null) {
-          setFlyoutRef(null);
-        }
+  const onFlyoutClick = (event: MouseEvent) => {
+    const target = event.target;
+    const closestItem = (target as HTMLElement).closest('.pf-m-flyout');
+    if (!closestItem) {
+      if (hasFlyout) {
+        showFlyout(false, true);
+      } else if (flyoutRef !== null) {
+        setFlyoutRef(null);
       }
-    },
-    [hasFlyout, showFlyout, contextFlyoutRef, setFlyoutRef]
-  );
+    }
+  };
 
   const handleFlyout = (event: KeyboardEvent) => {
     const key = event.key;
     const target = event.target as HTMLElement;
 
-    if ((key === ' ' || key === 'Enter' || key === 'ArrowRight') && hasFlyout && flyoutRef?.current?.contains(target)) {
+    if ((key === ' ' || key === 'Enter' || key === 'ArrowRight') && hasFlyout && ref?.current?.contains(target)) {
       event.stopPropagation();
       event.preventDefault();
       if (!flyoutVisible) {
@@ -178,7 +160,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
         window.removeEventListener('click', onFlyoutClick);
       }
     };
-  }, [hasFlyout, onFlyoutClick]);
+  }, []);
 
   useEffect(() => {
     if (flyoutTarget) {
@@ -262,7 +244,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
 
   const flyoutPopper = (
     <Popper
-      triggerRef={flyoutRef}
+      triggerRef={ref}
       popper={
         <div ref={popperRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
           {flyout}
@@ -300,7 +282,7 @@ const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   return navItem;
 };
 
-export const NavItem = forwardRef<HTMLLIElement, NavItemProps>((props, ref) => (
+export const NavItem = forwardRef((props: NavItemProps, ref: React.Ref<any>) => (
   <NavItemBase {...props} innerRef={ref} />
 ));
 

packages/react-core/src/demos/Page.md

@@ -18,8 +18,8 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import imgAvatar from '../../../components/assets/avatarImg.svg';
-import pfIconLogo from '../../assets/PF-IconLogo-color.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 

packages/react-core/src/demos/examples/Page/PageDockedNav.tsx

@@ -39,8 +39,9 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import imgAvatar from '../../../components/assets/avatarImg.svg';
-import pfIconLogo from '../../assets/PF-IconLogo-color.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+
 interface NavOnSelectProps {
   groupId: number | string;
   itemId: number | string;
@@ -143,7 +144,6 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     isActive={activeItem === 0}
                     icon={<CubeIcon />}
                     ref={navItem1Ref}
-                    aria-label="Link 1"
                   />
                   <NavItem
                     preventDefault
@@ -153,27 +153,24 @@ export const PageDockedNav: React.FunctionComponent = () => {
                     isActive={activeItem === 1}
                     icon={<FolderIcon />}
                     ref={navItem2Ref}
-                    aria-label="Link 2"
                   />
                   <NavItem
                     preventDefault
-                    id="nav-icon-link3"
-                    to="#nav-icon-link3"
-                    itemId={2}
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
                     isActive={activeItem === 2}
                     icon={<CloudIcon />}
                     ref={navItem3Ref}
-                    aria-label="Link 3"
                   />
                   <NavItem
                     preventDefault
-                    id="nav-icon-link4"
-                    to="#nav-icon-link4"
-                    itemId={3}
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
                     isActive={activeItem === 3}
                     icon={<CodeIcon />}
                     ref={navItem4Ref}
-                    aria-label="Link 4"
                   />
                 </NavList>
               </Nav>