@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/components/Nav/NavExpandable.tsx

@@ -1,16 +1,15 @@
 import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { getUniqueId } from '../../helpers/util';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface NavExpandableProps
-  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>,
-    OUIAProps {
+  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
   /** Title content shown for the expandable list */
   title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */
@@ -37,7 +36,6 @@ export interface NavExpandableProps
 
 interface NavExpandableState {
   expandedState: boolean;
-  ouiaStateId: string;
 }
 
 class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
@@ -52,11 +50,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
     id: ''
   };
 
-  id = this.props.id || getUniqueId();
-
   state = {
-    expandedState: this.props.isExpanded,
-    ouiaStateId: getDefaultOUIAId(NavExpandable.displayName)
+    expandedState: this.props.isExpanded
   };
 
   componentDidMount() {
@@ -97,7 +92,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       ouiaId,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       groupId,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       id,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
@@ -107,58 +102,70 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       ...props
     } = this.props;
 
-    const { expandedState, ouiaStateId } = this.state;
+    const { expandedState } = this.state;
 
     return (
-      <NavContext.Consumer>
-        {(context) => (
-          <li
-            className={css(
-              styles.navItem,
-              expandedState && styles.modifiers.expanded,
-              isActive && styles.modifiers.current,
-              className
-            )}
-            {...getOUIAProps(NavExpandable.displayName, ouiaId !== undefined ? ouiaId : ouiaStateId)}
-            {...props}
-          >
-            <PageSidebarContext.Consumer>
-              {({ isSidebarOpen }) => (
-                <button
-                  className={css(styles.navLink)}
-                  id={srText ? null : this.id}
-                  onClick={(event) => this.onExpand(event, context.onToggle)}
-                  aria-expanded={expandedState}
-                  tabIndex={isSidebarOpen ? null : -1}
-                  {...buttonProps}
+      <SSRSafeIds prefix="pf-nav-expandable-" ouiaComponentType="NavExpandable">
+        {(generatedId, generatedOuiaId) => {
+          const navId = id || generatedId;
+
+          return (
+            <NavContext.Consumer>
+              {(context) => (
+                <li
+                  className={css(
+                    styles.navItem,
+                    expandedState && styles.modifiers.expanded,
+                    isActive && styles.modifiers.current,
+                    className
+                  )}
+                  {...getOUIAProps(NavExpandable.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
+                  {...props}
                 >
-                  {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
-                  <span className={css(styles.navToggle)}>
-                    <span className={css(styles.navToggleIcon)}>
-                      <AngleRightIcon />
-                    </span>
-                  </span>
-                </button>
-              )}
-            </PageSidebarContext.Consumer>
-            <section
-              className={css(styles.navSubnav)}
-              aria-labelledby={this.id}
-              hidden={expandedState ? null : true}
-              {...(!expandedState && { inert: '' })}
-            >
-              {srText && (
-                <h2 className="pf-v6-screen-reader" id={this.id}>
-                  {srText}
-                </h2>
+                  <PageSidebarContext.Consumer>
+                    {({ isSidebarOpen }) => (
+                      <button
+                        className={css(styles.navLink)}
+                        id={srText ? null : navId}
+                        onClick={(event) => this.onExpand(event, context.onToggle)}
+                        aria-expanded={expandedState}
+                        tabIndex={isSidebarOpen ? null : -1}
+                        {...buttonProps}
+                      >
+                        {typeof title !== 'string' ? (
+                          <span className={css(`${styles.nav}__link-text`)}>{title}</span>
+                        ) : (
+                          title
+                        )}
+                        <span className={css(styles.navToggle)}>
+                          <span className={css(styles.navToggleIcon)}>
+                            <RhMicronsCaretDownIcon />
+                          </span>
+                        </span>
+                      </button>
+                    )}
+                  </PageSidebarContext.Consumer>
+                  <section
+                    className={css(styles.navSubnav)}
+                    aria-labelledby={navId}
+                    hidden={expandedState ? null : true}
+                    {...(!expandedState && { inert: '' })}
+                  >
+                    {srText && (
+                      <h2 className="pf-v6-screen-reader" id={navId}>
+                        {srText}
+                      </h2>
+                    )}
+                    <ul className={css(styles.navList)} role="list">
+                      {children}
+                    </ul>
+                  </section>
+                </li>
               )}
-              <ul className={css(styles.navList)} role="list">
-                {children}
-              </ul>
-            </section>
-          </li>
-        )}
-      </NavContext.Consumer>
+            </NavContext.Consumer>
+          );
+        }}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Nav/NavGroup.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export interface NavGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Title shown for the group */
@@ -17,9 +17,11 @@ export const NavGroup: React.FunctionComponent<NavGroupProps> = ({
   title,
   children = null,
   className = '',
-  id = getUniqueId(),
+  id: idProp,
   ...props
 }: NavGroupProps) => {
+  const generatedId = useSSRSafeId();
+  const id = idProp ?? generatedId;
   if (!title && !props['aria-label']) {
     // eslint-disable-next-line no-console
     console.warn("For accessibility reasons an aria-label should be specified on nav groups if a title isn't");

package/src/components/Nav/NavItem.tsx

@@ -1,4 +1,14 @@
-import { cloneElement, Fragment, isValidElement, useContext, useEffect, useRef, useState } from 'react';
+import {
+  cloneElement,
+  Fragment,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef,
+  MutableRefObject
+} from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import dividerStyles from '@patternfly/react-styles/css/components/Divider/divider';
@@ -7,7 +17,7 @@ import { NavContext, NavSelectClickHandler } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 
 export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, 'onClick'>, OUIAProps {
   /** Content rendered inside the nav item. */
@@ -42,9 +52,13 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** React ref for the anchor element within the nav item. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLLIElement>;
 }
 
-export const NavItem: React.FunctionComponent<NavItemProps> = ({
+const NavItemBase: React.FunctionComponent<NavItemProps> = ({
   children,
   styleChildren = true,
   className,
@@ -61,13 +75,16 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   ouiaSafe,
   zIndex = 9999,
   icon,
+  innerRef,
+  anchorRef,
   ...props
 }: NavItemProps) => {
   const { flyoutRef, setFlyoutRef, navRef } = useContext(NavContext);
   const { isSidebarOpen } = useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = useState(null);
   const [isHovered, setIsHovered] = useState(false);
-  const ref = useRef<HTMLLIElement>(undefined);
+  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;
@@ -164,7 +181,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const flyoutButton = (
     <span className={css(styles.navToggle)}>
       <span className={css(styles.navToggleIcon)}>
-        <AngleRightIcon />
+        <RhMicronsCaretRightIcon />
       </span>
     </span>
   );
@@ -180,6 +197,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     const preventLinkDefault = preventDefault || !to;
     return (
       <Component
+        ref={anchorRef}
         href={to}
         onClick={(e: any) => context.onSelect(e, groupId, itemId, to, preventLinkDefault, onClick)}
         className={css(
@@ -208,6 +226,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
       }),
       tabIndex: child.props.tabIndex || tabIndex,
+      ref: anchorRef,
       children: hasFlyout ? (
         <Fragment>
           {child.props.children}
@@ -267,4 +286,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
 
   return navItem;
 };
+
+export const NavItem = forwardRef<HTMLLIElement, NavItemProps>((props, ref) => (
+  <NavItemBase {...props} innerRef={ref} />
+));
+
 NavItem.displayName = 'NavItem';

package/src/components/Nav/NavList.tsx

@@ -2,15 +2,17 @@ import { Component, createRef, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Nav/nav';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { getLanguageDirection, isElementInView } from '../../helpers/util';
 import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
-export interface NavListProps
-  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+export interface NavListProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLUListElement>,
+  HTMLUListElement
+> {
   /** Children nodes */
   children?: React.ReactNode;
   /** Additional classes added to the list */
@@ -137,7 +139,7 @@ class NavList extends Component<NavListProps> {
                       onClick={this.scrollBack}
                       isDisabled={scrollViewAtStart}
                       tabIndex={isSidebarOpen ? null : -1}
-                      icon={<AngleLeftIcon />}
+                      icon={<RhMicronsCaretLeftIcon />}
                     />
                   </div>
                 )}
@@ -158,7 +160,7 @@ class NavList extends Component<NavListProps> {
                       onClick={this.scrollForward}
                       isDisabled={scrollViewAtEnd}
                       tabIndex={isSidebarOpen ? null : -1}
-                      icon={<AngleRightIcon />}
+                      icon={<RhMicronsCaretRightIcon />}
                     />
                   </div>
                 )}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavExpandable-1"
+    data-ouia-component-id="OUIA-Generated-NavExpandable-:r1:"
     data-ouia-component-type="PF6/NavExpandable"
     data-ouia-safe="true"
   >
@@ -25,11 +25,11 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 256 512"
+            viewBox="0 0 20 20"
             width="1em"
           >
             <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
             />
           </svg>
         </span>

package/src/components/Nav/__tests__/Generated/__snapshots__/NavItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`NavItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-nav__item ''"
-    data-ouia-component-id="OUIA-Generated-NavItem-1"
+    data-ouia-component-id="OUIA-Generated-NavItem-:r0:"
     data-ouia-component-type="PF6/NavItem"
     data-ouia-safe="true"
   >

package/src/components/Nav/__tests__/Nav.test.tsx

@@ -259,4 +259,19 @@ describe('Nav', () => {
     );
     expect(screen.getAllByText('this is an icon')[0].parentElement).toHaveClass(styles.navLinkIcon);
   });
+
+  test(`Renders with ${styles.modifiers.docked} class when variant is docked`, () => {
+    renderNav(
+      <Nav variant="docked" data-testid="docked-nav">
+        <NavList>
+          {props.items.map((item) => (
+            <NavItem to={item.to} key={item.to}>
+              {item.label}
+            </NavItem>
+          ))}
+        </NavList>
+      </Nav>
+    );
+    expect(screen.getByTestId('docked-nav')).toHaveClass(styles.modifiers.docked);
+  });
 });